Überblick
Page Design
Es gibt kein definiertes Gitternetzsystem, das sich gleichermaßen für alle Web-Seiten eignet. Die erste Überlegung bei einem Webprojekt sollte darin bestehen, ein grundlegendes Layout-Gitternetz für alle Seiten zu erstellen. Mit einem solchen grafischen Rückgrat legt man das Muster fest, nach dem die wichtigsten Schrift- und Illustrationsblücke regelmäßig auftreten. Außerdem legt man damit die Plazierungs- und Stilrichtlinien für wichtige Bildschirmtitel, Subtitel und Navigationslinks oder Buttons fest. Sammeln Sie zu Beginn repräsentative Beispiele Ihres Textes sowie einige Grafiken, Scandateien oder andere Illustrationsmaterialien und experimentieren Sie mit verschiedenen Anordnungen der einzelnen Elemente auf der Seite. Bei größeren Projekten läßt sich nicht vorhersagen, wie die verschiedenen Kombinationen von Text und Grafiken auf dem Bildschirm interagieren werden. Es ist jedoch ratsam, die Layout-Skizzen sowohl anhand der komplexesten als auch der einfachsten Seiten zu testen.
Es geht darum, möglichst schnell ein einheitliches, logisches Bildschirmlayout zu finden, das es Ihnen ermöglicht, auf den einzelnen Seiten rasch Text und Grafiken einzufügen, ohne daß Sie bei jeder Seite eine Denkpause einlegen und Ihren grundlegenden Gestaltungansatz neu überdenken müssen. Ohne ein fest zugrundeliegendes Design-Gitternetz wird sich das Seitenlayout Ihres Projekts an Randproblemen orientieren und so das allgemeine Design Ihres Websystems einen unzusammenhängenden und visuell verwirrenden Eindruck bekommen.
Die Analyse der Seitengitternetze
Für die Gestaltung dieses Handbuchs verwendeten wir ein bestimmtes Seitengitternetz, das auf dem oberen Rand jeder Seite ein Symbolmenü und auf dem unteren Paging Buttons enthält. Eine Scanning-Spalte am linken Seitenrand erfüllt eine doppelte Aufgabe: erstens bietet sie Platz für lokale Links zu eingebundenen Inhalten und verbessert zweitens die visuelle Verständlichkeit, weil sie den Text auf ca. 60-70 Zeichen pro Zeile verschmälert. Das folgende Diagramm zeigt die wichtigsten immer wieder vorkommenden Komponenten der Seiten unseres Handbuchs:
Beispiel eines einfachen Seitenlayouts auf TabellenbasisUm dieses Beispiel für Ihre Zwecke zu modifizieren, klicken Sie auf den Link zum Öffnen der Seite. Dann wählen Sie die Option "View source code" (Quellcode ansehen) Ihres Browsers, um den HTML-Code zu sehen und zu kopieren.
