How to Create a Navigation Bar in Adobe Dreamweaver

Build a navigational bar with Dreamweaver and everyone who comes to your web page will know how to find everything published on your site. Dreamweaver has several ways to create a navigational bar, however, in this article, a basic navigation will be outlined. For more dynamic navigational bars one needs to have other applications such as Flash or Fireworks that work in conjunction with Dreamweaver.

Difficulty: Moderately Easy

Instructions

Things You'll Need:

• Computer
• Dreamweaver

1. 
    
   Blank HTML

   Launch the Dreamweaver application and create a blank HTML page. Save your page name it index.html. On the Dreamweaver menu choose window and from the drop-down menu choose snippets. A snippet panel will open and display folders. Choose the folder titled "Navigation," click on the arrow on the side and make the folder expand.

2. 
    
   Snippets

   Inside the navigational folders, there will be another five or six folders; each folder describes types of navigational elements available. Expand the folders and decide on the style and options that suites the look of your site.

3. 
    
   Choose the style.

   This example uses the vertical folder and the style named outlined boxes with links. Select the snippet and drag it to the HTML page. Drag the sides of the snippet to the left of your page or change the size of the snippet within the property inspector. Change the snippets background color and link names.

4. 
    
   Drag the snippet to the HTML file.

   Save the file. Launch the browser and open the file to see how the file looks so far. Test the links to make sure they are working properly. If you need additional navigational links simply drag another snippet onto the index.html and repeat the steps.

5. 
    
   Set the link properties.

   Customize the font size and color. Add a background image, using the property panel. To modify the default page links choose modify on the menu and page properties on the drop-down menu.

Tips & Warnings

• It's easy to create navigational bars in Dreamweaver, try choosing the different options available.
• Save your files often, keep your folders in order.

Resources

• Adobe Dreamweaver