Glasartige Navigation (Fortgeschritten)

.
Navigationen in FW sind einfach zu realisieren. Fireworks bietet dafür eigene Funktionen, die es erlauben aus einem beliebigen Objekt einen Button zu machen. Der erste Schritt allerdings ist auch 3 identische Buttons zu erstellen, einen für Normal, einen für MouseOver und einen für Active. Natürlich könnt Ihr auch aus nur einem Objekt einen Button erstellen, allerdings bleiben dann jegliche Effekte weg. Bei mir sehen die 3 Buttons so aus:
Es ist wichtig, daß die 3 Objekte GENAU gleich gross sind, da sich das ganze verschiebt, wenn der Over Button grösser ist, wenn ich mit der Maus über den Button fahre. Nun zum erstellen der Navi:
1. Schritt: den Button "Over" kopieren (Control+C) den Button "Normal" anklicken und F8 drücken. FW hat nun ein Slice über das Objekt gelegt(grün) und es als Button deklariert.
Macht einen Doppelklick auf den grünen Bereich, danach wird dieses Feld erscheinen:
Hier den Namen des Buttons angeben, und bei den Radio-Buttons "Schaltfläche" auswählen! Auf Ok drücken und dann werdet ihr im Dialog der Menüerstellung sein. Wie ihr seht hat FW den "Normal" Button schon bei "Up" hinzugefügt, daran müssen wir also nichts mehr ändern. Wir switchen im Menü Oben auf "Over" und fügen dort mit Control+V den Button wieder ein, den wir vorher kopiert haben:
WICHTIG: Die Buttons müssen am genau gleichen Ort sein. Wenn ihr den Button markiert, könnt ihr anhand der >Koordinaten (ganz links unten im FW Fenster) die Position der beiden Buttons überprüfen. Over beschreibt wie gesagt den Status, wenn die Maus über dem Button ist. Wir switchen nun im Menü oben auf "Unten". Dies beschreibt den Status, wenn der Button gedrückt wird. (kurz auf Fertig klicken, den Active Button kopieren, Doppelklick auf den grünen Bereich und auf Unten switchen)
Bei Unten fügen wir den letzten der 3 Buttons hinzu:
Nochmals die Position überprüfen und auf Fertig klicken.
So, der Hauptteil wäre gemacht. Jetzt können die beiden Buttons "Over" und "Active", die sich noch auf der Arbeitsfläche befinden, gelöscht werden, da sie sich im Button befinden! Wenn Ihr euren Button anklickt, könnt ihr links unten noch die Eigenschaften des Links einstellen:
Hyperlink, Alt-Text, Link-Text, alles ist noch einstellbar =)
Fireworks eignet sich durchaus auch für anspruchsvolle Navis!
Wer noch ein wenig basteln will, aber zu faul ist sich selber eine Navi zu erstellen, kann mir ne PM schreiben, dann schicke ich die PNG Datei dieser Navigation
Greez: Gorbatschow
Es ist wichtig, daß die 3 Objekte GENAU gleich gross sind, da sich das ganze verschiebt, wenn der Over Button grösser ist, wenn ich mit der Maus über den Button fahre. Nun zum erstellen der Navi:
1. Schritt: den Button "Over" kopieren (Control+C) den Button "Normal" anklicken und F8 drücken. FW hat nun ein Slice über das Objekt gelegt(grün) und es als Button deklariert.
Macht einen Doppelklick auf den grünen Bereich, danach wird dieses Feld erscheinen:
Hier den Namen des Buttons angeben, und bei den Radio-Buttons "Schaltfläche" auswählen! Auf Ok drücken und dann werdet ihr im Dialog der Menüerstellung sein. Wie ihr seht hat FW den "Normal" Button schon bei "Up" hinzugefügt, daran müssen wir also nichts mehr ändern. Wir switchen im Menü Oben auf "Over" und fügen dort mit Control+V den Button wieder ein, den wir vorher kopiert haben:
WICHTIG: Die Buttons müssen am genau gleichen Ort sein. Wenn ihr den Button markiert, könnt ihr anhand der >Koordinaten (ganz links unten im FW Fenster) die Position der beiden Buttons überprüfen. Over beschreibt wie gesagt den Status, wenn die Maus über dem Button ist. Wir switchen nun im Menü oben auf "Unten". Dies beschreibt den Status, wenn der Button gedrückt wird. (kurz auf Fertig klicken, den Active Button kopieren, Doppelklick auf den grünen Bereich und auf Unten switchen)
Bei Unten fügen wir den letzten der 3 Buttons hinzu:
Nochmals die Position überprüfen und auf Fertig klicken.
So, der Hauptteil wäre gemacht. Jetzt können die beiden Buttons "Over" und "Active", die sich noch auf der Arbeitsfläche befinden, gelöscht werden, da sie sich im Button befinden! Wenn Ihr euren Button anklickt, könnt ihr links unten noch die Eigenschaften des Links einstellen:
Hyperlink, Alt-Text, Link-Text, alles ist noch einstellbar =)
Fireworks eignet sich durchaus auch für anspruchsvolle Navis!
Wer noch ein wenig basteln will, aber zu faul ist sich selber eine Navi zu erstellen, kann mir ne PM schreiben, dann schicke ich die PNG Datei dieser Navigation
Greez: Gorbatschow

Passend zum Inhalt empfehlen wir:
Video-Tutorial: JavaScript & jQuery lernen
schade das es für CS5 nicht mehr gilt -.-
... ist schon schön erklärt - leider gilt das für CS5 nicht mehr... schade
Ganz toll, herzlichen Dank
Ganz toll, herzlichen Dank
Sehr professionell gemacht! Sieht sehr modern aus.
nice wieder was dazu gelert :)
genau das was ich gesucht habe, vielen Dank :)
sehr schön geschrieben
genau das was ich versuchen will...Danke für das Tut
ah danach hab ich gesucht
Feine sache
Toll gemacht! Sieht sehr modern aus.
Ne feine Sache und sehr gut erklärt, bester Gruß vom schönen Niederrhein ebc
sehr sehr nices tut gz
Sehr professionell gemacht! Macht Lust auf Anwendung!
Vielen Dank! Genau so etwas habe ich grad gesucht. Schön beschrieben.
Allgemein sehr gut, nur zu dumm, dass Fireworks es per Javascript und nicht per CSS macht... mMn sehr dumm, im Hinblick auf die ganzen "Scriptblocker"-Addons für diverse Browser.
Nichtsdestotrotz das Tut is super!
danke, sowas habe ich doch gerade gesucht.
Tutorial gefällt mir auch. Werde mich mal an der Umsetzung versuchen.
Besten Dank
Gutes Tutorial, gut erklärt. Vielleicht das nächste mal nich so große Bilder. ;)
Ansonsten great shit! ThX
Mehr anzeigen