Layers and Behaviors

Goal for today

Layers

Goal for today

Learn about some advanced features in Dreamweaver that allow you to build in movement/animation and interactivity. Create several examples using layers and behaviors.

Back to the top.

Layers

Warning: layers only work in browsers version 4.0 and later. Also, the placement of layers is NOT an exact science. You may find that your layers appear in a different location when you look at them in a browser than where you placed them.

To avoid any confusion, make sure the "L" and "T" attributes of your layer are blank. "L" is left and "T" is top.

 

This is a layer. It has some text on it, and a background color.

 

 

 

This layer is overlapped by the green one.

This layer is overlapping the purple one.

 

 

Layers are a way of placing layout elements at random positions within a page.

Layers can be assigned to timelines so you can do some simple animation. (This uses "Dynamic HTML," which is a kind of scripting language.) Click here to watch Thomas flying across the page and back.

To create a layer, click Insert|Layer. The layer will appear at the cursor, on the left side of the window. You'll also see a icon, which indicates a "hidden element," or tag, in this case the DIV tag that makes the layer.

To move the layer around on the screen, you can click on the edge of the layer, selecting it, and then click and drag the tab at the top left of the layer:

Notice what happens to the layer's properties when you move it around on the screen:

The "L" and "T" fields are changed to reflect the position of the layer, measured in pixels (px) from the left (L) and the top (T) of the page. You can also change the position by typing numbers directly into these fields.

Notice also the other fields on the property inspector:

Layers can be named. This is useful when creating a behavior (about which, see below). "W" and "H" are the width and height of the layer measured in pixels. The "Z-Index" is a way of controlling which layers appear on top and which below. The higher the Z number, the closer the layer is to the "top". All the layers in a page have a different Z number. As you create the Layers, each one will (generally) have the next highest Z-index. Vis stands for visibility. This controls whether the layer is initially visible, invisible, default (set the default for new layers you create by clicking Edit|Preferences|Layers), or inherited (from it's "parent" if the layer is nested inside another layer, or from the page's body, which is always visible).

Back to the top.

You can also add a background color or a background image, thus:

Note that when you click INSIDE the layer, the properties inspector changes to the normal text fomatting choices. These choices only affect the text that is selected or that is typed immediately after the properties are set.

The "Tag" field should generally be left alone. There are several choices here, but "DIV" is probably the tag that will work best in most browsers.

The "Overflow" field can be left blank, or set so that any overflow (that goes beyond the set size of the layer) is hidden, visible, with scroll bar always present, or with scroll bar only when necessary. Note you cannot directly make a layer too small for its content. But layer properties (including size) can be set using timelines, behaviors, or scripts, and so the Overflow field might be helpful then.

I can't figure out how the "CLIP" settings work and the manual isn't helpful.

You can see all the layers in the Layers palette by clicking Window|Layers:

You can also use this palette to change the layers Z-index, their names, or their visibility.

To animate layers, you'll need to detach your page from any templates. (Dynamic HTML writes code into the head area of the HTML page, and this area is usually locked in a template.) Then click Window|Timelines.

The Timelines palette works like digital video editing software. Time proceeds from left to right. Each column represents a "frame." The frame rate can be set (FPS or Frames per second). The red or pink thing represents the "head" of the player, and indicates the current frame. The row labelled "B" is the "Behaviors" Channel and allows you to set certain events.

Each row represents a separate object. If you animate many layers, you'll use many rows.

Back to the top.

Activity

Now, create the layer you want to animate. For example, use this animated gif image, and place it into a layer (with no background color or image). Name the layer "Earth."

Now select the Earth layer (the must appear) and drag it onto the timeline window. You'll see a blue bar in layer one of the timeline window. At each end of the blue bar is a circle. The circles represent "key frames," that is, frames that have been defined. (The final frame is automatically set, but can be changed.)

Select the key frame you want to edit. If you want to make the animation longer, click and drag the final keyframe. Then, with the final keyframe still selected, move the Earth layer to where you want it at the end of the animation. (If you want it to return to the same place, leave it.)

To add intermediate key frames, ctrl-click on the bar. A keyframe is added. Now, with the new keyframe still selected, move the layer to where you want it at that point. Dreamweaver automatically constructs the animation to fill in intervening frames. To make a fluid circular movement, you'll need to define multiple intermediate keyframes. Now, click "Autoplay" and "Loop."

See this page for the result.

By the way, if you can do this, you can use Flash. The interfaces are pretty similar. (Download a trial version of Flash from the www.macromedia.com site.)

You can adjust a variety of settings in the timelines, and you should spend some time playing. (Right-clicking on the timeline gives you access to a variety of menu choices.)

Back to the top.

Behaviors

NOTE: You cannot attach behaviors to your page if a template is applied to it, because behaviors alter the "head" of the document and this is (usually) a locked area of the page.

Layers can be made visible or not, moved, and sized, using behaviors.

Behaviors can be attached to links or to objects such as images and buttons. You CANNOT attach a behavior to plain text. However, if you put "javascript:;" into the "link" field of some text, that text can then initiate a behavior without actually linking to anything..

For example, if you hold the mouse over here, you'll see the image below disappear. When you move the cursor off the text, it will reappear. When you hold the cursor over here for a moment , the image will swap to another one.

Behaviors are incredibly powerful, and we can't begin to cover them here. But let's do a sample activity.

Back to the top.

Activity

Download these two images to your Local Root Folder (or a subfolder):

Now, create a new layer. Call it photos. Insert the cac&ro-smaller.jpg image into the layer.

You can "name" an image and you must do so to swap it with a behavior. Click on the image and put "cacrec" into the empty field on the top left of the property inspector:

Now you're ready to define your behavior. Type some text to be the anchor for the behavior, such as:

Point here to swap the image.

Highlight the text and type "javascript:;" into the link field (no quotation marks; that's a colon and then a semi-colon at the end of the word). This is required in order to attach a behavior to the text.

Click on Window|Behavior to show your behavior palette. To create a new behavior, click the + button. A menu gives the choices available to you. (This will vary depending on how you set your browser preferences for each event.)

Choose Swap Image. From the list of images, find "cacrec in the photos layer." Click it. Then browse to the other image, rowan&cheryl-smaller.jpg. Leave Preload images and Restore on mouse out checked.

Now, save your file and preview it to see if it works.

You can also assign behaviors to buttons, change the text that appears in a layer, change the property of many items on the page, start and stop animations, and all sorts of other things, most of which I've never tried..

Experiment!

Show your mentor what you've done.

Back to the top.