Verwende unsere Suchfunktion
Impressum und Datenschutz
Die NOF-Schule | Startseite
Zum NOF-Forum
trennlinie-im-NOF-Projekt

Ein eigenes Design mit NOF - Navigationsleiste verwenden

NOF-Navigation: Inhaltsverzeichnis

 

Einführung - Vorbereitung der Navigation

Wir haben uns schon mit der richtigen Projekt-Struktur in diesem Abschnitt beschäftigt.

Schon bei der Konzeption der Website soll vor allem der unerfahrene Anwender versuchen, eine Struktur auf maximal drei Ebenen zu erstellen.

  • Home
  • Erste Ebene: Beispiel Unternehmen, Leistungen, Referenzen, Produkte, Bildgalerie, Anfahrt, Impressum
  • Zweite Ebene: für jede Seite der ersten Ebene können weitere Seiten mit weiterführenden Informationen eingefügt werden.

Mit dieser Struktur lässt sich die Navigation übersichtlich horizontal (mit Klappleistenmenüs für Ebene 2) oder vertikal erstellen. Größere Webseiten sind mit einer vertikalen Leiste übersichtlicher , weil alle Seiten ohne Aufklappmenüs vertikal aufgelistet werden können. Vor allem für Touch Screens und sehr große Webseiten dies von großem Vorteil sein.

Diese Struktur wird automatisch in der Navigation mit der Einstellung “Site-Navigation” übernommen.

Selbstverständlich lassen sich beliebige Strukturen umsetzen. So zum Beispiel kann man separate Unternavigationen für Webseiten-Bereiche erstellen. Dies wird mit benutzerdefinierten Navigationsleisten umgesetzt und ist  mit einem deutlich größeren Aufwand verbunden.
 

Eine Navigationsleiste in NOF-einfügen - Tipps

Die Navigationsleiste wird mit Klick auf “Schaltflächen-Navigationsleiste” (Seitenansicht) in die Seite gleich nach Wunsch vertikal oder horizontal eingezeichnet:

42-NOF-Navigation-einzeichnen

Die daraus entstehende Navigationsleiste übernimmt automatisch die Einstellungen der Struktur (Site-Ansicht).

Mit Klick auf der Navigationsleiste kann man im Eigenschaftsfenster bestimmen, ob Unterseiten angezeigt werden und wie diese Unterseiten dargestellt werden sollen.

Im ersten Reiter “Struktur” geht es darum, wie die Struktur der Navigation aussehen soll:

43-NOF-Navigation-einrichten

Man muss sich hier selbst orientieren und die Einstellungen ausprobieren.

Auffällig ist die Tatsache, dass sich die Navigationsleiste verstellt, wenn man einiges ausprobiert hat, deshalb ist hier zu empfehlen, die Leiste neu einzuzeichnen wenn man den Verdacht hat, dass sie nicht mehr korrekt funktioniert.

Im zweiten Reiter “Schaltflächenstil” entscheidet man, wie die Navigation aussehen muss, in dem man für die verschiedenen Ebenen andere Buttons (Schaltflächen-Grafiken) zuweist:

44-NOF-Schaltflächen-Stil

Grafiken für die Schaltflächen erstellen und in NOF einrichten

Die Grafiken für die Schaltflächen-Ebenen werden grundsätzlich auf Design-Ansicht angelegt. Beschrieben haben wir diese Funktion im Abschnitt “Design”:

Schaltflächen definieren

Grundsätzlich werden Navigationsschaltflächen  in Design-Ansicht ausgetauscht:

14-navi-button-einbauen

Alternativ lassen sich einzelne Buttons direkt auf der Navigationsleiste austauschen und Seiten benutzerdefiniert benennen.

Einzelne Seiten mit Doppelklick aktivieren, und Grafiken austauschen. Diese Funktion ist ganz praktisch für die Umsetzung von Mousover-Effekten für einzelnen Buttons im Zusammenhang mit der benutzerdefinierten Navigation.

45-Buttons-austauschen

Die NOF-Sitenavigation - Standard - horizontal |   Klappleisten

Die horizontale Navigation wird sehr gerne im Zusammenhang mit der Klappnavigation für Unterseiten verwendet. Auch hier sollen nicht mehr als drei Ebenen (inkl. Home) in der Site-Struktur definiert sein.

