start page | rating of books | rating of authors | reviews | copyrights

Book HomeWeb Design in a NutshellSearch this book

Chapter 29. Introduction to DHTML


How DHTML Works
The Document Object Model
Creating Layers
DHTML Examples
Browser Detection
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:

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.

29.1. Using DHTML

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.

29.1.1. Advantages to Using DHTML

Using DHTML has the following advantages:

29.1.2. Disadvantages

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.

Library Navigation Links

Copyright © 2002 O'Reilly & Associates. All rights reserved.