/font>. Yahoo! is not affiliated with the authors of this page or responsible for its content.
DWmx Ch12.F chapter 12: layers: interactivity and animation
369
chapter
12
T
he rst MTV generation has grown upand discovered the Web. Unfortu-
nately, putting the average home page next to the average music video is like
pitting a minivan against a Maserati. If you want to keep restless eyes glued
to your site, adding attention-grabbing animation and interactivity may do the trick.
Using Behaviors (Chapter 11) and a clever design tool called layers, you can make
pictures dance across the screen, add pop-up tooltips to your links, and even create
Web page sticky notes that visitors can drag around the window. Without
Dreamweaver, such animation would require a complex mixture of HTML, pro-
gramming, and Cascading Style Sheets (Chapter 8) that could leave you crying into
your keyboard. You, however, as a Dreamweaver owner, can create these effects with-
out any assistance from therapy or antidepressants.
Tip: As when using any cool new technology, have mercy on your audience when adding interactive
effects. Make sure any animations you use contribute to the message of your site and dont become
distracting gimmicks whose novelty wears off after the rst viewing. Making a news bulletin wiggle across
the screen might look neat, but its pretty hard to read.
Creating Layers
A layer is a rectangular container that holds other page materialimages, text, form
elements, and even other layers. In this regard, it acts like a table cell (page 144). And
as with a cell, you can dene a layers width and height and give it a background
color or image.
Layers:
Interactivity
and Animation 370
dreamweaver mx: the missing manual
But thats where the similarities end. What really sets a layer apart from other page
elements is the way you can give it an exact position on a page. Want an image to
appear exactly 100 pixels from the top edge of the browser window and 200 pixels
from the left? Add a layer at that spot and insert an image in the layerno jury-
rigged table scaffolding required.
Furthermore, because a layer uses both HTML and Cascading Style Sheets, it offers
you a much wider range of control and exibility, from exact screen placement to
animation. For example, you can hide or show layers on the screen, nest them, and
stack or overlap them. And you can control layers with JavaScript, effortlessly add-
ing live interactive effects like animation.
As you probably know by now, any Web technology this powerful must come at a
price: Since layers rely on Cascading Style Sheets, only version 4.0-and-later Web
browsers can display them. Older browsers just ignore layer information and dis-
play their contents in the normal ow of the pageno exact positioning, no cool
animation. To make matters worse, Netscape Navigator 4 has a notoriously hard
time with layers, and often displays them incorrectly (see page 378).
Tip: The members of the W3C, the body that approves Web technology standards, originally envisioned
layers as a tool for laying out pages. They hoped that layers, with their exact positioning properties, would
let Web designers achieve the level of control found in print design.
But dont rely on layers for layout. Most new browsers can position layers accurately on the screen, but the
complexities of complete page designs frequently overwhelm the current browser crop. Use tables (Chap-
ter 6) to lay out your pages instead. (If youre a courageous and forward-looking Web designer, see the
box on page 145 for layer-based design resources.)
Creating Layers
Figure 12-1:
Dreamweaver makes it easy
to add simple animations to a
Web page. Using the
programs animation tools,
you can make items yor
fall, like this leaf on the
www.safetreekids.net Web
pageacross your pages. chapter 12: layers: interactivity and animation
371
Drawing with the Layer Tool
Dreamweaver wouldnt be Dreamweaver if it didnt give you several ways to per-
form a certain task, such as creating a layer. You can drag to create one freehand or
use a menu command to insert a full-blown, complete layer. Your choices are:
Use the Layer tool. The Layer tool is in the Insert bar, under both the Common
Layout tabs (see Figure 12-2). Click the Layer button and then drag the + cursor
diagonally in the document window to create a boxthe outline of the layer.
Use a menu command. To insert a layer at the insertion point, choose
Insert Layer.
If you dont like the looks of the default layer that Dreamweaver inserts, choose
Edit Preferences, select the Layers category, and adjust the default layers prop-
erties there. Add a background color, for example, or increase the layers size.
From then on, you can instantly create your favorite kind of layer using the
Insert Layer command.
Note: The Insert Layer command makes it easy to place a layer inside of a table cell or another layer;
however, this is not always a good idea. Layers inside table cells cause serious display problems in some
browsers; furthermore, nested layers dont work well in Netscape Navigator 4 (see page 373 for more on
nesting).
Creating Layers
Figure 12-2:
The Layer tool on the Insert bar lets you add layers to
your pages simply by drawing them in the document
window. If youre creating multiple layers, hold down
the Ctrl (
c
) key while drawing a layer. When you
release the mouse, the Layer tool will remain
selected, ready to draw the next layer. 372
dreamweaver mx: the missing manual
However you create the layer, its outline appears in the document window with a
blinking insertion point inside. As with table cells, you can type text into the layer or
insert other objectssuch as images or moviesinto it.
Tip: The Layer tool doesnt work in Layout view or Code view. If the tool is grayed out in the Insert bar,
make sure to switch back to Standard view (see Figure 6-3 on page 145).
Unless you ll it up or add a background color to it, a layer is invisible, like an empty,
borderless table. Since its difcult to identify, select, and modify something thats
invisible, Dreamweaver adds visual cues to make working with layers easier (see
Figure 12-3):
Layer marker. The gold shield with the letter C represents the spot within the
HTML of the page where the code for the layer actually appears.
While HTML objects generally appear in the document window in a top-to-bot-
tom sequence that mirrors their order in the HTML source code, the position of
layers themselves doesnt depend on where the layer-creating code appears in the
pages HTML. In other words, its possible to have a layer appear near the bottom
of the page, whose actual code may be the rst line inside the body of the page
(see Figure 12-3).
Click the shield icon to select the layer. Note, however, the difference from the
selection handle (described next): When you drag a layer marker, you dont move
the layer in the page layout. Instead, you reposition the layers code in the HTML
of the page.
That quirk can be tricky. For instance, be careful not to drag a layer marker (which
represents the HTML code) into a table. Putting a layer inside a table can cause
major display problems in some browsers. In Netscape 4, the layers contents
may not appear at all.
That said, you can draw a layer so that it overlaps a table, or even appears to be
inside a cell; just make sure the gold layer marker itself is not inside a cell. If you
use the Layer tool to draw a layer (page 371), you avoid this problem completely,
since Dreamweaver wont put the code in a cell.
Tip: The layer marker takes up room on the screen and can push text, graphics, and other items next to it
out of the way. In fact, even the thin borders Dreamweaver adds to tables and layers take up space in the
document window, and the space they occupy may make it difcult to place layers precisely. The keyboard
shortcut Shift+Ctrl+I (Shift-
c-I) hides or shows invisible items like layer markers. The Hide All Visual Aids
option from the Document toolbar does the same thing (see page 18). Its a good idea to hide visual aids
while youre drawing layers.
Selection handle. The selection handle provides a convenient handle to grab and
move a layer around the page. The handle appears when you select the layer or
when you click inside the layer to add material to it.
Creating Layers chapter 12: layers: interactivity and animation
373
Layer outline. A thin, gray, 3-D border outlines each layer. Like the layer marker
and selection handle, its only there to help you see the boundaries of the layer
and doesnt appear when the page is viewed in a Web browser. You can turn it on
and off by choosing View Visual Aids Layer Borders. (When you hide the
borders, layer markers remain, but at least hiding borders gives you a quick pre-
view without opening your Web browser.)
Nesting Layers
Later in this chapter, you can read how to animate a layer so that it moves across the
screen. But suppose you want a more advanced effect, like a group of layers that
move in a synchronized choreography. You could animate each layer independently,
of course, or you could harness the power of nested layers.
Nesting doesnt necessarily mean that one layer appears inside