Web Page Design & Intro to Web Page Development

Rollovers

Creating A Rollover Button

Rollover buttons help the view of the webpage to navigate through your website quickly and easily. They are created using Dreamweaver's sister program, Fireworks. There are several steps in creating a rollover button which are fairly simple, but require a little time and patience.

1. Open Fireworks from the Start (or Apple) menu.
2. Go to File, Click on New and click OK.
3. Go to Insert, and Click on New Button.
4. Use the Rectangle Tool from the Tool Menu to create the size and shape of your button.

   

5. Use the Fill Tool to give your button a color.
6. Use the Text Tool to label your button such as "Home"
7. After selecting your button (four blue dots appear at the corners), go to the Effects Menu. Click on the down arrow, Bevel and Emboss, and then Inner Bevel.

   

8. Go to Modify and select Trim Canvas.

   

9. Minimize the button screen you are in (by clicking the minus size in the upper right hand corner) and go to File, Save As. Give your original image a file name, such as "Home.png"
10. Maximize your original image, and change the color or brightness by using the Effects menu. You want the image to be noticeably different so that people can tell when they have "moused over" your image.

    

11. Once you have changed your image, minimize the new version and go to File, Save As. Again, give your image a file name, but make it different from the original file name, such as "Home1.png"
12. To create other buttons, simply follow the same procedure, but remember to change the text and then use the Save As to give the button a new file name.

Previous    |    Next