How to Create a Menu in Dreamweaver – Tab Menus

Getting Started

There are a few different ways to create menus in Dreamweaver. This tutorial will walk you through the ways of creating tab menus in Dreamweaver.

Open your Dreamweaver program and create a new page to work on. Save the page as menus.html and we will get started.

There are two different ways to create tab menus in Dreamweaver. Both options are described below.

How to Create Tab Menus in Dreamweaver

The first tab menu that we will be creating is a menu created from a graphic tab menu. This tab menu was created in Fireworks. Fireworks is part of the Adobe Creative Suite. You can create tab menus in any graphic program. You can also get tab menus online. Save the tab menu to a recognizable place on your computer or create your own tab menu.

Step 1) Go to the top of your Dreamweaver program and click Insert > Image. Locate the tab menu and open it.

Step 2) Click the menu to select it. Grab the Rectangle mapping tool from the bottom of your window. Draw a rectangle over your first button.

Step 3) Then go to the bottom of your properties panel and enter the link for the first button. Grab the mapping tool again and do the next button the same way. Continue mapping your buttons until you have them all mapped.

Step 4) Save your Dreamweaver page and preview the new tab menu in a browser.

How to Create Tab Menus using Dreamweaver’s Navigation Bar

The second way to create a tab menu is by using the Navigation Bar in Dreamweaver.

Step 1) Click your document and click Insert > Media > Navigation Bar. You will need to have your tab buttons ready to use. Dreamweaver does not offer the tab buttons in this section.

Step 2) When you click the Navigation Bar, you will see the properties box open. In this box you will need to open the tabs that you want to use.

Step 3) Click the Browse button at the end of the Up Image field and locate the tab button that you want to use. Change the name of the button in the Element Name field if you want to, then enter the link for the tab in the “When Clicked, Go To URL”, field.

Step 4) Once you have the fields filled in, click the plus sign icon to create another tab. You will need to repeat the steps above to create the other tabs. Every time you want to add a new tab, you will need to click the plus sign icon. To delete a tab, click the name of the tab and click the minus icon.

That’s how you create tab menus in Dreamweaver. You can create your own tab menus or you can download them from the Internet.

Some more tips and tricks with Dreamweaver:

This post is part of the series: Dreamweaver Tutorials

This collection of articles is aimed at providing education about the software program Dreamweaver.
  1. Beginner’s Guide to Creating and Saving an HTML Document in Dreamweaver
  2. Dreamweaver Tutorial: Tips for Link Management
  3. Creating a New CSS Text Style in Dreamweaver
  4. Creating a Jump Menu in Dreamweaver
  5. Create a Photo Album for Your Website in Dreamweaver
  6. Dreamweaver Tutorial: Mapping and Linking Images
  7. Use CSS Styles to Create Solid Color Rollover Buttons in Dreamweaver
  8. Incorporating Flash Buttons Into Your Dreamweaver Designs
  9. Creating a Rollover Button in Dreamweaver Without Using CSS
  10. Dreamweaver Tutorial: Creating and Inserting Flash Text into Your Document
  11. Dreamweaver Tutorial: Inserting and Editing a Horizontal Line
  12. How to Modify Your Page Properties in Dreamweaver
  13. Adding Guestbook to Your Site Using Dreamweaver
  14. Applying Pop Up Messages to Links In Dreamweaver
  15. A Guide to Understanding the Properties Panel in Dreamweaver
  16. Create a Tab Menu in Dreamweaver
  17. Creating a List Menu in Dreamweaver
  18. How to Create HTML Email with Dreamweaver