(1) (2) (3) (4) (5) (6)

DHTML is all about Layers
Unlike most Web pages you are likely to build in Dreamweaver you will be using 'layers' in this project. This is why DHTML is limited to 4.0 browsers and above. They support layers. Layers allow you to stack images and move them around the screen.

1) Open a new blank page and go - View - Grid - Show and turn on - Snap to. This will aide you in placing your layers.

Note! Before working with layers bring up the Layers Palette (F11) and uncheck - Prevent Overlaps.

3) Select the 'insert draw layer' icon from the 'Objects Palette' and create a layer in the upper corner against the left edge about 50 pixels down from the top. Now place the board.gif image within the layer. Resize the layer to contain the image. Now change the default layer id name to 'board.' This will help you keep all your various layers organized.

Always name your layers

4) Now Press F12 to bring up your 'Timelines' window. This is where you can animate and control images and add behaviors like start, stop, etc. Select the 'board' layer and drag the handle onto Channel 1. The dots on either end are keyframes. Drag the right keyframe to frame 30. Your board is positioned and set.

The timeline allows you to animate layer objects

Note! Check 'Autoplay' box so the animation will play immediately.

(1) (2) (3) (4) (5) (6)