Das Tutorial für diese Art von Navigation findet Ihr hier:

Tutorial horizontale Navigation mit Klappleisten
 

Die NOF-Sitenavigation - Standard - vertikal

Die klassische vertikale Navigation zeigt die Seiten der Home und ersten Ebene an. Erst beim Anklicken einer Seite der ersten Ebene werden deren Unterseiten angezeigt. Eine vierte Ebene kann als Klappmenü angezeigt werden.

Home und Erste Ebene

46-vertikale-Navigation

Weitere Unterseiten

46-Navigation-Unterseiten

Live zu sehen auf dieser Seite:

www.kuenstlerleben-in-rom.de

Sowie hier in der NOF-Schule

Weitere Einstellungen/Stil:

Für jede Ebene kann man hier die im Design-Ansicht angelegte Button-Ebene auswählen. Ebenfalls kann man hier bestimmen, ob für eine eventuell vorhanden weitere Ebene Klappleisten nach rechts ausklappen sollen:

48-Navi-Einstellungen-stil

Seiten aus der Site-Navigation ausschließen

Sollten bei einer Standard Site-Navigation einzelne Seiten ausgeschlossen werden müssen, klickt man auf Site-Ansicht unter “Seiten-Eigenschaften” auf “Seite aus der Navigation ausschließen”.

Oft bemängelter Nachteil dieser Methode: Seiten, die aus der Navigation ausgeschlossen werden, enthalten selbst keine Navigationsleiste. Hier mein Vorschlag um dieses Problem zu lösen:

Seiten aus der Navigation ausschließen:

Alle Seiten, die ausgeschlossen werden müssen, unter einer Sammelseite der zweiten Ebene gruppieren.

Diese Sammelseite “von der Navigation ausschließen” und “nicht publizieren”:

49-Seiten-ausschchliessen

50-nicht-publizieren

Jetzt werden alle darunter gruppierten Seiten aus der Standard-Navigation entfernt, dürfen aber selbst eine Navigation enthalten. Deren Navigation übernimmt die Einstellungen der Site-Navigation, oder kann benutzerdefiniert erstellt werden.

Die benutzerdefinierte Navigation

Bei bestimmten Layout-Ideen lässt sich die Navigation nicht problemlos als automatische “Site-Navigation” erstellen. Dies ist z.B. in folgenden Fällen denkbar:

  • Die Navigation enthält externe Seiten (Titel und externe URL)
  • bei einer großen Webseite werden verschiedene Navigationen für verschiedene thematische Bereiche verwendet


Einstellen der Schaltflächenleiste als “benutzerdefinierte Navigation”:

50-benutzerdefinierte-navi

Mit Klick auf “Bearbeiten” öffnet sich ein Menü für die Aufnahme einzelner Seiten in einer benutzerdefinierten Navigation.

51-benutzerdefiniert

Zusatzwissen:

Tutorial - Externe Seiten mit Titel in der Navigation aufnehmen

Die benutzerdefinierte Navigation - im Layout oder in verschiedenen Masterrahmen?

Eine benutzerdefinierte Navigation, die in verschiedenen Bereichen der Website erscheint, kann sich entweder im Layout oder in einzelnen Masterrahmen befinden.

Die Verwendung verschiedener Masterrahmen für das Projekt bedeutet, dass eine Gruppe von Seiten einen Masterrahmen teilen. Allerdings entsteht spätestens nach der Aufteilung der Website in verschiedenen Masterrahmen ein erhöhter Aufwand, denn alle Veränderungen in einzelnen Masterrahmen (Zum Beispiel Header/Kopfzeile und Footer/Fusszeile) müssen nach der Trennung auf allen Masterrahmen exakt gleich erledigt werden.

Tutorial: Einzelne Masterrahmen anlegen und zuweisen
 

Eine Navigationsleiste von einem anderem Style übernehmen

Falls wir eine fertige Navigation aus einem anderen NOF-Style übernehmen möchten, so lässt sich der gesamte Navigationsstyle im eigenen Site-Style übernehmen.

Dazu verlinke ich zum unserem früheren Tutorial  “Ein eigenes Design mit NOF”, der diese Funktion beschreibt:

Navigationsstyle übernehmen


Nächste SeiteDemo-Vorlage - Mondo - Vorschau

Seite drucken