4.1 Fünf Regeln ...
Die folgenden Regeln fassen die Grundprinzipien, nach denen YAML entwickelt wurde, zusammen:
- Regel 1: YAML ist kein Fertiglayout
YAML basiert auf Webstandards und ist ein vielseitiges Werkzeug zur Erstellung flexibler, barrierearmer CSS-Layouts. Grundlage für die effektive Arbeit mit dem Framework ist das Verständnis für den Aufbau und die Arbeitsweise von YAML. Nehmen Sie sich daher unbedingt die Zeit und lesen Sie die Dokumentation bevor Sie mit der Arbeit beginnen.
- Regel 2: YAML basiert auf dem TOP-DOWN-Prinzip
YAML stellt flexibles, mehrspaltiges Basislayout mit allen wichtigen Standardelementen sowie funktionale Stylesheets für die browserübergreifend korrekte Bildschirmdarstellung und verschiedene Ausgabemedien bereit. Der Nutzer optimiert das fertige Layout durch Löschen nicht benötigter Elemente aus dem Quelltext.
- Regel 3: CSS-Grundbausteine
Jedes YAML-basierte Layout benötigt die zwei CSS-Grundbausteine base.css und iehacks.css aus dem Ordner yaml/core/. Sie sind verantwortlich für die browserübergreifend korrekte Bildschirmdarstellung und für eine optimale Ausgabe der Inhalte auf Printmedien.
- Regel 4: Trennung von YAML- und Nutzer-CSS
Die Dateien im YAML-Ordner sollten unverändert bleiben. Eigene Stylesheets bzw. Anpassungen der von YAML gelieferten CSS-Bausteine gehören in den css-Ordner des Nutzers. Damit steht jederzeit eine stabile Basis für die Layoutentwicklung bereit und die Fehlersuche sowie Projektpflege werden erleichtert.
- Regel 5: Viel Spaß mit YAML!
Mitgelieferte Beispiele
Zusätzlich zur Dokumentation finden Sie im Ordner examples des YAML-Downloadpakets eine große Anzahl an vorgefertigten Beispiellayouts, die Ihnen beim Verständnis zur Arbeit mit dem Framework und als Grundlage für eigene Projekte dienen sollen.
Hinweis: Wenn Sie YAML noch nicht kennen, nehmen Sie sich zunächst die Zeit und lesen Sie die Dokumentation bis zu Ende. Das Kapitel 4 vermittelt den Weg zur praktische Anwendung, mit dem Sie sich zunächst vertraut machen sollten.
In diesen Beispielen werden die vielfältigen Modifikationsmöglichkeiten des Basislayouts vorgestellt, sowie die Anwendung der verschiedenen CSS-Bausteine des Frameworks demonstriert. Eine Übersicht finden Sie im Abschnitt 1.5: Der Aufbau des Downloadpakets.
Tipps für CSS-Einsteiger
Wenn Sie mit CSS noch nicht vertraut sind, nehmen Sie sich am besten eines der Beispiele, welches Ihren Layoutvorstellungen am weitesten entgegen kommt und spielen Sie mit den einzelnen Stil-Definitionen des Screenlayouts. Probieren Sie, welche Änderungen sich wie auf das Layout auswirken.
Ändern Sie Abstände, Schriftgrößen, Farben und Containerbreiten. So verlieren Sie am schnellsten die Angst vor CSS und lernen gleichzeitig spielend den Umgang mit YAML.
4.2 Empfehlung für die Projektstruktur
Generell gibt es keine zwingenden Vorgaben bei der Arbeit mit YAML. Die hier empfohlene Projektstruktur hat sich jedoch als vorteilhaft erwiesen, da sie die Fehlersuche während der Layouterstellung und die Projektpflege spürbar erleichtert.
Schritt 1: Dateien und Verzeichnisse anlegen
Kopieren Sie zunächst den kompletten Ordner yaml/ auf Ihren Server und legen Sie auf der gleichen Verzeichnisebene einen css-Ordner für die von Ihnen erstellten CSS-Dateien an.
XHTML-Quelltext: Kopieren Sie nun die XHTML-Vorlage markup_draft.html aus dem Ordner yaml/ in Ihr Projektverzeichnis und benennen Sie die Datei um.
Zentrales Stylesheet: Kopieren Sie die Stylesheet-Vorlage central_draft.css in Ihren css-Ordner und benennen Sie die Datei passend um.
IE-Patches: Kopieren Sie sich die Dateivorlage patch_layout_draft.css aus dem Ordner yaml/patches/ in Ihren Ordner css/my_patches/ und geben Sie ihr einen zum zentralen Stylesheet passenden Namen (um die Zusammengehörigkeit deutlich zu machen).
Die nebenstehende Grafik verdeutlicht die so entstandene Struktur Ihres neuen Projekts (Auszug aus dem Dreamweaver-Projektfenster).
Schritt 2: Anpassung der Dateipfade
Nach dem Erstellen der Projektstruktur müssen Sie die Dateipfade der CSS-Bausteine kontrollieren. Im XHTML-Quelltext müssen die Pfade zum zentralen Stylesheet und zur Patch-Datei angepasst werden. Im zentralen Stylesheet selbst sowie in der Patch-Datei müssen die Pfade zur base.css und iehacks.css kontrolliert werden. Sind diese Arbeiten erledigt, ist das Basislayout einsatzbereit und kann gestaltet werden.
Schritt 3: Gestaltung des Layouts
Ab diesem Punkt haben Sie die freie Wahl. Beginnen Sie, eigene Stylesheets für das Screen- und Print-Layout sowie für die Navigation zu erstellen oder greifen Sie auf die Dateivorlagen und vorgefertigten CSS-Bausteine von YAML zurück.
Für das Screenlayout finden Sie im Ordner yaml/screen/ die Dateivorlagen basemod_draft.css für das Seitenlayout und content_default.css zur Gestaltung Inhalte.
Kopieren Sie sich diese Vorlagen in Ihren css-Ordner und passen Sie sie nach Ihren Wünschen an. Nach dem gleichen Prinzip können Sie mit den Navigationsbausteinen und den Print-Stylesheets verfahren.
Hinweis: Vergessen Sie nicht, diese zusätzlichen Bausteine in Ihr zentrales Stylesheet aufzunehmen.
