How to Create Customizable Menus in Adobe Dreamweaver CS3

Create a menu in Dreamweaver.

Dreamweaver, a leading Web page design program, supports many ways to create menus. One of the easiest and most common methods is the program's built-in Spry Menu Bar, one of Dreamweaver's several preconfigured Spry Framework assets. With just a few mouse clicks, Spry Menu Bar creates the menu for you, and then you can use cascading style sheets, or CSS, to customize the menu.

Instructions

1. Open an existing HTML page in Dreamweaver, or start a new page: Click the "File" menu and choose "New" to open the New Document dialog box. Choose "HTML" from the Page Type list, choose the layout you want from the "Layout" list, and then click "Create."

   For example, if you want to create a horizontal menu, choose the "1 column fixed, centered, header and footer" option. This creates a layout with a CSS header container for your menu. If you want to create a vertical menu, choose the "2 column fixed, left sidebar" option. This creates a layout with a CSS sidebar container for your menu.

2. Click in the CSS container where you want to create a menu to insert the cursor. If this is a new page, Dreamweaver prompts you to save the page. Click "OK" to display the Save As dialog box. Name the Page and click "Save." The Spry Menu Bar dialog box displays.

3. Choose the type of menu you want. To create a menu across the top of your Web page, choose "Horizontal." To create a menu along the side of your Web page, choose "Vertical."

4. Select the first menu label text, "Item 1," and type the menu item label in the "Text" field in the Properties panel. Repeat this step to create labels for each menu item.

   You can add an additional menu item from the Properties panel. To add a top-level menu item, click the plus sign (+) above the first column in the panel, and then name the menu item in the "Text" field. To add second and third-level menu items, click the plus sign (+) above the second and third columns in the Properties panel, respectively, and then change the label names in the "Text" field.

5. Click in the first menu item box on the page to insert the cursor.

6. Click "Edit Rule" in the Properties panel to open the CSS Rule Definition dialog box. From here you can change the menu item typeface, background, box shape, and box borders. For example, to change the menu item box's background, select "Background" in the Category list. This displays options for customizing the background. You can change the color from the Background--Color swatch fly out, or you can choose a background image from the Background-Image field.

7. Click "Apply" to accept the changes. Repeat this procedure for each menu item property you want to change.

8. Click "OK" to close the CSS Rule Definition dialog box.

Tips & Warnings

• When you save the page, Dreamweaver creates a folder named SpryAssets. This folder contains the images and scripts for the menu. When you upload the page to a Web server, make sure you also upload this folder. Otherwise, your menu will not display properly.

References

• Foundation PHP: Customizing a Spry Menu Bar
• Just Dreamweaver: Customizing Spry Menu Bars in Dreamweaver
• DW Course; Creating and Customizing Horizontal Spry Menu Bars in Dreamweaver ; July 2008

Resources

• Adobe: Menu Bar Widget Overview and Structure