Html layers should be used effectively if you want to design something successfully. And here you’ll find out how to use them in the most beneficial way!
Dreamweaver MX.
1. Html 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 html layers, and we will do a little navigation system. Then once you know how to use them, you can implement html layers 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
2. 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.
3. 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
4. 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
5. 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.
6. 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.
7. 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.
8. Now you know how to use html 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. Let the usage of html layers will be pleasant and effective for you!
