Modul 4: Webangebotsoptik, Inhalte und Navigation

Modul 4.4: Wechselwirkungen: Beziehungen zwischen Inhalt , Layout und Navigation

Modul 4.4.3: Navigationsstruktur und -Navigations-/Layouttypen

Die Vorkapitel haben Ihnen sicher gezeigt, dass Inhaltstyp und Gesamtstruktur der Website Navigationstypen und Navigationsstruktur beeinflussen. Bevor wir im nächsten Modul zu geowissenschaftlichen Beispielen kommen, hier nun einige Möglichkeiten, wie Sie die Verbindung von Inhalt, Layout und Zugriff (d.h. Navigation) anpacken könnten.

Wir werden hier keine fertigen Layouts vorstellen, die Sie einfach ausfüllen können. Derartiges finden Sie an vielen Stellen im Internet. Wichtig ist es, dass Sie die entsprechenden Überlegungen anstellen, um Ihre Site richtig strukturieren zu können. Wir werden auch noch keine Buttons und sonstige Layouts verwenden, sondern erst einmal rein textbasiert arbeiten, damit Sie den html-Code gut verfolgen können. Es geht also in diesem Modul nicht um optisch möglichst ansprechende Seiten, sondern um die für Ihre Site bestmögliche Wahl einer Grund- und Navigationsstruktur sowie des generellen Layouttyps. Der Rest in nach der richtigen Vorüberlegung jeweils individuell umsetzbar.

Wir werden dazu einige Beispiele in einem Extra-Fenster öffnen, welches Sie bis zum Ende dieses Kapitels stehen lassen können, dann aber wieder schließen sollten.

Tipp für Kursteilnehmer München (mit p_w): loggen Sie sich zusätzlich per ftp-client ein und holen sich unter ftp://141.84.51.10/ressourcen_nonpublic/b_fortgeschritten_nonpubl/4_4_navigation diese Übungsbeispiele auf Ihren eigenen Rechner, um den html-Code und die Navigationsstruktur zu verstehen. Ergänzen Sie die Seiten mit eigenem Text und besserem Layout (incl. ggf. Grafiken für die Links)

(Wenn Sie den Internet-Explorer verwenden, können Sie sich auch von hier aus in den ftp-Server einloggen. Schließen Sie nach dem Download aber wieder das Fenster):

---

Beispiel 1-4: Site, bestehend aus nur wenigen Unterkapiteln, z.B. Online-Artikel mit verschiedenen Kapiteln. Soll sowohl linear, als auch hierarchisch (also Direktzugriff auf Unterkapitel) lesbar sein.

Beispiel 1: Eingangsseite mit Intro, weitere Seiten mit Kapitel-Navigation am Top (lprobieren Sie die kleine Test-Site aus und lassen danach das Popup-Fenster geöffnet)

Erläuterung der wesentlichen Navigationsmerkmale:

• Auf allen Seiten steht oben eine Inhalts-Sprungleiste, mit der die einzelnen Kapitel angesprungen werden können. Statt Kap 1, 2 etc. wurden inhaltsrelevante Bezeichungen gewählt
• Die notwendige Kenntnis über Position innerhalb der Site ist hier durch Fettdruck und Fehlen eines Links jeweils gekennzeichnet.
• Der Hinweis zu "more info" erscheint erst auf der Zusammenfassung, um den Besucher nicht vorzeitig zu verleiten, die Seite zu verlassen.
• Bei der Zusammenfassung wurde die Sprungleiste verkürzt. Man könnte nochmals zurück zum Inhalt (ist aber vielleicht unwahrscheinlich). Man hätte aber auch die komplette Sprungleiste behalten können.
• auf den meisten Seiten ist auch unten noch ein Vorwärts-Rückwärts-Mechanismus. Besser als vorwärts-rückwärts anzugeben, ist es das jeweilige Thema zu formulieren.
• ganz unten ist jeweils ein Link, der das Verlassen der Site ermöglicht und vielleicht zu einer Übersichtsseite von Ihren Projekten oder zur Homepage Ihrer Institution führt.

