Tutorial on Show & Hide Layers in Dreamweaver CS3

Written by rebecca cullers
  • Share
  • Tweet
  • Share
  • Email

In earlier versions of the Adobe Dreamweaver web design software, div tags were called layers. In Dreamweaver CS3, layers were renamed as AP divs, which stands for absolutely positioned divisions. Because their positions are specified, AP divs do not move when an Internet browser window is resized. This also allows you to stack AP divs on top of one another. Once you've stacked two windows this way, you need to know how to hide and show them.

Drawing a Layer or AP Div

Open Dreamweaver CS3 and select "Draw AP Div" from the "Layout" menu bar. Your cursor will turn into a crosshair cursor. Use it to draw your layer.

You now have a layer that is absolutely positioned a certain number of pixels from the left and from the top. You can see the positioning in the code if you're viewing the code in the split-screen view or in your "Properties" panel at the bottom of the screen. You cannot absolutely position a div from the right of the screen. However, you can change the positioning from a number of pixels to centimetres or other measurements in your "CSS Styles" panel to the left.

Type something in the newly created layer so that you can easily see when it's been hidden.

Toggling Layer Visibility on the 'Properties' Panel

Go to the "Properties" panel at the bottom of the screen. Click the drop-down next to the property called "Vis" and select "Hidden."

When you select "Hidden," the layer will become invisible in design view, but you will still be able to see the code for the layer in split-screen mode or coding mode.

To view the layer again, select "Visible" from the drop-down box.

The third option in the box is "Inherit." If you have nested AP divs (a div inside a div), a layer marked as "Inherit" will inherit the visibility setting of the parent layer.

Toggling Layer Visibility on the 'AP Elements' Panel

Another way to hide and show your layers is to use the "AP Elements" panel.

Click on the "AP Elements" tab in the upper right-hand corner to see a listing of all your AP div layers. Each layer you create will be named consecutively (apDiv1, apDiv2) unless you double-click on the label and give each a unique name.

Next to the layer names is the icon of an open eye. Click on the eye icon to hide the individual layer. The icon will change to a closed eye to show that the layer is hidden.

If you have two nested AP divs, the nested div will appear underneath the parent div in the "AP Elements" table. Toggling the eye icon next to the parent div sets the visibility for both.

To hide or show all the layers at once, click on the eye icon at the top of the "AP Elements" table.

Why You Want to Hide Layers

It is useful to toggle the visibility of your layers while you work on a document with many layers, but this is not the reason for the hidden property of the div tag.

Ideally, the reason to hide a layer on your website is to dynamically reveal the layer when the user mouses-over or clicks on a button. To do this, you will need to use a scripting language, such as JavaScript, to target the div and dynamically change the visibility.

You can write this code yourself, or get Dreamweaver to help. Dreamweaver recommends that you know a bit about JavaScript before adding JavaScript behaviours in CS3 by using the "Behaviors" panel.

Don't Miss

  • All types
  • Articles
  • Slideshows
  • Videos
  • Most relevant
  • Most popular
  • Most recent

No articles available

No slideshows available

No videos available

By using the eHow.co.uk site, you consent to the use of cookies. For more information, please see our Cookie policy.