1. TO DO:
Above I added 3 layers: one with text, one with the 50 orange and another with the 50 yellow.

Create a layer on your own new web page. Open up Dreamweaver after you have downloaded the different colored circles linked above. Copy some text or type in whatever you want in one layer and put one or more circles under and above the text on another layer. Label each layer. Play!

Nesting layers
A nested layer is a layer whose code is contained in another layer. Nesting is often used to group layers together. A nested layer moves with its parent layer and can be set to inherit visibility from its parent.

To create a nested layer, insert or draw a layer inside another layer, or use the Layers panel. To force layers to automatically nest when you draw a layer starting inside another layer, select the Nesting option in the Layer preferences.

As you work with your page layout, you can select, move, resize, and align layers. You must select a layer before you can move, resize, or align it.
To prevent layers from overlapping each other as you move and resize them, use the Prevent Overlap option

To select a layer, do one of the following:
• Click the name of the layer in the Layers panel.
• Click a layer's selection handle. If the selection handle isn't visible, click anywhere inside the layer to make the handle visible.

You can move layers in the Design view in much the same way that you move objects in most basic graphics applications.
If the Prevent Overlaps option is on, you will not be able to move a layer so that it overlaps another layer.
To move one or more selected layers, do one of the following:
• To move by dragging, drag the selection handle of the last selected layer (highlighted in black).
• To move one pixel at a time, use the arrow keys. Hold down Shift while pressing an arrow key to move the layer by the current grid snapping increment

Aligning layers
Use the layer alignment commands to align one or more layers with a border of the last layer selected.
When you align layers, child layers that aren't selected may move because their parent layer is selected and moved. To prevent this, don't use nested layers.To align two or more layers:
1. Select the layers.
2. Choose Modify > Align, then select an alignment option.
For example, if you select Top, all of the layers move so that their top borders are in the same vertical position as the top border of the last selected layer (highlighted in black).

Viewing and setting layer properties
You can view and set various attributes of a layer in the Property inspector.
To view all layer properties:
1. Select a layer. .
2. Open the Property inspector by choosing Window > Properties.
3. If the Property inspector isn't expanded, click the expander arrow in the lower right corner to see all properties.

Using tables and layers for layout
Instead of using tables or Layout view to create your layout (see Presenting Content with Tables and Laying Out Pages in Layout View), some web designers prefer to work with layers and tables. Dreamweaver allows you to create your layout using layers, and then (if you wish) convert them into tables, since 3.0 browsers don't support layers. You can convert back and forth between layers and tables to adjust the layout and optimize page design.
You can't convert layers to tables or tables to layers in a template document or in a document to which a template has been applied. Instead, create your layout in a non-template document, and convert it before saving it as a template.
A single table or layer cannot be converted. You can convert layers to tables and tables to layers only for an entire page.
To convert layers to a table:
1. Choose Modify > Convert > Layers to Table.
2. In the dialog box that appears, select the desired options.

NOTE: Because table cells cannot overlap, Dreamweaver cannot create a table from overlapping layers. If you plan to convert the layers in a document to tables for compatibility with 3.0 browsers, use the Prevent Overlap option to constrain layer movement and positioning so that layers don't overlap.

Animating your layers
Dynamic HTML, or DHTML, refers to the combination of HTML with a scripting language that allows you to change style or positioning properties of HTML elements. Timelines, in Dreamweaver, use dynamic HTML to change the properties of layers and images over time. Use timelines to create animations that do not require any ActiveX controls, plug-ins, or Java applets (but do require JavaScript).
Note: The word dynamic can mean different things in different web-related contexts. Don't confuse Dynamic HTML with the idea of a dynamic web page, which means a web page generated dynamically by server-side code before being served to a visitor. For more information about creating dynamic pages, see The Dreamweaver Workflow for Dynamic Page Design.
Timelines allow you to change the position, size, visibility, and stacking order of a layer. (The layer functions of timelines work only in 4.0 or later browsers.) Timelines are also useful for other actions that you want to occur after a page loads. For example, timelines can change the source file of an image tag so different images appear in the page over time.

