How to Create Buttons In Fireworks

1. Open Fireworks
2. Determine Button Size (126w x 16h)
3. Create Canvas for Left NavBar
   1. Canvas Size - 126w x 200h
   2. Transparent Background
4. Vector Graphic Rectangle Tool - Draw Button Background
   1. Select Color
   2. Draw Background Layer on Canvas
   3. Select "Arrow" Tool (Select Tool)
   4. Select Rectangle
   5. Property Inspector -
      1. Set width to 126
      2. Set height to 16
      3. Set X axis to 0 (in relation to the canvas)
      4. Set Y Axis to 0 (in relation to the canvas)
      5. Effects >Bevel & Emboss > Inner Bevel
5. Select Text Tool from Fireworks Toolbar
   1. Properties Inspector
      1. Set Text Font to Arial
      2. Set Text Size to 11 pt
      3. All Caps
      4. Type text on the toolbar
      5. Note - You may have to turn off "Auto Kern"
6. Using Select Tool, Shift + Select and select both the Text Layer and the Rectangle Layer
   1. Modify > Align > Center Horizontal
   2. Modify > Align > Center Vertical
   3. With both layers still selected, select Modify > Symbol >Convert to symbol - Symbol Dialog Box appears
      1. Select Button Symbol
      2. Give button symbol a descriptive name b-purple_lnav
      3. The button is saved in the Fireworks library for this .png file.
7. Save the document - purple_lnavbar.png
8. Open the Fireworks Library - Window > Library
9. Select the Button, and double-click the button to edit it
10. When the Button Editor opens, modify the four states of the button by copying the button from the previous state; 
    1. Change the
       1. rectangle color and;
       2. the text type color;
       3. for each button state,
       4. by selecting the rectangle and the text separately in each state:
    2. Up - default state, not affected by mouse movement
    3. Over - Mouse over the button
    4. Down = Mouse click (usually red)
    5. Over While Down - Mouse passes over button after user clicks it
11. Close the Button Editor and return to the Fireworks canvas
12. Save
13. Duplicate the button symbol - create an Instance (copy) of the symbol
    1. Select the button on the canvas
    2. Edit > Duplicate
    3. A duplicate button appears over and to the right of the original button.
    4. Position the button on the canvas using the mouse selector
    5. Use the Property Inspector to position the image if necessary.
    6. With the duplicate button selected, change the Text
    7. Put in the link if you know it
    8. Put in the Alternate Text for the button "Link to TIGR Home Page"
14. Repeat as many times as necessary depending on the buttons you need.
15. Save a copy - File > Save a Copy
16. Export the HTML and graphic slices for use in Dreamweaver
    1. File > Export > Export Dialog Box
    2. select the folder (tigr2007/images folder in your root folder) where the Fireworks HTML file will be stored
    3. Select the sub-folder where the tigr2007/images will be stored
    4. Hit OK.  The following files are created:
       1. purple_buttons_lnav.html
       2. sub-folder with graphics - purplebuttons
       3. Javascript notes sub-folder
       4. Upload all of these to the site when you upload the HTML
17. Create your web page
18. Import Fireworks HTML: Insert Toolbar > Common > tigr2007/images Icon > Fireworks HTML
19. Edit Fireworks HTML - See the button on the Properties Inspector when you select the buttons on the dreamweaver page.