| Using
Layers
Layers
are used to accurately and easily position other objects
such as images, text, and tables. Even though tables
are the HTML building block for positioning objects
on a web page, layers make a convenient anchor point for
tables when you need to specify the coordinates at
which a table should be located. Why use layers?
Layers are great for showing content that is necessary
for viewers experience but not critical to using your
website. For instance if you have a large body of text
that contains many industry specific terms. Your viewer
may not understand the terms and you don't have enough
space on the page to define every term. What you can
do is add a layer that contains the definition. You
can make the term a link that triggers the layer visibility.
 Try
it here.
| |
|
|
| |
Check it out. Here's your
definition. |
|
| |
|
|
Here's what the code looks like:
<div id="Layer1" style="position:absolute;
width:169px; height:63px; z-index:1; left: 210px; top:
271px; visibility: hidden;">Table goes here</div>
 Layers
can be unpredictable in Netscape or lower versions of
IE. It should only be used for IE browsers 4.0 or higher.
 To
add a layer to your document:
- Place the cursor
in your document in Code View.
- Select INSERT/LAYER
from the toolbar.
- A default layer
is added to your page along with an icon
representing the place in the HTML document.
- You can insert a
table, image or any other content to the
layer.
- You can add a background
color to the table you place in the layer
like I did in the above example.
- You can resize the
layer by grabbing and dragging any of
the resize handles around the border
of the layer.
- To select the visibility
of the layer open the LAYER
INSPECTOR
in the lower right hand corner of Dreamweaver
and select the EYE icon.
There are 3 visibility states: visible,
hidden, inherit and default. Set your
layer to HIDDEN.
 Now
that you've got your layer you need a
way to trigger it's visibility so your
viewers can see it. - Type the following:
"Click Here".
- Highlight the text
using your cursor.
- With the text selected
pick SHOW-HIDE LAYERS
from the Behaviors menu.
- In the resulting
dialog box select SHOW
then OK to close the
box.
- Now go back to the
Behaviors menu and make sure that OnMouseOver
is selected. If it is not selected click
the behavior to highlight it and pick
OnMouseOver from the
dropdown arrow to the right.
- Repeat the process
but this time select HIDE LAYER
in the SHOW-HIDE LAYERS
dialog box and OnMouseOut
from the Behaviors menu.
- That's all
there is to it.
|