• Wegen der geringen Zahl von Dateien wurde nur eine flache Hierarchie angelegt. Alle Dateien befinden sich in einem Ordner (siehe Abbildung)

Weitere technische Hinweise:

Man hätte das Inhaltsverzeichnis auf der Eingangsseite auch weglassen können, hätte dann aber eine eigene Inhaltsseite machen müssen.
Wäre die Inhaltssprungleiste am Top der Seite breiter, hätte man sie unbedingt in eine Tabelle mit fester Breite packen müssen, damit es keinen ungewollten Umbruch gibt. Besser wären natürlich entsprechende Grafiken als Buttons, die dann aber auch in eine Tabelle mit border = 0 gepackt würden.
Um das schmale Inhaltsverzeichnis zu zentrieren, aber die Punkteliste gleichzeitig linksbündig zu gestalten, war es notwendig, eine schmale Tabelle (nur eine Zelle) einzurichten, innerhalb dieser den Text linksbündig zu gestalten, die Tabelle selbst aber zu zentrieren. Normalerweise würde man den Rand mit border=0 unsichtbar machen, ich wollte aber die Technik veranschaulichen.
auf der Seite Zusammenfassung wurde zur Layoutgestaltung wieder eine Tabelle, diesmal mit unsichtbarem Rand verwendet, um die mehr Info-Information an dieser Stelle zu platzieren.

Optische Verbesserungsmöglichkeiten (Auswahl):

Navigationselemente als Bildchen (buttons)
Navigationsleiste farbig hinterlegen (z.B. als Tabellenfarbe)
Aufteilung des Hauptteils durch Tabellen mit unsichtbarem Rand, dadurch Strukturierung Anordnung von Text und Bildern
Einbau eines Logos Ihrer Organisation.
Wiedererkennbares Layout z.B. durch sehr unaufdringliches Hintergrundbild oder Hintergrundfarbe.
und vieles mehr.....

Übung 1: Überlegen Sie sich die html-code-Struktur der Site, insbesondere dabei die Link-Navigation. Sehen Sie sich dazu den Quellcode der jeweiligen Seiten im Browser an (unter Menu Ansicht/Quellcode). Sie können dann auch auch die Dateien auf Ihre Festplatte speichern (im Browsermenu Datei/speichern unter...) und mit dem Composer oder einem anderen html-Editor durchsehen.
Münchner Kursteilnehmer: Laden Sie sich wie oben beschrieben die einzelnen Dateien auf einen Satz auf ihre Festplatte

Lassen Sie nach wie vor das Popup-Fenster offen.

---

Beispiel 2: Site wie oben, nun jedoch mit weiteren Subkategorien. Nehmen wir an, wir haben nun zu jedem inhaltlichen Kapitel drei Unterkapitel. Sehen Sie sich meinen einfachen Navigationsvorschlag an:

Was hat sich geändert?

wir haben nun eine extra Intro-seite, erst danach kommt man zum Inhaltsverzeichnis (je nach Geschmack so machen oder auch weglassen, gibt einen Klick mehr zum Aufsuchen, aber vielleicht eine übersichtlichere Intro)

Bei den Kapiteln 1-3 sind jeweils noch eine Submenuleiste dazu gekommen. Die jeweilige Position in der Site wird durch besondere Farbe gekennzeichnet. Die Inhaltsseite hat zudem noch eine weitere Einzelfarbe.

von der Technik her wurde eine dreireihige Tabelle ohne Rand verwendet. Die mittlere Reihe dient nur als Abstandshalter zwischen dem Hauptmenu und dem Submenu.
Tipp: die Hintergrundfarbe einer leeren Tabellenzelle erscheint in den meisten Browsern nur, wenn ein <br> tag oder ein festes Leerzeichen (code: &nbsp; heißt wohl nobreakspace) eingefügt wird.

