Um sich das Leben als WebDesigner so einfach wie möglich zu machen, ist es unumgänglich sich an Ordnung zu gewöhnen. Jede Webseite hat ihre Ordnung / ihre Struktur. Diese Struktur zu vereinfachen ermöglicht CSS. Es nutzt aber die einfachste Struktur mittels XHTML nichts, wenn dann die benötigte Style.css ungeordnet oder unübersichtlich angelegt ist.

Struktur einer Webseite

Jeder WebDesigner hat “seine” Ordnung in der Style.css. Ich stelle hier die meine vor und erkläre auch wieso ich diese Art des Überblicks in einer Style.css gerne mag und dann auch nichts dabei vergesse. Am Schluss des Artikels gibt es eine Muster Style.css und die dazugehörige XHTML Struktur als Download für jeden der mag. Erklärungen warum was wann wieso so und nicht anders gestaltet wurde, gebe ich in diesem Artikel jedoch nicht durchgängig.

Der Screenshot zeigt ein klassisches zweispaltiges Layout. Oben die Navigation, dann der Inhalt /content rechts daneben das Menü oder die Sidebar und unten die Fußzeile oder den Footer.

Struktur der Webseite im Cascading Style Sheet übernehmen

Für mich hat es sich bewährt, wenn ich mit der Stuktur in der Style.css anfange und mir selber eine Erinnerungsstütze am Anfang einbaue.

Dies sieht dann so aus:

/* 
muster style zweispaltiges layout flexible breit
author: mts
author uri:http://www.webdesign-in.de/
*/
html {	margin: 0, padding: 0;}
body {}
li {	}
/*--structure two columns flexible width for ie css between html head --*/
.navaussen {}
.postaussen {}
.footeraussen {}
.navinnen,.postinnen,  .footerinnen {	}
.clear {}
/*--content--*/
.content {}
/*--sidebar--*/
.sidebar {}

Achtung: Wie ich diese Struktur gestaltet habe steht in der Muster Style.css drin. Hier würde es den Rahmen der Lesbarkeit sprengen.

Zwischen Schrägstrich und Stern stehen Kommentare in einer Style.css. Die ermöglichen, dass man schnell was findet und strukturieren gut. Ich nutze sie gerne, aber nicht im Übermaß. So wie ich gerne Schubladen nutze, aber dennoch nicht jedes Wäschestück einzeln seine Schublade hat.

Html und body werden gerne und oft als Gestaltungselement vergessen. Nutzt man die, kann man sich ziemlich häufig ein weiteres Div ersparen.

Browservorgaben zurückstellen

Die Listenelemente (li) mag ich anders gestalten als von den Browsern vorgegeben, daher stelle ich sie zurück. Genauso mit margin, padding, das erspart einem dies jedes Mal zu wiederholen. Wer sich mehr mit den Browservorgaben beschäftigen mag den verweise ich gerne zu Erich Meyerweb. Er hat fast alle XHTML Elemente zurückgestellt Reset Reloaded. Dies ermöglicht bei der Gestaltung mehr, doch sollte man dann CSS ziemlich gut können.

All over the world oder HTML Tags der Reihe nach aufzählen

Welcher WebDesigner hat nicht schon mal auf den HTML Tag i oder em vergessen. Und – ach ja -select und caption gibt es ja auch.

Damit mir dies nicht zuoft passiert zähle ich die häufigst gebrauchten HTML Tags einfach auf. Dies sieht in meiner Style.css dann so aus:

/*--all over the world--*/
html, body {	font: 0.9em/1.4em "Gill Sans MT", "Gill sans", "Trebuchet ms", sans-serif;}
h1 {}
h2 {}
h3 {}
usw... alle anderen im Musterdownload

Ich vergebe eine generelle Schriftgröße, generellen Linienabstand und gib dann die Schriften an. Dies gilt solange, solange ich bei einem Element nichts anderes definiere. Erspart Arbeit und ständig dran denken.

Links – die Verweise – gleich gestalten

Ein Besucher findet relativ rasch das System einer Webseite heraus, wenn sie eines hat. Daher sollten die Links als solche erkennbar sein. Ausnahmen sollten auch einem System folgen. So definiere ich zuerst für alle Links (a) und wenn nötig Ausnahmen extra.

/*--for all links--*/
a {}
a:link {}
a:visited {}
a:link:focus {}
a:link:hover {}
a:visited:hover {}
a:link:active {}
a:visited:active {}

Bilder als Links

Genauso gehe ich vor, wenn es daran geht Bilder als Links zu gestalten.

/*--images as a link--*/
a img {}
a:link img {}
a:visited img {}
a:link:active img, a:visited:active img {}

Farbe, Überschriften, Schriftgröße, Listen und mehr geben.

Dem Inhalt (content) der Sidebar und dem Footer einzeln aufzählen und dabei einiges an Gestaltungsmöglichkeiten vorgeben.

/*--lists headlines colors images  content--*/
.content ol {}
.content ol li {}
.content  ul {}
.content ul li {}
.content img {}
.content h3 {}
/*--lists fonts colors images headlines sidebar--*/
.sidebar {}
.sidebar p {}
.sidebar ul {}
.sidebar ul ul {}
.sidebar ul li {}
.sidebar ul li ul li {}
.sidebar ul li img {}
.sidebar ul li ul li img {}
.sidebar ul li a img {}
.sidebar ul li ul li a img {}
.sidebar ul li h3 {}
/*--lists fonts colors images headlines footer--*/
.footerinnen {}
.footerinnen p {}
.footerinnen img {}
.footerinnen a img {}
.footerinnen ul {}
.footerinnen ul li {}
.footerinnen ul li h3 {}

Necessary – das meist auch noch nötige einzeln aufzählen

Irgendwann vergibt man eine class left, center, right, oder braucht eine Navigation.

/*--necessary--*/
.navigate {}
.left {}
.right {}
.center {}
img .left {}
img .right {}
img .center {}

Mit dieser Struktur in meiner Style.css vergesse ich eben so schnell nichts und ich habe genug Möglichkeiten die Gestaltung auszubauen indem ich die Cascade der Cascading Style Sheets ausnutze. :zwinker:

weiterführende Links zu CSS

• Reset Reloaded
• Links und die Möglichkeit ihrer Darstellung
• Probleme mit der Listengestaltung im IE
• Cascading Style Sheets Level 2 in deutsch
• CSS Box Model in deutsch

Muster style.css und Muster index.html

Donwload bei Klick auf die Schachtel