• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL
Help

Lesson 6. Creating Buttons

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 MX, 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 will 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.

WHAT YOU WILL LEARN

In this lesson, you will:

  • Use the Button Editor to create buttons

  • Add a new button from an existing button

  • Make changes to the button

  • Add links to your buttons

  • Turn graphics into buttons

APPROXIMATE TIME

This lesson takes approximately 1 hour to complete.

LESSON FILES

Media Files:

None

Starting Files:

Lesson06\Start\home_page_L6.png

Completed Projects:

Lesson06\Completed\buttons.png

Lesson06\Completed\home_page_L6.png


PREVIEW

                                                                          

Not a subscriber?

Start A Free Trial


  
  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint