Dreamweaver Tutorials back to dreamweaver tutorials home pagee contact form tutorial page
A value is required.Invalid format.A value is required.Invalid format.
Social Networks Follow Us on Twitter Our YouTube.com Channel Facebook Page

How to insert a main navigation bar into dreamweaver


Share this Dreamweaver Article:

For a Dreamweaver CS4 Video Tutorial explaining the techniques above, follow this link:

How to Insert a Navigation Bar into Dreamweaver CS4

Well be inserting a main navigation bar which we have created in fireworks

The main navigation bar in this case is made from a collection of image buttons that have an UP state, an OVER state, and a dOWN state.

The UP state is how the button will look when it first loads on your website

The OVER state is how the button image will look when a mouse rolls over it

The DOWN state is how the image will look when it is clicked upon.


Ok let’s start!

We’re going to insert the navigation bar inside the header div tag underneath the header image so click on the header image inside the header div tag and key the right arrow button on your keyboard. This will place your cursor after the image in code view.

Go to INSERT>IMAGE OBJECTS>NAVIGATION BAR

For the element name dreamweaver wants to know what to call your first button, so if it’s your home button then you can but ‘home’ into that box.

Now click on the browse button underneath the element name box and find the ‘UP’ image that you will be using.  double click to insert the image.

Now browse for your ‘over’ image and double click to insert it, and then browse for your ‘down’ image and insert that one too.  You can put an ‘over while down’ image into your navigation bar which is how your button will look if someone rolls over it in its ‘down' state, but, I don’t usually bother doing so because people won’t really notice it and besides, the over image will display if you roll over the image while on its down state anyway.  Confused? You won’t be if you follow this tutorial and preview the effects in your browser.

After you have put your first button in you can specify a link for the button to go to when clicked but there is an easier and better way to create links for your buttons.
Make sure you have the preload images item checked otherwise your rollover states will not load up until someone actually rolls their mouse over the image.

You can check the ‘show down image initially’ item if that button is a main landing page or your home page, otherwise just leave it unchecked.

You may also choose to insert the navigation bar horizontally or vertically.  In this tutorial we are inserting the navigation bar horizontally but you will use the same method.

To insert another button go to the insert item button which looks like a plus sign + and follow the procedure above.

When you have finished click OK

Here’s a good tip if you need to edit your navigation bar just go to:

INSERT>IMAGE OBJECTS>NAVIGATION BAR

and a message window will appear telling you that you cannot insert another navigation bar but you can edit the existing one.  Then click OK to edit the navigation bar.  

To change a button just browse for the new up, over, and down images that you wish to use and swap them over! 

If you have inserted your buttons in the wrong the wrong way then you can click on the up and down arrows at the top of the navigation bar edit window and that will shunt the button that you have highlighted up or down the list.  The higher up the list you push the button depends on where the button will appear.  So if you place the button at the top then it will appear first along your horizontal navigation bar.

I hope you have found this tutorial helpful!





blog comments powered by Disqus


Dreamweaver Website Templates

PHP Luxury Contact Form Tutorial


Great Premium Shopping Cart

Email Marketing - Recommended links

CSS Drop Down Menu - Dreamweaver

Floating Menu - Dreamweaver

Tabbed Navigation Menu

CSS Text Boxes in Dreamweaver

CSS 3 in Dreamweaver

J Query in Dreamweaver

Transparent Overlays Dreamweaver

CSS in Adobe Dreamweaver

All Types of Links In Dreamweaver

Positioning Elements in Dreamweaver

Unordered List Images Dreamweaver

Create an RSS Feed in Dreamweaver

Website Typography in Dreamweaver

Expanding Text Boxes - Dreamweaver

Make a Donation

Donate for Dreamweaver Tutorials

paypal