Dynamic HTML (dHTML)

The first Web authoring program that supports dHTML comes from Macromedia and is called Dreamweaver (currently available from www.macromedia.com in beta). It comes with wonderful tutorials on dHTML, what it is, and how to use it. The following is the overview of dHTML that comes with DreamWeaver ....


Dynamic HTMLOverview

The ability to change style or positioning properties with a scripting language is what is commonly called dynamic HTML, or DHTML. Dreamweaver has four DHTML-related features: Layers, Styles, Timelines, and Behaviors.

Layers

The term "layer" was introduced by Netscape to refer to its LAYER and ILAYER tags. In Dreamweaver, "layer" means any element that can be positioned at exact coordinates on the page. Positioning properties include left and top (x and y coordinates, respectively), z-index (also called the stacking order), and visibility. Positioned elements can be defined with the DIV, SPAN, LAYER, or ILAYER tags. Positioned elements created with DIV and SPAN are commonly referred to as "CSS layers" or "CSS-P elements" because their positioning properties are defined by the World Wide Web Consortium's Cascading Style Sheets Positioning specification (CSS-P). Both Microsoft and Netscape support CSS layers in their 4.0 browsers. Positioned elements created with the LAYER and ILAYER tags are supported only by Netscape Navigator 4.0 or later.

Style sheets

The World Wide Web Consortium is also responsible for the Cascading Style Sheets specification (CSS1), which defines style properties (for example, font, color, padding, margin, word-spacing) that control the appearance of elements. Dreamweaver allows you to set any CSS1 property. In Microsoft Internet Explorer 4.0, you can change the positioning and style properties of elements after the page has loaded with a scripting language such as JavaScript or VBScript. In Netscape Navigator 4.0, you cannot change style properties after the page has loaded, but you can change positioning properties.

Timelines

Timelines make the process of creating DHTML easier by automatically generating the JavaScript that changes the position or visibility of a layer or the source of an image over time. This allows you to create animations that require neither Java nor plug-ins without coding JavaScript yourself.

Behaviors

Behaviors are the combination of an event (for example, when the mouse passes over a link, when the page loads, or when a form field loses focus) and a JavaScript action (for example, opening a new window, playing a sound, or changing an image source). See Behaviors overview for more information on how Behaviors work. Dreamweaver ships with several actions that affect style and positioning properties, including Show/Hide Layers, Swap Image, Change Attribute, and the three Timeline actions (Go to Timeline Frame, Stop Timeline, and Play Timeline). Actions can be triggered by an event on the page (for example, the user clicking a button) or from a Timeline.


Here are some places to go to learn more

All you need to know about dHTML for Netscape4: http://developer.netscape.com/library/documentation/communicator/dynhtml/contents.htm

Alphabetic Listing of HTML tags from Netscape (includes div, layer, and other dHTML tags): http://developer.netscape.com/library/documentation/htmlguid/alphlist.htm

The W3C (World Wide Web Consortium) Page (the folks who write the protocol): http://www.w3c.org

Microsoft's take on dHTML: http://www.microsoft.com/msdn/news/feature/110397/dhtml/default.htm