Im folgenden gibt es einige Auszüge aus dem Tutorial, welches aus einer pdf-Datei und einer Reihe von begleitenden Quelltexten besteht. Den Link zum Download findet man hier und am Ende.

Download: http://www.der-webdesigner.net/downloads/scripts/66.html

• Navigationsstruktur und -ausrichtung


• Projektanalyse


• Grafische Grundsätze


• Beschriftung der Links: Grafik oder Text?


• Usability


• Navigation auf Abwegen: Von "Related Content" bis "Breadcrumbs"


• Theorie: Dropdowns mit Flash oder JavaScript


• Ein Design slicen - Von der Grafik zur Navigaton


• Dropdown-Menüs mit CSS


• CSS Magie - Dropdown für den IE 5 und 6


• Sliding Doors


• Linksammlung


• Inspirationen

Die Navigation einer Website ist das zentrale Objekt. Es macht dabei intensiven Gebrauch von derjenigen Funktion, die das Internet erst so erfolgreich gemacht hat: dem Hyperlink.
Hat man sie früher meistens unterstrichen und in grellem Blau vorgefunden, so sind sie heute, gerade in der Navigation, weitaus raffinierter gestaltet. In diesem Tutorial möchte ich beschreiben, wie man eine moderne Navigation mit HTML und CSS umsetzt. Dazu gehört das Designen der Grafik, die Semantik,  die technische Umsetzung, die richtige Integration in die Website und Gestaltungs- und Funktionsvarianten.
Im Gegensatz zu vielen anderen Tutorials im Netz ist dieses nicht immer linear aufgebaut. Das bedeutet, dass nicht der schnellste oder kürzeste Weg zum Ziel erklärt wird, sondern dass die Schritte so aufeinander folgen, wie man sie ausführen würde, wenn man selber ohne Anleitung arbeiten würde. Das hat auch zur Folge, dass Sie während des Tutorials zum Beispiel  auf Fehler in der Darstellung stoßen werden, die dann erklärt und behoben werden.
Ich hoffe, Ihnen dabei ein tieferes Verständnis für das Thema geben zu können und Ihnen zeigen zu können, warum der Code so aussieht, wie er aussieht und nicht anders.
Ich wünsche Ihnen nun viel Spaß und vor allem Erfolg mit diesem Tutorial.


Eine Navigation kann nach verschieden Typen eingeordnet werden. Die wichtigsten sind dabei flach und tief, horizontal und vertikal. Es ist wichtig, sich vor dem grafischen Entwurf im Klaren darüber zu sein, wie die Navigation aussehen soll.

Eine Navigation lässt sich in die Kategorien tief oder flach einordnen. Um die Kategorien  flach und tief zu verstehen, muss man den genauen Aufbau einer Navigation betrachten.
Wie weiter oben beschrieben, kann eine Website in verschiedene Navigationsebenen unterteilt werden. Jeder Klick, der notwendig ist, um eine Seite zu erreichen, erstellt automatisch eine neue Unterebene.
2.3.1.1 -  Flach
Im folgenden Diagramm ist eine Website mit mehreren  Unterseiten dargestellt. Jede Linie stellt einen Link zu einer Seite dar. Wenn man die Seite in einem solchen Diagramm dargestellt sieht, wird schnell klar, was mit einer flachen Navigationsstruktur gemeint ist.



Vorteile

• Man kommt mit wenigen Klicks zum Ziel.


• Es gibt weniger Probleme mit der Orientierung. Man weiß, wo man sich befindet.


• Auch für ältere User geeignet, da man die Struktur der Website nicht so gut verstehen muss, um sich zurecht zu finden.


• SEO freundlich

Nachteile

• Insbesondere auf der Startseite kann es zu langen Linklisten kommen, die zu einer geringeren Übersichtlichkeit führen. Das Navigieren dauert länger.


• Lässt sich horzontal schlecht realisieren.

Die ersten Schritte bei der Navigationserstellung finden mit HTML statt. Zunächst erzeugen wir eine ungeordnete Liste mit je einem Eintrag für jeden Navigationspunkt in einem neuen Dokument. Der Name des Menüpunkts wird zwischen die Tags geschrieben. Das Ganze sollte wie folgt aussehen:
Code:

Damit aus den Listenpunkten Hyperlinks werden, wird der Anker-Tag um die Bezeichnung herum eingefügt. Zusätzlich müssen die Attribute "title" und "href" angegeben werden. Wenn der Pfad des Links noch unbekannt ist, kann als Platzhalter die Raute (#) eingefügt werden. Danach sieht der Quellcode z.B. so aus:
Code:

Wenn für die Platzhalterlinks noch richtige Pfade angegeben werden, dann kann diese Navigation theoretisch schon benutzt werden. Sie sieht jedoch sehr unschön aus und der Nutzer ist in der heutigen Zeit, in der man schon vom Web 2.0 redet, verwöhnt. Er erwartet mehr. Deshalb werden die weiteren Änderungen mit CSS vorgenommen. Dazu muss nur noch eine kleine Vorbereitung getroffen werden...


Das Tutorial mit Quelltexten: http://www.der-webdesigner.net/downloads/scripts/66.html


Alles rund um eine Navigation - Umgesetzt mit HTML und CSS. Es wird die Erstellung verschiedener Menütypen und deren Besonderheiten erklärt. Außerdem gibt ein großer Theorie Abschnitt nützliche Zusatzinformationen. Twittern

>> Allgemeine Fragen oder Probleme mit dem Tutorial? Hier gehts zum Forum!