- slide 1 of 4
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.
- slide 2 of 4
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.
- slide 3 of 4
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.
- Beginner’s Guide to Creating and Saving an HTML Document in Dreamweaver
- Dreamweaver Tutorial: Tips for Link Management
- Creating a New CSS Text Style in Dreamweaver
- Creating a Jump Menu in Dreamweaver
- Create a Photo Album for Your Website in Dreamweaver
- Dreamweaver Tutorial: Mapping and Linking Images
- Use CSS Styles to Create Solid Color Rollover Buttons in Dreamweaver
- Incorporating Flash Buttons Into Your Dreamweaver Designs
- Creating a Rollover Button in Dreamweaver Without Using CSS
- Dreamweaver Tutorial: Creating and Inserting Flash Text into Your Document
- Dreamweaver Tutorial: Inserting and Editing a Horizontal Line
- How to Modify Your Page Properties in Dreamweaver
- Adding Guestbook to Your Site Using Dreamweaver
- Applying Pop Up Messages to Links In Dreamweaver
- A Guide to Understanding the Properties Panel in Dreamweaver
- Create a Tab Menu in Dreamweaver
- Creating a List Menu in Dreamweaver
- How to Create HTML Email with Dreamweaver