layers : 

pixel accurate rectangles for positioning content

1: show and hide layers
2: show/hide, timelines
3: pop-out menus

1. Insert a layer by selecting INSERT>LAYER. Alternatively, select the layer icon in the insert menu , then click and drag a box to create a layer on the screen.
2. With the layer selected, note the following layer features in the properties inspector:
   • Left, Top - defines the top left corner of the layer rectangle relative to the upper left corner of the browser window
   • Width, Height - defines the size of the layer in pixels (note that the layer may expand to accomodate its content)
   • The layer name
   • Background image - tiles an image in the background (does not fully work in Netscape 4.5 & earlier)
   • Background color - defines a background color for the layer (does not fully work in Netscape 4.5 & earlier). Note, a work-around for this problem is to insert a 1x1 table in the layer, stretching it to be the same size as the layer, and set the background color of the table. Insert all content inside the table.
   • Visibility - whether the contents of the layer will show when the page loads
   • Overflow - what to do with any content that exceeds the stated dimensions of the layer (only works in the most recent versions of browsers)
   • Z index - the layer order - higher is in front
   • Clip - the upper left corner and dimensions of a clipping area that will show reveal a part of the layer contents
     
     
3. The layers window displays information about all the layers on the screen.
   • The order of the layers, based on the Z index. The order determines the visibility of layers when one overlaps another. Layers with higher numbers are in front. You can change the order by simply dragging one layer to a new location.
   • The currently selected layer. You can select a layer by clicking the layer name in this window
   • The nesting level of a layer
   • The visibility of the layer. The eye indicates if the layer's visibility when the page is loaded is set by default (no eye), visible (the open eye), invisible (closed eye)

    

event -> action

Dreamweaver calls its way of adding interactive JavaScript to a web page behaviors. Behaviors are actions associated a specific event (e.g. onMouseOver) that are attached to an object on the page (e.g. an image). When a defined event occurs (e.g. a mouse click) for that object, the action is executed (e.g. play an animation timeline). Usually, a behavior causes something to happen to a named object in the page. For example, in example 1 above, mousing over one of the topics causes a layer to be shown. You may also recall from week 08 that making rollover images involves behaviors that operate on named images in the page.

Note that to add a behavior to an object on the page, the object must be a link. In other words, it must have an <A> tag. The easiest way to do this is to select the object, and put the "#" character in the Link box in the Property Inspector.

show or hide a layer

• Name the layer you want to show/hide
• Select the object in the page that show/hide the layer
• In the property inspector for the selected object, put the "#"character in the link box (or a named anchor - see discussion below)
• Open the Behaviors window
• Using the "+" pull-down menu, select SHOW EVENTS FOR...>4.0 AND LATER BROWSERS to configure Dreamweaver for the most compatible mode
• Using the "+" pull-down menu, select SHOW-HIDE LAYERS
  
  
• Select each layer you want affect
• Select SHOW or HIDE for that layer
• You can affect multiple layers by selecting each layer and setting show or hide for that layer
• Select OK when finished
• In the behaviors palette, click on the just-entered behavior
• In the Events column, click on the default event to set your preferred event for this action
  

use the timeline and behaviors

Layers can be moved around the screen over time, using the Timeline feature of Dreamweaver (which produces JavaScript). Multiple layers can be placed on a Timeline. In addition, there can be multiple Timelines within one page.

1. Show the Timelines palette - Features of the palette are:
   • Timeline name and selection of different timelines
   • Navigation buttons - go to beginning, back a frame, forward a frame
   • Current Frame
   • Fps is the frame rate of the movie in Frames Per Second
   • Autoplay determines if the timeline will be started at the time the page is loaded
   • Loop determines if the timeline will return to the start of the movie and continue playing when it reaches the last frame.
     
     
2. Select the layer you want to be on the timeline
3. Select MODIFY>ADD OBJECT TO TIMELINE, or drag the object onto the timeline
4. Extend the object's time period by dragging the right side of the object line.
5. Create a keyframe for each point in the animation on the layer's timeline by clicking on the layer at the desired frame (in the timeline palette). Then select MODIFY>TIMELINE>ADD KEYFRAME (or press F6, or right click over the timeline).
6. To animate the layer, set the position of the layer at each keyframe. To do this, click on a keyframe, move the layer in the document window to the position you want for that point in the animation, select the next keyframe and repeat.
7. Check the motion by manually advancing the Timeline through each frame - click and drag the red box.
8. If you want the timeline to play when the window opens, selection Autoplay
9. If you want the timeline animation to loop, select the Loop checkbox

with behaviors

To have a link start a timeline animation:

• Note the name of the timeline you want to start (there can be more than one timeline)
• Select the object that is to start the animation
• In the property inspector for the selected object, put the "#" character in the link box
• Open the Behaviors window
• Using the "+" pull-down menu, select Timeline>Go To Timeline Frame and enter 1 as the frame to start on
• Using the "+" pull-down menu, and select Timeline>Play Timeline to actually play the animation
• Then in the Events column of the behavior window, select the event that triggers the timeline (e.g. onClick) for both actions

all materials on this web site © copyright 2003, Philip van Allen