1.5 Verzeichnisstruktur des Frameworks
Das Download-Paket des YAML-Frameworks beinhaltet einen vollständigen Abzug der Webseite www.yaml.de. Sie erhalten somit mit dem Download-Paket nicht nur die CSS-Dateien des Frameworks sondern auch die vollständige Dokumentation sowie einige Hilfsmittel zur Layoutentwicklung. Nachfolgend ist die Verzeichnisstruktur des Download-Paketes erläutert.
Verzeichnis: artikel
Dieses Verzeichnis beinhaltet die einzelnen Artikel der Dokumentation des Frameworks. Lesen Sie die Dokumentation sorgfältig und beachten Sie die hervorgehobenen Hinweise bei der Anwendung. Die Dokumentation ist in 5 Kapitel aufgeteilt:
Das Layout der Dokumentation basiert natürlich ebenfalls auf YAML, daher kann gelegentlich auch ein Blick in den Quellcode die eine oder andere Frage der praktischen Anwendung klären. Die Dokumentation ist offline tauglich, Sie können sie also auch ohne Internetverbindung von ihrer lokalen Festplatte aus verwenden.
Verzeichnis: css
Das Stammverzeichnis css beinhaltet die zentralen Stylesheets (siehe Abschnitt 3.3: Das zentrale Stylesheet) für alle innerhalb des YAML-Frameworks vordefinierten Layoutvariationen.
In einem solchen Stylesheet werden alle benötigten CSS-Bausteine eines YAML-basierten CSS-Layouts zusammengefasst. Über die zentralen Stylesheets erfolgt auch die Einbindung eines Layouts in die Webseite.
Verzeichnis: css/explorer
Das Verzeichnis css/explorer beinhaltet die layoutabhängigen Anpassungsdateien für den Internet Explorer. Zu jedem Layout (zentrales Stylesheet) gehört ein gleichnamige Anpassungsdatei, welche innerhalb eines speziellen Kommentars (Conditional Comment) ebenfalls in die Webseite eingebunden muss und damit ausschließlich dem Internet Explorer zugänglich gemacht wird (siehe Abschnitt 3.5: CSS-Anpassungen für den Internet Explorer).
Über die Dateien werden dem Internet Explorer alle notwendigen Hacks zur Korrektur der diversen CSS-Bugs des Internet Explorers zugänglich gemacht. Diese Anpassungs-Stylesheets sind zwingend erforderlich, damit der Internet Explorer YAML-basierte Layouts fehlerfrei darstellt.
Verzeichnis: css/main
Dieses Verzeichnis beinhaltet die Grundbausteine des YAML-Frameworks. Sie bilden ein dreispaltiges Basislayout, welches browserübergreifend korrekt dargestellt wird. Sie enthalten jeweils nur grundlegende, für die Funktionalität des Layouts erforderliche Formatierungen.
- base.css
- iehacks.css
- content.css
Die beiden Dateien base.css und iehacks.css nehmen dabei eine Sonderrolle ein. Sie stellen die grundlegende Funktionalität des YAML-Frameworks bereit und bleiben immer unverändert (siehe Abschnitt 3.4: Das Basis-Stylesheet und Abschnitt 3.5: CSS-Anpassungen für den Internet Explorer).
Die Datei content.css enthält alle Formatierungsanweisungen für die späteren Inhalte einer vollständigen Webseite (siehe Abschnitt 3.8: Gestaltung der Inhalte).
Verzeichnis: css/modifications
Das Verzeichnis css/modifications beinhaltet die CSS-Bausteine zur Modifikation des Basislayouts (base.css). Innerhalb jedes Layouts (zentrales Stylesheet) werden in der Regel ein oder mehrere Modifikationen (basemod-Dateien) eingebunden (siehe Abschnitt 3.6: Layoutanpassungen sowie Kapitel 4).
Verzeichnis: css/navigation
Das Verzeichnis css/navigation beinhaltet die CSS-Bausteine für Navigationselemente. Derzeit werden drei Listennavigationen mitgeliefert.
- nav_slidingdoor.css (horizontale Listennavigation)
- nav_shinybuttons.css (horizontale Listennavigation)
- nav_vlist.css (vertikale Listennavigation)
Nähere Informationen hierzu finden Sie im Abschnitt 3.7: Bausteine für die Navigation.
Verzeichnis: css/print
Das Verzeichnis css/print beinhaltet die CSS-Bausteine zur Erstellung von Druckvorlagen YAML-basierter Layouts.
Bei diesen Bausteinen handelt es sich um Modifikationen des Bildschirm-Layouts. Nähere Informationen zu Drucklayouts finden Sie im Abschnitt 3.8: Anpassung des Layouts für Printmedien.
Verzeichnis: Hilfsmittel
In diesem Verzeichnis finden sich einige nützliche Werkzeuge für die praktische Layoutentwicklung.
- Dreamweaver
Hierbei handelt es sich um speziell angepasste Stylesheets für die Arbeit mit dem Dreamweaver (siehe Abschnitt 5.2). - Javascript
- ftod.js
Ein Script zur automatischen Generierung von Blindtexten. - minmax.js
Dieses Script ermöglicht die Verwendung der CSS-Eigenschaften min-width und max-width im Internet Explorer (siehe Abschnitt 4.6: Minimale & Maximale Breiten).
- ftod.js
Verzeichnis: layout_storage
In diesem Verzeichnis befinden sich eine Reihe von Beispiel-Layouts in Form einfacher HTML-Seiten ohne spezielle Inhalte. Diese Beispiele dienen in erster Linie dem Verständnis für die Funktionsweise des Frameworks und zugleich als Ausgangsbasis für eigene Layoutentwürfe. Auf die einzelnen Beispieldateien wird im Rahmen der Dokumentation an verschiedenen Stellen Bezug genommen.
