Wir sehen alle im Internet hübsche Navigationseffekte, bei denen wie „per Geisterhand“ schöne Mouseover-Effekte für jede individuelle Seite auftreten. Da wir daran gewöhnt sind, mit Netobjects-Fusion für alle Seiten die gleichen Buttons zu verwenden, suchen wir manchmal nach komplizierten Mouseover-Effekten, die nur bedingt flexibel unseren Anforderungen angepasst werden können. Nutzer von Netobjects Fusion brauchen aber nicht so viel zu suchen, ihnen stehen, oft unerkannt, die richtigen Bordmitteln zur Verfügung!
Da viele schöne Effekte mit NOF-eigenen Navigationsbordmitteln erzeugt werden können, zeige ich Euch jetzt anhand eines mit NOF9 erstellten Beispiels, wie es funktionieren kann:


Realisieren werden wir hier gemeinsam folgende Navigation:



 Navi_Screenshot.png (Größe: 132,21 KB / Downloads: 199)


Hier online zu sehen:

http://www.nof-schule.de/individuelle_na...n_mit_nof/

Teil 1. Grafische Vorarbeit

Im Grafikprogramm habe insgesamt acht Bilder erstellt , ein Bild für jeweils eine Seite, ein Bild für den jeweiligen Mouseover-Effekt.

Dazu gehört natürlich ein bisschen Phantasie sowie Erfahrung im Umgang eines Grafik-Programms.

Hier sind die "Schnipsel":

Teil 2. Voreinstellungen in NOF – Site-Ansicht, Design-Ansicht

Wir öffnen das Projekt in NOF.

Zuerst legen wir in der Site-Ansicht unter der Home-Seite drei zusätzliche Seiten an:




 Site-Strukur.jpg (Größe: 29,73 KB / Downloads: 108)


Wir wechseln in die Design-Ansicht (hier zur weiteren Bearbeitung Schreibschutz entfernen).

Da wir vier unterschiedliche Buttons verwenden, müssen wir vier Navigations-Ebenen anlegen.

Wir klicken auf der Design-Ansicht die Ebene „Primary“ an. Mit Doppelklick auf die jeweiligen Buttons fügen wir jeweils das erste Bild sowie das Bild für den ersten Mouseover-Effekt ein, die wir zuvor auf unserer Festplatte gespeichert haben.

Mit F3 rufen wir die Schaltfläche Eigenschaften auf. Wir stellen die Schrift, Schriftfarbe, Textposition, Textabstände usw. nach Wunsch ein. Bei mir sieht jetzt die erste Navigationsebene wie folgt aus:




 Primary_Navigationsleiste.jpg (Größe: 123,97 KB / Downloads: 177)


Ich lege jetzt die Buttons für die Secondary-Ebene und die Texteinstellungen an:



 Secondary_Navigationsleiste.jpg (Größe: 112,31 KB / Downloads: 140)


Mit Klick auf „Duplizieren“ können weitere Ebenen hinzugefügt werden:



 Navi-Duplizieren.JPG (Größe: 34,47 KB / Downloads: 131)


Am Ende meiner Arbeit in der Design-Ansicht verfüge ich über vier Navigations-Ebenen (Primary, Secondary, Button Set 1, Button Set 2):



 Alle_Ebenen.jpg (Größe: 235,96 KB / Downloads: 114)

3. Einstellungen der Navigationsleiste

Ich wechsle nun zur Seitenansicht. In meinem Beispiel befindet sich die Navigation im Masterrahmen und wiederholt sich auf jeder Seite. Sie muss auf allen Seiten identisch aussehen.

Ich entferne (markieren, rechte Maustaste = „Ausschneiden) alle sich evtl. auf der Seite noch befindlichen NOF-Objekte aus der Arbeitsfläche sowie alle vorhandene Navigationsleisten und Banner.

Mit Klick auf das Navigationsflächen-Symbol in der Menü-Leiste ziehe ich eine Neue Navigationsleiste horizontal in den Masterrahmen in.

Die Navigation wird mit folgenden Eigenschaften individuell definiert (Benutzerdefiniert):




 Einstellung_Navi_Benutzerdefiniert.JPG (Größe: 40,13 KB / Downloads: 184)


Zunächst erscheint die Navi jetzt nur mit Fragezeichen, da die SeitenStrukur noch nicht fesgelegt wurde.

Um die Seiten-Struktur zu definieren, drücken wir auf „Benutzerdefiniert „> „Bearbeiten“. Hier können wir alle benötigten Seiten in diese Navigationsleiste aufnehmen. Da wir für jede Seite eine individuelle Grafik haben, weise ich jeder Seite eine eigene Ebene zu. Somit kann ich anschließend mit nur wenigen Klicks das Aussehen der Navigation bestimmen. Die Struktur wird hier festgelegt:



 Seiten-Strukur_Navi.JPG (Größe: 37,4 KB / Downloads: 130)


Ich habe bewusst jede Seite in eine neue Ebene aufgenommen. Warum das so gemacht wird, werdet Ihr gleich selbst feststellen können.

Um der jeweiligen Seite die richtige Button-Ebene zuzuweisen, wechsle ich zum zweiten Reiter der Navigationsleiste- Eigenschaften:



 Einstellung_Navi_Benutzerdefiniert2.JPG (Größe: 42,06 KB / Downloads: 123)


Hier klicke ich auf „Erweitert“.

Im darauf folgenden Fenster kann ich NOF mitteilen, mit welcher Grafik die jeweilige Seite angezeigt werden soll:



 Aussehen_NOF-Navi_definieren.gif (Größe: 41,21 KB / Downloads: 117)


Ich bestätige meine Angaben mit „OK“, und kontrolliere das Ergebnis auf allen Seiten:



 ergebnis.gif (Größe: 41,82 KB / Downloads: 89)


Anmerkung: Mit meinen Einstellungen erscheinen die Grafiken in Orange für aktive und hervorgehobene Seiten, sowie als Mouseover-Aktion.

Hat es nicht geklappt, sollte man alle Einstellungen noch einmal genau nachkontrollieren. Die Navigationsleiste von Netobjects Fusion ist sehr gut durchdacht und konzipiert. Aufgrund der vielfältigen Einstellungsmöglichkeiten ist sie für fortgeschrittene Anwendungen durchaus knifflig!

Fragen dazu können hier in unserem Netobjects-Forum gestellt werden!

Grafik: Es handelt sich um das Bild einer Dekorationswand, fotografiert bei McDonalds, Nürnberger HBF.