Pin Me

Create a Tab Menu in Dreamweaver

written by: Amanda Presley•edited by: Michele McDonough•updated: 11/2/2010

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.

  • slide 1 of 4

    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.

  • 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.

  • slide 4 of 4

    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:






© Copyright 2016 brighthub.com.