Uni-Logo
Sections
You are here: Home Service A-Z Web Style Guide Struktur, Aufbau, Raster
Document Actions

Web Style Guide

Struktur, Aufbau, Raster

last modified Dec 15, 2011
 
 

Exemplarischer Aufbau einer Seite

startseite-struktur-thumb.png

Spaltenraster

4-Spaltenraster ohne Marginalspalte:
rastervariante 4

3-Spaltenraster mit Marginalspalte:
rastervariante 3+1

 

 Für das Spaltenraster werden zwei Aufteilungen empfohlen:

  • 4-Spaltenraster ohne Marginalspalte
  • 3-Spaltenraster mit Marginalspalte

 

Texte, Tabellen, Formulare, Bilder und Graphiken sollten am Spaltenraster ausgerichtet sein. Insbesondere für Überschriften, Tabellen und größere Abbildungen, aber auch zur Anordnung und freien Gestaltung der Seiteninhalte können mehrere Spalten zusammengefasst werden (z.B. 4, 2+2, 1+3, 3+1 beim 4-Spaltenraster oder 3, 1+2, 2+1 beim 3-Spaltenraster mit Marginalspalte)

Die Marginalspalte enthält Informationen, die den eigentlichen Inhalt ergänzen. Neben aktuellen Nachrichten und Terminen kann dies eine Auflistung weiterführender Links, die Angabe von Kontaktmöglichkeiten, die direkte Verlinkung zu Sonderseiten oder die Abbildung von Graphiken und Bannern sein.

 

Seitenvermaßung

Seitenvermaßung für ein 3-Spaltenraster mit Marginalspalte:

startseite-raster-thumb.png

Hinweis: Das 4-Spaltenraster unterscheidet sich zum 3-Spaltenraster mit Marginalspalte nur in der Breite und Positionierung der 4. Spalte. Diese ist im Gegensatz zur Marginalspalte wie die ersten drei Spalten ebenfalls 176px breit und hat einen rechten und linken Abstand von 3px.

Personal tools