Tutorialbeschreibung

Glasartige Navigation (Fortgeschritten)

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:

Bilder


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:

Bilder


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:

Bilder


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:

Bilder


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:

Bilder


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

Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 09.10.2006 - 20:44

Sieht echt Hammer aus... 5 auch von mir

Portrait von Pajdo
  • 02.09.2006 - 01:15

Sauber! 3 Sterne von mir!

Portrait von camillo081
  • 29.08.2006 - 14:04

sehr simple dieses tut aber sehr sehr sinnvoll....wie meinw vorgänger wohl auch schon meinten.....weiter so

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 14.08.2006 - 19:06

Also ich find's grundsätzlich gut, dass du ein Tutorial geschrieben hast, allerdings hätte ich hinter dem Titel/Bild eher erwartet, dass mir hier erklärt wird, wie ich die Grafiken bastle, nicht, wie ich ein Menü nach einer veralteten Art und Weise (mit JavaScript anstatt CSS) für eine Webseite fertig mache.
Bin daher etwas enttäuscht, was sich meinen Augen hier bietet.

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 09.08.2006 - 14:51

WOW! Geiles Tutorial!
Hat mich echt weitergebracht ^^.
mfg mfuesslin

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 24.07.2006 - 13:45

sieht geil aus !

welche schrift hast du benützt?

Sieht mir nach neuropol aus, bin ich da richtig?

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 09.07.2006 - 20:15

endlich noch ein firew tutorial... davon findet man ja net so viele

Portrait von landrobber
  • 08.07.2006 - 15:53

Sieht das genial aus!
Werde ich gleich mal nachbauen!

Portrait von Can
Can
  • 25.06.2006 - 13:17

sehr sehr schön. aber ich krieg es leider net hin:(

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 11.06.2006 - 18:01

solche buttons sind cool, thnx fürs tutorial

Portrait von morphi1972
  • 16.05.2006 - 09:58

very nice!!! Danke für dieses super Tutorial.

Portrait von ibi
ibi
  • 14.05.2006 - 23:08

gefällt mir sehr gut. ich werde es gleich in meinem hp einbauen

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 09.05.2006 - 05:13

Naja... hätte es besser gefunden wenn du gezeigt hättest, wie du diese Buttons (also die Grafik) gemacht hast...

Portrait von gorbatschow
  • 10.07.2006 - 10:55

gg, dan wärs ja im workshop um buttons und nicht um navis gegangen *capisch*

rofl

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 27.04.2006 - 16:03

Yeah das ist ein guter workshop.Nur ein bissel kompliziert aber wer das lernen möchte muss da durch!!

Portrait von gorbatschow
  • 27.04.2006 - 16:11

wen du meine original png datei hast, musst du diese mit FW8 öffnen.

Um dann eine site mit up/down/hower effekte zu erzeugen musst du:
Datei->Exportieren
blabla.htm als namen eingeben
Im ersten kasten HTML&Bilder auswählen
Dann noch bereiche ohne segmente einschliessen auswählen


Ansonsten öffnest du meine original png datei im Photoshop, und dann solltest du dort auch das ganze als html exportieren können!

Portrait von escay
  • 24.04.2006 - 21:40

Danke erstmal für die schnelle Hilfe. Hab's mal ausprobiert aber irgendwie klappts nocht nicht richtig.
Habe testweise eine Seite (500*500) gemacht und den Button zentriert gesetzt (nach deiner Anleitung mit FW 8 Trial als .png gespeichert) zentriert gesetzt. Habe es dann das Bild gesliced und als quelle des slice wo der Button hin soll name.png angegeben. Das ganze dann "für Web" gespeichert. Aber erscheint nur als normales Bild :/ Wollte ja auch den Effekt mit Down- Up- etc. haben :(

Weiss jemand Rat ?

Portrait von escay
  • 24.04.2006 - 20:11

Also das Tut ist wirklich gut dargestellt und leicht verständlich. Jedoch habe ich noch eine Frage.

Ich gestallte meine Seiten meist mit Photoshop. Lässt sich das irgendwie so speichern, dass ich es in Photoshop einbinden kann. Aber schon so, dass er die Up-, Down-, Over- Funktion beibehällt ?

Würde mich über eine Antwort freuen.

Portrait von gorbatschow
  • 24.04.2006 - 20:45

wenn dann png. aber ich weiss nicht ob photoshop schon guet mit dem Vormat png umgehen kann.

Es könnte evt. ab Fireworks 8 klappen.
Kannst dir eine 30 tage vollversion unter www.macromedia.com downloaden

Portrait von gorbatschow
  • 21.04.2006 - 11:39

sry für den kleinen ausfall.
Mein server ist kurz ausgefallen.

Für Linux-Freaks:
- Auf Debian Sarge ein verpatztes apt-get distupgrade das mir die Libc verhauen hatt..
Schlaflose Nächte um meine Libs wider hinzubekommen -.-

Mehr anzeigen

x
×
×