Jon Michael Varese

www.jmvarese.com

This tutorial shows you how to build a Macromedia Fireworks MX 2004 navigation bar that you can use on multiple pages of your website. A navigation bar—also known as a nav bar—is a series of buttons that appears on one or more pages of a website. Typically, all the buttons in a nav bar look the same, except for their text.

This tutorial is the one in a series of tutorials that shows you how to build a dynamic website from start to finish with Macromedia Studio MX 2004. The complete set of tutorials is available in the Exploring Studio MX manual. It includes the following tutorials:

• Sketching a Site Navigation Scheme in FreeHand
• Creating a Table-based Page Layout in Dreamweaver
• Creating a Banner Graphic in Fireworks
• Building a Navigation Bar with Fireworks
• Building Rich Media with Fireworks and Flash
• Assembling and Editing Studio Assets
• Building a Database Search Feature

Note: Before proceeding with any of the Studio MX 2004 tutorials, you might want to read Chapter 7, "Web Development Workflow," in the Exploring Studio MX manual. This chapter provides conceptual information about planning, designing, and building dynamic websites.

Requirements

To complete this tutorial you will need to install the following software and files:

Fireworks MX 2004

• Try
• Buy

Creating a New Fireworks Document

First you'll create a new Fireworks document for the nav bar.

1. In Fireworks, select File > New.

   The New Document dialog box appears.

   

   Figure 1. The New Document dialog box

2. In the Width text field, enter 650, and select Pixels (the default) from the Width pop-up menu.
3. In the Height text field, enter 40, and select Pixels (the default) from the Height pop-up menu.
4. In the Resolution text field, enter 72, and select Pixels/Inch (the default) from the Resolution pop-up menu.
5. Under Canvas Color, select the White button if it is not already selected.

6. Click OK.

   A new Fireworks document appears in the workspace. The canvas is white and is 650 pixels wide by 40 pixels high.

7. Save the file (File > Save) as navbar.png.

Creating a Button Symbol

Now you'll create the first button for the nav bar. You'll eventually use this button to create all the other buttons in the nav bar, so you want to make sure that the first button you create is large enough to contain the text of the longest word or words in the nav bar. In this example the longest words in the nav bar are Financial Services, so you'll create a Financial Services button first.

Note: You should be familiar with the Fireworks Tools panel and Property inspector before proceeding. For more information, see Tutorial 3, "Creating a Banner Graphic in Fireworks" in the Exploring Studio MX manual.

1. Make sure that the file you created in the previous section, navbar.png, is open in the Document window.
2. In the Tools panel, click the Rectangle tool.
3. In the Property inspector, select light blue from the Fill Color pop-up menu. This tutorial uses a hexadecimal value of #CCCCFF.

4. Drag a rectangle across the canvas as shown.

   

   Figure 2. Rectangle on the canvas

   Don't worry about the exact size and position of the rectangle. You'll set its properties in the next step.

