A Gift of "Life" : The Document Object Model
Multimedia in Microsoft Internet Explorer
What is So Dynamic About Dynamic HTML?
Building a Dynamic Thank You Page
You are here: irt.org | Articles | Dynamic HTML (DHTML) | An Introduction to Netscape Layers [ previous next ]
Published on: Saturday 16th May 1998 By: Josh Sahrmann
Welcome to the world of DHTML otherwise know as Dynamic HTML. If you've never learned HTML now would be a great time to learn because every place you go is using some sort of HTML for use on the Internet or Intranet. HTML can become the fastest way to communicate and change data fast with out having to spend a fortune to maintain it.
But how do you go about attracting people? Well HTML can only go so far. What would happen for example if you could make a web site with moving images and text that changes while not effecting the speed of your users connection? You would end up making a better web site which would change the minds of many.
I hope to explain and give examples of small things in which you can make your web site so much better.
So you've heard that DHTML is so great but what are the cons? Well unfortunately there are cons to DHTML. But there are cons to JavaScript. There are two versions of DHTML. One for Netscape Navigator. The other in Microsoft Internet Explorer.
For some reason Microsoft and Netscape decided that they needed versions which wouldn't run on all browsers and that when using DTHML you would have to use different HTML tags and syntax to get both browsers to work.
The code in this article will only work with Netscape Navigator 4.
The first example is how to setup two layers of content. This way seems odd at first but read on and you will understand. So with no more delay I will get started.
The first step is to setup a base line in which your browser will talk to the HTML document. The next step will be to make the layer. To do that follow the example below.
<LAYER>DHTML</LAYER>
O.K. so you've just created your layer. So what is this <LAYER></LAYER> thing? Well the LAYER tag tells the browser that you want to create a layer in your document. One more line of code and you will have something to look at.
<LAYER>Rules</LAYER>
OK great so you've just lost me. Why did I just write two sets of different layers? The reason you've written two different layers is because it's like the feathers of a bird. If a bird only had one feather then how would it look? But in real life the bird has several layers. So that's what you've just done. By creating several layers you can make your site even more interesting!
So this is what the code is going to look like when you are done:
<LAYER><FONT COLOR="#FF0000">DHTML</FONT></LAYER> <LAYER><FONT COLOR="#0000FF">Rules</FONT></LAYER>
Here is the working example:
Didn't that look interesting? See how the words are layered on top of each other. If not make sure you are running Netscape Navigator 4 or later.
The problem with what we've just done is that the words lay on top of each other and for your home page that's just not going to work. So lets take our existing code and change it a little so everything will look a bit better. This time lets add something to our lines.
<LAYER><FONT COLOR="#FF0000">This is an example of layering with Netscape Navigator 4</FONT></LAYER> <LAYER><FONT COLOR="#0000FF"><CENTER>DHTML Rules</CENTER></FONT></LAYER>
Here is the working example:
See how "DHTML Rules!!!" is centered across the whole page, and at the same time to the right of "This is an example of..."? But still I'm just not happy with this. I want my site to be the best on the intranet!
<ILAYER><FONT COLOR="#FF0000" SIZE="+2">DHTML</FONT></ILAYER> <LAYER><FONT COLOR="#0000FF" SIZE="+4">Rules</FONT></LAYER>
Here is the working example:
This example has introduced two new HTML tags, the <ILAYER> and </ILAYER> tags. What I didn;t explain in the previous examples is the Netscape LAYER tag opens a layer that is independent of the rest of the HTML around it, i.e. it does not reserve space in the normal document flow. Whereas the Netscape ILAYER places the layer inline with the surrounding HTML. So in the above example the two layers do not overlap because the first layer has reserved just enough space within the document for itself, the second layer then just follows on from any preceeding HTML.
The next example attempts to demonstrate this in more detail:
<ILAYER><FONT COLOR="#FF0000" SIZE="+2">DHTML</FONT></ILAYER> <LAYER><FONT COLOR="#0000FF" SIZE="+4">Rules</FONT></LAYER> <LAYER><FONT COLOR="#00FF00" SIZE="+6">Okay?</FONT></LAYER>
Here is the working example:
Because the second layer wasn't an inline layer the third layer overlaps. Within this article I have to take account of this when placing text following on from the examples, by manually inserting several <BR> tags to push the text away from any non inline layers. But then, this is one of the attractions of using layers.
These previous examples may not look way too 'cool' but if you spent a bit more time working with different layers you could create something quite effective:
<ILAYER WIDTH="400" HEIGHT="100" BGCOLOR="red">
<LAYER>
<FONT SIZE="+3"><B>Text over an Image</B></FONT>
</LAYER>
<A HREF="javascript:alert('Hello World')"><IMG SRC="picture.gif" WIDTH="300" HEIGHT="100"></A>
<LAYER WIDTH="100" HEIGHT="100" BGCOLOR="teal">
<FONT SIZE="-1">Lets try and fit in as much text as we can is this remaining part of the outer layer. If we overflow the text should still appear.</FONT>
</LAYER>
</ILAYER>Here is the working example:
This code isn't that complicated. If you don't understand it that's O.K. too. Because I'm going to help you through it.
The example is first wrapped up in an inline layer using an <ILAYER> tag with a set width of 400 pixels and height of 100 pixels, with a red background color. This outer layer reserves space in the document for the layer contents.
Within this outer layer, are three items, a non inline layer with large text, some normal HTML which displays an image link, and another non inline layer with a set width and height of 100 pixels and a teal background color.
Because the first of these three non inline layers has no specified width or height attributes, it uses up exactly the space required to display the contents. As its a non inline layer it does not reserve any space therefore the image and layer overlap (try doing that in normal HTML without layers). The second layer follows on from the image. Even though it has specified width and height attributes, the height is effectively expanded to allow the complete contents to be displayed. This is turn expands the height of the outer layer.
Microsoft Internet Explorer has had since version 3 a means of embeding documents with one another by the use of a floating frame (<IFRAME>), now with the introduction of layers Netscape Navigator 4 can also embed documents within one another:
The only reference worth talking about is the Netscape Dynamic HTML Manual available at http://developer.netscape.com/library/documentation/communicator/dynhtml/index.htm
A Gift of "Life" : The Document Object Model
Multimedia in Microsoft Internet Explorer
What is So Dynamic About Dynamic HTML?
Building a Dynamic Thank You Page
An Introduction to Microsoft Layers