Insgesamt hat sich die Dateizahl nun von acht (bei Beispiel 1) auf 15 erhöht (noch ohne jede Abbildung). Dadurch wird die Struktur bereits unübersichtlich und ich habe deshalb Unterordner angelegt. Die Sitestruktur sieht nun folgendermaßen aus (s. Abb. rechts).

Tipp: In nebenstehendem Bild sehen Sie, dass die Unterordner-Struktur genau der Inhaltsstruktur der Site entspricht. Zusätzliche Übersichtlichkeit wurde folgendermaßen erreicht:

Vergeben Sie sinnvolle Ordner- und Dateinamen. Ansonsten verlieren Sie bei komplexen Sites schnell den Überblick.

Unterordnernamen beginnen im nebenstehenden Beispiel mit Zahlen. Dadurch werden diese bei alphabetischer Anzeige sinngemäß richtig geordnet (Vergangenheit zuerst, zukunft zuletzt).

die Unterkapitel können wiederum via geigneter Namenswahl (z.B. Beginn wieder mit 1,2,3 oder mit a_, b_, c_ gewählt werden können) sinnvoll untergliedert werden. Hier funktionierte es auch durch _alt, _mittel und _young innerhalb des Namens. Dies sind natürlich nur optionale Vorschläge.

Übung 2: Überlegen Sie sich wiederum die html-code-Struktur der Seiten und der Link-Navigation. Überlegen Sie sich insbesondere, wie die Linkpfade nun aussehen müssen, da ja eine hierarchische Ordnerstruktur angelegt wurde. Sehen Sie sich dazu wieder den Quellcode der jeweiligen Seiten im Browser an (Laden Sie sich via ftp-Utility (oder bei Verwendung von Internet Explorer auch hier) den gesamten Ordner des Beispiels 2 auf Ihre Festplatte)

Popupfenster schon geschlossen? Hier wieder öffnen. Nach Gebrauch schließen.

Natürlich sind unsere Buttons noch äußerst hässlich. Im Moment geht es uns aber nur ums Prinzip. Eine Anwendung des Prinzips finden Sie z.B. auf der www.palaeo.tv - Website. Nachfolgend ein Screenshot aus dieser Navigationsleiste (Stand März.2003).

Sie können schnell ausrechnen, wieviele Buttons für ein derartiges Beispiel Sie eigentlich produzieren müssen (und dann auch noch richtig einsetzen müssen):

Die Site hat 8 Hauptkategorien und einen Home-Button (der Nautilus-Knopf). Zu jeder Hauptkategorie gibt es bis zu 9 Unterkategorien. Jede Haupt- und Unterkategorie hat jeweils einen Aktiv-Status (mit roter Schrift) sowie einen Passiv-Status.

Dies ergibt also:

8x2 (Hauptkategorien)
+8x (9x2) (Unterkategorien für alle 8 Kategorien)
+ 1 (für den Homebutton),
insgesamt: 161 Buttons

Viel Spass beim Produzieren.

Heißer Tipp: Wie Sie mit Hilfe von Hintergrundbuttons und Textbeschriftung dennoch nur 6 Knöpfe (für obiges Beispiel) oder ggf. sogar nur 3 Knöpfe produzieren müssen, erfahren Sie in Anlage 9.

---

Beispiel 3 und Übung 3: Machen Sie doch eine ähnliche Seitenstruktur, diesmal aber mit einer Navigationsleiste am linken Rand des Browserfensters. Tipp: verwenden Sie eine Tabelle für das Gesamtlayout der Seite.

Das Layout sollte in etwa so aussehen wie hier bzw. nebenstehend.

Technische Erläuterung:

