Impressum Suchfunktion

NOF-Schule | Forum

zur Schule NOF-NetObjects-Tutorials von Tommy Herrmann


Thema geschlossen 
Individuelle Netobjects-Navigation, jede Seite mit eigenem Button
#1
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:


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


Hier online zu sehen:

http://www.nof-schule.de/individuelle_na...n_mit_nof/
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
#2
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":


Angehängte Dateien
.jpg  individeulle_navi_1_1.jpg (Größe: 5,62 KB / Downloads: 130)

.jpg  individeulle_navi_1_2.jpg (Größe: 5,4 KB / Downloads: 70)

.jpg  individeulle_navi_1_3.jpg (Größe: 5,06 KB / Downloads: 55)

.jpg  individeulle_navi_1_4.jpg (Größe: 4,92 KB / Downloads: 47)

.jpg  Individuelle_navi_1.jpg (Größe: 5,33 KB / Downloads: 38)

.jpg  Individuelle_navi_2.jpg (Größe: 5,1 KB / Downloads: 18)

.jpg  Individuelle_navi_3.jpg (Größe: 4,61 KB / Downloads: 46)

.jpg  Individuelle_navi_4.jpg (Größe: 4,69 KB / Downloads: 43)

Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
#3
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:



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


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:



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


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


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


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


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


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


.jpg  Alle_Ebenen.jpg (Größe: 235,96 KB / Downloads: 235)
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
#4
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):



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


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:


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


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:


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


Hier klicke ich auf „Erweitert“.

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


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


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


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


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.
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Thema geschlossen 


Möglicherweise verwandte Themen...
Thema Verfasser Antworten Ansichten Letzter Beitrag
  Eine Methode zur "Planung einer Navigation" ( Kurzfassung ) AndyNeu 0 144 21.07.2016, 15:50
Letzter Beitrag: AndyNeu
  Externe Seiten in der Navigation verlinken, Titel verwenden Fred0 0 3.727 04.04.2012, 14:02
Letzter Beitrag: Fred0
  Navigation & eigene Buttons erstellen Pittiplatsch 5 7.187 28.09.2011, 22:10
Letzter Beitrag: astour
  Klappleisten - Navigation in NOF Pittiplatsch 3 17.021 08.12.2010, 10:41
Letzter Beitrag: Snoopy Joker
  Pfadnavigation, "Breadcrumb-Navigation" barbara0701 1 5.849 22.07.2010, 10:20
Letzter Beitrag: barbara0701



Benutzer, die gerade dieses Thema anschauen: 1 Gast/Gäste
nach oben An den Anfang der Seite scrollen
NetObjects Fusion Infos, Downloads und Updates Diese Website wird durch Bot-Trap vor Spam geschützt!