The Netscape Navigator (NN) Way
     Netscape Navigator uses the <layer> tag to group DHTML elements together into workable units. The <layer> tag is simply an HTML tag that is used in grouping similar content together. Keep in mind that the <layer> tag is not part of the W3C standards and the Netscape's way of implementing DHTML may change to suit the standards, (i.e. <div> tag). Then the <layer> tag's attributes are configured which then can be manipulated by JavaScript. Think of the <layer> tag as a transparent sheet of paper that you can put stuff on and always defaults to the upper-left corner.

The HTML
     The HTML needed to make DHTML work includes the use of the <layer> tag to group together DHTML elements such as text, images and other <layer> groups. So in a way, DHTML has a modular design as compared the to procedural design of regular HTML. By modular design I mean content is nicely contained in easily manageable units. Regular HTML is rather chaotic and not very structured making it harder to control. Below is an example of a how a DHTML page is structured into groups.

Each block represents an opening and closing <layer> tag with various web page elements within them such as text, images and sub blocks.

     As you can see from the example above, DHTML has a very structured form. A modular way of thinking must be used in designing a DHTML page. Above, each DHTML block is really a <layer> and </layer> tag with attributes describing how to display the contents within it. Notice that the <layer> tag can only be configured with its attributes and not inline styles like IE. In other words, you can't use the style="" attribute in the <layer> tag. Below is an example of what the text block code looks like.

   <!-- ---------------TEXT BLOCK --------------- -->
   <layer id="story" 
   top="250" 
   left="200" 
   width="400" 
   z-index="1">
   <font face="tahoma" color="#333333">
      A pleasing land of drowsy head it was,<br>
      ...
   </font>   
   </layer>

<!-- -------------CONTROL BLOCK------------- -->

<layer id="controls"
top="100"
left="700"
width="50"
height="300"
Z-Index="1"
visibility="show">

   <layer id="scrollup"
   top="0"
   left="0">
      <img src="up.gif" alt="Scroll Up">
   </layer>

   <layer id="scrolldown"
   top="200"
   left="0">
      <img src="down.gif" alt="Scroll Down">
   </layer>
            
</layer>

Basic DHTML with Netscape Navigator
     Part 1: The HTML
     Part 2: The Attributes
     Part 3: The Script

Related Article: Introduction to DHTML
Related Article: Basic DHTML with Internet Explorer

Have a comment or question dealing with this tutorial? Write us!