Creating a Button in Fireworks

Open Fireworks under your program files. Start a new file with canvas dimensions of 150 pixels wide by 150 pixels high. You will trim the canvas later so this might seem a bit large for a button. Select transparent as your canvas color. You will select the rectangle or oval tool to draw the shape of your button. I choose a rectangle for an example:

Drawing the Button:

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:

Fill Color:

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

Convert the Button to a Symbol:

Adding Text:

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.

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.

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:

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:

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.

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.

Just Plain Stupid