Layouts
Seitenelemente
Einzelne Seitenbereiche wie der Platz für das Firmenlogo, die Navigation und Inhalt, etc. werden voneinander abgetrennt und in Containern angeordnet.
Eine Website besteht aus mehreren, unterschiedlich gewichteten Bereichen. Meist gibt es einen Bereich ganz oben mit dem Logo. Dann gibt es eine Navigation, zum öffnen der Themenseiten, oft horizontal angeordnet. Vielfach wird durch einen Click auf einen solchen Navigationseintrag eine Subnavigation geöffnet, dieses Unter-Menu erscheint direkt unter dem angeklickten Eintrag oder als Liste in einer Spalte auf der linken Seite.
Zentral, in der mittleren Spalte, positioniert man den Inhalt und die rechte Spalte, falls vorhanden, beinhaltet oft Hinweise, RSS feeds oder Werbung. Zu unterst kommt vielleicht eine abschliessende Fusszeile mit Copyright Hinweisen oder dem Datum der letzten Änderung.
Ein weiterer Bereich, den man leicht finden sollte ist die Metanavigation, in der sich der Home Link, die Sitemap, die Sprachumschaltung, der Printbefehl und ev. ein Link zu den Allgemeinen Geschäftsbedingungen befinden. Oft gesehen, vor allem bei tief verschachtelten Seiten, ist eine zusätzliche horizontale Zeile, der Brotkrümmelpfad (breadcrump); der den Weg anzeigt, den man bis zur aktuellen Seite zurückgelegt hat.
Positionierung
Alle Positionen und Masse werden durch CSS angegeben!
Alle diese Bereiche müssen irgendwie angeordnet werden. Dies geschiet durch <div>...</div> Container, die neben und untereinander angeordnet werden. Zusammengehörende Teile werden durch einen Container zusammengehalten. Die Bereiche, z.B. Spalten werden weiter zusammengefasst und verschachtelt, der letzte alles beinhaltende Container dient z.B. dem Zentrieren und steht dann vor dem Hintergrund des Body.
Beliebt war zu Beginn des WWW ein Rahmenwerk, das Frameset,
welches für jeden Bereich seperate html Seiten zu einer Seite zusammenfasst.
Dann wurde die grösste Sorgfalt darauf verwendet, jedes Element absolut pixelgenau anzuordnen.
In ineinander verschachtelten Blindtabellen (Tabellen ohne sichtbare Linien, ohne Margins und ohne Padding)
wurden nahtlos Bildteile aneinander gefügt, die zuvor aufwändig zerschnitten werden mussten (slices).
Die jetzt geltende Doktrin fordert die strikte Trennung von Format und Inhalt (oft wird auch noch die Funktionalität ausgelagert).
Templates
Templates sind Musterseiten (Grundgerüste), die die Positionierung und Formatierung für die auftretenden Bereiche und Elemente bereits beinhalten; wechselt man das Template, bzw. die entsprechende CSS-Datei, wird die Seite rekombiniert, und also anders angeordnet und dargestellt.
Layout-Beispiele
Die folgenden Beispiele lassen sich natürlich ausbauen und ergänzen (durch weitere, ineinander verschachtelte div-Container), aber als grundlegende Beispiele wurden HTML und CSS vorerst möglichst einfach gehalten, der Code ist in der jeweiligen Datei zu betrachten (Klick auf die Abbildungen).
Folgende CSS Begriffe muss ich kennen, um die Beispiele zu verstehen:
position: relative oder absolut? float: oder brake: right oder left oder all? Siehe Container
padding, margin, border, width? Siehe Boxmodel
Fixe Layouts
Layout 2-spaltig
Layout 3-zeilig
Layout 3-spaltig
Liquid Layouts
More to come ...
Fertige Layouts und Generatoren
Im Web gibt es eine ganze Menge vorgefertigter Templates, Onlinetools und Website Generatoren.
- Page Maker - The Generator Form v2.90 Online Tool für bis zu 3 Spaltiges Layout mit Head und Footer
Check den Code.