beautypg.com

Animating ap elements, About animating ap elements, Timelines panel overview – Adobe Dreamweaver CS3 User Manual

Page 173

background image

DREAMWEAVER CS3

User Guide

166

4

In Design view, open the page to which you want to attach the new styles.

5

Select Text > CSS Styles > Design-time.

6

In the Design-time Style Sheets dialog box, click the plus (+) button above the Show Only at Design Time text box,

select the style sheet you just created, and click OK.

7

Click OK to close the Design-time Style Sheets dialog box.

The style sheet is attached to your document. If you had created a style sheet using the previous example, all
paragraphs and list items would be formatted with the

display:block

attribute, thereby allowing you to enable or

disable CSS layout block visual aids for paragraphs and list items.

See also

“Use Design-Time style sheets” on page 143

Animating AP elements

About animating AP elements

Dynamic HTML, or DHTML, refers to the combination of HTML with a scripting language that allows you to
change the style or positioning properties of HTML elements. Timelines in Dreamweaver use dynamic HTML to
change the properties of AP elements 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.

Timelines allow you to change the position, size, visibility, and stacking order of an AP element. (The AP element
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.

To see the JavaScript code generated by a timeline, open the Document window’s Code view. The timeline code is in
the

MM_initTimelines()

function, inside a script tag in the head section of the document.

When editing the HTML of a document containing timelines, make sure you do not move, rename, or delete
anything that a timeline refers to.

See also

“About AP elements in Dreamweaver” on page 151

Timelines panel overview

The Timelines panel shows how the properties of AP elements and images change over time. Select Window >
Timelines to open the Timelines panel.

September 4, 2007