BUTTONS

Buttons are a cinch to make in Fireworks. You can create individual buttons to assemble in a Dreamweaver document, or create a navigation bar that you put on each page of your site. A nav bar is a great way to create a consistent look throughout your site.

There are four (or five) states to a button: what it looks like normally (UP state), what it looks like when a mouse moves over it (OVER state), what it looks like while it's being clicked (DOWN state), and where the mouse has to be in order for the button function to kick in (ACTIVE area). There is another state called "over while down" that determines what your button looks like when it's down - after it's been pressed.

Begin by choosing Insert > new button from the Edit menu or click on the “new symbol” icon at the bottom of the Library panel.

The button editor will open with the UP state tab active. Use any of the drawing tools to create your button. Don't forget to mess with strokes, fills, and effects! If you want to add text, go ahead. If you're creating a nav bar and you want different text for each button, add the text for the first button in all the states.

When you're finished with the UP state, click on the OVER tab.

Below the drawing area, to the right, is a button that says "copy up graphic." If you want the over state of the button to be identical to the up state, click on this. If you are going to make minor changes, say, to the color or a drop shadow or something minor, select this option as well.

This places the same image from the up state into the over state, Make any changes you might want - it's a good idea to change something so viewers realize it's a button.

If you want something totally different for your over state, draw it using any of the drawing tools, strokes, fills and effects.

Then, click on the DOWN tab.

Again, you can "copy over graphic" to place what's on the over tab onto the down tab. Make any changes you want using the stroke, fill, and effects palette.

If you want the down state to look like the up state for some reason, click back to the up tab, select your button and copy it. Then flip back to the down tab and paste it.

It should paste in the exact same position as on the up state.

Note the option to "include nav bar Down state ."

The Over While Down state is useful if you're creating a nav bar; this is what your button will look like after it's pressed. If you left "include nav bar Down state" checked in the previous step, your down image will be automatically placed in this state.

If you want this image to be different, uncheck the "include" option in the down state, and create something new here.

Finally, your ACTIVE AREA

This portion of the button editor is already created for you: a slice has been placed over the button, and is large enough to cover the entire button in all its states. If you'd like to adjust the size of the slice, uncheck "set active area automatically" to make the changes.

Click “done.”

Easy enough!

Once you’ve created a button, Fireworks places it in your document. If you have slices and slice guides showing, you’ll see a green overlay and red guide lines surrounding the edges of your button.

Notice the little arrow icon at the bottom left of the selected button: this indicates it’s a button.

Click and drag it to position it where you want it.

The registration mark in the center is used to create rollovers, disjoint rollovers, and pop-up menus (more about those in the following sections).

You can preview how your button works by clicking on the “preview” icon at the top left of the document window, or by choosing “preview in browser” either from the File menu, from the top right of the document window (click and hold the little Fireworks icon), or pressing option + F12.

Edit a button by double clicking its image in the library window, or double clicking it on the canvas.

It’s very important to name your buttons (and all your slices and hotspots) in the properties palette—you’ll see the name in the upper left corner of the button slice.

You’ll also use the properties palette to assign a link to it: type an absolute url. And don’t forget an alt tag.

"Target” refers to the window where the new page will load. If you leave it set to "none" the new page will load in the same browser window.

You can choose to have it load in a new window. This is handy if you don't want people to loose your site. The other target choices refer to pages that use frames.

OK. So that's a basic button. What if you want all your buttons lined up in one document, with links attached to each one? That's where a nav bar comes in handy.

To create your nav bar, drag your button from the library to your canvas as many times as you need (or option + drag to copy it).

Select one and using the properties palette, delete the text and change it. Name this new button, and add your link and alt information. NOTE: If your links end with HTML, Fireworks won't "remember" them. Use the HTM extension instead. You can add the L in Dreamweaver later.

Check the "Show Down State on Load" for each button, too - it's at the bottom right of the Properties panel.

Do that for all the other buttons.

When you're ready to export your nav bar to use in a Dreamweaver file, make sure to check the Options button in the export dialog box. Select the Document Specific tab and in that pane, select Export multiple nav bar HTML files.

When you export the file, Fireworks will generate a separate HTM file for each nav bar "state." That is, each HTM file will have a different button showing the "over while down" state. That's the file you will use on the page that button links to.

Click the Options button to access the Document Specific settings.

Select Export multiple nav bar HTML files.