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.
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.
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
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 }
Bitte klicken Sie hier um sich das Beispiel anzeigen zu lassen
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.
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. 
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.
| Google Internet Explorer Firefox Safari trend Browser favoriten Domainrichtlinien Datenschutz |
Möchte man "nur" eine Wolke aus Stichworten, so empfehle ich diese mit Wordle ( http://www.wordle.net/create) zu erstellen. Hier gibt es vielfältige Formatierungsmöglichkeiten, ich wünsche viel Spaß!
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