wunschkredit.org
Die Seite unter wunschkredit.org nutzt das bekannte und häufig eingesetzte Blog- und Contentmanagementsytem Wordpress in der aktuellen Variante Wordpress 2.9.1 Zur Darstellung der Seite werden innerhalb des Themes „eMoms Legacy“ zwei unterschiedliche Stylesheets verwendet. Diese Trennung des Designs in zwei Bereiche gewährleistet, dass die Seite für verschiedene Medien jeweils optimal dargestellt wird. Für die Darstellung auf Bildschirmen wird die Datei style.css zurück gegriffen, für den Druck dagegen auf die Datei print.css.
Die meisten Gestaltungselemente werden in der größeren der beiden Dateien festgelegt: in der style.css. Lediglich diejenigen Elemente, die im Druck anders dargestellt werden sollen, werden in der print.css definiert.
Im Bereich „General elements“ werden die Basisinfos der Seite über Layout, Farben Größen etc. festgehalten. Gleich zu Beginn werden mithilfe eines Universalselektors die Innen- und die Aussenabstände, die ja von verschiedenen Browsern meist unterschiedlich dargestellt werden, vereinheitlicht: * {margin: 0px; padding: 0px;}
Dann werden die Grundeinstellungen vorgenommen: Vor einem weissen Hintergrund wird die Schrift Trebuchet MS bevorzugt eingesetzt, der Zeilenabstand beträgt 140% des Normalwertes. In der CSS-Datei liest sich das wie folgt:
body {background: #fff;font-family: ‘Trebuchet MS’, Arial, Verdana, Helvetica, sans-serif; line-height: 140%;}
Dann folgen die unterschiedlichen Schriftgrößen für Fließtext und Überschriften, die von 110% des Normalwertes (Fließtest) über mehrere, gleichmäßige Abstufungen bis hin zu 200% des Normalwertes bei der größten Überschrift gehen. Im Kopfbereich wird ausserdem zusätzlich für die Überschriften eine eigene Klasse definiert, der eine schöne, blaugraue Farbe zugewiesen wird:
h1, h2, h3, h4, h5, h6, .heading {color: #336666;}
Die selbe Farbe wird übrigens etwas weiter unten auch den Links zugewiesen:
a, a:active {color: #336666; font-weight: bold; text-decoration: none;} besagt, dass Links in dem selben Blaugrau wie Überschriften der Klasse .heading gestaltet werden. Zusätzlich erhalten sie auch noch die Attribute bold (fett) text-decoration: none, müssen also ohne Dekorationen wie z. B. Unterstreichungen auskommen. Wurde ein Link bereits ein Mal besucht, dann erhält er die etwas hellere Farbe #669999.
Die Seite www.wunschkredit.org ist ein typisches Beispiel für eine moderne und aktuell gestalltete Webseite, die auf Wordpress beruht und bietet ihren Besuchern eine ebenso praktische wie schöne Benutzeroberfläche.