 Experiment with Dynamic HTML
If you'd like to experiment with Dynamic HTML for yourself,
here's a simple black box with white and red text layered over the top (see Figure 3). There's one version for Netscape Navigator 4.0 using
the <LAYER> tag and another for Internet Explorer 4.0 using Cascading Style Sheets.
Choose the correct one for your browser -- the source will only work in the specified
browser. We've included these for example purposes only. In future columns we'll explore
Dynamic HTML in more detail.
Layers in Netscape
Navigator 4.0 offers designers the <LAYER> tag for absolute positioning of text and
graphics on a Web page. Unfortunately this tag is not supported by IE 4 and has been
rejected by the W3C as a standard. You'll only see how this tag functions if you're using
Navigator 4.0.
A layer is created between a pair of <LAYER> ...
</LAYER> tags. Everything to appear on a layer is contained within these tags and
the layer can be treated as a single element to be moved, hidden or clipped etc.
As layers are stacked on top of each other, you can specify
pixels in a layer to be solid or transparent. If a pixel is solid, nothing will show
through it, if a pixel is transparent, then the content of layers underneath will show
through.
This source will create three layers; the middle and top
layers are (by default) transparent so the colour from the bottom layer will show through.
<HTML>
<HEAD>
<TITLE>Netscape Navigator Layer tag sample</TITLE>
</HEAD>
<BODY bgcolor="white">
<LAYER Name="Bottom_Layer"
TOP=100
LEFT=50
BGCOLOR="black"
WIDTH = 150
HEIGHT = 40
Z-INDEX = 0>
</LAYER>
<LAYER Name="Middle_Layer"
TOP=100
LEFT=50
Z-INDEX = 1>
<FONT COLOR = "white"><H1>LAYER</H1></FONT>
</LAYER>
<LAYER Name="Top_layer"
TOP=120
LEFT=70
Z-INDEX = 2>
<FONT COLOR = "red"><H3>ontop of a layer</H3></P>
</LAYER>
</BODY>
</HTML>
The attributes of the layer tag used here are:
NAME="Bottom_Layer" provides identification for the
layer.
LEFT=50 and TOP=100 give absolute pixel positions for the
layer measured from the upper left corner of the document. This layer is 50 pixels in from
the left and 100 pixels down from the top of the document.
WIDTH=150 gives a layer with a width of 150 pixels. If the
contents of the layer have a width wider than this, then the layer will be wider.
HEIGHT=40 sets the height of the layer at 40 pixels.
Z-INDEX=0 sets the order of the layer on the page. Zero is
the bottom most layer and layers with larger values are stacked over layers with smaller
values.
BGCOLOR="black" sets the background of the layer to
black. If BGCOLOR or the BACKGROUND attribute is not set, the layer is transparent.
Cascading Style Sheets
Because both IE4 and Navigator 4.0 support absolute positioning using Cascading Style
Sheets (CSS) this is the preferred method of positioning text and graphics in both
browsers. However, you won't always find that your source will appear the same in both
browsers (try some of the Dynamic HTML sample pages with both browsers and see the
difference!).
Here's the same text layered example that we created with the
Netscape ^LAYER> tag, created with a Cascading Style Sheet. This will appear correctly
rendered in IE4 but doesn't display properly in Netscape Navigator 4.0.
<HTML>
<HEAD>
<TITLE>IE4: CSS 'layered' sample</TITLE>
<DIV STYLE="
position:absolute;
background-color: black;
color: white;
top:100px;
left:50px;
width:150px;
height:40px;">
<P><H1>LAYER</H1></P>
<DIV STYLE="
position:absolute;
top:20px;
left:20px;
color:red;">
<P><H3>ontop of a layer</H3></P>
</DIV>
</DIV>
</HEAD>
</BODY>
</HTML>
To replicate the layered text on a black box effect in
Internet Explorer 4.0, we used the <DIV>...</DIV> tag which is new in HTML.
This tag creates a division in a document and allows you to apply a default style to all
the elements which appear inside the tag.
The syntax for CSS is different to that of HTML. Each
property in a style sheet, such as position, colour etc, is separated from its value by a
colon and each value is completed with a semicolon. The properties we've used in this
example are:
position:absolute; allows us to position an element
independent of any other element.
background-color: black; sets the background colour for the
element affected by the style.
color: white; is used to assign a colour to the text, in this
case the text will be white.
top:100px; and left:50px; sets the top edge of the element
100 pixels down and 50 pixels in from the top of the upper-left corner of the document.
width:150px; and height:40px; sets the width of the element
at 150 pixels and the height at 40 pixels.
The <DIV>...</DIV> tags used here are nested
inside each other. This means that the second division is contained within the first
division and takes its positioning from it. Thus the top:20px and left:20px set the second
piece of text in and down 20 pixels from the top-left edge of the first element and not
the document itself. This places the text in the correct position 'inside' the black box.
|
