TUTORIAL 4 Building a Navigation Bar with Fireworks

Transcription

1 TUTORIAL 4 Building a Navigation Bar with Fireworks 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. The finished product will appear at the top of the Trio Motors website home page that you re creating. This tutorial contains the following sections: Create a new Fireworks document on page 140 Create a button symbol on page 141 Create button states on page 144 Create multiple button instances on page 146 Change button instance text on page 147 Assign URLs and names to the buttons on page 148 Optimize the navigation bar on page 149 Set HTML preferences on page 150 Export the document to HTML format on page 151 View the exported files in the Dreamweaver Files panel on page 152 View the Fireworks HTML file in a browser on page

2 Create a new Fireworks document In Tutorial 2, Creating a Table-based Page Layout in Dreamweaver, you used HTML tables to lay out your index.cfm page. You also inserted a line break (a space) between the first and second table. Now you ll create a new Fireworks document for a nav bar that fits between the two tables. 1 In Fireworks, select File > New. The New Document dialog box appears. 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. In Chapter 6, Setup for Sample ColdFusion Site, you created a folder called png within the site. When you save the new navbar.png file, save it inside that folder. It is good practice to keep all your PNG files in a central location. 140 Tutorial 4: Building a Navigation Bar with Fireworks

3 Create 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, on page 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. 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. Note: If you cannot see the Width and Height text boxes, click the Expander arrow in the lower right corner of the Property inspector. Create a button symbol 141

4 6 In the Tools panel, click the Text tool. 7 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. 8 Click once at the center of the blue rectangle. An empty text block is created. 9 Type FINANCIAL SERVICES inside the text block in capital letters. The width of the text block expands as you type. 10 Click once outside the text block to apply your entry. 11 Use the Pointer tool to center the text near the top of the rectangle as shown. 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 Select both the rectangle and the text block by selecting Select All from the Select menu. 13 Select Modify > Symbol > Convert to Symbol. The Symbol Properties dialog box appears. 142 Tutorial 4: Building a Navigation Bar with Fireworks

5 14 Type Trio Nav Button in the Name text box, select Button as the symbol type, and click OK. 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. 15 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. Create a button symbol 143

6 Create 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. 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. 144 Tutorial 4: Building a Navigation Bar with Fireworks

7 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. 6 Click the Fill Color box in the Property inspector and select gray (#CCCCCC) as the color. The rectangle changes to gray. Note: This is the same web safe color that you chose for one of the table backgrounds in Tutorial 2, Creating a Table-based Page Layout in Dreamweaver. 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 slices and hotspots button Hide slices and hotspots button 10 Click the Original tab and turn slices back on by clicking the Show Slices and Hotspots button. Create button states 145

8 Create 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. 4 Clone three more instances of the button, and position each instance to the right of the previous instance. 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. 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. 146 Tutorial 4: Building a Navigation Bar with Fireworks

9 Change 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. 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. 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. Change button instance text 147

10 Assign 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. 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. 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 your Macromedia Dreamweaver MX 2004 site. 148 Tutorial 4: Building a Navigation Bar with Fireworks

11 Optimize 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. 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. 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. Optimize the navigation bar 149

12 Set 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. 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. 150 Tutorial 4: Building a Navigation Bar with Fireworks

13 Export the document to HTML format Your document is now ready for exporting. 1 Create a folder called navbar inside the images folder of your Trio Motors Dreamweaver site. 2 With the navbar.png file open in the Fireworks Document window, select File > Export. The Export dialog box appears. 3 Navigate to the navbar folder that you created in step 1. It should be inside the images folder of the Trio Motors 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. Export the document to HTML format 151

14 View 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, select the Trio Motors site in the Files panel. 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. 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. 152 Tutorial 4: Building a Navigation Bar with Fireworks

15 View 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. 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 your web browser displays the corresponding live pages when you click the buttons. View the Fireworks HTML file in a browser 153

16 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. 4 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 your 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 copied the Samples folder to your hard drive for the previous tutorial, the complete files are already on your computer. For more information about any of the procedures described in this tutorial, see Fireworks Help. 154 Tutorial 4: Building a Navigation Bar with Fireworks