# CSS Template erstellen - Theoretische Vorgänge



## Dustin84 (4. August 2006)

Ich arbeite gerade an meiner eigenen Website und wenn das Layout fertig ist, muss es auch gesliced & programmiert werden.
Das Problem ist, dass ich die Vorgehensweise zum Erstellen eines CSS Templates (Tabellenlos) nicht verstehe.

Ich weiss nur, dass man mit einer HTML File beginnt (was kommt da rein?) und dann per CSS File das Layout managed.

http://www.moh-loads.de/cmpro_tut/
HIer wird gezeigt, wie man ein Layout sliced aber das ist dann ein Template, dass auf Tabellen basiert, glaube ich ;-)

Wenn ich nur das Prinzip verstehen würde, wo was hinkommt.....
Ich möchte jetzt keine genaue Erklärung (das wäre zuviel verlangt), sondern  nur den Theoretischen Ablauf. Ausgangspunkt ist das Layout in Photoshop.
Sollte ich zB Imageready zum slicen & exportieren benutzen oder sollte ich das Layout lieber direkt in Photoshop zerschneiden (So wie im Videotutorial)?
Und nach dem zerschneiden ? Wohin mit den Bildern ? In eine HTML File und dann in Tabellen ? (Aber dann wäre es nicht Tabellenlos. Oder macht man das denn mit CSS ?)


Ahhhhhhhhhhhh Hilfe 

Gruß
Dustin


----------



## tobee (4. August 2006)

Also ich zerschneide das in Photoshop immer manuell. Das finde ich (persönlich) besser.
Dann markier ich das Element, extrahier die Auswahl und speichere es dann für das Web.


----------



## Gumbo (4. August 2006)

Also um ehrlich zu sein, bin ich nicht Befürworter von Layout-Tabellen und kann das genannte Tutorial daher auch nicht für gut heißen. Schon dass er „header“ als „heeder“ bezeichnet, stößt bei mir auf.

Wenn ich ein Layout umsetze, überlege ich mir erst einmal, wie die Dokumentstruktur dazu aufgebaut sein könnte und setze es um. Erst danach zerschneide ich die Layout-Vorlage manuell, such mir die Teile heraus, die ich wirklich brauche, und formatiere das Markup mit CSS.


----------



## Dustin84 (5. August 2006)

Evtl. habe ich nun versatnden, wie ein CSS Template funktioniert:

CSS Template erstellen in der Theorie:


*HTML Datei:*


> <html>
> <head>
> <link rel="stylesheet" type="text/css" href="allgemein.css" />
> </head>
> ...



Mit


> <link rel="stylesheet" type="text/css" href="allgemein.css" />


lade ich die CSS Datei in die HTML File und mit *<div id="Logo"</div>*
spreche ich das Logo aus der CSS Datei in der HTML Datei an und kann es dann per CSS Datei positionieren oder sonstwas, was dann so aussehen könnte:



> #Logo{
> background-color: red; (HIntergrundfarbe, bis das Logo geladen ist)
> color: inherit;
> background-image: url(images/logo.gif);
> ...



Und das mache ich dann mit allen Bildern, die ich in Photoshop gesliced habe und steuere das ganze der CSS Datei.

Stimmt das so od. hab ich es doch nicht richtig verstanden 

Gruß
Dustin


----------



## Jan-Frederik Stieler (5. August 2006)

Ansich haste es richtig verstanden. Du solltest aber vielleicht schauen was du von deinem PS Layout auch noch an Grafiken wie Frabflächen Linien ect. in CSS umsetzen kannst. Auch um Speicherplatz zu sparen.

Gruß

PS: hier gibts einen kleinen Schreibfehler


> <div id="Logo"</div>


das müsste <div id="Logo"></div> heißen.


----------



## hela (5. August 2006)

Ein weiterer Fehler:
Kommentare innerhalb der Stylesheets werden so notiert:

```
#Logo{
background-color: red; /* HIntergrundfarbe, bis das Logo geladen ist */
...
}
```


----------



## Dustin84 (5. August 2006)

Eine Frage noch:

Bei dieser Seite sieht man im Quelltext, dass in der HTML File Bildpfade und deren Eigenschaften(Positionierung usw.) angegeben sind.

zB. *div id="logo"><a href="/"><img src="/img/hdr_logo.jpg" width="140" height="64" alt="logo" title="nothing from outer space" /></a></div>*

warum steht das in der HTML File und nicht in der CSS Datei 

Und wo ist der Unterschied zwischen *div id* und *div class*

Gruß
Dustin


----------



## RS9999 (5. August 2006)

Studiere doch bitte einmal die SELFHTML Online-Hilfe. Dort bekommst Du im
Prinzip auf alle Fragen eine Antwort.


----------



## Dustin84 (5. August 2006)

Selfthrml kenne ich, finde da aber nichts :-(


----------



## Jan-Frederik Stieler (5. August 2006)

Na dann lass besser die Finger von der Tastatur. Sorry aber es gibt da auch ne Suche. Und das Menü ist doch nun übersichtlich genug.
Ansonsten gibts noch Google oder:
http://www.drweb.de/csstechnik/css_id_class.shtml

Gruß


----------



## Dr Dau (5. August 2006)

Hallo!

So eine Seite wie die von Dir genannte ist nicht mal so eben "dahingeklatscht".
Dass die Seite in verschiedenen Browsern unterschiedlich dargestellt wird, bestätigt dieses auch.
Bevor Du Dir Gedanken darüber machst ob und was Du wie und womit slicen tust, solltest Du erstmal mit einfachen Layouts anfangen zu üben..... Probleme wirst Du eh noch genug bekommen.
Da Du nicht mal den Unterschied zwischen "id" und "class" kennst (was rein gar nichts mit tabellenlosen Layouts zu tun hat), solltest Du Dich erstmal mit den allgemeinen Grundlagen von CSS befassen.
Auch ein Tabellenlayout kann mittels CSS formatiert werden..... dort können also auch Dinge wie "id" und "class" verwendet werden.

Gruss Dr Dau


----------



## Jan-Frederik Stieler (5. August 2006)

Was für den Anfang immer ganz gut ist, finde ich zumindest, sich ein Buch zu kaufen. Über Programmiersprachen gibt es auch schon welche für 10-20 Euro.
http://www.amazon.de/gp/search/ref=...%3Daps&field-keywords=css&Go.x=0&Go.y=0&Go=Go

Gruß


----------