• Zugrunde liegt eine Tabelle mit 100% Breite und 100 % Höhe. Die Tabelle besteht aus ursprünglich 6 Zeilen und 3 Spalten. Davon wurden etliche Zellen mit horizontal bzw. vertikal verbinden (colspan bzw. rowspan) vereint. Border und cellspacing/cellpadding sind gleich 0. Den Zellen wurden Hintergrundfarben zugegeben (ggf. wurde ein &nspbr; eingefügt, damit die Farbe auch bei leerem Inhalt erscheint). Die Seite hat zusätzlich noch die graue Hintergrundfarbe einiger Tabellenzeilen. Sie können auf den Link im Tabellenzentrum klicken, um die Tabellenstruktur zu erkennen.
• Die anderen Links funktionieren nicht, ich habe als Beispiel nur diese erste Seite angelegt, aber Sie könnten das Beispiel ja ggf. zu Ende basteln.
• Obwohl es fast so aussieht, handelt es sich nicht um eine Frame-Set-Seite. Sie müssen also wieder für jedes Unterkapitel eine Seitenkopie machen, die Inhalte, Links und Zellenfarben anpassen. Also ganz analog wie im obigen Beispiel.
• Das Ergebnis der Anzeige ist sehr unterschiedlich, je nachdem Sie es im Microsoft InternetExplorer oder im Netscape-Navigator ansehen. Letzerer zieht die Tabellenzellen sehr weit auseinander, wodurch ein unerwünschter Effekt erreicht wird. Die Eingabe einer fixen Höhe für die Zellreihen funktioniert in letzterem leider auch nicht.

Schließen Sie das Popup-Fenster wieder.

---

Beispiel 4 und 5: Nochmals dasselbe Beispiel, nun jedoch mit Frames.

Gerade wegen der oben geschilderten Layout-Schwierigkeiten kann man auch an Framesteuerung denken.

Beispiel 4 und Übung 4: Versuchen Sie eine einfache Lösung, mit direkter Verfügbarkeit aller Kapitel und Unterkapitel im Navigationsfenster mit Hilfe von Aufteilung in zwei Frames zu erreichen. Linker Frame: Navigationsmenu, rechter Frame: Inhalt

Das Ergebnis könnte so aussehen .

Erläuterung:

• Die Menüsteuerung ist nun sehr viel einfacher geworden. Die Seite Inhalt wird in den linken Frame geladen und verbleibt dort dauerhaft als Navigationselement, von dem aus alle anderen Seiten aufgerufen werden können.
• Um dennoch linear voran- bzw. zurückblättern zu können, blieben die entsprechenden Pfeillinks auf den Kapitelseiten bestehen.
• Auf den anderen Seiten konnten die Navigationselemente entfernt werden.
• Um vom Inhaltsframe auf den rechten Frame zu zielen, wurde ein base-target-Tag im Header eingeführt. Für den Link nach außen wurde dieser mit target="_top" durchbrochen.
• Für die außen zielenden Links auf der MoreInfo-Seite wurden ebenfalls ein base-target-tag im Header dieser Seite eingefügt.
  
