Build Navigation Bar in Fireworks

This information came from http://www.macromedia.com/devnet/mx/fireworks/

How to Use Dreamweaver MX & Fireworks MX, QUE books, Lon Coley

 

 

  1. Open Fireworks
  2. File menu > New
  3. Width – 650
  4. Height – 40
  5. Resolution - 72
  6. Canvas Color – White
  7. OK

 

New Fireworks document appears in the workspace

SAVE the file

  1. File Menu
  2. Save
  3. give the file a name such as navigationbar.png

 

Create buttons

Create one button (will be in the library) and then use this button to make the other buttons to fit on the navigation bar.  [any thing in the library can be copied and changed and all instances of the item will be changed at one time]

  1. Make sure the first button is large enough to contain the text of the longest word or words in the navigation bar.
  2. The longest on in this example is Contact Us
  3. Click the rectangle tool in the tools panel
  4. Drag a rectangle on the canvas

 

  1. Change the size and the position of the rectangle
  2. Be sure the rectangle is selected
  3. Select white from the Stroke Color pop-up menu
  4. Stroke value – 1
  5. Pencil > Pixel Hard

 

  1. In the W – width text box – 131
  2. In the H – height text box – 40
  3. In the X – X text box - -1
  4. In the Y -  Y text box – 0
  5. Click once at the center of the blue rectangle
  6. .Click the Text tool
  7. Type Contact Us
  8. Use the pointer tool  
  9. Drag the text to the center of the rectangle

  1. Change the font to Arial Rounded MT Bold, size 12
  2. Click the center align button

.

Change the button to a symbol

  1. Select the rectangle and the text
  2. Select menu > Select All
  3. Select the Modify menu > Symbol > Convert to Symbol
  4. .
  5. .Type a name such as Five button nav bar
  6. Click Button
  7. OK
  9. A button instance in the Library has been created on the right side of the screen– use to make more buttons for the navigation bar – if you make a change to the instance – ALL instances of this button will be changed

 

 

Create Button States

These are the ways that the button appears when rolled over or clicked on a web page.

  1. Double-click the button you just created
  2. Button Editor opens
  3. Click the canvas to make sure everything is deselected
  4. The four tabs at the top of the dialog box are the way the button changes as it is clicked or the mouse is dragged over it
  5. The Up instance is the one created

 

  1. Click the Over tab – the over state is the way the button will be when the pointer goes over it
  2. The Button Editor dialog box changes and there is a Copy up Graphic button added at the bottom right of the dialog box
  4. Click the Copy Up Graphic button
  5. The button is copied from the Up tab
  7. Change the color of the button to give the user feedback

¬          . Select the rectangle ONLY– not the text

¬          Click the Fill Color Box in the Property Inspector

¬          Select Red as the color – the rectangle changes to red

Select another color if you desire

  1. Click the Down tab

¬          Click the Copy Over Graphic Button

¬          This is the way the button appears after a user clicks the button

¬          Change the color is you desire

  1. Click Done

¬          Saves the changes to the button symbol

  1. Click the Preview button in the upper left corner
  2.  
  3. Move the cursor over the button to see change
  4. Click the Original tab to turn the slices on again [may also click the show  slices button on the toolbar

 

Create More Button Instances to use on your Navigation Bar

  1. Select the button in the workspace
  2. Click Edit menu > Clone
  3. .A new instance appears on top of the original button
  5. Drag the button to the right or hold down the Shift key and depress the right arrow key to move the button over to the right
  6. Click the Edit Menu > Clone and make 3 more instances of the button and drag to the right on the navigation bar OR [depress the ALT key and use the pointer to make a copy of the button]
  7. .
  8. Click the Hide Slices and Hotspots button
  9. Drag the buttons spacing as you desire
  10. Click the Show Slices and Hotspots button  to turn slices back on

 

Change the text on buttons

  1. Click the first button at the left of the navigation bar
  2. Changes to the button instance does not change the button instance in the library
  3. In the Property Inspector at the bottom of the screen
  4. Highlight the Contact Us in the Text box
  5. Type Home or whatever text you want
  7. Click each of the other buttons and change the text on the buttons
  8. Click the Preview tab
  9. Click the Turn Off Slices button on the toolbar
  10. Move the pointer OVER the buttons and you should see the changes – buttons turn from blue to red as you move the pointer over them
  11. ****If you update the color of a button in the Library, all the buttons change.

 

Assign URLs to Buttons

 

  1. Select the Home button
  2. Type a URL to which to link the button  - I used a page to Casey
  4. In the Button box –type a name for the button – I used Home – name each button so that they are easier to find

 

Optimize the Navigation Bar BEFORE exporting from Fireworks to Dreamweaver or whatever program you are using for your WEB pag

 

The graphic will exported with the best possible balance of compression and quality

  1. Click outside the buttons on the canvas so that the buttons are not selected
  2. Click Window  Optimize -  the Optimize window is on the right side of the screen
  3. Below are the best choices for this navigation bar
  5. Click the Hide Slices and Hotspots button in the tools panel
  6. Click the Preview button at the upper left of the document window
  7. The size and length of time for the navigation bar to appear when it is exported is at the top right of the window

  1. At the bottom of the screen is the Preview size and set magnification box

 

Set HTML Preferences

  1. Before you export the document the first time, set the HTML export preferences
  2. Select File menu  HTML Setup
  3. .

  1. .Select Rollover (over, down, overdown) from the Frame Name menu

  1. Click OK

 

Export the Document to HTML format

Can click the Quick Export icon  at the top right of the screen

 

             

OR File Menu > Export

  1. Export to a Dreamweaver Site
  2. Set up a Images folder in the Dreamweaver Site
  3. Go to the navigation_bar folder that you created – should be inside an images folder in the Dreamweaver site

¬          Be sure the filename reads navigation_bar.htm or whatever you saved it as at the beginning

  1. File Menu > Save > navigation.png (this lets you make changes easily)

 

View the Navigation Bar file in Dreamweaver

  1. Open Dreamweaver
  2. Open the Files Panel – On right side of screen
  4. Click the + beside the navigation_bar folder
  5. There will be a long list of navigation_bar files to appear

 

View the Fireworks HTML in Dreamweaver and a Browser

Depress the F12 key to go quickly to the Browser

May have to -click to finish opening the site

Allow Blocked content

OK

 

Roll over the buttons and/or click the buttons to follow the URL links

 

Click the  Show Code and Design View Icon to see both Code and Design – can make changes any time

Click the  Show Design View Icon to see only the Code – can make changes in the Code at any time