How to Create a Menu in Dreamweaver 8

Creating menus in Dreamweaver 8

Dreamweaver menus provide navigation links to pages in your site or other URLs on the Internet. You can create menus in several ways in Dreamweaver. Two of the easier and more common methods include placing text links in table cells across the top, side or bottom of your Web page, and creating image maps with several clickable, "hot," regions on the same image.

Things You'll Need

• Macromedia Dreamweaver 8
• Windows Paint, Apple iPhoto, Adobe Photoshop Elements or another image editor.

Instructions

Creating a Text Menu

1. Open the Dreamweaver file where you want to create a menu.

2. Place the cursor on the page where you want to insert a menu. Click "Insert" on the menu bar and then choose "Table." This opens the Table dialog box. Use the "Rows" and "Columns" fields to define the number of cells for your menu. You need one cell for each menu item. For example, if you need five menu items in one row across the top of your Web page, type "1" in the Rows field and "5" in the Columns field.

3. Set the table width in the "Table width" field. For example, if your menu will span the top or bottom of your page, make the table width the same size in pixels as your page. (You can find the page's width by clicking "Modify" on the menu bar, and then choosing "Document" to open the Document Properties dialog box. The page's pixel width is in the "Width" field.) If you want your menu to have borders, set a border weight in the "Border thickness" field.

4. Set the cell padding (space between the cell contents and the edge of the table cell) and cell spacing (space between each cell). Click "OK."

5. Type the menu entries in each cell (click in the cell and start typing). For example, you could type "Home," "Services," "Contact Us," and so on, one entry per cell. To center the text in the cells, select all of the cells, and then click the "Horz" drop-down in the "Properties" panel and choose "Center."

6. Select the first menu item. Go to the "Properties" panel and type the target URL in the "Link" field. Repeat this step for each menu entry.

Creating a Menu with an Image Map

1. Create a menu bar in your image editor software. It should include a button for each of your menu entries, such as "Home," "Services," and so on. Save it as a JPEG (.jpg) in the Images sub-directory of your Web site root.

2. Open the Dreamweaver page where you want to create a menu.

3. Place the cursor on the page where you want to insert your menu. Click "Insert" on the menu bar and then choose "Image." Navigate to your menu bar image file, select it, and then choose "OK." Select the image on the page. Go to the Properties panel and name the map in the "Map" field. For example, name it "menu_bar."

4. Click the rectangle button (the rectangle icon) beneath the Map field. Draw a rectangle around the first menu item in the image. This creates a clickable hot spot on the image. Go to the Properties panel and type the target URL in the "Link" field. Type the alternate text (the text the user sees when he or she hovers the mouse over the hot spot) in the "Alt" field. For the "Home" link, for example, you could type "Go to our Home Page."

5. Repeat Step 4 for each menu entry.

Tips & Warnings

• You also can place graphics buttons, rather than text, in your table. To make the buttons clickable, select the button and then type the target URL in the Properties panel Link field.

• These procedures work in all versions of Dreamweaver.

References

• Smart Webby: How to Create Image Maps with Dreamweaver
• Dreamweaver 8 Tutorial: Setting up Tables
• Adobe: Dreamweaver 8 help