Developing Webs logo
Google
Web DW-Main DW-Photoshop
Visit the message board for solutions or post a question Check out the Classes offered for free at Developing Webs Voice Chat submit a tutorial, resources, article, font for publication consideration and earn a one way link back to your site Get more specifics about the Developing Webs Voice chat room and its room members View the current news at Developing Webs alternative sites which are resources for your d3evelopment needs Join Developing Webs Chat Link to us on your web page to help support this resource! Check out Developing Webs At yahoo groups! Developing Webs Home Adobe Photoshop Tutorials Macromedia Flash Tutorials Jasc Paint Shop Pro Tutorials Adobe Illustrator Animation basics Some Basic PHP tutorials Perl Tutorials HTML Tutorials Cascading Style Sheets javascript Front Page Tutorials Macromedia Dream Weaver Tutorials dreamweaver Publishing your site, FTP, ChMod, Promotions
RSS Newsfeed
for your site
DW News
Calendar
DW Forum
Right click on button and copy shortcut

Add to My Yahoo!

Reminder
Remember to book mark this site!



Request a Tutorial

Image Menu Bars

Horizontal Menu

1. Download and unzip this file to your hard drive. Declare the Menus folder as your web. (declaring a site is here) Open your Menus web.

2. For this tutorial we will put the menu bar in a library item. Rule of thumb:

  • If you are putting your menu in many page you will want to create either a library item or a template. Click File => New and select Template Item, HTML Template. When the document is open click File => Save. Save the file as menubar.dwt. It should automatically put it in a Templates directory..
  • If you are putting the menu in just one document, open up your document and go on from there.

new library item in dreamweaver

3. To insert the navbar, click insert => image objects => navigation bar.

navigation bar drop down

4. In this window, you need to set the up image.

  1. Start by browsing to your images folder and select the home.gif image.
    Notice the name of the element became home in the top two boxes.
  2. Set your over image by browsing to your images folder and selecting the home-over.gif image
  3. Set your alternate text for your image. In this case I used Home, but for SEO you may choose to call it your site name with description.
  4. Set the page this button links to. Browse to your index.html file, which came in your menus folder as well. We generally set this to open in the main window, but here is where you would set your target frame/window.
  5. We are making a horizontal menu first, so set the insert as horizontal. Later you can go through this and create a Vertical menu.
  6. We are not using tables.
  7. Click ok.

insert navigation bar item

5. Hit the Plus (+) sign at the top of this window to add another button. You will do this to add the following buttons:

  • About
    1. Set the up image to about.gif.
    2. Set the over to about-over.gif.
    3. Alternate text should be About this company
    4. Set the URL to about.html.
  • Products
    1. Set the up image to products.gif.
    2. Set the over to products-over.gif.
    3. Alternate text should be products
    4. Set the URL to products.html.
  • FAQ
    1. Set the up image to faq.gif.
    2. Set the over to faq-over.gif.
    3. Alternate text should be Frequently asked questions
    4. Set the URL to faq.html.
  • Contact
    1. Set the up image to contact.gif.
    2. Set the over to contact-over.gif.
    3. Alternate text should be contact us
    4. Set the URL to contact.html.

5. When are are done with your menu items, you can rearrange them by using the up/down on the upper right of this window. When your pleased with the order, click ok.

6. Preview your menu bar by clicking the file=> preview in browser.

7. To edit your navigation bar, click Modify=> navigation bar. You will have the choices BUT not orientation. You can not change a horizontal to a vertical at this point. To make a verical menu bar repeat the process and select vertical.

8. Create the rest of your template. Save your template. Apply our template to your page by opening your page and clicking modify => template=> apply template to page.



"Building The Web Into a Nicer Place -- One Site At A Time"
Developing Webs Group Copyright © 2001-2018 All Rights Reserved
Privacy and Legal