CSS Template erstellen - Theoretische Vorgänge

Status
Nicht offen für weitere Antworten.
D

Dustin84

Erfahrenes Mitglied
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
 
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.
 
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.
 
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>
<body>
<div id="Logo"</div>
</body>
</html>
Zum Vergrößern anklicken....

Mit
<link rel="stylesheet" type="text/css" href="allgemein.css" />
Zum Vergrößern anklicken....
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);

left: 0 px;
top: 200px;
position: absolute;
}
Zum Vergrößern anklicken....

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
 
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>
Zum Vergrößern anklicken....
das müsste <div id="Logo"></div> heißen.
 
Ein weiterer Fehler:
Kommentare innerhalb der Stylesheets werden so notiert:
Code: 
#Logo{
background-color: red; /* HIntergrundfarbe, bis das Logo geladen ist */
...
}
 
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
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück