Moving up the complexity ladder is a navigation bar with four-state buttons. The Set Nav Bar Image behavior is used to create this type of navigation bar, where the buttons not only have rollovers, but also communicate to the user which page is currently being browsed. A navigation bar using this behavior has four states. Each state represents the button's appearance in reaction to a mouse event:
To add the Set Nav Bar Image behavior, follow these steps:
Repeat this process for the rest of your navigation bar buttons. Tip To make life easier after you export the navigation bar, take a moment to select each slice and enter a name for the slice, a label for the button, and a URL in the Property inspector. Double-check that everything is going to work by selecting each button and looking in the Behaviors panel. Each slice should now have the Set Nav Bar Image behavior applied to it (see Figure 4.11). Figure 4.11. Select each slice and use the Behaviors panel to make sure the Set Nav Bar Image behavior is selected.
For the ultimate test, you need to export the file to HTML and view it in your browser. Choose File, Export to get started. In the Export dialog box, make sure that HTML and Images is selected in the Export field. Click the Options button to launch the HTML Setup dialog box. Click the Document Specific tab. Make sure that the Export Multiple Nav Bar HTML Pages box is checked. Click OK to close the HTML Setup dialog box so Fireworks will export additional pages for each button in the navigation bar. Click Save to complete the export. Open the page in your browser to see how it works or preview it by clicking the Quick Export button and choosing Preview in Browser from the context menu. |