How to Make a Simple Navigation Bar in Dreamweaver

Create a navigation bar in Dreamweaver.

A navigation bar is a menu that usually spans the top of a Web page and provides users with links to navigate a website. You can create navigation bars in several ways in Adobe Dreamweaver, a leading Web development application. One of the more popular methods among Web designers is to import a navigation bar graphic, and then used Dreamweaver’s Image Map feature to define the menu links.

Things You'll Need

• Adobe Dreamweaver CS2 or later
• Navigation bar graphic

Instructions

1. Open an existing HTML page in Dreamweaver in which you want to insert a navigation bar, or start a new HTML page by clicking the “File” menu and choosing “New.” This displays the New Document dialog box. Choose “HTML” in the Type list, and then choose the desired layout in the Layout list. Click the “Create” button.

2. Click the "Insert" menu and choose "Image." This opens the Select Image Source dialog box. Navigate to your navigation bar graphic, select it, then click "OK." You can create a navigation bar in Photoshop, a leading graphics editing program, or Adobe Fireworks, a leading screen graphics editing program, or you can download a navigation bar from several sites on the Internet. Many sites provide free navigation bars. The typical navigation bar displays labels, such as Home, Products, Services, and Support, for navigating to pages in the website.

   Dreamweaver displays the Image Tag Accessibility Attributes dialog box.

3. Click "OK." Dreamweaver inserts the navigation bar graphic into your page.

4. Go to the Properties panel, and click the "Rectangle Hotspot Tool."

5. Hold the mouse button and drag the mouse cursor over the first label on the navigation bar. Dreamweaver displays a rectangle around the label. This is the clickable area.

6. Click in the "Link" field in the Properties panel and type the URL for this menu item.

7. Repeat steps 5 and 6 until you have defined all of the menu items.

8. Click the "File" menu and choose "Save As." This opens the Save As dialog box. Name and save the file.

Tips & Warnings

• When you upload this page to the Web server, don't forget to upload the navigation bar graphic. Otherwise, the navigation bar will not display properly.

References

• Entheos: Dreamweaver Image Maps
• The Template Store: Dreamweaver Navigation Bar
• Adobe: Navigation Bar Design Tasks

Resources

• hypergurl.com: Free Graphic Navbar Generator