Plain Text Rollovers in Fireworks and Dreamweaver MX 2004
by Darice Dronzek
Beginner/Intermediate Tutorial
Creating a new button
To start, select - File > New > Create a new button. For text and all buttons, use a width of 150 and a height of 75. Sizes can vary; these are just suggestions for this tutorial.
Select the text tool (the A), click anywhere in the button area, and the text editor will come up. On a black background, best colors to use are yellow, white, and red. I used red and the Arial font, size 14. The font size can be whatever you want, but it's usually best to to use smaller type for this, as download time is quicker.
Type the word > RESUME (with red color selected) Click on the word apply, and then ok. You can then close the button editor.
Go to Edit > Insert > New Button, and the window with the four states will show: up, over, down, over while down In the new button editor, select the text tool (the A) again and do the same steps as 2 and 3, but using the color yellow instead of red. When done with this button, close the editor and then match it on top of the red button.
You can preview your work by clicking on the preview tag; it should roll over. If you want to add an underline under the word, just select the U for underline in the properties window. To edit the symbol, right click on Resume and select Symbol then Edit Symbol. Make sure to select Done when you are completed before previewing.
Previewing the button on the web
To preview your work on the web, press F12, and then you can see what your button will look like in whatever browser you have.
Exporting your file as a GIF
After previewing it, you must export your file. Select File > Export > and where it says Base name > type in redgallery.gif. Where it says slicing, it should automatically select use slice; if not, select that. Make sure you are saving it into the folder for your web page where your index.html folder resides.
Inserting rollovers into Dreamweaver using Fireworks
Next go into Dreamweaver and select image rollover, then select the original file first, which will be the red one. Then select the yellow one and you are done.
You'll now see that Fireworks has included these weird names (redresume.gif rc1 and c1) to their files, and you will probably think, "what the heck is that?" If you want to change the names, go in to your hard drive by going to MyComputer and double clicking on the C drive, go to the file that you have your web work in, and open them up to see what they are. You can rename them from there so you don't have to hunt and peck.
There will be a total of six files, but there are only two that you probably will actually need. If you have a solid background, the other four will be unnecessary.
To ensure accesssibility, don't forget to type in your alt tags - this has the added benefit of telling you what the button name is. It's good to get in the habit of this practice, especially when you use image maps (photos for buttons).
Saving a PNG File
If you want to save the original button select File > Save As >, name it redresumebutton.png and then you are done! PNG files are the native format for Fireworks. You can export them into GIF files if desired or JPGs.
Copyright 2004, Darice Dronzek, All Rights Reserved
Darice Dronzek is an independent web developer in Springfield, Oregon and owner of Darice Designs. Her primary focus is developing user interfaces where the structure of the navigational flow is easy for the user to follow and to be compliant with the American's Disability Act if needed by clients. In addition to designing web sites, Darice has a strong background in art, music, and crafts. Her passion for web design combines a strong eye for detail and her love of color.
| 
