3.6 Erstellung des Screenlayouts
Die eigentliche Erstellung des Layouts beginnt mit dem Anlegen einer neuen Datei basemod.css. Ab hier hat der Webdesigner völlig freie Hand und kann das Layout auf der Grundlage des Rohbaus, welcher durch das Basis-Stylesheet base.css definiert wurde, nach eigenen Wünschen gestalten.
Frage: Aus welchem Grund erfolgt die Aufteilung in base.css und basemod.css bei der Layouterstellung ?
Antwort: Mit der Unterteilung der Stylesheets in einzelne Bausteine haben wir uns ein mächtiges Werkzeug für die Layoutgestaltung geschaffen. Die Grundbausteine des YAML-Frameworks sorgen für die browserübergreifende Kompatibilität des Layouts. Es ist daher sinnvoll, diese funktionierende Grundstruktur unangetastet zu lassen und sämtliche Modifikationen in eine andere Datei auszulagern.
Die Modifikationen werden durch die Aufteilung zudem sehr übersichtlich, weil keine Mehrfachdefinitionen von Basiselementen erforderlich sind.
Das Layoutkonzept von www.yaml.de
Am Beispiel der Website www.yaml.de werde ich ein Konzept zur Erstellung YAML-basierter Layouts vorstellen. Wie sie erkennen, haben alle Einzelseiten der Webseite ein identisches Aussehen. Unterschiede gibt es jedoch in der Anzahl und Anordnung der Spalten auf den einzelnen Seiten.
Die Bausteine des Screenlayouts
Das Screenlayout basiert auf mehreren basemod-Dateien, die im Verzeichnis css/modifications abgelegt sind. Diese Dateien sind kein fester YAML-Bestandteil. Sie können sie also als Grundlage für eigene Entwicklungen verwenden oder von Grund auf selbst erstellen.
- basemod.css
- Diese CSS-Datei bildet das Grundlayout. Hier werden Spaltenbreiten, Hintergrund des Headers, Randabstände der Inhaltscontainer usw. festgelegt und so dem Rohbau der base.css Form und Farbe gegeben. Innerhalb der Datei basemod.css werden noch keine Inhalte formatiert.
- basemod_2col_left.css
- Diese Datei enthält die erforderlichen CSS-Anweisungen, um durch das Abschalten der Spalte #col2 aus dem 3-spaltigen Standard-Layout das zugehörige 2-Spalten-Layout zu erzeugen. Dazu werden einfach einige CSS-Eigenschaften des Grundlayouts (basemod.css) umdefiniert.
- basemod_3col_abb.css
- Eine weitere kleine Modifikation des Grundlayouts. Diesmal wird durch einige wenige Änderungen die Position der Spalten #col2 und #col3 getauscht, so dass ein Layout mit zwei gleichwertigen Inhaltsspalten entsteht.
Nach dem gleichen Schema existieren im Verzeichnis css/modifications noch weitere kleine Modifikationen mit deren Hilfe die unterschiedlichen Layouts der Website erzeugt werden.
Als letzter Baustein kommt die Datei content.css aus dem Verzeichnis css/main hinzu, welche die Formatierung der Inhalte vornimmt. Sie ist ebenfalls ein Grundbestandteil des Layouts und sorgt für eine einheitliche Gestaltung von Überschriften, Absätzen, Links usw., siehe Abschnitt 3.8: Gestaltung der Inhalte.
Das Zusammensetzen zum vollständigen Layout
Die Entscheidung darüber, welches Layout auf einer Webseite verwendet wird, fällt durch die Wahl des zentralen Stylesheets. Das Layout der Website www.yaml.de enthält insgesamt 4 verschiedene zentrale Stylesheets:
- layout_3col_standard.css
-
Dies ist das Grundlayout und basiert auf den Angaben der Datei basemod.css. Das Grundlayout wird durch die beiden Listennavigationen Sliding Door (nav_slidingdoor.css) als Hauptnavigation und die vertikale Listennavigation (nav_vlist.css) als Subnavigation erweitert. Das Druck-Stylesheet print_003.css vervollständigt das Layout (siehe Abschnitt 3.9: Anpassung des Layouts für Printmedien).
@import url(main/base.css);
@import url(modifications/basemod.css);
@import url(navigation/nav_slidingdoor.css);
@import url(navigation/nav_vlist.css);
@import url(main/content.css);
@import url(print/print_003.css); - layout_3col_abb.css
-
Dies ist das Grundlayout und basiert auf den Angaben der Datei basemod.css. Anschließend erfolgt die Abwandlung des Grundlayouts über die Änderungen der Datei basemod_3col_abb.css.
@import url(main/base.css);
@import url(modifications/basemod.css);
@import url(modifications/basemod_3col_abb.css)
@import url(navigation/nav_slidingdoor.css);
@import url(navigation/nav_vlist.css);
@import url(main/content.css);
@import url(print/print_003.css); - layout_2col_left.css
-
Dies ist das Grundlayout und basiert auf den Angaben der Datei basemod.css. Anschließend erfolgt die Abwandlung des Grundlayouts in ein 2-Spalten-Layout über die Änderungen der Datei basemod_2col_left.css.
@import url(main/base.css);
@import url(modifications/basemod.css);
@import url(modifications/basemod_2col_left.css)
@import url(navigation/nav_slidingdoor.css);
@import url(navigation/nav_vlist.css);
@import url(main/content.css);
@import url(print/print_abb.css);
Alle weitern zentralen Stylesheets im Verzeichnis css werden für die zahlreichen Beispiellayouts der Dokumentation im Verzeichnis layout_storage benötigt.
Die Anpassungen für den Internet Explorer
Die zugehörigen Anpassungsdateien für die korrekte Darstellung im Internet Explorer befinden sich im Verzeichnis css/explorer und beinhalten die Layoutbezeichnung im Dateinamen.
- iehacks_3col_standard.css
- iehacks_3col_abb.css
- iehacks_2col_left.css
