Nav Bar or Designing a Site Using Fireworks

This navigation bar will have special JavaScript and coding that will display the down state of each button on the page that is currently being viewed.

In this tutorial you will make an entire Web site design. Dowload the logo needed for this tutorial. Make a new folder on your hard drive and name it. Save the logo.gif you downloaded into the folder.

1. Open a new document (File|New) Type in a Width of 800 and a Height of 600. For the background color, click on the Custom, radio button then click in the color box. Type in #E6F5FF, press Enter and then click OK.

2. Select the Rectangle tool and drag to draw a rectangle any size. In the Property inspector change the Height to 88 and width to 800. Place at the top of the document.

3. In the Property inspector select a Fill Category of Linear. Click the Fill color box to access the Gradient Editor. Click on the left color marker (below the color ramp) and type the color #E6F5FF. Click the right color marker and type in #80CCFF, press Enter.

4. In the Property inspector choose a Texture of Parchment Paper and set the opacity of it to 50%.

5. Choose File|Import and import the logo.gif you saved for this tutorial.

6. Click in the document to place the logo. move it to the top left corner and have it contained in the rectangle.

7. We'll use one of the buttons that ships with Fireworks MX. Choose Edit|Libraries|Buttons. Select the top button and click on Import.

8. Press the Alt/Option key and drag out 3 more copies.

9. Drag a guide (rulers must be visible [View|Rulers]) for the top of the buttons. Double-click on the green guide line and type in 82.

10. Place your first and last button where you want them. Shift+select all the buttons and choose Modify|Align|Distribute Widths. This will space your buttons evenly.

11. Double-click on the button symbol. Click the Down tab at at the top left. Select "Include Nav Bar Down State" to select it and then close the Button Editor.

12. Select the first button on the left. In the Property inspector delete the name that is currently in the Button field (not the name in the Text field) and name it index.

For nav bars the button name has to be the same as the link name in order for the down state to show on the page being viewed.

13. In the Text field type in Home. In the link field enter index.htm and add Alt text.

Note: You can only use the htm extension for nav bars not Html.

14. Click the Show Down on Load option to select it.

15. Select the second button and in the Properties inspector change the Text to Products, Name to products and the Link to products.htm.

Notice how the text of the button changed? This doesn’t break the link to the symbol as it did in previous versions of Fireworks.

16. Repeat step 15 for the remaining buttons using these properties:

Button 3:
Text: Services
Button: services
Link: services.htm

Button 4:
Text: Contact Us
Button: contact
Link: contact.htm

17. Make your optimization settings in the Optimize panel. Save your file as navbar.png.

Page Content

You could type text right into the Fireworks layout but then it would be an image. It's best to use HTML text. You can skip ahead to the Export section if you plan on adding the text in Dreamweaver. If you want to use just a Fireworks layout then continue here.

1. Select the Slice tool and draw a rectangle. Set its size to a Width of 679 and a Height of 514 and change the Type field to HTML. Place the slice at the right side of the document and under the banner.

2. Click the Edit button and type your text.

3. Click on the Hide Slices and Hotspots icon in the Tools panel. Select the top banner rectangle and in the Property inspector click the plus sign to add an Effect. Select Shadow and Glow|Drop Shadow and accept the default.

4. Drag the red line of the HTML slice to below the drop shadow.

5. The red lines indicate where automatice slices will be made if you choose an export option named "Include Areas without Slices". We'll be using it but the top area has some awfully big slices. So select the slice tool and draw a slice around the logo then around the top portion above the first two buttons.

For the right side you can add another rectangle with texture, or images or whatever you'd like. Also if you'd like images in the content area you could make the HTML slice smaller or even open the exported file in Dreamweaver and either nest a table or add a layer for images.

Exporting the Nav Bar

Now its time to export this special nav bar with all its code intact.

1. Prior to exporting you have to make a setting in the HTML setup in order for our menu to export properly. Choose File|HTML Setup and click on the Document Specific tab.

The only thing we are concerned about is the Multiple Nav Bar HTML Pages option. Click on it to select it. Don't close yet.

Since we don’t want to export the entire Fireworks page and just the nav bar we don’t want Fireworks to generate a table with additional cells and rows in it. You can tell Fireworks how to export your tables.

2. Select the Table tag. In the Space With field choose Single Table - No Spacers. In the Contents field choose None and click OK.

Now when you export you will export your buttons, code and the pages that they link to will automatically be generated for you.

3. Now choose File|Export. The Type is HTML and Images, Slices is set to Export Slices. Click on Include Area without slices to turn if off. We want to export just the nav bar not the background of the image.

4. Navigate to the folder you want to export into. It's best to export to a folder of the root of the site your are designing. Name it navbar

5. Select "Include Areas without Slices" and select "Put Images in Subfolder". A lot of images will be generated so its easier to manage if they are in their own folder. Click the browse button and add a folder named navbar wherever you saved your buttons.

5. When you are done click Save.

6. That's it. Now navigate to your saved folder and open index.htm in your browser. Click on each button and it will open a page already made for you and the down state of the button will be shown on each page you click on.

This is how it looks when the Services button is clicked. Notice that Services is in the down state.

If you'd like to write the email is:Joyce@JoyceJEvans.com