Create a Tab Menu in Dreamweaver

Written by:  • Edited by: Michele McDonough
Updated Nov 2, 2010
• Related Guides: Dreamweaver

Are you looking to add tab menus to your website? Dreamweaver makes it easy to add tab menus to your website. This tutorial will show you how to create tab menus in Dreamweaver.

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:


Comments

Showing all 3 comments
 
xpression Mar 22, 2011 8:10 PM
how to create jumb menu?
i have a website for learning arabic:
http://www.studyarabic.eu
I need to make drop Down menu, can anybody help?
mark
Amanda Presley Mar 15, 2011 1:58 PM
To Shanna 1950
In my opinion, the easiest way to update your site as it gets larger, is to save a page as the template and use it for the entire site. That way, when you need to add a new menu item, you can add it to the template page and it will add it to the entire site. I hope this helps some. Maybe someone with a different experience can chime in and help. But when I design websites, I always use a main template so I can change it and not have to change every single page.
shanna1950 Sep 26, 2009 8:01 PM
use include to add menus to website
Hi,
Just stumbled on this site. I haven't done a search yet (oops), but did you already do a tutorial how to include menus to a website?
the bigger the site it gets, the moe problematic to add a new menu item and change this manually (...).
I've done some reading/googling, but would like to know how you'd skin this cat with DW. Thanks for listening.
Shanna1950/Amsterdam-Holland
 
blog comments powered by Disqus
Email to a friend