Layers are very important, at least you should know how to use them, because they are very flexible in designing something of your own. When you want to create your own navigation system, or to make a mouse over actions, or even tooltip you can do all these with layers very easily. In this tutorial I will show you how to use layers, and we will do a little navigation system. Then once you know how to use them, you can implement them according to your own creativity.

Save this image, we will work with it to create a menu

Before we start here is the example of what we will be doing [ click here ]

OK Let's start creating our menu, open a new page in your dreamweaver and save it as menu.html

Place the above image in your page. Select the Draw Layer from the toolbar and draw a layer as shown below.

Now click inside the layer and Create a Table, to do that go to Insert > Table (Ctrl + Alt + T) with the following specifications.

After creating the table give it a background color of #999999

Now click inside the table you have just created and create one more table, Insert > Table (Ctrl + Alt + T) with the following specifications now.

Now select the rows (not the whole table) only and give them a background color lighter that is for example #F9F9F9

By now your page should look like this

Fill the table rows with Menu items, in my case I will use menu 1, menu 2...etc

Next click inside the table and select the layer handle at the left top to select the whole layer.

Now inside the properties panel Choose the layer visibility: Hidden - This means when the page first time opens the layer won't be visible, unless the user mouse overs, which we will do next.

Next step is to create Mouse Over and Mouse Out actions, when the user mouse overs the image it will show the layer and when mouse outs it will hide the layer. That is quite easy to do.

Select the "Mouse Over Me" image of yours and open Behaviors Panel Window > Behaviors Shift + F3. Then click on the "+" sign and select Show-Hide Layers. You will see a new window, click on the Show button, and click OK

In the Behaviors Panel change onLoad to onMouseOver Action.

You need to repeat Step 6 one more time, but this time in the Show-Hide Layers click on the Hide button. Because this time we want to hide the layer when users mouse goes away from the image. Click OK.

And in the Behaviors panel, change the onLoad to onMouseOut. Your behaviors panel should look like this now. Save the page and preview it. It should be showing the layer when you mouse over and hide it when you mouse out it.

Now you know how to use layers you can start building your navigarional system which is more complicated then this one, it will all be the same when you build a bigger menu system. One thing you need to remember is, when you show one layer you should hide the rest, unless you want it otherwise.

Another trick in show/hide thing is sometimes you will have to use hide action on (2nd image) different image to hide particular (1st image) image. If you don't know what I am talking about, you will get it when you start building your menu. Good Luck.

	Related Dreamweaver Tutorials
		How to backup Dreamweaver New Backup your templates, extensions, behaviors...etc
		Creating CSS in Dreamweaver MX 2004 Learn how to create and apply CSS in Dreamweaver
		Create Rollover/MouseOver effect Rollover effect made easy with Dreamweaver
		Opening a Fixed Size Window Learn how to open a window in a fixed size
		Redirection based on Browser Type Learn how to make redirection script with Dreamweaver

Color Picker for your AdSense job more info

Related Tutorial: Hiding Layers after 5 seconds