Chapter 29. Introduction to DHTML
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.
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:
-
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.
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.
| | | 28.4. Handling Multiple Browsers | | 29.2. How DHTML Works |
Copyright © 2002 O'Reilly & Associates. All rights reserved.
|
|