W19 Hypertext-Seiten erstellen II: Layout                   zurück zu GLIK 2 - HTML                    GLIK 2 - Eingangsseite

---

Voraussetzungen

W17 Was ist HTML?

W18 Eine Hypertext-Seite erstellen I: Elemente

Layout von Hypertext-Seiten

• Grundsätzlich gelten für das Layout von Hypertext-Seiten dieselben Regeln wie für das Layout von Druckseiten: klarer, einfacher Aufbau (evtl. in Spalten), visuelle Kontraste, aber nicht zu viele verschiedene Elemente:

 

 
 
 


Grafik: Yale Web Style Guide


Grafik: Yale Web Style Guide
 

• Der Umfang einer Seite sollte die Länge von zwei A4-Seiten nicht überschreiten, sonst wird die Ladezeit für den Benutzer u.U. zu lang, besonders dann, wenn noch grafische Elemente auf der Seite vorhanden sind. Längere Dokumente sollten also nach Möglichkeit in mehrere Seiten (= HTML-Dateien, W18) aufgeteilt werden. Lässt sich ein Dokument nicht aufteilen, so sollte beim Hyper-Link, der auf es verweist, die Dateigrösse angegeben oder das Dokument in einer komprimierten Form (A3) auf dem Server abgelegt werden.
• Die Seite, welche als Homepage dient, soll nicht länger als eine A4-Seite sein, bessser kürzer. Die Ladezeit für die Homepage sollte so kurz wie immer möglich sein. Sie darf also auf keinen Fall grosse Grafikdateien enthalten.
• Die wichtigsten Informationen, die eine Seite enthält, sollten immer im ersten Drittel stehen, da dieser Teil sicher auf dem Monitor des Benutzers erscheint. Viele vor allem ungeübte Benutzer schauen sich den unteren Teil einer Seite gar nie an.

 

 
 
 



• Eine Seite, welche Indexfunktion hat (Homepage, Inhaltsverzeichnisse, Listen, Übersichten usw.) sollte im ersten Drittel ausschliesslich Links aufweisen, welche auf weitere Seiten des Projekts verweisen. Der Benutzer soll ja nicht gleich wieder weggeschickt werden. Im zweiten Drittel stehen Links auf speziell ausgewählte fachspezifische Seiten im WWW und im letzten Drittel der Seite können Links von allgemeinerem Interesse stehen (z.B. WWW-Verzeichnisse, Suchmaschinen usw.).
• Grosse Bilder, Grafiken, Tabellen, Karten, Movies usw. sollten nach Möglichkeit nicht im Textdokument eingebettet werden, sondern Links im Text sollten auf sie verweisen. Als Links können z.B. Stellvertreter der Grafikdateien (sog. Thumbnails) dienen. Jeder Benutzer kann so selbst entscheiden, welche grafischen Elemente er sich anschauen will und ist nicht gezwungen, eine grosse Datei herunterzuladen, die er evtl. gar nicht braucht.

Anwendungen

• W20 Voraussetzungen: Was alles ist zu beachten, wenn wir ein Projekt durchführen möchten?
• W21 Hypertext-Projekt I: Ziele: Wen wollen wir mit unserem Projekt ansprechen?
• W22 Hypertext-Projekt II: Site-Design: Wie stellen wir unsere Projekte Lernenden und Lehrenden zur Verfügung?

Aufgabe

Beurteilen Sie die Qualität der folgenden Seiten nach formalen Kriterien:

1. School of Advanced Studies, University of London (L260)
2. Schul-Server der ETH Zürich (L77)
3. Swissair Homepage (L262)
4. Yahoo Wettervorhersage für London (L263)

Weiterführende Informationen

online

• Das beste deutschsprachige Handbuch zu allen Fragen im Zusammenhang mit Hypertext-, HTML- und WWW-Publikation hat Stefan Münz verfasst: Münz, S.; Nefzger, W.: HTML Referenz 3.0. Feldkirchen: Franzis, 1996. Die CD ist zwar für Windows 3.1, die HTML-Seiten lassen sich jedoch auch auf Mac benutzen. Das ganze Kompendium ist auch als Hypertext-Projekt online und sogar zum Herunterladen erhältlich: HTML-Dateien selbst erstellen (L242).
• J. Fisler, Wie erstelle ich eine WWW-Seite? (L244)
• Yale Web Style Guide: Interface-Design (L253)
• Yale Web Style Guide: Page-Design (L254)
• HTML Einführungen (grosse Online-Quellensammlung) (L246)
• Schweiz. Texterverband: 100 Links ins Internet (L256)
• Webschrift. Forum für Designer und Autoren im WWW (L257)
• Hypertext Resources (Eastgate Storyspace) (L258)
• Paul de Bra, Hypermedia Structures and Systems (Course) (L259)

Druckmedien

• Lemay, Laura: Web-Publishing mit HTML: Die eigene Homepage im World Wide Web erstellen. Haar bei München: Markt und Technik, 1995.
• Ramm, Frederick: Recherchieren und publizieren im World Wide Web Braunschweig: Vieweg, 1995.
• Apitz, Rico: Wissenschaftliches Arbeiten im World Wide Web: HTML - Style-Guide - Sicherheit, Bonn: Addison-Wesley, 1996.
• Nielsen, Jakob: Multimedia, Hypertext und Internet, Braunschweig: Vieweg, 1996.
• Lehmann, Michael (Hrsg.): Internet- und Multimediarecht (Cyberlaw), Stuttgart: Schäffer-Pöschel, 1997.
• Velthoven, Willem; Seijdel, Jorinde: Multimedia Graphics: the international sourcebook of interactive screendesign, Mainz: Schmidt, 1996.