How to Create a Navigation Bar in Adobe Dreamweaver

Written by kimberlee ketring
  • Share
  • Tweet
  • Share
  • Email

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.

Skill level:
Moderately Easy

Other People Are Reading

Things you need

  • Computer
  • Dreamweaver

Show MoreHide

Instructions

  1. 1

    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.

    How to Create a Navigation Bar in Adobe Dreamweaver
  2. 2

    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.

    How to Create a Navigation Bar in Adobe Dreamweaver
  3. 3

    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 colour and link names.

    How to Create a Navigation Bar in Adobe Dreamweaver
  4. 4

    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.

    How to Create a Navigation Bar in Adobe Dreamweaver
  5. 5

    Customise the font size and colour. 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.

    How to Create a Navigation Bar in Adobe Dreamweaver

Tips and 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.

Don't Miss

Resources

Filter:
  • All types
  • Articles
  • Slideshows
  • Videos
Sort:
  • Most relevant
  • Most popular
  • Most recent

No articles available

No slideshows available

No videos available

By using the eHow.co.uk site, you consent to the use of cookies. For more information, please see our Cookie policy.