How to Create a Navigation Bar in Dreamweaver CS5
Navigation bars are, in effect, menus. Typically, they span the top of a Web page horizontally or the left side of the page vertically. Dreamweaver, a leading Web design program, provides many ways to create navigation bars. One of the easiest and more common methods is to use Dreamweaver's built-in Spry Menu Bar, which automatically creates the navigation bar for you. All you have to do is add the labels and modify the navigation bar's appearance to meet your needs.
Other People Are Reading
Instructions
-
-
1
Open an existing Dreamweaver HTML page in which you want to add a navigation bar, or start a new page: Click the "File" menu and choose "New" to open the New Document dialog box. Choose "HTML" as a Page Type and the desired layout from the Layout column, and then click "OK."
-
2
Click in the area of the page where you want to place navigation bar to insert the cursor.
-
-
3
Click the "Insert" menu, choose "Spry," and then select "Spry Menu Bar" from the flyout menu. If this is a new document, Dreamweaver prompts you to save the file. Click "OK." This displays the Save As dialog box. Name and save the file. This opens the Spry Menu Bar dialog box, which provides two options: Horizontal and Vertical.
-
4
Choose the type of navigation bar you want and then click "OK." Dreamweaver inserts the navigation bar into your document.
-
5
Go to the Properties panel and select "Item 1" in the first column of menu items, select the text in the "Text" field and type the label for your first menu item.
-
6
Select the pound sign (#) in the "Link" field and type the URL for your first menu item.
-
7
Repeat Steps 4 and 5 for each menu item. You can create additional menu items by clicking the plus sign (+) above the menu item column in the Properties panel. You can add submenu items by clicking the plus sign (+) above the submenu, or second column, in the Properties panel.
-
8
Click in a menu item box on the page to insert the cursor, and then go to the Properties panel and click "Edit Rule." This opens the CSS Rule Definition dialog box. From here you can edit the appearance of your menu. To change the menu labels' appearance, for example, click "Type" in the Category list. This displays options for changing the typeface, font size, and font weight. You can change the appearance of the menu item boxes from the Background, Box and Border options.
-
9
Make the desired changes and click "OK."
-
10
Click the "File" menu and select "Save" to save the file.
-
1
Tips & Warnings
You can add third-level, or sub-submenu items by adding labels to the third column in the Properties panel. Click the small blue box labeled "Spry Menu Bar: MenuBar1" above the navigation bar to select the entire menu. Click the submenu item in the second column of the Properties panel where you want to add a third-level menu item, and then click the plus sign (+) above the third column. Type the new menu label in the "Text" field and the URL for the new menu item in the "Link" field.
When you save the Web page, Dreamweaver creates several supporting scripts and graphics files and saves them to a folder named Spry Assets. When you upload the Web page to the Web server, make sure you also upload the Spry Assets folder. Otherwise, your navigation bar won't display properly.
References
Resources
- Photo Credit Getty Images/Getty Images News/Getty Images
