Buttons - Rollover Images
Working with premade buttons
Fireworks 4
-
Go to Edit > Insert - Libraries > buttons.
-
Select a button.
-
Click the Import button.
-
Double click the button - click OK that the link to the external
file will be broken (after all, you're going to edit the button.)
You've brought up the Button Editor.
-
Double click the text and write the text you want on the button.
-
Click "yes" when asked if you want to change the text for
the other states.
-
Click the "Active Area" tab.
-
Look at the bottom and click on "Link Wizzard"
-
Click the "Link" tab and type the url on the first line.
-
On the middle line (type alternate name) type the same thing
you typed on the button. (This is text that will show if someone
has graphics turned off, or will be read for the blind)
-
Skip the last line
-
For now, that's all ---click OK.
Click the preview tab on the Fireworks document and see the button
in action.
The button you created is in the Library for this document. Drag
as many more buttons over as you need. Change the text; change
the links. When asked if you want to change the text for all instances
or just the current one, choose just the current one. Instances
refers to all the buttons; states refer to the button on which
you're working.
When all the buttons are edited, go to File, Export. Give the
button a base name. It's usually a good idea to create a separate
folder for the graphics instead of leaving them in the "Same Directory"
Fireworks MX (starts the same, but much easier!)
-
Go to Edit > Insert - Libraries > buttons
-
Select a button
-
Drag to work area
-
In the Properties window type the button name, url, and alternate
text.
-
In the sam e properties menu give the button a short, one word name.
Each button should have a different name.
-
Drag, name, type urls for as many buttons as needed. Button will
be found in the Assets Panel, Library tab.
-
That's it!
Buttons with slice & preview & real web page
When finished, Go to File > Export
Buttons were already names, so slices will have variations
of the name. All the javascript to make the buttons work will be generated
for you. If using this in conjuntion with Dreamweaver, the Fireworks
html can be directly imported into your web page.
Working with premade buttons
Click the preview tab on the Fireworks document and see the button in action. The button you created is in the Library for this document. Drag as many more buttons over as you need. Change the text; change the links. When asked if you want to change the text for all instances or just the current one, choose just the current one. Instances refers to all the buttons; states refer to the button on which you're working.
When all the buttons are edited, go to File, Export. Give the button a base name. It's usually a good idea to create a separate folder for the graphics instead of leaving them in the "Same Directory" |
Fireworks MX (starts the same, but much easier!)
When finished, Go to File > Export Buttons were already names, so slices will have variations of the name. All the javascript to make the buttons work will be generated for you. If using this in conjuntion with Dreamweaver, the Fireworks html can be directly imported into your web page. |
| |
Janet Barnstable
August 18, 2009