Dynamic HTML Basics: Layers and Scripting in the Browser

[ LiB ]

Dynamic HTML Basics: Layers and Scripting in the Browser

DHTML is a series of overlapping technologies for creating dynamic web pages pages capable of responding in complex ways to user interactionswithout using server-side processing, plug-ins, or other helper applications. CSS and JavaScript are the key players in DHTML, along with various proprietary technologies such as Netscape's JSS (JavaScript style sheets) and Microsoft's ActiveX filters.

For more about CSS and layers, see Chapter 12, "CSS Positioning, Dreamweaver Layers, and Page Layout."


About the DOM

The heart of live data page control is the DOM. The DOM , or Document Object Model, is a hierarchical description of the structure of objects in an HTML page. In scripting terms, an object is an element that can be accessed and altered by scripting commands. The browser window is an object, for instance; with scripting, you can determine what size it is and what location (URL) it's currently displaying, and you can even tell it to change its location to a new URL. The document currently being displayed in the window is an objectso is a form sitting in the document and each input field inside the form. A JavaScript statement such as this one enables you to climb up the document "tree" to talk to a text field inside a form, inside the document that is currently inside the browser window, and then to change that text field's value:

 window.document.theForm.textField1.value="Hello world" 

By accessing that value, you have just navigated the DOM.

Like everything else about computers, the DOM develops and has versions. Basic form access, such as that shown here, is part of the Level 0 DOM. Dynamic HTML, which accesses other page elements, requires the more developed Level 1 DOM. Only browsers 4.0 and above can understand the Level 1 DOM; therefore, only those browsers can handle DHTML.

DOM Incompatibility

The DOM is important to you because all DOMs are not the same. The W3C has set out a standard for how the DOM should function in HTML pages. But browsers follow the standard to different degrees. The Mozilla/Netscape 6 DOM is closest to the standard. The Internet Explorer DOM has some differences. The older Netscape 4 DOM varies quite a bit from the standard. This means that, even if you consider only the two major browsers, you have three different DOMs to deal with.

In general, DHTML authors have a choice of the following:

  • Pick one browser to design for, and ignore the rest.

  • Try to be as inclusive as possible by using only features that work everywhere.

  • Try to be reasonably inclusive, but also use new features by putting two or more sets of code in each page, each directed at a different browser.

Dreamweaver's DHTML Authoring Strategy

One of the reasons Dreamweaver is popular as a DHTML authoring tool is that it shields designers from most of these compatibility problems. All of its layer- related behaviors are written with the proper JavaScript to work as well as possible in both major browsers. DHTML features that are purely browser- or platform-specific (such as the IE/Windows filters and page transitions) are either not included or not emphasized in the interface.

You can never be completely shielded , however. Certain items will display differently across browsersand across platforms in different browsers. Certain behaviors will behave differently in different browsersor they won't behave at all, despite Dreamweaver's robust coding. This chapter focuses on how to use Dreamweaver tools for dynamically controlling layers. Be aware as you go through it that not everything you do will work equally well in all browser/platform situations.

[ LiB ]


Macromedia Dreamweaver MX 2004 Demystified
Macromedia Dreamweaver MX 2004 Demystified
ISBN: 0735713847
EAN: 2147483647
Year: 2002
Pages: 188
Authors: Laura Gutman

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net