Layers
5th March
Table Reminder: Write the code for
these tables
Layers






Layer positioning
Properties of layers
Using layers
Nesting layers
Layers and tables
Formatting via layers
Layer Positioning

A layer is a rectangular container (region)
that holds XHTML content and can be
positioned anywhere on a web page

Layer is placed using pixel coordinates

Layers organise and format page content

Initial layers get covered by new layers
Layer Positioning

Appearance of layer content depends on the order
of stacking
Properties of Layers

The important properties are:






ID – specifies layer name
Location – measured relative to top left corner
Size – specifies width and the height
Visibility – specifies whether a layer is hidden or
visible
Background colour – a colour can be assigned
to a layer
Depth – represents its order of stacking
Properties of Layers
Using Layers



XHTML provides the <div> and the <span> tags
to create layers
<layer> and <ilayer> are obsolete
<div> - defines cascading style sheets (CSS)
layers


Attributes: id, position, left, top, width, height, zindex, border, background-color, backgroundimage, visibility, overflow, clip
<span> - another tag to create layers
Using Layers
<h2><center>Using 2 Layers<center></h2>
<div id="Layer 1" style="position:absolute;
width:300px; height:175px; left:54px;
top:45px; background-color:#33FFFF;
layer-background-color:#33FFFF;
border:1px"><b>this is layer 1</b></div>
<div id="Layer 2" style="position:absolute;
width:200px; height:165px; left:54px;
top:100px; background-color:#33FF00;
layer-background-color:#33FFFF;
border:1px"><b>this is layer 2</b></div>
**Note all format details are in “style”
Nesting Layers





A nested layer is a layer inside another layer
Nesting layers allows better format and control of web
page layout
A nested layer inherits the visibility of its parent layer
Nesting layers is not as complicated as table nesting
Example: 3-level nesting
<div>
<div>
<div>
</div>
</div>
</div>
Nesting Layers
Cell 1
Cell 21
Cell 22
<div id="parent layer" style="position:absolute; width:400px; height:200px; left:50px; top:60px;
background-color:#33FFFF; layer-background-color: #33FFFF; border: 1px; visibility:visible"><b></b>
<div id="layer 1" style="position:absolute; width:100px; height:100px; left:0px; top:0px;
background-color:#FFFF66; layer-background-color: #FFFF66; border: 1px;
visibility:visible"><b>Cell 1</b>
</div>
<div>
<div id="layer 2" style="position:absolute; width:200px; height:100px; left:100px;
top:0px; background-color:#00CC99; layer-background-color: #00CC99; border:
1px; visibility:visible"><b>Cell 21</b>
</div>
<div id="layer 2" style="position:absolute; width:100px; height:100px; left:200px;
top:0px; background-color:#FFFF66; layer-background-color: #FFFF66; border:
1px; visibility:visible"><b>Cell 22</b>
</div>
</div>
</div>
Layers & Tables




Layers are simple to use and less restrictive
Layer nesting is simpler than table nesting
Tables use 5 tags for hierarchical structure
whereas Layer just uses 1 tag for everything
Layers provide better control over formatting
and layout
Formatting Via Layers

Formatting via layers is based on the idea of nesting
layers

Each layer can be viewed as an independent region
that can hold any XHTML content

The web page is divided into regions according to its
layout

Each region is then substituted by a layer
Formatting Via Layers
Conclusion

Layers






Layer positioning
Properties of layers
Using layers
Nesting layers
Layers and tables
Formatting via layers
Reference

Steven M. Schafer (2005), HTML, CSS, JavaScript, Perl, and PHP
Programmer's Reference, Hungry Minds Inc,U.S.

Dan Cederholm (2005), Bulletproof Web Design: Improving Flexibility
and Protecting Against Worst-Case Scenarios with XHTML and CSS,
New Riders.

Ibrahim Zeid (2004), Mastering the Internet, XHTML, and Javascript