|
|
|
| |
        
|
 |
|
To access the contents, click the chapter and section titles.
HTML 4.0 Sourcebook
Figure 7.24 Example HTML document illustrating the Netscape LAYER and ILAYER elements. Figure 7.25 shows the rendering of this document by Netscape Navigator 4. <HTML><HEAD> <TITLE> Test of LAYER Elements</TITLE> </HEAD> <BODY TEXT=“black” BGCOLOR=“white”> <P>This paragraph contains an absolutely positioned <LAYER ID=“o1”> <B><FONT SIZE=“+1” COLOR=“#ffaaaa”>ABSOLUTE</FONT></B> </LAYER> layer. Note how the rest of the paragraph is formatted as if the layer was not there. </P> <P>This second paragraph contains a relatively positioned <ILAYER ID=“i1” > <B><FONT SIZE=“+1” COLOR=“#ffaaaa”>RELATIVE</FONT></B> </ILAYER> layer. Note how the a relative layer affects the formatting of the remaining paragraph text. </P> </BODY></HTML>
Figure 7.26 Example document illustrating positioned layers. Figure 7.27 shows the rendering of this document by Netscape Navigator 4. <HTML><HEAD> <TITLE> Test of LAYER Elements</TITLE> </HEAD> <BODY TEXT=“black” BGCOLOR=“white”> <p>this paragraph contains an absolutely positioned <layer ID=“o1” LEFT=“50” TOP=“50”> <b><font SIZE=“+1” COLOR=“#ffaaaa”>absolute</FONT></B> </LAYER> layer. Note how the rest of the paragraph is formatted as if the layer was not there. </P> <P>This second paragraph contains a relatively positioned <ILAYER ID=“i1” LEFT=“50” TOP=“50”> <B><FONT SIZE=“+1” COLOR=“#ffaaaa”>RELATIVE</FONT></B> </ILAYER> layer. Note how the a relative layer affects the formatting of the remaining paragraph text. </P> </BODY></HTML>
Nested, Overlapping Layers By default, layers take on the height and width required to contain the layer content. This default size can be changed by HEIGHT and WIDTH attributes, which specify a desired size, in pixels, for the layer. Furthermore, layers can be nested one within the other—such nesting in turn affects the origin for absolute positioning of the enclosed layers. Finally, layers that are adjacent can overlap—the Z–INDEX attribute (or, alternatively, ABOVE and BELOW) then defines the z– or depth–ordering of the layers—that is, the order in which they lie one atop the other. These aspects of layer elements are illustrated in Figures 7.28 and 7.29. This document contains a large, light gray layer, 350 pixels wide and 150 pixels high, set 150 pixels down and 100 pixels in from the left. This layer, in turn, contains three additional layers (labeled A, B, and C). Note the LEFT and TOP values of these nested layers—since these layers are nested, their positions are defined relative to the upper left–hand corner of the parent layer and not relative to the browser window. Figure 7.28 Example document illustrating nested and stacked layers. Figure 7.29 shows the rendering of this document by Netscape Navigator 4.
<HTML><HEAD>
<TITLE> Test of Nested Layer Elements</TITLE>
</HEAD>
<BODY TEXT=“black” BGCOLOR=“white”>
<DIV>This block contains an absolutely positioned
<LAYER ID=“o1” LEFT=“100” TOP=“150”
HEIGHT=“130” WIDTH=“350” BGCOLOR=“#cccccc”>
Here is the content of the first layer element.
This element contains, in turn another layer.
<LAYER ID=“o2” TOP=“20” Z–INDEX=“2” LEFT=“20” BGCOLOR=“#666666”
WIDTH=“245”>
<FONT COLOR=“white”><B>Layer A</B></FONT>
</LAYER>
<LAYER ID=“o3” TOP=“40” Z–INDEX=“3” LEFT=“130” BGCOLOR=“#333333”>
<FONT COLOR=“yellow”><B>Layer B...... .</B></FONT>
</LAYER>
<LAYER ID=“o4” TOP=“10” Z–INDEX=“1” LEFT=“250” BGCOLOR=“white”
HEIGHT=“100” WIDTH=“30”><B>..C.</B>
</LAYER>
</LAYER>
layer that. in turn, contains three other absolutely
positioned layers.
</DIV>
</BODY></HTML>
Note also the order in which the layers are “stacked” on the display. As shown in Figure 7.29, layer B is stacked above layer A, while layer C is actually below both layers A and B. The ordering of layers A and B reflects the normal stacking order—layers that appear later in the HTML document are simply stacked on top of layers that appear before. However, the Z–INDEX attribute can change this default ordering, as done in Figure 7.28. The layers A, B, and C are assigned the Z–INDEX values 2, 3, and 1 respectively. The stacking order is defined by these values, with layers with larger values appearing on top of layers with smaller values. Thus, this set of assignments places the third layer (C) on the bottom and layers A and B on top. Clipping and Visibility Finally, layers can be “clipped” using the CLIP attribute, or can have their visibility controlled using the VISIBILITY attribute. Both attributes are illustrated in Figure 7.30—here, CLIP is used to clip the parent layer containing the three sub–layers, while the VISIBILITY attribute is used to hide (VISIBILITY=“hidden”) the layers labeled B and C. The resulting rendering is shown in Figure 7.31—notice how the layers are clipped according to the specified clipping box and that layers B and C are not longer visible. LAYERs Versus Style Sheets All of the layering mechanisms discussed in the preceding sections can be defined using cascading style sheets—indeed, Figures 7.36 and 7.37 demonstrate how the layer markup in Figure 7.30 can be rewritten to use the CSS notation. Since CSS is the defined standard for Web page formatting, it is best to use CSS to define layer positioning and layout, whenever possible. There are, however, a few attributes that have no standard CSS equivalent. For example, a layer can use the SRC attribute to reference a document to include in the layer. This is not supported by CSS, although Netscape does support a proprietary CSS property of the form: include–source: url(“url–to–document”) where url–to–document is a URL that references the document to include. This property is not supported by other browsers and is not likely to be incorporated into the CSS specifications. Also, layer elements support the PAGEX and PAGEY attributes for specifying the positions of the layers (similar to TOP and LEFT) and the ABOVE and BELOW attributes for specifying the stacking order for layers (similar to Z–INDEX). These attributes have no CSS equivalents. Figure 7.30 Example document illustrating layer clipping—the change from Figure 7.29 is shown in boldface. Figure 7.31 shows the rendering of this document by Netscape Navigator 4.
<HTML><HEAD>
<TITLE> Test of Nested Layer Elements</TITLE>
</HEAD>
<BODY TEXT=“black” BGCOLOR=“white”>
<DIV>This block contains an absolutely positioned
<LAYER ID=“o1” LEFT=“100” TOP=“150”
HEIGHT=“130” WIDTH=“350” BGCOLOR=“#cccccc”
CLIP=“15,5,300,80”>
Here is the content of the first layer element.
This element contains, in turn another layer.
<LAYER ID=“o2” TOP=“20” Z–INDEX=“2” LEFT=“20” BGCOLOR=“#666666”
WIDTH=“245”>
<FONT COLOR=“white”><B>Layer A</B></FONT>
</LAYER>
<LAYER ID=“o3” TOP=“40” Z–INDEX=“3” LEFT=“130” BGCOLOR=“#333333”
VISIBILITY=“hidden”>
<FONT COLOR=“yellow”><B>Layer B ... ... .</B></FONT>
</LAYER>
<LAYER ID=“o4” TOP=“10” Z–INDEX=“1” LEFT=“250” BGCOLOR=“white”
HEIGHT=“100” WIDTH=“30”><B>..C.</B>
</LAYER>
</LAYER>
layer that. in turn, contains three other absolutely
positioned layers.
</DIV>
</BODY></HTML>
|
|
Products | Contact Us | About Us | Privacy | Ad Info | Home
Use of this site is subject to certain Terms & Conditions, Copyright © 1996-2000 EarthWeb Inc. All rights reserved. Reproduction whole or in part in any form or medium without express written permission of EarthWeb is prohibited. Read EarthWeb's privacy statement.
|
)
)
)
){kind=link}
){kind=link}
){kind=link}