Anzeige
Tutorialbeschreibung

Mouse-Over-Effekte (Navigation)

Mouse-Over-Effekte (Navigation)

ACHTUNG FIREWORKS TUTORIAL!!!!

In diesem Tutorial möchte ich euch zeigen, wie man mit "Macromedia Fireworks" ganz leicht einen Navigator für Hompages hinbekommt.







Los Gghts:

Wir zeichnen mit dem Rechtecktool ein Rechteck, eher in die Breite gezogen. Bei Bedarf könnt ihr auch einen Effekt dazugeben. Dann markiert ihr es und drückt F8 und stellt es auf <Schaltfläche> um. Dann macht ihr noch ein Rechteck, dieses aber eher Quadratisch. Auch dieses könnt ihr mit einem Effekt verschönern. Dann auch das Markieren, wieder F8 und auf Schaltfläche.

So sollte das dann bis jetzt aussehen:

Bilder




Jetzt soll, wenn man über den Button fährt, ein Bild im Quadrat erscheinen. So geht´s:
Man klickt auf den Button, dann sollte in der Mitte ein kleiner, weißer Kreis erscheinen. Bei gedrückter Maustaste, zieh´n wir den jetzt ins Quadrat.
Beim Loslassen öffnet sich ein Fenster namens "Bild austauschen". Da klicken wir auf <Weitere Optionen>. Dann macht man einen Punkt bei "Grafikdatei" und gibt den Pfad des Bildes an. Jetzt einfach <OK> drücken.
Nun F12 drücken, und ihr könnt es ausprobieren!!
Aber was ist das?? Der Button veschwindet, wenn man mit dem Cursor drüber fährt.
Dazu doppelklicken wir den Button und dann ist da der Button zu sehen und oben öffnet sich eine Leiste.

Bilder


Bei der Leiste klicken wir auf  "Over" und dann auf  "Up-Grafik Kopieren". Jetzt könnt ihr das ganze optisch ein wenig umändern (andere Farbe, anderer Effekt, ...). Danach klickt ihr auf "Down", dann auf "Over-Grafik Kopieren".
"Over bei Down" ist eigentlich nicht so wichtig, aber ihr könnt´s trotzdem kopieren. Also wieder "Down-Grafik Kopieren" und wenn ihr wollt den den Button unter dem Punkt "Aktiver Bereich" verändern. Dann klickt ihr auf "Fertig".
So und jetzt wieder F12 und siehe da: Die Schaltfläche bleibt und verändert sich so, wie wir´s eingestellt haben!


Bilder



Einen Hyperlink könnt ihr einfügen, indem ihr den Button markiert und im Feld "Hyperlink" (am unteren Rand des Programmes, unter "Eigenschaften") den Link eingebt.

Jetzt das ganze noch richtig abspeichern: Klickt auf Datei > EXPORTIEREN  und dann muss unter "Dateityp" "HTML und Bilder" stehen. Dann speichern.

Jetzt könnt ihr es z. B. in Dreamweaver einfügen und für eure Homepage verwenden.




mfg
Valten

Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Portrait von nekra
  • 16.01.2012 - 15:34

Wahrlich kurz und knapp, leider nicht was ich gesucht habe. :(

Portrait von rakader
  • 30.06.2011 - 13:28

Ein wenig mehr Details wären wünschenswert. Insbesondere Vorbereitungen zum Austausch bei Dropdown etc.

Portrait von Bladetown
  • 28.02.2011 - 16:49

kurze und knappe Beschreibung, ein paar mehr Deatils wären nicht schlecht, diese bekommt mal aber auch intuitiv heraus!

MFG

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 10.02.2011 - 13:49

Gut erklärt, einfach und Kompakt.

Danke!

Portrait von gundleyG
  • 19.12.2010 - 15:41

Schade - leider nicht besonders gut erklärt...

Portrait von photoheini
  • 11.10.2010 - 10:10

Super das Tutorial. Genau das hat meiner Website gefehlt!

Portrait von xxDaemonxx
  • 22.05.2010 - 13:40

Das hab ich gesucht! Danke für die Erklährung.

Portrait von bergerdi
  • 27.12.2009 - 13:34

Danke, super erklärt!

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 19.08.2009 - 12:00

leicht verständlich danke

Portrait von moe2
  • 30.06.2009 - 15:48

kurz und schmerzlos. danke

Portrait von edi82
  • 29.04.2009 - 12:21

Einfach Klasse, kurz und schmerzlos! thx

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 19.03.2009 - 22:15

genau das hat meiner Website gefehlt! vielen dank

Portrait von jennydastier
  • 08.01.2009 - 11:03

Von mir auch 5 Sterne für eine super Erklärung....Danke

Portrait von christd
  • 22.10.2008 - 20:22

genau dss hab ich gebraucht ... bin zwar fit in allen anderen adobe programmen aber mit fireworks hatte ich vorher noch nie zu tun!

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 17.07.2008 - 21:04

Einfach nur super das Tut. Genau das habe ich gebraucht. Mit HTML und CSS hab ich einfach keinen MouseOver-Effekt zusammen gebracht. Irgendwas mit "hover". xD

Vielen Danke 5 Punkte!

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 13.02.2008 - 16:46

schön erklärt - schnell hinbekommen 4 Pkt

Portrait von karatepe
  • 09.02.2008 - 11:06

super erklärung dankeschön

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 20.09.2007 - 10:58

Vielen Dank

Portrait von feuergeist
  • 20.08.2007 - 09:17

supi! einfach und gut nachvollziebar für mich als anfänger. danke!

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 09.06.2007 - 22:14

Also, den tut ist gans einfach, aber endeffekt ist überzeugend. Sehr gut!!!

x
×
×