 | Web Design in a Nutshell, 2nd Edition |  |
Using DHTML
How DHTML Works
The Document Object Model
Creating Layers
DHTML Examples
Browser Detection
DHTML Tools
Where to Learn More
HTML is based on thinking of a web page like a printed page: a document that is rendered once and that is static once rendered. The idea behind Dynamic HTML (DHTML), however, is to make every element of a page interactively controllable, before, during, and after the page is rendered. This means you can make things move, appear and disappear, overlap, change styles, and interact with the user to your heart's content. Through DHTML, users get a more engaging and interactive web experience without constant calls to a web server or the overhead of loading new pages, plug-ins, or large applets.
DHTML is not a language itself, but rather a combination of:
HTML 4.0 (or XHTML 1.0)
JavaScript -- the Web's standard scripting language
Cascading Style Sheets (CSS) -- styles dictated outside a document's content
Document Object Model (DOM) -- a means of accessing a document's individual elements
Since the first edition of this book, Dynamic HTML has developed into a stable standard that is well supported by both Netscape 6 and Internet Explorer 5.5.
Netscape Navigator 4.0 and IE 4.0 supported earlier, proprietary versions of DHTML, and they differed greatly in their support for CSS and dynamically positioned elements. The differences between what these two browser versions called DHTML has created a million migraines among web developers. Accounting for the inconsistencies required creating two separate web pages or jumping through browser-detection hoops to give all users the same experience.
Fortunately, with the latest browsers, there are significantly fewer headaches involved with DHTML. In this chapter, we'll be concentrating on using the W3C and ECMA standards supported by the latest browsers, but we'll briefly cover the earlier versions of DHTML later in this chapter.
Like most web technologies, DHTML comes with its share of pros and cons. DHTML's reliance on a variety of standards makes it difficult to generalize, so you should decide on a case by case basis whether or not to use DHTML. The following are the major factors to consider when considering using DHTML on your site.
Using DHTML has the following advantages:
File sizes are small. DHTML files are small compared to other interactive media like Flash or Shockwave (see Chapter 26, "Flash and Shockwave"), so they download more quickly.
It's supported by both major browser manufacturers. Both Microsoft and Netscape currently support DHTML in some shape or form.
DHTML is a standard. The World Wide Web Consortium (W3C) has released specifications for DOM 0, 1, and 2, and CSS 1 and 2 (see the web site at http://www.w3c.org for more information). These specifications lay the groundwork for DHTML.
No plug-ins, ActiveX controls, or Java is necessary. A visitor to your site needs only a recent web browser to take advantage of your DHTML. This puts fewer requirements on your audience because they don't need to download special software to view your site.
There are fewer calls to the server. Since you can change and move elements after a page is loaded, you don't need to create separate pages just to change styles or display a menu. This saves you time in building pages, and it saves users time because each request to the server takes time and bogs down the browsing experience.
But keep in mind these disadvantages:
Only new browsers support DHTML. Only recent browsers like Netscape 6, IE 5.5, and Opera 5 support standards-based DHTML. Many people are still using older versions of these browsers, however, so web designers using DHTML must accommodate these older browsers or sacrifice a significant portion of their audience.
Netscape and Microsoft have different DHTML implementations. Different implementations, especially in the 4.0 browsers, can make creating a DHTML document tedious and complicated.
DHTML creation has a steep learning curve. Because DHTML requires at least partial knowledge of many different web technologies (HTML, JavaScript, CSS, and DOM), it takes some learning and practice before you begin creating DHTML content. DHTML tools can go a long way towards eliminating this problem.
|  | |
| 28.4. Handling Multiple Browsers |  | 29.2. How DHTML Works |
Copyright © 2002 O'Reilly & Associates. All rights reserved.