DHTML Layers and Time Lines

Dynamic HTML offers powerful facilities for adding dynamic content to your web site. Layers make it possible to position elements on the page with pixel-level accuracy. Combine layers and time lines to create motion effects limited only by your imagination.

Below is a simple example of using layer and time line to animate a butterfly image. After you finish this tutorial, you will be able to create much more complex and interesting motion effects in your own Web pages.

1. Creating a Layer and Inserting an Image

1. Select [Insert-Layer] and a new layer appears in the document.

2. Double-click the layer's control tab (the little white box at the upper left corner of the layer). The Layer Properties dialog box appears.

3. Click Clip Art in the Background section, and the Clip Art dialog box appears. Select the image you want to insert and click Insert.

4. For Netscape compatibility, make sure to enable Save Using <layer> Tag. Click OK.

5. Position the layer anywhere you want by clicking and dragging the layer's control tab. Layers make it easy to position elements with pixel accuracy....

2. Adding Text to the Layer

1. Click inside the layer. Enter some text.

3. Add Motion Using a Time Line

1. Select [View-Tool Windows-Time Line]

2. The Time Line dialog box appears.

3. Click the layer's control tab and drag it over to the Time Line dialog box. The layer is now represented by a bar in the Time Line dialog box, labeled with the layer's name.

4. Click on the little circle at the right end of the bar. The red line representing temporal position jumps to the right end of the bar.

5. Back in the editing window, click and drag the layer control tab to the position you want the layer to move to.

6. A movement line is displayed from the point before dragging to the point after.

7. Select Auto Start and Repeat in the Time Line dialog box.

8. Click the Preview tab to preview your motion effect.

9. Here is an example of DHTML using more complicated layer and time line actions.

Namo Interactive Inc.

For more information, please refer to your on-line manual or contact us by email, phone or fax.

GERMANY : WSKA Verlag  e-mail: de.techsupp@wska.com   tel: 02051.319832   fax: 02051.319833
FRANCE : WSKA Editions  e-mail: supptech@wska.com   tel: 03.87.30.85.57   fax: 03.87.32.37.75
SPAIN : WSKA Ediciones sl   e-mail: es.techsupp@wska.com   tel: 91.815.97.48   fax: 91 523.36.42