Neben vielen der bekannten Web 2.0 Elemente spielt eins eine besonders wichtige Rolle: die Navigation. Obwohl sie in Sachen Websites von Anfang an dabei war - immerhin muss man ja irgendwie durch die Website navigieren - gibt es auch im Web 2.0 diverse “looks”. In Fireworks kann man eine elegante und grafisch überzeugende Navigation in wenigen Minuten anfertigen ohne sich große Mühe machen zu müssen. Das Zauberwort: Stile.

Schritt 1

Zu Beginn erstellen wir ein Rechteck mit beliebigen Maßen, wichtig ist, dass die Höhe der einer Navigation entspricht - In meinem Falle sind das 45px. Dieses Rechteck bekommt nun den Stil “Dark Chrome 008″. Die Stile könnt Ihr in der rechten Sidebar unter “Elemente” verwalten und anwenden.

Schritt 2

Stellt nun den Zoom-Faktor höher, damit Ihr den folgenden Schritt besser anwenden könnt. Mit Hilfe des schwarzen Zeigers zieht ihr den Verlauf am oberen Haltepunkt so nach oben, dass der hellgraue Streifen an der oberen Kante beginnt. Am unteren Haltepunkt des Verlaufes zieht ihr den Verlauf nun noch soweit in die Länge, dass der Kontrastwechsel in der Mitte liegt.
Unser Navigations-Background ist somit fertig.

Schritt 3

Nun machen wir uns an die Hintergrundbilder, die erscheinen, sobald wir über einen Navigationspunkt fahren. Dafür duplizieren wir unser Rechteck, stellen die Breite auf z.B. 100px (hauptsache das Rechteck ist breitenmäßig kleiner). Dann setzen wir den “Farbton/Sättigung”-Filter mit folgenden Werten an:

Schritt 4

Nun folgt noch der Filter “Innerer Schatten” mit den im Bild zu sehenden Werten.

Schritt 5

Am Ende legen wir den blauen Hover-Hintergrund und ein paar Navigationspunkte auf unseren Navigationshintergrund um zu sehen, wie es am Ende aussehen soll/wird.