Lesson 6. Creating Buttons

As you design your Web site, you may want to create buttons to add interest and interactivity to your pages. The buttons you make can be simple rectangles with the name of the link or 3D buttons that react to the mouse by changing color, glowing, or taking on the look of a mechanical button that has been pressed down.

In Fireworks, you can create a variety of buttons, complete with all the JavaScript and HTML that make them work. You can create simple buttons, and you can use the Button Editor; you can even create your own custom buttons that you can save to use again.

A rollover is an image that changes appearance when the user moves the pointer over it or clicks it. There are four common button states, although you can choose to use only two or three states if you prefer. Each state reflects the user's interaction with the button: when the user moves the mouse pointer over the image, when the user moves the mouse pointer away from the image, when the user clicks the image, and when the user moves the mouse pointer over a clicked button (the down state of a button).

In this lesson, you'll use the Button Editor to create buttons, then place them on the home page you are creating.

First, you create each of the different looks of the image; then Fireworks creates the HTML and JavaScript needed to make the rollover work in your browser. Fireworks uses frames to store the individual images for the different states of the rollover. The Up state image goes in frame 1, the Over state image goes in frame 2, the Down state image goes in frame 3, and the OverWhileDown state image goes in frame 4.