Layouting Tipps

C

Cyberm@ster

0
Mit den CSS-Grundlagen kenn ich mich einigermaßen aus, habe CSS aber bisher nur als Ergänzung zu den HTML-Formatierungen verwendet. Nun möchte ich meine Website aber mit CSS neu layouten und dann mit PHP aufbauen, da Frames ja [understatement]ziemlich[/understatement] veraltet sind. Was mich zu meiner Frage führt (die so hoffentlich noch nicht behandelt wurde):

Wie erstellt man am besten CSS? Macht ihr das manuell oder habt ihr da nützliche Tools bzw. Tipps?
 
Manuell. Aber das entscheidende ist, die Seite nicht nach dem CSS aufzubauen, sondern das CSS nach der Seite. Wenn du also eine vernünftige Trennung zwischen Inhalt und Style haben willst, dann erstelle deine Webseite so, dass zusammengehörige Bereiche in entsprechende DIV-Container gepackt werden.

Z.B. könntest du eine Seite in verschiedene Inhaltsbereiche aufteilen... einen Kopf, die Navigation links und den eigentlichen Content rechts. Alle 3 Bereiche sind jeweils DIVs auf der gleichen Ebene, mit einer ID eindeutig gekennzeichnet. Die Bereiche lannst du dann getrennt befüllen, den Kopf mit 'ner Grafik oder so, die Navigation mit einer Liste der Navigationselemente und den Inhalt wiederum mit einzelnen Abschnitten.

Dann kannst du mittels CSS innerhalb deiner angelegten Bereiche die entsprechenden, darin vorkommenden Seitenelemente ansprechen, beispielsweise also Listen in der linken Spalte so formatieren, wie eben die Navigation aussehen soll, in der rechten Spalte aber so, wie eben eine Liste im Inhalt aussehen soll. Und wenn du dein Markup möglichst universell machst, kannst du mit verschiedensten Stylesheets aus dem gleichen HTML-Code völlig verschieden aussehende Seiten basteln.
 
Ok das hat mir schon geholfen, danke.

Wenn ich richtig verstanden habe, soll ich zuerst die Struktur aufbauen, dann die nötigen IDs und CLASSes definieren und dann die CSS erstellen, nach den verschiedenen Elementen wie Header, Footer, Content, Navigation gegliedert?

Was ist eigentlich der Unterschied zwischen IDs und CLASSes, bzw. was sind die Vor- und Nachteile?
 
Ja SelfHTML ist genial, auf dessen Basis hab ich damals HTML (und etwas CSS) gelernt. Aber danke für die direkten Links, sieht interessant aus. Dass man keine Frames mehr braucht, ganz im Gegenteil, brauchst du mir nicht zu sagen, ich weiss schon warum ich meine Website überarbeiten möchte ... ;)
 
Original von Cyberm@ster
Was ist eigentlich der Unterschied zwischen IDs und CLASSes, bzw. was sind die Vor- und Nachteile?
Zum Vergrößern anklicken....
Eine bestimmte ID darf es nur einmal auf der Seite geben, Klassen wiederum können sooft verwendet werden, wie du willst. Es bietet sich daher an, die Inhaltsbereiche selbst (Kopf, Navigation, Content, Footer usw.) mit einer ID eindeutig zu bestimmen, deren Inhalte dann mit Klassen (wo sinnvoll).

Du kannst natürlich auch alles mit Klassen machen, aber auf diese Weise hättest du im Stylesheet auch noch eine Unterscheidung zwischen Inhaltsbereichen (#header) und einfachen Elementen (.navigationslink).
 
Ok danke, ich glaube ich hab verstanden. Ich werde mir SelfHTML dann noch einmal gut durchlesen. Und Gratulation zum Source Code deiner Website, der ist echte Qualitätsarbeit ;)
 
Um antworten zu können musst du eingeloggt sein.
Zurück
Oben