Click and drag your oval or rectangle to open it on your canvas. If your toolbar is not visible, click window on your standard toolbar then toolbars, and make sure that Main is checked.

Applying a Stroke:

• Open the stroke toolbar, if not already open, by clicking the Window, then select stroke.
  
• Click the stroke tab and drop down you menu and experiment with different stroke effects. Drop down your second menu choice box and notice other effects and colors you can choose from. Strokes are the outline your button. I used watercolor as my stroke with a tip size of 15 and color dark green.

Fill Color:

You will now experiment with fill color using the fill toolbar which allows you to apply affect and texture to your button.

• Click the fill tab, then drop down the menu by clicking on the arrow button. These are additional features you can use with your fill. Experiment with several of these fills. Notice that if you choose solid, you have the same color choices you have on your color palette on your canvas by clicking on the color swatch arrow, however, you have a choice of applying a texture to your color.
  
• If you did not have a color previously chosen, you will have to click the paint bucket to apply your fill.
  
• When applying texture, continue pouring from your paint can to see the effect the texture makes on your canvas. If you are not seeing a texture appear, make sure you don't have 0% displayed.
  
• Drop down your arrow and choose a number, the larger the number, the more texture will be applied. The fill I used was a pattern with the leaves format applied. You will need to play around with the different options until you get your desired effect.

Convert the Button to a Symbol:

• Select the button. To select the button, click the arrow tool the click on the shape. You will notice that four blue dots will appear.
  
• Click Insert>Convert to Symbol.
  
• In the "Symbol Properties" window give your button a name (MyButton) and ensure that the "Button" radio button is checked.
  
• Hit OK.

Adding Text:

• Click the text button (the capital letter A) and type the word back. Make sure you choose font color and size that will be easily displayed.
  
• You can also add an effect to the text. I used an outer bevel on the text.
  
  • First I click the word home to select it. You can see the effect dialog box below.
    
  • Click on the effect tab.
    
  • Drop down your menu box. Check out what each of these items will do. If you choose the multiple tab, you can apply more than one effect to your button.

• You can also assign effects to the entire button. To do this you must select the button by clicking on it with the arrow tool. Then follow the directions above.
  
• You will now want the text aligned to the center on the button.
  
  • Ensure that the main body of the button is selected (blue dots & lines) by clicking on it.
    
  • Now select the text by clicking on the text while still holding down the "Shift" key.
    
  • Once you have the text selected choose Modify>Align>Center Vertical.
    
  • Now you want to make sure the text is aligned horizontally. Click Modify>Align>Center Horizontally.
    
  • Fireworks has now taken your text and centralized it both vertically and horizontally on the face of your button.
• Once your have the text displayed the way you want it to look, you will now assign a behavior to the button that when clicked on it will take you back to your home page.

Create a Roll Over Image:

You are now going to create a "Roll Over" image for the button. Make sure you are viewing your button in "Original" mode as opposed to "Preview" and "Double Click" on it. This action will open a button editing window as shown below. You will notice that the text is not displayed. Don't worry about this right now.

• Hit the "Over" tab and you will be presented with a blank window. Click on the "Copy Up Graphic" button to recreate your blank button image in the "Over" window.

A word here about the Up and Over conditions. The "Up" condition is how your button will look just sitting on your web page. The "Over" condition is how it will look when you roll the mouse over it.

• Now that you have copied the "UP" button graphic into the the "Over" window, we will modify the "Over" image to give us a simple "Over" effect.
  
• Make sure the image is selected (blue dots) and go open the effect panel as shown below. Select yourself a roll over color effect by changing another color that will apply to the watercolor stroke. You will see the color of your button change.

You can play around with different effects, or you can even change the color of the shape you chose to make the button. The button I made is shown below:

• To save the change simply close the button editing window by clicking on the X in the right top corner.
  
• Go back to the "Original" view window. The text has reappeared on your button. Check the button out in "Preview" mode and you will see that the "Roll Over" effect kicks in when you pass the mouse over it.
  
• Click back on the "Original" view tab to add behaviors to your button.

Assigning Additional Behaviors:

Make sure the behavior toolbar is open (Window>Behaviors). You have already applied one behavior, a simple rollover. It is listed in your behavior palette shown below:

• At the behavior panel click the + arrow and select Display Status Message. In the Message text box type Just Plain Stupid. You may be prompted if you want to include down or over state. Don't check either box. Click OK.
  

• Click OK to close the Set Text Status Bar dialog box.

Click F12 to see how your button looks on the web. Notice the bottom left hand side of your screen. Your Company Name now appears there. Cool huh!!!!

Define a Link:

You will now need to define your link and alternate text in your object toolbar.

• Before you can assign a link to the button, you will need to insert a hotspot, click on the button to select it then click Insert>Hotspot. Your button should now look like the one below.

• If you don't see the objects toolbar on your canvas, select window on your standard toolbar, then choose object from the drop down list.
  
• Open the home page of Just Plain Stupid and copy the URL address by clicking in the location box, choose copy, the return to fireworks and click in the object toolbar, with the object tab selected, then click on the drop down box that displays a chain link and paste the location in this box.
  
• On the alternate text button type Just Plain Stupid.

Trim the Canvas:

Getting rid of extra space is no problem in Fireworks. Simply Select Modify>Trim Canvas. Save your button, then press F12 to view your button in a browser. Click on the button to see if it will take you to Your Company home page.

Save as Gif, Png, and HTML:

Now you will place the button on all of your category pages. First you will save your button as a png file by clicking within Fireworks and clicking file>save. Saving as a png will allow you to change your button later. If you only save it as a gif, you will now be able to edit it later.

To save your file in html and gif format, choose File, then export. Save as a gif and html file by clicking in the Save as Type dialog box and select both .

Because you have assigned behaviors to your button, you will have to copy a JavaScript into you document. One JavaScript will be typed in your section and the second JavaScript will be put in your between your tags just above the end of body tag. By saving your file in html format, you can open the JavaScript in Wordpad or Notepad. The script will tell you where to copy and paste. To align your button to the center, in the image JavaScript, the one copied above the end of body tag, put it in a between paragraph tags with the command align=center. Save you document and view it in a browser. Check to see if your button works. You should have a button on all six category pages.