Using the Timelines panel
The Timelines panel shows how the properties of layers and images change over time. Choose Window > Others > Timelines to open the Timelines panel.

Timeline pop-up menu specifies which of the document's timelines is currently displayed in the Timelines panel.

Playback head shows which frame of the timeline is currently displayed in the Document window.
Playback options

Rewind moves the playback head to the first frame in the timeline.
Back moves the playback head one frame to the left. Click Back and hold down the mouse button to play the timeline backward.
Play moves the playback head one frame to the right. Click Play and hold down the mouse button to play the timeline forward.
Autoplay makes a timeline begin playing automatically when the current page loads in a browser. Autoplay attaches a behavior to the page's body tag that executes the Play Timeline action when the page loads.
Loop makes the current timeline loop indefinitely while the page is open in a browser. Loop inserts the Go to Timeline Frame behavior in the Behaviors channel after the last frame of the animation. Double-click the behavior's marker in the Behaviors channel to edit the parameters for this behavior and change the number of loops.

Moving a layer using a timeline animation
The most common kind of timeline animation involves moving a layer along a path. Timelines can move only layers. To make images or text move, create a layer using the Draw Layer button on the Insert bar and then insert images, text, or any other type of content in the layer
Timelines can also change other attributes of layers and images

To animate a layer using a timeline:
1. Move the layer to where it should be when the animation begins.
2. Choose Window > Others > Timelines.
3. Select the layer you want to animate.
Make sure you have selected the desired element. Click the layer marker or the layer selection handle, or use the Layers panel to select a layer. When a layer is selected, handles appear around it Clicking inside the layer places a blinking insertion point inside the layer, but it does not select the layer.
The ball below is set on autoplay and loop so you could see the action by the time we got to this section.

4. Choose Modify > Timeline > Add Object to Timeline or simply drag the selected layer into the Timelines panel.
A bar appears in the first channel of the timeline. The name of the layer appears in the bar.
5. Click the keyframe marker at the end of the bar. * the circle
6. Move the layer handle on the page to where it should be at the end of the animation.
A line appears showing the path of the animation in the Document window.

7. If you want the layer to move in a curve as above, select its animation bar and Control-click (Windows) or Command-click (Macintosh) a frame in the middle of the bar to add a keyframe at the frame you clicked, or click a frame in the middle of the animation bar and choose Add Keyframe from the context menu.
Repeat this step to define additional keyframes.
8. Hold down the Play button to preview the animation on the page.
Repeat the procedure to add additional layers and images to the timeline and to create a more complex animation.

Modifying timelines
After defining a timeline's basic components, you can make changes such as adding and removing frames, changing the start time of the animation, and so on.
To modify a timeline, do any of the following:
To make the animation play longer, drag the end frame marker to the right. All the keyframes in the animation shift so that their relative positions remain constant. To prevent the other keyframes from moving, Alt-drag (Windows) or Option-drag (Macintosh) the end frame marker.
• To make the layer reach a keyframe position earlier or later, move the keyframe marker left or right in the bar.
• To change the start time of an animation, select one or more of the bars associated with the animation (press Shift to select more than one bar at a time) and drag left or right.
• To shift the location of an entire animation path, select the entire bar and then drag the object on the page. Dreamweaver adjusts the position of all keyframes. Making any type of change with an entire bar selected changes all the keyframes.
• To add or remove frames in the timeline, choose Modify > Timeline > Add Frame or Modify > Timeline > Remove Frame.
• To make the timeline play automatically when the page opens in a browser, click Autoplay. Autoplay attaches a behavior to the page that executes the Play Timeline action when the page loads.
• To make the timeline loop continuously, click Loop. Loop inserts the Go To Timeline Frame action in the Behaviors channel after the last frame of the animation. You can edit the parameters for this behavior to define the number of loops.