Creating a Custom Navigation Bar

One way to make a Web site look much better is to replace regular menus with buttons made of graphics, often called a navigation bar. Navigation bars typically allow users to navigate to different parts of your site from any page in your site. You can use library items in Dreamweaver to create a navigation bar that you can reuse on any other page within the site. Note: To take advantage of library items, you need to define you Web site. You cannot create and insert library items without a defined site.

To build a navigation bar structure: One way to make a complicated graphic easier to customize is to build it in pieces in a table. For example, you can build a navigation bar that is divided into cells for each and button . Then when you create your navigation bar as a Dreamweaver library item, you can easily use it over and over again.

In Dreamweaver, open a page within your site. 1. Choose > Assets 2. The Assets for the page within your site opens. 3. In the Assets window, click the Book button to open the Library View. 4. At the bottom of the Asset window, click the Create – the one with the plus (+) sign. If that button is grayed out, click the refresh icon – the one with the arrow in a circle. If the icon is still grayed out, click on another button and then click back on the Book button. 5. A new library item appears in the list. 6. Type the name NavBar and press Enter 7. Select the NavBar library item and click the Edit icon (the one with the pencil). 8. A new window appears, with a gray background. This helps you tell the difference between a library item and a normal Dreamweaver page document. Note: When you create library items, Dreamweaver automatically creates a library folder in the Site directory to store them. Library file names end with the suffix .lbi. 9. Create a table with two columns and however many rows needed for the links. 10. In the left column insert a graphic (typically a bullet or a button) 11. In the right column type the name of the link 12. Highlight the name of the link and in the property inspector type in the URL address for that link (or click on the folder to link it to a page within your site). 13. Click File, Save 14. Close out of the navbar library item.

To add the navigation bar into a page Open the page desired Click on Window Click on Asset Click on the book icon The name of the navigation bar should be in the list. Click and drag it to where you want to place it in the page. The navigation bar will have yellow shading around it.