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

Aktuelles Heft

Infoblätter
Rubriken
Termine
Doc K!
Register A-Z

Allgemeines

Erste Hilfe
Links

Bestellen

FAQ

Kontakt

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

a:link		Beschreibung des Links
a:visited		Beschreibung des besuchten Links.
a:hover		Beschreibung des Links beim Überfahren mit der Maus
a:aktive		Beschreibung des aktiven links
color:		Farbe
font-family:		Schrift Familie
font-weight:		Schrift Stärke Bold=fett lighter=leichter 100 - 900; 400=normal; 700=fett
font-size		Schriftgröße
line-height:		Zeilenhöhe
font-stretch:		Laufweite ultra-condensed=extrastark gedrängt extra-condensed=stark gedrängt condensed=gedrängt semi-condensed=halb gedrängt normal semi-expanded=halb geweitet expanded=geweitet extra-expanded=stark geweitet ultra-expanded=extrastark geweitet narrower=schmaler wider=weiter
font-style:		Stil italic=kursiv oblique=schräg
text-decoration:		Textauszeichnung none=keine, underline=unterstrichen line-through=durchgestrichen overline=Strich über dem Link blink=blinkend
border:		solid=durchgezogen dashed=gestrichelt dotted=gepunktet double=doppelt durchgezogen groove=Rille ridge=Wulst inset=innen outset=außen
margin:		Außenabstand Beispiel: margin: 2pt
padding:		Innenabstand Beispiel: padding: 4pt
background-image:		Hintergrundgrafik Beispiel: background-image: url("grafik.jpg")
background-color:		Hintergrundfarbe
background-repeat:		Hintergrund Wiederholung no-repeat=nicht wiederholen repeat=wiederholen repeat-x=horizontal wiederholen repeat-y=vertikal wiederholen
background-attachment:		scroll=Bildlauf fixed=fest
list-style-type:		Aufzählungszeichen none=keins disc=punkt circle=kreis square=quadrat decimal=Dezimalstelle lower-roman=klein römisch upper-roman=groß römisch lower-alpha=Kleinbuchstaben upper-alpha=Großbuchstaben lower-latin=klein lateinisch upper-latin=groß lateinisch
display:		Anzeige block=Block list-item=Listenelement inline=Inline
list-style-position:		Position des Aufzählungszeichens inside=innerhalb outside=außerhalb
width:		Breite

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 }

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 Warlords Seite. Diese Seiten sind mit Flash erstellt worden. Der Nachteil ist, 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. Bei Einsatz dieser Variante sollte also Grundsätzlich über eine Alternative nachgedacht werden. Beispiel für eine Navigationsleiste mit Schaltflächen sehen Sie auf der linken Seite, hier hört man zusätzlich beim Drücken des Buttons einen Sound.

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.

Startseite

Kontakt

Impressum

Letzte Aktualisierung: Sonntag 23.12.2007