5. With the rectangle still selected, set its stroke, width, height, and x and y coordinates in the Property inspector.

   • Select white (#FFFFFF) from the Stroke Color pop-up menu.
   • Enter 1 as the stroke value.
   • Select Pencil > Pixel Hard from the Stroke category
   • Enter 131 in the Width text box.
   • Enter 40 in the Height text box.
   • Enter -1 in the X text box.

   • Enter 0 in the Y text box.

   

   Figure 3. Rectangle properties in the Property inspector

6. Note: If you cannot see the Width and Height text boxes, click the Expander arrow in the lower right corner of the Property inspector.

7. In the Tools panel, click the Text tool.

8. In the Property inspector, do the following:

   • Select a font from the Font pop-up menu. In this tutorial, Arial is selected.
   • Enter 11 as the font size.
   • Select dark blue (#000033) from the Fill Color pop-up menu.
   • Click the Bold button.
   • Click the Center Alignment button.

   • Select Smooth Anti-Alias from the Anti-Aliasing Level pop-up menu.

   

   Figure 4. Text properties on the Property inspector

9. Click once at the center of the blue rectangle.

   An empty text block is created.

10. Type FINANCIAL SERVICES inside the text block in capital letters. The width of the text block expands as you type.
11. Click once outside the text block to apply your entry.

12. Use the Pointer tool to center the text near the top of the rectangle as shown.

    

    Figure 5. Centering the text with the Pointer tool

    Remember that you can also move objects in Fireworks by using the arrow keys on your keyboard. You can use them to move an object up, down, left, or right, one pixel at a time.

    In the example, the x coordinate of the text block is 0 and the y coordinate is 1.

13. Select both the rectangle and the text block by selecting Select All from the Select menu.

14. Select Modify > Symbol > Convert to Symbol.

    The Symbol Properties dialog box appears.

15. Type Trio Nav Button in the Name text box, select Button as the symbol type, and click OK.

    

    Figure 6. The Symbol Properties dialog box

    A slice appears on top of the button graphic, and a shortcut icon appears at the left of the slice. This indicates that the selection in the workspace is an instance of the symbol you just created. Symbols are like master copies of your graphics. When you change a symbol, all the instances of that symbol in your document change automatically. Symbols reside in the library.

16. If the Library panel is minimized, click the word Assets on the Assets panel and click the Library tab. If the Assets panel isn't visible, select Window > Library.

    Your new button symbol is listed in the Library panel.

    

    Figure 7. The button listed in the Library panel

Creating Button States

Next, you'll create various states for the button symbol. Button states are the various ways that a button appears when rolled over or clicked in a web browser.

1. Double-click the button instance that you just created.

   Alternatively, you can double-click the preview of the button in the Library panel or the symbol icon beside it in the Library panel's symbol list.

   The Button Editor opens, with the button graphic displayed in the work area.

   

   Figure 8. The button graphic displayed in the Button Editor

2. Click the canvas to make sure that everything is deselected.

3. Click the tabs at the top of the Button Editor.

   The first four tabs represent the button states. The last tab, Active Area, represents the hot area on the button, or the area where a user must click or roll over with a pointer to activate the button states. The active area is also the swap area for the button, or the area that changes with each button state. Currently there are no states for the button symbol other than the Up state, the state of the button before it is rolled over or clicked.

4. Click the Over tab at the top of the Button Editor, and then click the Copy Up Graphic button.

   The button graphic is copied from the Up tab. The Over state of a button is the way it appears when the pointer rolls over it. To give users visual feedback, you'll change the color of the rectangle behind the text.

5. Select the rectangle. Be sure that you don't select the text instead; if you are unsure which one you are selecting, check the Layers panel (Window > Layers) to see which one is selected.

   

   Figure 9. The rectangle selected within the Layers panel

6. Click the Fill Color box in the Property inspector and select gray (#CCCCCC) as the color.

   The rectangle changes to gray.

   Note: If the color change is not perceptible enough on your monitor, you can select another color.

7. Click the Down tab at the top of the Button Editor, and click the Copy Over Graphic button.

   The button graphic is copied from the Over tab. The Down state of a button is the way it appears after a user clicks it. This time you won't change the color of the rectangle; you'll leave it as it is.

8. Click Done in the Button Editor to apply your changes to the button symbol.

9. Click the Preview button in the upper left corner of the Document window and test the button's states. Turn slices off if necessary. You can turn slices off by clicking the Hide Slices and Hotspots button in the Tools panel.

   _show_slices12.gif

   

   Figure 10. The Show and Hide slices buttons in the Tools panel

10. Click the Original tab and turn slices back on by clicking the Show Slices and Hotspots button.

Creating Multiple Button Instances

Next, you'll create more instances of the button symbol.

1. Select the button in the workspace if it isn't already selected.

   The Property inspector displays button properties.

2. Select Edit > Clone.

   A new instance of the button appears on top of the original button.

3. Hold down Shift while pressing the Right Arrow key repeatedly to move the new instance to the right.

   This moves the instance in 10-pixel increments. If necessary, use the arrow keys alone to move the selection one pixel at a time. Position the instance to the immediate right of the original instance, but not overlapping, as shown in the illustration below.

   

   Figure 11. Positioning the cloned rectangle

4. Clone three more instances of the button, and position each instance to the right of the previous instance.

   

   Figure 12. Positioning three more cloned rectangles

   Tip: As a shortcut, you can press Alt (Windows) or Option (Macintosh) while using the Pointer tool to drag the selected instance to make a copy of it. After positioning the new instance to the immediate right of the previous instance, select Edit > Repeat Duplicate to automatically create and place another copy of the instance.

5. In the Tools panel, click the Hide Slices and Hotspots button, and then use the arrow keys on your keyboard to move the buttons one pixel at a time until they are uniformly separated. In the nav bar in this example, no space exists between the buttons.

   

   Figure 13. Uniformly spacing the rectangles

   Note: With no space between the buttons, the right edge of each button (except the last button) touches the left edge of the button next to it, giving the appearance of two pixels of white space between each button. (Remember that the white stroke, or outline, of each rectangle is one pixel.) The fifth button, like the first button, should be "off" the canvas by a few pixels. That is, there should be no white space showing at the left or right edges of the canvas.

6. Click the Show Slices and Hotspots button to turn slices back on.

Changing Button Instance Text

Now that you've created all the buttons for your nav bar, you need to give each button unique text. You can easily change the text of a button instance by using the Property inspector.

1. Select the button instance at the far left.

   Properties for the button instance appear in the Property inspector. With the exception of the Export Settings pop-up menu, these properties apply to the selected instance only. Making changes here does not affect the original button symbol in the Library.

2. In the Property inspector, replace the text in the Text box with the word SHOWROOM in capital letters. Then press Enter (Windows) or Return (Macintosh).

   The text on the button changes to reflect your entry.

   

   Figure 14. Changing the showroom button text in the Property inspector

3. Repeat steps 1 and 2 for the remaining buttons.

   • Enter NEWS & EVENTS for the text of the second button.
   • Enter OWNERS for the text of the third button.
   • Leave FINANCIAL SERVICES as the text for the fourth button.

   • Enter PREVIEWS for the text of the fifth button.

   

   Figure 15. The updated button text for all buttons

4. Click the Preview tab, turn off slices by clicking the Hide Slices and Hotspots button, and roll the pointer over the buttons in the nav bar.

   The buttons change from blue to gray as you move the pointer over them.

In this section, you used the Property inspector to change the text of individual button instances without affecting the original button symbol in the Library. If you wanted to change the color of all the buttons to red, however, you would double-click the original button symbol in the Library, select the rectangle, change the Fill color to red, and click Done. Updating a button symbol in the Library updates all instances of that symbol in the document.

Assigning URLs and Names to the Buttons

Next, you'll assign a unique URL, or link, to each button instance. A URL, or Uniform Resource Locator, is the address or location of a page on the web. You can easily assign URLs and names to buttons by using the Property inspector.

1. Select the button instance labeled SHOWROOM and enter your favorite URL in the Link text box of the Property inspector.

   

   Figure 16. Entering the URL in the Property inspector for the showroom button

   For the purposes of this tutorial, any working URL will do. If you were creating a real website, you would enter the URL that you wanted the Showroom button to jump to.

   Be sure to enter the URL of an actual website, so that you can test your button links later.

2. In the Button text box, type showroom.

   

   Figure 17. Giving the showroom button and instance name

   Naming each of your button instances makes them easier to identify after they are exported.

3. Assign a working URL and unique name to each remaining button instance.

   When you name button instances, don't use spaces or high ASCII characters (ASCII characters from 129 to 256, including accents and math symbols, which are not the same on all computers). For example, you might name the News & Events button instance news_events.

4. Select File > Preview in Browser > Preview in [your preferred browser]. To test button links, you must preview the document in a browser.

   Note: If your browser is not listed, you must first select a browser by selecting File > Preview in Browser > Set Primary Browser.

Your navigation bar is now complete. In the next sections, you'll optimize your work and export the nav bar to a Macromedia Dreamweaver MX 2004 site.

Optimizing the Navigation Bar

Before you export any document from Fireworks, you should always optimize it. Optimizing a document ensures that a graphic is exported with the best possible balance of compression and quality.

1. With the navbar.png file open in the Document window, do one of the following to open the Optimize panel if it isn't already open:

   • Select Window > Optimize.
   • If the panel is minimized on the right side of the screen, click the word Optimize to view the entire panel.
2. Click in the Document window outside the canvas to make sure that no buttons are selected.

3. Select GIF Websnap 128 from the Settings pop-up menu if it isn't already selected.

   The options in the panel change to reflect the new setting.

   

   Figure 18. The new settings displayed in the Optimize panel

4. Click the Hide Slices and Hotspots button in the Tools panel, and click the Preview button in the upper left corner of the Document window.

   Preview view displays your document as it will appear when it is exported with the current settings.

   

   Figure 19. The navigation bar in Preview view

In the lower left corner of the Preview window, Fireworks displays the file size of the exported file and the estimated time it will take to display the graphic when it is viewed on the web. For more information, see "Optimizing and Exporting" in Fireworks Help.

Setting HTML Preferences

HTML, or Hypertext Markup Language, is the primary language used to create and display web pages on the Internet. You don't need to understand HTML to use Fireworks, but it helps to keep in mind that when Fireworks slices are exported, they become cells in an HTML table.

Before you export the document for the first time, you need to set HTML export preferences.

1. Select File > HTML Setup.

   The HTML Setup dialog box appears.

   

   Figure 20. The HTML Set up dialog box

   The options that you set in this dialog box will affect all future Fireworks documents that you create, except the options on the Document Specific tab.

2. On the General tab, select Dreamweaver HTML from the HTML Style pop-up menu.
3. Select .htm as the file extension.

4. Click the Table tab.

   The Table tab allows you to change HTML table properties.

5. In the Space With pop-up menu, select Single Table, No Spacers.
6. From the Contents pop-up menu, select None.

7. Click the Document Specific tab.

   The Document Specific tab allows you to choose a variety of document-specific preferences, including a customized naming convention for your exported files. Remember that the options you set here apply only to the current Fireworks document.

   Note: You can apply the settings on the Document Specific tab to all new documents by clicking the Set Defaults button.

8. Select Rollover (over, down, overdown) from the first Frame Names pop-up menu.
9. Click OK to accept the settings on the Document Specific tab and close the HTML Setup dialog box.

For more information about setting HTML preferences, see "Exporting HTML" in Fireworks Help.

Exporting the document to HTML format

Your document is now ready for exporting. Ideally you will export your document to a Dreamweaver site so that you can easily insert the navbar into a web page. Before beginning this section, make sure that you have defined a Dreamweaver site, and created a folder called "images" in the main directory for the site. For more information, see the Exploring Studio MX manual.

1. Create a folder called navbar inside the images folder of your Dreamweaver site.

2. With the navbar.png file open in the Fireworks Document window, select File > Export.

   The Export dialog box appears.

   

   Figure 21. The Export dialog box

3. Navigate to the navbar folder that you created in step 1. It should be inside an images folder in your Dreamweaver site.
4. Ensure that the File name text box reads navbar.htm, and that the Save As Type (Windows) or Save As (Macintosh) pop-up menu reads HTML and Images.
5. Ensure that Export HTML File is selected in the HTML pop-up menu and that Export Slices is selected in the Slices pop-up menu.
6. Select Include Areas without Slices, and make sure that Put Images in Subfolder is not selected.

7. Click Save.

   The nav bar files are exported to the navbar folder of your Dreamweaver site.

   Remember that the PNG file is your source file, or working file. Although you've exported your document in HTML and GIF format, you must also save the PNG so that any changes you've made are reflected in the source file as well.

8. Select File > Save to save the changes to the PNG file.

Viewing the Exported Files in the Dreamweaver Files Panel

Now you'll examine the list of files that Fireworks exported. The new files created during the export process appear in the navbar folder within your Dreamweaver site.

1. In Dreamweaver, open the Files panel (Window > Files) and select the site to which you exported the navbar.

2. Expand the navbar folder by clicking the plus sign (+) to the left of the folder.

   A long list of nav bar files, as well as a navbar.htm file, appear.

   

   Figure 22. The nav bar files in the Files panel

   The navbar.htm file contains all the HTML code that you will need to insert into your Dreamweaver page, including the JavaScript code for the various states of the nav bar buttons. Fireworks also exported graphics files for your buttons. There are several GIF files, including one for each button state.

Viewing the Fireworks HTML File in a Browser

Now that you've examined the exported files, you're ready to test the nav bar in a browser.

1. Open a web browser and select File > Open (Internet Explorer) or File > Open File (Netscape). Then navigate to the navbar.htm file that you exported to the navbar folder of your Dreamweaver site.

   Alternatively, you can navigate to the navbar folder of your Dreamweaver site from your desktop and drag the navbar.htm file to an open web browser.

   Your nav bar appears in the browser window.

   

   Figure 23. The navigation bar in the browser

2. In the browser, click the buttons on the nav bar to test the links. If you added live links to the buttons (such as http://www.macromedia.com), your web browser displays the corresponding live pages when you click the buttons.

3. Find and execute the command that lets you view the source code for the page. Most web browsers let you view the source code with a command such as View > Source.

   

   Figure 24. The source code for the HTML page

   Scroll through the source code. If you know HTML and JavaScript, scan the code that Fireworks created to see how it works. If you don't know HTML and JavaScript, you can appreciate the work that Fireworks has done for you.

Completed versions of the files you created in this tutorial are available in the trio_motors_complete directory on the Studio MX 2004 CD. To locate the directory, insert your Studio MX 2004 CD, click Browse CD contents, and select the Samples folder.

If you do not own the Studio MX 2004 CD, you can obtain completed versions of the files from the Macromedia Studio MX 2004 Documentation Center. The Exploring Studio MX Tutorial Sample Files download includes the trio_motors_complete directory.

For more information about any of the procedures described in this tutorial, see Fireworks Help.

About the author