Rapid Web Development mit Python - Web-2.0-Anwendungen mit TurboGears

5 Gestaltung der Präsentation (S. 147-148)

Im MVC-Pattern (Model View Controller) ist die Präsentation (View) der Teil der Software, der die Darstellung der Systemausgabe in einer für den Menschen wahrnehmbaren Form realisiert. Ein Präsentationsmodul produziert keine Daten, sondern es erhält von anderen Systemkomponenten die Daten und macht sie nur sichtbar oder gelegentlich auch hörbar. Im Falle der Web-Programmierung gehören zur Präsentation vor allem das Layout von Webseiten, das heißt die Platzierung von Text und grafischen Elementen, und das typografische Design (Auswahl von Fonts, Farben, Schriftgrößen etc.).

Die (vom restlichen System) getrennte Definition der Präsentation verbessert die Änderbarkeit und Wartbarkeit der Software. Stilistische Veränderungen brauchen nur an einer einzigen Stelle vorgenommen zu werden. Dabei kann man getestete und korrekte Programmteile der Model- und Controller-Komponenten unangetastet lassen. Dieses Kapitel beginnt mit einem Überblick über die wesentlichen Prinzipien von CSS, einem Standard für statische Aspekte der Formatierung von Webseiten.

Danach folgt eine Einführung in die Python-basierte Templatingsprache Kid. Mit Kid können Sie Elemente Ihrer Website gestalten, die erst zur Laufzeit berechnet werden können. Dabei verwenden Sie Python-Syntax. Das ist insbesondere bei algorithmisch aufwändigen Formatberechnungen ein großer Vorteil.

5.1. CSS-Stylesheets

Stylesheets sind eine Ergänzung zu HTML bzw. XHTML. In einem CSS-Stylesheet können sehr feine Formateigenschaften von HTML-Elementen festgelegt werden. Sie können Attribute wie Schriftfarbe, Schrifttyp, Hintergrundfarben und -Grafiken, Größe, Abstände zwischen Zeichen und vieles andere mehr mit CSS spezifizieren, um Ihrer Website ein unverwechselbares und in sich einheitliches Erscheinungsbild zu geben.

Genau wie HTML und XHTML ist CSS ein Sprachstandard, der vom W3-Konsortium herausgegeben und gepflegt wird. Das Akronym steht für Cascading Style Sheets. Es gibt die Version CSS1 und die darauf aufbauende erweiterte Version CSS2. Alle CSS1- Stylesheets sind auch gültige CSS2-Stylesheets. In diesem Abschnitt beschränken wir uns im Wesentlichen auf die wichtigsten Features von CSS1. Attribute aus dem erweiterten CSS2-Standard (die zum Teil vom MS Internet Explorer 6.0 nicht verarbeitet werden können) werden als solche gekennzeichnet.

5.1.1 Stildeklarationen verwenden

Direkte Stilzuweisung - das Attribut style

Man kann einem HTML-Element direkt ein CSS-Format zuweisen, indem man im einleitenden Tag ein Attribut namens style mit einem Wert belegt. Im folgenden Beispiel wird eine Überschrift mit einem neuen Format versehen: Die Buchstaben erscheinen blau auf hellgelbem Hindergrund und haben einen ungewöhnlich großen Abstand.