As is so often the case when giants battle for market share, the Netscape vision of dynamic HTML (notice the lowercase d on dynamic here) is quite similar to that of Microsoft. But the execution is different enough to cause headaches for Web page designers who want to build DHTML for both Internet Explorer and Navigator or Communicator users alike.
While the key concept remains one of building Web pages that can interact with users entirely on the client side, the Netscape approach is quite different from Microsoft. Were also sorry to note that, in the eyes of most outside observers -- including the W3C -- Netscapes vision of DHTML is less dynamic than Microsofts. We explain why as we go through the elements of Netscapes vision of this technology.
In the Netscape view, dynamic HTML consists of three primary components:
HTML markup, including Netscape extensions, especially those for addressing document layers through the <LAYER> tag, plus dynamic font controls.
An object model for HTML documents, which differs substantially from the Microsoft DOM.
The Netscape <LAYER> tag anchors its implementation of DHTML: It provides the mechanism used to position HTML content into layers. It also provides the methods used to impose ordering on these layers, so that their precedence, visibility, and display characteristics can be manipulated in the browsers display. A similar x, y, z coordinate model is used to reference HTML elements and objects and to control their precise positioning on a Web page that not only refers to the elements' position horizontally and vertically on the page, but their positions in front and behind each other in layers of data.
The layering model is common with many high-end graphics programs, such as Adobe Photoshop. A discussion about layering can take up a whole chapter of a book and is too complex for this book. Suffice it to say that, with layering, the only elements that are displayed at any given moment are those whose visibility attributes are set to require their display, and whose position places them within the frame of the current display area for the page, whatever that might be.
As HTML markup goes, <LAYER> is a powerful and highly descriptive tag, replete with numerous attributes and associated values. Some of its most noteworthy attributes are as follows:
BACKGROUND: Used as in the <BODY> tag to set a background graphic for a designated layer.
BGCOLOR: Used as in the <BODY> tag to set a background color for a designated layer.
CLIP: Defines what area of a layer is viewable on screen.
NAME: Provides a unique identifier for each defined layer, so that it can be referenced in scripts, to control layer transitions, selections, and access.
VISIBILITY: Indicates whether a layer is currently visible or invisible (that is, whether it appears on screen or not).
WIDTH: Sets right margin controls for text-wrap and padding (white space between the rightmost character and the edge of the layers clip boundary).
Taken as a whole, the layer mechanism gives page designers a great way to break content up into mutually exclusive sets of data, text, and graphics, and to switch among sets as needed. This functionality provides the foundation for the rest of Netscapes approach to DHTML.
The reason why we say that the Netscape vision of DHTML is less dynamic than that of Microsoft hinges on one limitation of JASS: It does not permit dynamic changes to page content or structure after the page has finished loading. (The Microsoft implementation enables you to operate on any object element in the all object at any time while the page is loaded into the browser). This limitation means that all views of data must be built in advance and the layer mechanism must be used to shift among a collection of alternate, but static, views to create dynamic behavior.
The Microsoft approach is more direct and allows the data to be changed and redisplayed directly at any time. The Netscape approach does not entirely bar a programs manipulation of page, but it does prevent programs from acting on Web pages after they fully load. Any programmatic behavior to be imposed on Web documents must therefore be handled before the page is downloaded, rather than applied as needed on the client side. While this requires more forethought, it also ensures faster performance (because switching from one set of layers to another is faster than reflowing text on screen).
The real downside for Web page designers is that what constitutes DHTML markup for IE users is different from what constitutes DHTML markup for Netscape users. Ultimately, designers must create two sets of markup to deliver the same dynamic effects to users with IE and users with Netscape.
Shelley Powers wrote a great
article for NetscapeWorld entitled Writing Dynamic Pages That Look
and Work Great in Both Navigator and IE. This piece does a good
job of describing how designers can build pages that can use DHTML but
work equally well for both kinds of users. You can find this article at
Database experts like to talk about something called the duplicate data problem. This term describes what happens when two copies of the same data set must be kept synchronized -- a process that involves many headaches. Unfortunately, the same aching sensations may accompany your effort to create and maintain duplicate sets of markup for IE and Navigator users that deliver similar dynamic HTML behaviors.
The Netscape object model uses a similar notion of organizing and addressing elements within an HTML document. But the notation is completely different from that of Microsoft and depends entirely on unique names being assigned to individual elements to make the elements addressable. Thus, object references look much different, and not everything is guaranteed to be accessible (unless it has a name). For those reasons, Netscapes object model has not been widely adopted outside the Netscape developer community.
Though the Netscape vision of DHTML differs from, and is arguably less dynamic than, the vision of Microsoft, Netscapes approach still offers similar capabilities and functionality. Seeing the effects that this technology can produce provides the most compelling demonstration of its features and benefits. Table E3-2 includes further information resources on the Netscape view of DHTML, plus some great examples of this technology at work.
Table E3-2: Netscape DHTML Resources and Examples
|Overview||Dynamic HTML Overview||search.netscape.com/communicator/features/
|Open Standards Guarantee||search.netscape.com/comprod/columns/intranet/
|Ads||Online fashion mall||www.fashionmall.com|
|Premiere Techs Layers demo||www.premierecomm.com/layers/|
|Sinfomic Layers Demo||www.sinfomic.fr/Demo/|
|Canvas Mode Stella Chelsea Demo||home.netscape.com/comprod/products/
|Style Sheets Royal Newsletter Demo||home.netscape.com/comprod/products/
|Web Design Group Tutorial||www.htmlhelp.com/reference/css/|
Extra 3 Main Page | Previous Section | Next Section
E-mail: HTML For Dummies
Webmaster: Natanya Pitts, LANWrights
Revised -- January 16, 1998