CSS-StyleguideKreative Ordnung
Klares Konzept
CSS-Styleguide
Bei einem modernen Web-Auftritt kommen Sie
an Cascading Stylesheets nicht vorbei. Mächtige Formatbefehle, flexibles Handling und zukunftssicheres Layout sind die Vorteile dieser Layout-Sprache. Formatieren Sie mit den Stylesheets jedoch nicht einfach drauflos. Nehmen Sie sich Zeit für die Planung. Entwickeln Sie eine einheitliche Struktur für Ihre Website. Beschränken Sie sich auf eine überschaubare Anzahl von Bausteinen, mit denen Sie Ihre Seiten zusammensetzen. Über einen Styleguide weisen Sie diesen Bausteinen die Formate zu.
Geben Sie sich aber auch beim Eintippen der CSS-Befehle Mühe. Je besser Sie beispielsweise den Code dokumentieren, umso leichter gehen spätere Layout-Änderungen von der Hand. Internet Professionell zeigt, worauf Sie bei der Planung und der Umsetzung Ihres CSS-Designs achten sollten. Damit Sie das auch praktisch nachvollziehen können, finden Sie eine CSS-Datei mit den angesprochenen Formaten auf der Heft-DVD und unter listings.internet-pro.de.
Alles auf den Tisch
CSS-Styleguide
Ob Sie eine neue Site aufbauen oder eine bestehende auf CSS umstellen möchten ? investieren Sie genügend Zeit für das Konzept. Verschaffen Sie sich einen Überblick über die möglichen Site-Inhalte. Überlegen Sie, wie Sie die Inhalte präsentieren möchten. Zeichnen Sie am besten mit der Hand oder dem Grafikprogramm eine Skizze der geplanten Website. Welche Menüs benötigen Sie? Wie soll der Bildschirm aufgeteilt sein? Gibt es Bereiche, die Sie besonders hervorheben möchten?
Schreiben Sie sämtliche Elemente auf, die Einfluss auf das Layout Ihrer Seiten haben. Dies beginnt beim Seitenkörper und führt über den Fließtext sowie die diversen Überschriftarten bis zu Spezialitäten wie individuell gestalteten Infoboxen. Bei einer solchen Box können wiederum mehrere Elemente mit Formaten belegt werden, beispielsweise die Box selbst, die Überschrift und der Text innerhalb des Kastens. Weitere Objekte, für die Sie Formate entwickeln können, sind verschiedene Arten von Hyperlinks ? intern oder extern ? sowie Aufzählungen. Versuchen Sie, eine möglichst vollständige Liste zu erstellen. Die Inhalte der Seiten sollten sich komplett mit den von Ihnen gewählten Objekttypen darstellen lassen.
Ist der grafische Entwurf Ihrer Site fertig, dann weisen Sie jedem Objekt in der Liste ? zuerst auf Papier ? die Formate zu. Dies können, je nachdem ob es sich um Text oder beispielsweise eine Tabelle handelt, die Schriftart, die Farbe, die Linienstärke oder Abstände sein.
Kopf der externen CSS-Datei
CSS-Styleguide
Der Lohn dieser Mühe ist ein kompletter Styleguide für die Site. Je sorgfältiger Sie vorgegangen sind, desto einfacher und schneller lassen sich die Formate in CSS-Befehle umsetzen. Dies ist nach der Planung dann auch die zweite Phase. Schreiben Sie die Stylesheets in eine externe CSS-Datei. Verwenden Sie zum Erstellen der CSS-Datei einen Text-Editor oder ein spezielles CSS-Tool wie Topstyle (www.bradsoft.com).
Speichern Sie die Formatangaben beispielsweise unter dem Namen layout.css. Diese Datei ist die zentrale Schaltstelle für die Gestaltung Ihres Web-Auftritts. Entsprechend sorgfältig sollten Sie die Formate dort eingeben. Beachten Sie die folgenden Tipps zum Aufbau und zur Dokumentation der CSS-Datei, dann haben Sie, Ihr Nachfolger oder Ihr Kunde es später leichter, Änderungen am Site-Layout vorzunehmen. Beginnen Sie die Datei mit einem Kommentar, in dem Sie den Namen des Projekts und den aktuellen Versionsstand vermerken. In CSS schreiben Sie Kommentare mit der folgenden Syntax:
/* Website www.xyz.de
Autor: W. Mustermann
Version 1.2, 28-1-2005
*/
Manche CSS-Befehle nutzen externe Dateien wie beispielsweise ein Bild für den Seitenhintergrund. Damit Sie auf einen Blick erkennen, welche Dateien zu Ihrer CSS-Datei dazu gehören, sollten Sie diese ebenfalls im Einstiegskommentar auflisten:
/* Website www.xyz.de
...
?Verknüpfte Dateien?
seitenhintergrund: ../img/foto.jpg
und so weiter
*/
Für das Design eines Web-Auftritts spielen aber auch die Farben eine wichtige Rolle. Da diese an mehreren Stellen im Quellcode auftauchen, ist es nützlich, die Farbpalette einmal komplett zu Beginn der Datei einzufügen:
/* Website www.xyz.de
...
?Farben?
Fliesstext: #000000
Hintergrund Seite: #DDDDDD
Hintergrund Infobox: #99CCFF
und so weiter
*/
Möchten Sie die Farbgestaltung der Site ändern, müssen Sie die Farbwerte zwar immer noch an allen Stellen im CSS-Code austauschen. Die Liste im Kopf der Datei erleichtert Ihnen jedoch die Suche nach den richtigen Codes.
Grundformate der Seite
CSS-Styleguide
Arbeiten Sie nun die Angaben im Styleguide der Reihe nach ab. Sie werden sehen, dass dies bei guter Vorarbeit im Handumdrehen erledigt ist. Sortieren Sie die Formate an die passenden Stellen in der CSS-Datei ein. Beim Aufbau der Datei empfiehlt es sich, mit den Formaten zu beginnen, die für das Grundlayout der Seiten zuständig sind. Legen Sie beispielsweise die Farbe des Seitenhintergrunds mit der folgenden CSS-Angabe fest:
body {background-color: #DDDDDD;margin:0;}
Mit margin:0 setzen Sie zudem die Ränder des Seitenkörpers zurück. Weisen Sie danach allen HTML-Objekten, die Text enthalten können, mit dem folgenden Befehl eine einheitliche Grundschrift zu:
html,body,div,p,table,td,h1, h2,h3,span,ul,ol,li,a
{font-family: Arial, Helvetica, sans-serif;color:#000000;}
Individuelle Größen für die Texte lassen sich durch Wiederholung der Tag-Selektoren festlegen:
h1 {font-size: 1.2em;}
h2 {font-size: 1.1em;}
p {font-size: 1.0em;}
Spezielle Formatklassen
CSS-Styleguide
Erstellen Sie die Formate für spezielle Seitenelemente mit CSS-Klassen. Vielleicht möchten Sie interne Verweise anders färben als externe. Legen Sie für jeden Link-Typ eine Formatklasse an. Interne Links formatieren Sie beispielsweise hellblau mit
a.intern {color:#003399;}
Externe Verweise definieren Sie in oranger Farbe mit der Formatklasse
a.extern {color:#FF9900;}
Weisen Sie dem jeweiligen Link die Klasse nach dem folgenden Muster zu:
Ein weiteres Beispiel: Möchten Sie Bilder im Fließtext abwechselnd links- und rechtsbündig ausrichten, dann legen Sie zwei CSS-Klassen an. In der ersten lassen Sie den Text mit den folgenden Angaben rechts um das jeweilige Bild fließen:
img.bildlinks {
float:left; margin-top:10px;
margin-bottom:10px; margin-right:20px;
}
Dabei legen die Parameter margin-? die Abstände zum angrenzenden Text fest. Verwenden Sie für die rechtsbündigen Bilder die folgende Formatklasse:
img.bildrechts {
float:right; margin-top:10px;
margin-bottom:10px; margin-left:20px;
}
Beherzigen Sie bei den Klassennamen die folgenden Regeln: Benennen Sie die CSS-Formate nicht nach der Gestaltung, sondern nach der logischen Funktion. Der Name orange für externe Links würde im obigen Beispiel zwar erst einmal passen. Krempeln Sie die Farben Ihrer Site später jedoch komplett um, dann kommen Sie mit Sicherheit durcheinander. Vermeiden Sie zudem Abkürzungen oder kryptische Bezeichnungen. Je sprechender die Namen sind, desto leichter verstehen Sie oder andere das Prinzip auch noch nach Wochen.
Besser noch: Greifen Sie mit den Klassennamen die Struktur der Seite auf. So lassen sie sich noch schneller zuordnen. Bei den Namen teaser_text und teaser_ueberschrift erkennen Sie auf einen Blick, auf welches Objekt der Seite sie sich beziehen. Fügen Sie solche zusammengehörigen CSS-Angaben direkt hintereinander in den CSS-Code ein und stellen Sie einen kurzen Kommentar voran. In diesem erläutern Sie beispielsweise, um welche Teaser es konkret geht.
Kein Klassenkrampf
CSS-Styleguide
Formatklassen sind zwar sehr praktisch, für manche Zwecke aber nicht optimal. Schließlich müssen Sie jedem HTML-Objekt die jeweilige Klasse explizit zuweisen. Das folgende Beispiel zeigt die Problematik recht anschaulich. Für eine individuell gestaltete Aufzählungsliste innerhalb einer farbigen Infobox könnten Sie diesen Code verwenden:
|
Der CSS-Quelltext wird durch die vielen Klassen-Parameter jedoch unnötig aufgebläht. Arbeiten Sie in diesem Fall besser mit einem verschachtelten CSS-Format nach dem folgenden Muster:
.box li {color: #DDDDDD;}
Sämtliche Listeneinträge, die sich unter dem Einfluss der Klasse box befinden, werden grau formatiert. Die class-Angaben bei den Listeinträgen entfallen somit. Sie müssen lediglich noch der Box selbst eine Klasse zuweisen.
Seite gliedern
CSS-Styleguide
Mit div-Containern können Sie eine Webseite in logische Bereiche gliedern und übersichtlich gestalten. Denkbare Bereiche sind
Über den id-Parameter geben Sie jedem Container einen eindeutigen Namen. Innerhalb der Abschnitte lassen sich beliebige HTML-Elemente einfügen. Es macht dabei keinen Unterschied, ob Sie das Layout der Webseite wie bisher üblich mit Tabellen anlegen oder ob Sie die div-Container mit CSS auf der Seite positionieren.
Möchten Sie beispielsweise die Hyperlinks im Hauptmenü anders formatieren als die in den übrigen Abschnitten, so schachteln Sie die CSS-Formate auf die folgende Weise:
/*Formate für Hauptmenü*/
#hauptmenue a
(text-decoration:none;
color:#003399;}
Im Bereich hauptmenue werden Verweise nun ohne Unterstreichung dargestellt. Schreiben Sie zur besseren Übersicht sämtliche Formate für einen Container unmittelbar hintereinander.
Haben Sie den Styleguide komplett in CSS-Befehle umgesetzt, dann verknüpfen Sie sämtliche Seiten Ihres Angebots mit der externen CSS-Datei.
<!?
@import url(layout.css);
//?>
Geben Sie dazu diese Codezeilen in den head-Bereich des HTML-Dokuments ein.
Alle Listings zum Workshop finden Sie auf der Heft-DVD sowie unter listings.internet-pro.de.