Logo Araneae-online

Navigation

Die Navigation ist das Herzstück einer jeden Seiten mit Ihr werden die Inhalte einer Homepage zugänglich gemacht. Aus diesem Grund sollte Ihr besondere Aufmerksamkeit geschenkt werden. Die Navigationspunkte sollten eindeutige Bezeichnungen haben, die dem Besucher schnell die Inhalte, die dahinter stehen vermitteln. Außerdem sollten nicht zu viele Navigationsebenen eingebaut werden, denn ab einer bestimmten Ebene ist nicht mehr nachvollziehbar, wo man sich befindet. Wie die Navigation technisch umgesetzt werden ist auch eine Frage des persönlichen Geschmackes, wir möchten Ihnen hier einige Beispiele vorstellen.

Textbasiert

Klassisch wird die Navigation am linken Rand und im Kopf erwartet. Inzwischen habe viele Seiten zusätzliche Navigationsleisten am rechten Rand und am Seitenende. Bei der Planung einer Navigation sollten sich die Inhalte einer Kopf- und Randnavigation unterscheiden. Ein Vorschlag wäre administrative Links in den Kopf zu legen, während alle inhaltlichen am Rand postiert werden. Um so klarer eine Navigation strukturiert ist, um so besser sind die Inhalte einer Internetseite für die Besucher zugänglich. Die rein textbasierte Navigation hat den Vorteil, dass sie von allen Browsern verstanden und richtig interpretiert wird. Zusätzlich ist sie schnell und sehr flexibel zu ändern. Unterstreichungen bei den Links können unterdrückt werden. Zusätzliche Effekte wie Änderungen der Link- und Hintergrundfarbe sind mit Style Sheets möglich.

Cascading Style Sheets

Die Beschreibung der Links wird in der Style Sheet Datei vorgenommen >> Verlinkung zu einer externen Style Sheet Datei. Grundsätzlich wird zuerst das Element beschrieben (z.B. a:link, a:hover) und dann in geschweiften Klammern die Eigenschaften. Jeder Eigenschaft wird ein Wert zugeordnet. Eigenschaften+Wert werden durch ein Semikolon getrennt. Die Grundform sieht wie folgt aus: Element {Eigenschaft1: Wert1; Eigenschaft2: Wert2 }
Als Beispiel möchten wir die entsprechenden Beschreibungen für die Araneae Seiten zeigen:

a:link { color: #000099; text-decoration: none }
a:visited { text-decoration:none; color: #818181 }
a:hover { color: #FFFFFF; text-decoration: none; background-color: #000099 }
a:active { text-decoration:none; color: black }

>> Parameter

Die Style Sheets Datei

body { color: white }
p { color: black; font-size: 9pt; font-family: Verdana; font-weight: normal; line-height: 100%; font-stretch: normal; margin: 0 0 0 6px; padding: 4px }
li { text-align: left; list-style-type: none; display: block; margin: 0 0 0 6px; padding: 4px }
a:link { color: #000066; font-weight: bold; text-decoration: none; text-align: left; list-style-type: none; display: block; margin: 0; padding: 3px; width: 110px; border: dotted 1px }
a:visited { color: #000066; font-weight: bold; text-decoration: none; text-align: left; display: block; margin: 0; padding: 3px; width: 110px; border: dotted 1px }
a:hover { color: #FFFFFF; font-weight: bold; text-decoration: none; background-color: #000066; text-align: left; visibility: visible; display: block; margin: 0; padding: 3px; width: 110px; border-style: dotted solid dotted dotted; border-width: 1px 5px 1px 1px; border-color: #990000 }
a:active { color: #FFFFFF; font-weight: bold; text-decoration: none; text-align: left; display: block; margin: 0; padding: 3px; width: 110px; border: dotted 1px #000066 }

Beispiel

Bitte klicken Sie hier um sich das Beispiel anzeigen zu lassen

Grafische Navigationen

Eine andere Möglichkeit ist eine Grafik (gif oder jpg) mit den Navigationspunkten zu erstellen und dann über diese Grafik die Links zu legen. Ein Beispiel ist die Navigationsleiste auf der linken Seite. Zu beachten ist in diesem Fall, dass die Grafiken nicht zu groß sind und Änderungen nur mit einem Grafikbearbeitungsprogramm durchzuführen sind.

Flash

Eine schöne Variante ist die Navigation mit Schalflächen. Hier können Navigationspunkte farblich hervorgehoben werden, es lassen sich aufklappbare Menüs realisieren, und Schaltflächen, die Tore öffnen lassen, zwischen denen ein Text erscheint und vieles mehr. Ein Beispiel sehen Sie auf der Sie verlassen die Homepage Warlords Seite. Diese Seiten sind mit Flash erstellt worden. Der Nachteil ist die fehlende Barrierefreiheit bei älteren Versionen und dass der Betrachter den Macromedia Flash Player benötigt. Dieser wird im allgemeinen automatisch runtergeladen, wenn die Seite besucht wird. Ausnahme sind die Benutzer, bei denen der download explizit verboten wurde.

Tag-Cloud

Eine besonders schöne Variante ist die "Tag-Cloud", eine Wolke aus Stichworten, die je nach Häufigkeit größer oder kleiner formatiert sind. Die gezeigten Begriffe lassen sich anklicken. Sie verlassen die Homepage http://www.tag-cloud.de bietet den Service online an. Hier kann nach dem Eintrag einer URL von einer Seite sowohl eine flashbasierte, wie eine textbasiert "Tag-Cloud" generiert werden. Die textbasierte Version muss teilweise nachgearbeitet werden, denn es werden keine UTF-8 codierten Umlaute unterstützt, so wird aus einem ü -> ü. Die Stichworte werden auf eine eigene HTML-Seite verlinkt, z.B. Browser auf die Seite browser.html. Auf dieser Seite können alle Textstellen, in denen dieses Stichwort auftaucht, zitiert werden. Von dort aus kann man weiterklicken. Unser Beispiel einer Tag-Cloud beruht auf einer einfachen Zählung der Stichworte im Text. Besser ist es die Beiträge zu verstichworten, so werden alle Artikel, in denen es um Browser geht auch diesem Stichwort zugeordnet. Aud diese Weise werden die Tag-Clouds bei Wordpress erstellt.

Beispiel

Google Internet Explorer Firefox Safari trend Browser favoriten Domainrichtlinien Datenschutz

Möchte man "nur" eine Wolke aus Stichworten, so empfehle ich diese mit Wordle (Sie verlassen die Homepage http://www.wordle.net/create) zu erstellen. Hier gibt es vielfältige Formatierungsmöglichkeiten, ich wünsche viel Spaß!

Beispiel

Wordle Grafik des RSS-Feed

Schnellnavigation

immer beliebter wird die Schnellnavigation mit Hilfe eines Popup Menüs, mit dem man schnell zwischen verschiendenen Seiten navigieren kann. Wir haben hier beispielsweise eine Navigation für die Araneae Seiten erstellt. Die Beschriftungen können angepasst werden.




Letzte Aktualisierung: Samstag 24.10.2009