Web Page w/ MFW > Create N Edit Button to Make a Navigation Bar - Lesson 04

Buttons are web objects that link to other web pages. Their appearance typically changes depending on the user’s mouse movement or other action, such as clicking, as a visual cue indicating interactivity. For example, a button displays a different rollover effect when the pointer moves over it than when it has been clicked. 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 within a nav bar look the same, except for their text. Here you’ll create a nav bar for the Global website.


Create a button symbol

The initial graphic and text for one button has already been created for you. You’ll convert this graphic into a button symbol.

1. In MFW, select the button graphic (labeled BUTTON TEXT) in the upper left corner of the document.
2. Choose Modify - Symbol - Convert to Symbol. The Symbol Properties dialog box opens.
3. Type My Button in the Name text box, choose 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 of the instances of that symbol in your document change automatically. Symbols reside in the library.
4. If the Library panel is minimized or isn’t visible, click the Assets panel group’s expander arrow and click the Library tab, or choose Window - Library. Your symbol is listed in the Library panel.
   
   

Create Button States

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

1. Double-click the button instance you created. Tip: 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 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 where a user must click or roll over 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.
3. Click the Over tab at the top of the Button Editor, then click the Copy Up Graphic button. The button graphic is copied from the Up tab. The Over state of a button is its appearance when the pointer rolls over it. To give users visual feedback, you’ll change the color of the rectangle behind the text.
4. Select the rectangle. Be sure to select the rectangle and not the text; if you are unsure which one you are selecting, check the Layers panel to see which one is selected.
5. Click the Fill Color box in the Property inspector and choose black as the color. The rectangle is now black.
6. 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 its appearance after a user clicks it. This time you won’t change the color of the rectangle; you’ll leave it as it is.
7. Click Done in the Button Editor to apply your changes to the button symbol. 8 Click the Preview button in the Document window and test the button’s states. Turn slices off if necessary. When you are finished, click the Original button and turn slices back on.

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.
2. Choose 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 two more instances of the button, and position each to the right of the previous instance. Tip: As a shortcut, press Alt (Windows) or Option (Macintosh) while dragging the selected instance with the pointer to make a copy of it. After positioning the new instance to the immediate right of the previous instance, choose Edit - Repeat Duplicate to automatically create and place another copy of the instance.

Change Button Instantce 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 on a button instance 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 will not affect the original button symbol in the library.
2. In the Property inspector, replace the text in the Text box with the word HOME in uppercase letters. Then press Enter. The text on the button changes to reflect your entry.
3. For the remaining three buttons, change the button text to VEHICLES, RATES, and CONTACT US, respectively.
   

Assign URLS 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 to buttons using the Property inspector.

1. Select the button instance labeled Home.
2. Enter index.htm in the Link text box of the Property inspector. When clicked in a web browser, the Home button will jump to a page called index.htm. You’ll discover later in the tutorial why you linked the Home button to this page.
3. Select the Vehicles button instance 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 Vehicles button to jump to. Note: Be sure to enter the URL of an actual website, so that you can test your button links later.
4. Assign a URL to each of the remaining button instances. Once again, any working URL will do.
5. Choose 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 choosing File - Preview in Browser - Set Primary Browser. When the document opens in your browser, test the buttons you created. Except for the Home button, which links to a file you haven’t created yet, each button should jump to the link you specified in Fireworks.
   

Edit The Button Sumbols

Next you will modify the original button symbol. The changes you make will be automatically applied to all the button instances in your nav bar. You may be wondering what the original button symbol looks like now that you’ve changed text on several of its instances.

1. Double-click any of the button instances in the workspace. The Button Editor opens with the original button symbol and text displayed in the workspace. The original button symbol is still intact and displays the original text. When you changed the text of each button in the workspace, you only edited each button instance. If you make any changes here to the rectangle or to text appearance, you will be editing the original symbol, so those changes will be reflected in all the instances in the workspace.
2. Click the Over tab.14
3. Select the black rectangle.
4. Click the Fill Color box in the Property inspector and enter FF6633 as the color value. Press Enter to apply the color change. The rectangle is now orange.
5. Click Done in the Button Editor to apply the change to the button symbol.
6. Click the Preview button in the Document window and test the buttons. Each button’s Over state is now orange. You changed only the button symbol, but the change was applied to all the button instances in your nav bar.
7. Click the Original button, and double-click any button instance in the workspace. This time you’ll change the text in the button symbol.
8. Select the button text in the Button Editor, and in the Property inspector choose Arial as the font. Do this for each button state.
9. Double-click the text block in the Button Editor, and delete the word BUTTON.
10. Click anywhere in the workspace away from the text block to deselect it.
11. Click Yes in the message box that asks whether you want to change the text in the other button states. Examine the various button states in the Button Editor. The text changes in one state are reflected across all the button states. Compare this to when you changed the font; you had to change it in each state. That’s because you can apply different graphical and text attributes to each state of a button. This is useful if you want the text color to change when a user rolls over a button, for example.
12. Click Done to exit the Button Editor. The font on each button instance changes to reflect the new font selection, but the text remains the same. Button instances reflect only the changes you make to a button symbol’s graphical appearance, including its text attributes, but not changes you make to the text itself. Button symbols make it possible for you to change the graphical appearance of all button instances in a nav bar quickly, while preserving each instance’s unique text.