Creating a Multiple State Navigation Bar

Author: Kim Cavanaugh
Author's Site: Beginner's Guide to Dreamweaver and Fireworks
Reference ID: 15626

Introduction

One of the more popular navigation features on the Web is the tabbed interface that simulates the appearance of file folder tabs for site navigation. Most people are quite familiar with file folders, so this simple interface can create a comfortable experience for viewers and allow them to quickly find your site's navigation features and begin moving through the site. In this project, you'll learn not only how to create the graphical interface that uses tabs as the primary means of navigation but also how you can add to your site's usability by employing multiple instances of a navigation bar.

So what exactly is a multiple state navigation bar anyway? Simply put, a multiple state navigation bar displays the Down state of a button to give your site's visitors a visual reference as to their location within your site. Some of the most popular sites on the Web use this navigation scheme because it is simple and intuitive and yet allows the site a great deal of depth.

Fireworks has allowed for the automatic creation of multiple-state navigation bars since version 3, but the process has become much simpler, and a more intuitive with the addition of the Property inspector in Fireworks MX.

Goals of this Tutorial

In this tutorial you will learn the following:

• Using Fireworks symbols to create a tabbed interface
• Using new features of the Property inspector in Fireworks MX
• Modifying symbol properties in Fireworks MX
• Export settings for creation of multiple navigation bars
• Inserting your completed navigation bars in Dreamweaver MX

Understanding Button States

Before we begin, let's review the uses of button “states” and how they help define where your visitor is when they view your site.

• Up-The appearance of a button when it is first loaded into a web page.
• Over-The appearance of the button when a viewer passes over it with the mouse pointer.
• Down-Used when navigation bars are designed that display a button as it might look if it were pressed down. This button state can be used to help viewers orient themselves to their location within your web site.
• Over While Down-When a button displays in the Down state, you can still change its appearance by using this option. A button already displaying its down appearance can change again when a viewer passes the mouse over it.
  

Using the Button Editor

In this tutorial you'll build a component for a web site—a navigation bar with buttons arranged horizontally. In this case the navigation bar is a component intended for insertion into your pages as part of a Dreamweaver template. While there are many ways to compose pages in Fireworks this example assumes that this is just a part of the overall page design.

Start by creating a new document in Fireworks with a canvas size of 500 pixels wide by 40 pixels high. Set the canvas color to white and save the file as navbar_practice.png. In addition to creating this file, use your computer's Explorer or Finder controls to create a new folder named navbar on your hard drive.

Creating the tabs is a relatively easy process. Start by selecting Edit» Insert» New Button to open the Button editor. Note that by default the Button editor begins on the Up state, as designated by the tab at the top of the editor's window.

Using the Rounded Rectangle tool, draw a rectangle with a corner roundness of 35 pixels. To change this setting, you'll need to look in the Property inspector for the roundness setting once the tool is selected. Using the Info area of the Property inspector, set the size of the rectangle to about 100 pixels wide by 50 pixels high. In the illustration you see here the fill color has been set to a pale yellow and a 1-pixel soft-rounded stroke in gray has been applied.

To remove the bottom part of the rectangle, select the rectangle and use the Knife tool to cut the lower portion of the rectangle. Hold down SHIFT while dragging the Knife tool across the object to draw a straight horizontal line. After the rectangle is cut, click once on the canvas to deselect the rectangle and then use the Pointer tool to drag away the lower portion of the object, as you see in this illustration. With this lower portion selected, you need only press DELETE to remove it from the Button editor's canvas. This illustration shows the first two steps of the process.