Startseite

Projektstudie: Internet-Styleguide

Seitenstruktur

Die hier beschriebene Seitenstruktur ist auf alle Arten von Webseiten anwendbar. Sie eignet sich für Informationsseiten ebenso wie für Webanwendungen.

<div id="page">

Alte Browser ließen es nicht zu, dem <body> eine Breite unter 100 % zu geben bzw. interpretierten die entsprechende CSS-Anweisung nicht.
Um Webseiten trotzdem variabel darstellen, insbesondere zentrieren zu können, musste der komplette Inhalt des <body> mit einem Container (<div id="page">) umschlossen werden. Dieser Container ließ sich dann mittels Stylesheet (CSS) in der Breite verringern und auf dem Bildschirm zentrieren.

Page

Mit aktuellen Browsern besteht dieses Problem nicht mehr. <div id="page"> ist hinfällig.

Div-Container

Div-Container sind semantisch nichtssagend und mit den Möglichkeiten von HTML 5 im Prinzip überflüssig.

So wie der französische Zeitungsverleger Georges Clemenceau seine Journalisten anwies:
»Bevor Sie ein Adjektiv hinschreiben, kommen Sie zu mir in den dritten Stock und fragen, ob es nötig ist.«, – so sage ich:
Bevor Sie ein <div> benutzen, kommen Sie zu mir nach Dortmund und fragen, ob es nötig ist.

 

Der Header ist der Kopf aller Webseiten.

Links steht das Unternehmenslogo, das gleichzeitg als Sprungmarke zur Startseite dient. Rechts im Header wird ggf. das Eingabefeld für eine Suche platziert.

Header

In diesem Container ist die Hauptnavigation untergebracht, die vertikal oder horizontal ausgerichtet sein kann. Unter oder neben der Hauptnavigation können Ergänzungen platziert werden wie zum Beispiel eine Auswahl für verschiedene Schriftgrößen.

Nav

<main>

»Main« nimmt alle Inhalte einer Webseite auf: Texte, Formulare usw.

Der Inhalt von »Main« wird nach Bedarf mit den entsprechenden HTML-Tags strukturiert, z. B. <section>, <fieldset>, <figure>.

Main
 

<aside>

Die Sidebar beinhaltet ergänzende Informationen zum Hauptinhalt (»Main«).

Aside

Die Fußzeile empfinden Nutzer als unwichtigstes Seitenelement; deshalb sollten darin nur nebensächliche Informationen untergebracht werden.

Footer
 

Quelltext und CSS

Die beschriebene Seitenstruktur ergibt folgenden Quelltext - unabhängig davon, ob die Navigation horizontal oder vertikal angeordnet werden soll: 


<body>
   <header> </header>
   <nav>    </nav>
   <main>   </main>
   <aside>  </aside>
   <footer> </footer>
</body>

Die Darstellung auf dem Bildschirm entsprechend den obigen Abbildungen wird mit folgendem CSS erreicht:


body
{ 
	margin: 0px auto; 
	width: 1000px;
}
		 
nav /* bei vertikaler Ausrichtung */
{ 
	display: inline-block;
	width: 150px;
}
		 
main
{ 
	display: inline-block;
	width: 700px;
}
		  
aside
{
	display: inline-block;			 	
	width: 150px;
}
		   
footer /* für immer sichtbaren Footer */
{
	margin-top: 10px;
	position: fixed;
	right: 0;
	bottom: 0;
	left: 0;
}