• Die hierarchische Struktur sehen Sie auf dem nebenstehendem Bild. Die Framedefinition erfolgt auf der Seite index.html, beim Aufruf dieser Seite wird inhalt.html in den linken, intro.html in den rechten Frame geladen. Ansonsten entspricht die Struktur Beispiel 2 (die Ordnerinhalte wurden deshalb nicht aufgeklappt. Die Dateinamen in den Unterordnern sind identisch mit denen von Beispiel 2, die Inhalte wurden allerdings wie oben erläutert, angepasst.
  
  
• Fazit: Insgesamt ist Beispiel 4 mit deutlich weniger Aufwand als Beispiel 2 zu erstellen, da nicht jedesmal die Navigationsleiste angepasst werden muss. Allerdings müssen alle Targets richtig gelegt werden, ansonsten funktionieren interne und externe Links nicht richtig. Außerdem können keine Bookmarks auf die einzelnen Seiten gelegt werden (siehe nächstes Modul)
  

Beispiel 5: komplexere Lösung: mit expandierenden Kapitelmenus.

Obige Lösung kann bei Bedarf noch verfeinert werden. An folgendes kann man denken:

Manche Kapitelseiten haben einen sehr kurzen Inhalt Dadurch kommen die vorwärts-rückwärts-Pfeile v.a. bei großem Browserfenster häßlich in der Mitte der Seite zu liegen.Dieses Problem gibt es nur bei Seiten, die kürzer als ein Browserfenster sind. Lösungsvorschläge:

einfach: Vorwärts-Rückwärts-Pfeile an Top der Seite verlegen.

komplexer: alle Seiten, die in den rechten Rahmen geladen werden mit Tabellen gestalten. Dabei sollte die Tabelle eine Höhe von 100% einnehmen (Hinweis: wird leider von manchen Netscape-Versionen ignoriert).

für Beispiel 5 habe ich die Pfeile für Kapitel 1 nach oben verlegt (einfache Lösung) und für Kap. 2 Tabellenformatierung verwendet (zum Test Browserfenster unterschiedlich großziehen)



Insbesondere wenn unsere Site mehr als die angegebenen Unterpunkte hätte (z.B. gleich 6-10 Kapitel) wäre die Aufzählung aller Unterkapitel sehr unübersichtlich. Folgende Lösungen wären u.a. möglich:

Weglassen der Unterkapitelangaben in der linken Frameseite. Dadurch muss der Benutzer sich dann eben duch die jeweiligen Teilkapitel hindurchklicken

Wie oben, aber Teilkapitelverzeichnis mit Teilkapitellinks auf einer Eingangsseite (rechter Frame) zu jedem Kapitel.

wie oben, aber zusätzliche Navigationsleiste zu den Unterkapiteln jeweils oben auf den Unterkapitelseiten.

wie oben, jedoch zusätzliche Navigationsleiste in extra horizontalem Frame (z.B. am unteren Ende der Seite.

Weglassen der Unterkapitelangaben auf der linken Frameseite bei Aufruf der Seite. Klick auf die jeweiligen Kapitel expandiert aber das Menu, so dass für das jeweilige Kapitel die Unterkapitel im Inhaltsverzeichnis dazukommen. Natürlich bedeutet dies Zusatzaufwand (aber doch nicht so hoch wie z.B. für die beiden vorherigen Lösungsvorschläge), vgl. Abb. rechts: Für das Inhaltsverzeichnis ist nun nicht mehr nur eine Seite, sondern für jedes Kapitel eine weitere Inhaltsseite im linken Frame notwendig. Außerdem müssen die Targets wieder genau angepasst werden (sonst landet das Unterkapitelverzeichnis nicht im linken, sondern im rechten Frame).

Klickt man nun im linken Frame auf z.B. Kap. 2, ändert sich der linke Frame. Man muss nun nochmals z.B. auf Kap. frühe Gegenwart klicken, bis diese dann im rechten Frame aufgerufen wird.

Übung 5: können Sie dies, basierend auf den obigen Angaben und dem oben gezeigten Screenshot eines geeigneten Website-Verzeichnisses selbst erarbeiten?

Meine einfache Lösung sähe so aus.



Schöner wäre es, wenn bei Klick auf Kap. 2 sowohl das Inhaltsverzeichnis ausklappt, als auch gleichzeitig Kap. 2.1 im rechten Frame geladen wird, d.h. mit einem Linkklick zwei neue Seiten aufgerufen werden. Dies kann man mit einem einfachen JavaScript erreichen, welches wir in Teil B des Kurses erlernen.



Es gibt noch weitere Lösungen, die verhindern, dass wir zusätzliche html-Seiten für das Inhaltsverzeichnis stricken müssen (z.B. rollover-Links oder JavaScript-Klappmenus). Auch hierzu erfahren wir in Kursteil B näheres.

Bitte schließen Sie das Zusatzfenster wieder.

Übung 6: Um auf das Wesentliche zu fokussieren, verwendeten wir für obige Beispiele keinerlei Abbildungen. Erstellen Sie nun doch einige Logos (z.B. für den Link zur Homepage), bauen vielleicht ein geeignetes Hintergrundbild ein und erstellen Buttons für die Links in den jeweiligen Beispielen. Wenn Sie Vorlagen hierzu brauchen oder sich nochmals über Bildbearbeitung und Bildeinbau generell informieren wollen, gehen Sie bitte zurück zu Modul 2.4.

Hier nochmals der Link zu den Dateien via ftp:
ftp://141.84.51.10/ressourcen_nonpublic/b_fortgeschritten_nonpubl/4_4_navigation (funktioniert nur mit IE direkt, ansonsten ftp-Utility nutzen.

Weitere Navigationstypen:

Unsere kleine Übung zur Navigation und Struktur von Webseiten ist hiermit beendet. Selbstverständlich gibt es auch andere Navigationsmöglichkeiten sowohl technischer als auch inhaltlicher Art. Bei kleinen Bildschirmen könnte man an ein dauerhaft schwebendes kleines Fenster als Navigationshilfe denken. Weitere technische Möglichkeiten erlernen wir in Kursteil B.

Aber auch hinsichtlich der kognitiven Steuerung ist man nicht ausschließlich an Inhaltsverzeichnis, umgesetzt in von Bankautomaten und TV-Fernbedienungen bekannten Inhaltsknöpfen (Links, Buttons) angewiesen. So findet man u.a. immer wieder die Metapher "virtuelles Dorf" verwirklicht. Bestimmte, bildlich dargestellte Gebäude stehen für bestimmte Inhalte (z.B. Versammlungsraum für Chat; Schule für Weiterbildung; Poststelle für Feedback-Bereiche, usw), aber dies ist nicht immer selbsterklärend und kann auch zur Verwirrung führen, wenn die entsprechenden Metaphern zu weit getrieben werden. Als Geowissenschaftler könnten Sie vielleicht auch die Metapher "Erde" zur Steuerung Ihrer Website verwirklichen (Global, Regional, Meer, Land, Evolution, Katastrophen usw. Eignet sich sicherlich nicht für ne Site zum Verkauf von Gummibärchen (oder?), aber vielleicht für ein geopolitisches online-Magazin.

Auch "experimentelles" Navigationsdesign ist immer wieder im Netz zu finden. So müssen müssen Sie z.B. auf einer Website erst einmal suchen, wo es lang geht. Dies appelliert an den Spieltrieb (und die Computerspielerfahrung) der Benutzer.

Ein ganz kleines Beispiel zur "experimentellen Navigation" finden Sie durch Klick auf nebenstehendes Bild. Die technische Lösung ist sehr einfach und steht hier.

Münchner Kursteilnehmer finden die drei html-Dateien auch im ftp-Kursordner bei den obigen Beispielen. Ansonsten können Sie sich den Source-Code der über http-aufgerufenen Dateien im Browser ansehen.

Bitte wieder alle Zusatzfenster schließen!

Für wissenschaftliche Präsentationen und Inhalte sind diese Arten von Steuerungsmöglichkeiten einer Website jedoch nur sehr eingeschränkt sinnvoll.

---

Fertige Vorlagen zu Layouts incl. Navigationsvorschlägen: Viele ausgezeichnete Vorlagen zur Navigation und generellem Layout finden Sie (natürlich) bei SELFhtml unter http://selfaktuell.teamone.de/layouts/index.htm

In Anlage 9 finden Sie eine Möglichkeit zur vereinfachten Erstellung einer Button-Leiste mit vielen Unterkategorien.

Diese Layouts sind allerdings überwiegend unter Zuhilfenahme von Techniken erstellt, die wir erst in Kursteil B erlernen. Bitte beachten Sie bei Verwendung auch die Copyright-Angaben. Auch an anderen Stellen im Web finden Sie viele fertige Vorlagen.

Weitere Tipps zu Navigationslayouts an Hand von Beispiel-Sites des Kursleiters finden Sie im Anschluss an das Kapitel "Pros und Cons von Frames" im Modul 4.6.

<< Modul 4.4.2