Der erste eigenen Button in Netobjects Fusion

und was man vorher bedenken muss...

Nach den ersten zaghaften Versuchen, kommt man schnell auf den Geschmack - ein eigenes Design soll es nun werden. Der erste Schritt ist eine eigene Navigation mit einem hübschen Buttonset

OK OK - hübsch ist relativ... Ich hab schon Buttons gesehen - räusper - ich sach mal nix - als Hinweis nur dieser kleine Satz:

weniger ist oft mehr...

Aber das sei letztlich jedem selber überlassen. Bevor wir starten, ein paar grundsätzliche Überlegungen und Eigenheiten der automatisch generierten Navigation von Netobjects Fusion.

• In der automatischen Navi von NOF haben alle Buttons die selbe Breite
• Ein Button muss als mindestens so breit sein, wie der längste angezeigte Text (z.b. über unser Unternehmen)
• Buttons mit wesentlich weniger Text können dann unschön ausschauen (z.b. Kontakt)
• Horizontale Navigationen sollten nicht breiter werden, als die Gesamtbreite des Webauftritts (wir empfehlen immer 990px)
• Transparente Buttons als PNG können von NOF nicht generiert werden
• Transparente Buttons als GIF haben oft verpixelte Ränder

Ein Button ist eine rechtwinklige Grafik:

Was hier erstmal ganz mathematisch klingt, ist schlichtweg richtig. Alle noch so schicken Navigationen mit Schlagschatten, aufwendigen Schriften, grafischen Spielereien wie Durchbrechen von Rahmen sind immer immer immer rechtwinklige Kästen. Alle Gimmicks sind optische Täuschungen.

Inspirationen zu schönen Navis findet man im Web zu Hauf: hier mal ein paar gelungene Beispiele

Da aber auch schlichte Navigationen ihren Zweck erfüllen, erstellen wir ein Buttonset aus einem einfachen Kasten mit Rahmen.

Als Navigation schaut das dann ungefähr so aus

Wer genau hinschaut, sieht, dass ich die Abstände zwischen den Buttons direkt im Bild mit eingerichtet habe - in NOF können wir diese Abstände leider nicht einrichten. Hier haben wir also schon die erste optische Täuschung.

Diese kleine Abstand sollte sinnvollerweise natürlich die gleiche Farbe wie der Hintergrund haben, oder als transparenter Bereich im GIF gespeichert werden Hier also noch mal in der gleichen Hintergrundfarbe:

Der erste eigene Style in NOF

Wir wechseln in die Style/Design-Ansicht von NOF

Da wir ja letztlich einen eigenen Style einrichten wollen, erstellen wir unser eigenes Design indem wir auf Neue Formatvorlage klicken und in der linken Seite einen Namen vergeben

Jetzt richten wir die Navigation ein

In unserem neuen Style können wir nun die Buttons der Primary-Navigation ganz einfach austauschen, indem wir den jeweiligen Button anklicken. Es öffnet sich das Eigenschaftenfenster und wir können in der unteren Eingabe über durchsuchen unseren neuen Button suchen und einfügen.

Das Eigenschaftenfenster in Netobjects und seine Einstellungen

In unserem Beispiel nutzen wir für alle 4 Grundeinstellungen den gleichen Button. In diesem Eigenschaftenfenster lassen sich  auch alle Texteigenschaften ändern/anpassen.

Schriftart und Schriftfarbe: Als Schrift sollte man was klassisches ohne Schnörkel nehmen. Denkt immer daran, dass NOF die Texte automatisch generiert und sich mit Schnörkelschriften schwer tut - die Schrift schaut oft pixelig aus. Mit einer anderen Schriftfarbe lassen sich mit wenig Aufwand hübsche Roll-Over-Effekte erzeugen.

Position des Textes: Stellen wir z.b. auf Position rechts um, wird zusätzlich die Eingabe für ein Offset aktiv (Abstand zum Rand).

Drehen: Mit dieser Einstellung kann man Kopfüber-Navigationen erstellen. Aber aufgepasst: da gehört schon etwas grafisches Verständnis zu, um das sinnvoll einzusetzen. (siehe Beispiele)

Tja - das war´s schon - wir sind fertig...

Auf die gleiche Art lässt sich jetzt natürlich auch die Secondary-Navigation einrichten. Sie wird für angezeigte Unterseiten genutzt.

Viel Spaß beim nachbauen und spielen....