Widmen wir uns erstmal dem Menü. Das Menü kann in Kategorien gegliedert sein, ist die Seite nicht so aufwendig kann man sich das ersparen. Kategorien in einer Seiten Navigation sind dann sehr hilfreich wenn man mehrere sinnvolle untergruppen von einem oder mehreren Themen hat. Gut sieht man das bei Online Shops oder auf anderen Seiten die mehrere Dienstleistungen anbieten.
Betreibt man ein Artikel oder Link Verzeichnis ist es oft hilfreich die Untergruppen in einer eigenen Seite auf zu führen da ansonsten das Menü zu überladen wird und auch so wirkt. Der Besucher möchte schnell und effizient an sein gewünschtes Ziel kommen, also muß man sich vorher schon überlegen wie man seinen Besucher mit wenigen Klicks und ohne viel Aufwand dorthin bringt.
Ich gehe mal davon aus, das wir eine Seite mit einigen Themen gestalten wollen und habe daher Menü Kategorien angelegt. Wenn man diese nicht benötigt, einfach das dazu gehörige Div aus dem Quelltext löschen.
Das Div dass die Kategoriesierung übernimmt ist leicht zu erkennen, werde es aber trotzdem nochmal zeigen.
Auch hier wird per CSS die Gestaltung der Menü Kategorie übernohmen.
Wie man an dem Beispiels Template erkennt, werden die Links als Buttons dargestellt, während in dem Seiten Quelltext keinerlei Anzeichen einer eingebunden Grafik zu erkennen ist. Weiters sieht man gut, dass ich hier eine Liste verwende um die Menüpunkte darzustellen. Wieder erkennt man eine der vielen Stärken von CSS.
Kommen wir nun zum CSS des Menüs, auch das ist relativ einfach gestrickt.
Die meisten Anweisungen sollten nun schon aus dem Html Grundkurs und dem ersten Teil aus dem CSS Grundkurs bekannt sein. Was jedoch neu ist, ist der Befehl "display:block", dieser Befehl macht nichts anderes als ein Element als Block darzustellen. Somit muss man einen Link nicht mehr gezielt auf der Schrift anklicken sondern der ganze a Tag wird zu einer klickbaren Fläche. Die Fläche in unserem Fall wäre 120px; breit und nimmt zusätzlich die Höhe ein die durch das Attribut "padding" geschaffen wird.
Auch sieht man das hier die Listen Elemente "ul" und "li" gestaltet werden und die typischen Listenzeichen mit "list-style: none;" ausgeschaltet werden.
Zu guter letzt gestalten und positionieren wir denn Content bereich und denn Footer. Durch Header und das Menü engen wir denn Platz für denn Content schon ein und es damit nicht mehr schwer das umzusetzen.
In das Html Dokument kommt nun die CSS ID "content" eingebunden.
Sieht wie folgt aus.
Die CSS Id dazu ist einfach sehr simpel dazu gehalten. Es werden lediglich die Abstände "margin" zu den anderen Containeren die Header und Menü angegeben.
Die Abstände werden wieder von oben, rechts, unten und links angegeben.
Nun werden die Content Inhalte per CSS gestaltet. Die Classen die angelegt werden müssen richten sich nun rein nach dem Inhalt, grenzen gibt es wenige. Ob ein Eyecatcher, Bilder Boxen oder einfach nur Text passagen optisch hervor heben, alles mit CSS zu lösen.
In diesem Praixs Beispiel hab ich einfach nur die Überschriften h1-h3 definiert, die lediglich die Farben, Schriftgröße und die linke Rahmenstärke ändern.
Zum Abschluss kommt noch eine Fleißaufgabe, ein Footerbereich für etwaige Seiteninfomationen oder Copyright Hinweise. Wenn kein Bedarf besteht kann man diesen container auch löschen.
Im Beispiel Template sieht der Footer im Html so aus:
Im CSS wird lediglich die Schriftart und die Ausrichtung festgelegt. Es wird hier normaler Text und Links mit dem Html Tag "a" formatiert.
So, das war nun ein CSS Layout in der Praxis gestaltet. Natürlich ist es nur ein grundaufbau und kann jederzeit bei Bedarf erweitert werden. Ansonsten ist das Layout jetzt schon mit den Grund formatierungen einsatz fähig.
Hier ist das Layout für praktische Versuche zum Downloaden CSS Template Download
Über Feedback freue ich mich, entweder im Forum oder hier gleich nachstehend als Kommentar.
Zum Abschluss noch das übliche Rechtliche: Wer diesen Text anbieten oder kopieren möchte, kann gern auf diese Seiten verlinken oder den Text kopieren und mit Quellenangabe verlinken.
Liebe Grüße Rainer / pixelmania.at
