Gästebuch   Impressum

 

>> Startseite    >> Basiswissen    >> Style-Einstellungen: Die erste eigene Navi *  
 

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.

beispielbutton1

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
designansicht

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

neues-design-nofneues-design-nof2

Jetzt richten wir die Navigation ein

neuer-button1In 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

schaltflaechen-eigenschaften

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....

 


Dieses Tutorial

Version: alle Versionen
Schwierigkeitsgrad: leicht

Neue Tutorials

Suchfunktion einbauen
MLR kopieren
SuMa-Optimierung
Alle Filme wieder online
Weicher Bildwechsler mit Text
Die 2-Minuten-Newsbox
Das erste eigene Buttonset
Datepicker für Formulare
Includieren in NOF
Bildkomprimierung
Publizierungseinstellungen
Assetverwaltung

Content Management für Netobjects Fusion

Inhalte und Bilder ohne NOF aktualisieren
Fusion Content 3

Shop für Netobjects Fusion

Der kleine nahtlose Shop für eure NOF-Projekte
dank php und einer Datenbank ist eure NOF-Datei schlank und alle Daten bleiben bei eventuellen Crashes oder Layoutumstellungen unberührt
NOF-Shop 1.1

Haste mal nen Euro?

Die NOF-Tips sind werbefrei
Wenn die Tutorials geholfen haben, freuen wir uns auf deine kleine Spende via PayPal an paby@paby.de

Online-Support

Werktags: 9.00 - 14.00h
0160 37 87 652
WE oder Abends nach Absprache möglich
Schnelle Hilfe via Online-Tool 1,00 euro/min

Schulungen & Seminare

Online-Schulungen ab 35,00 Euro/Std.

Friendship (suma-hilfe)

Burlesque Korsetts und mehr
Triumed
Lebensfreude-konzept
Sportfotos
Fliegenruten
 

-
Fatal error: Uncaught Error: Call to undefined function ereg_replace() in /kunden/290678_86558/rp-hosting/1/1/web/nof-tips/netobjects_tutorials/navigation_in_nof_einrichten.php:369 Stack trace: #0 {main} thrown in /kunden/290678_86558/rp-hosting/1/1/web/nof-tips/netobjects_tutorials/navigation_in_nof_einrichten.php on line 369