OMAN COLLEGE OF MANAGEMENT AND
TECHNOLOGY
Course 503416 – Internet
Programming
Chapter 6
Layers
CS/MIS Department
INTRODUCTION
Web
page layout must be attractive
Layer holds XHTML content and can be placed
using pixel coordinates
Layers organize and format page content
Each layer has its own content and position
2
LAYER POSITIONING
Layers are stacked on top of each other
Initial layers get covered by new layers
Appearance of layer content depends on the order of
stacking
A 2D coordinate system is used to position layers
The coordinates are measured in pixels
3
PROPERTIES
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 color – a color can be assigned to a layer
Depth – represents its order of stacking
Clip – limits a layers’ displayable area
Overflow – what to do if content exceeds layer’s size
4
PROPERTIES EXAMPLE (IN DIAGRAM)
5
USING LAYERS
The important tags are:
<div> - defines cascading style sheets (CSS) layers
Attributes: id, position, left, top, width, height, z-index, border, background-color,
background-image, visibility, overflow, clip
<span> - another tag to create layers
Example:
<div id=“mylayer” style=“position:absolute;
width:300px; height:175px; z-index:1;
visibility:visible; overflow:visible;
clip:rect(50 30 70 10)”>All layer
properties</div>
6
Example 6.1: Using layers
Create a web page that uses layers of different colors
7
NESTING LAYERS
A nested
layer is a layer inside another layer
Nesting layers allows better format and control of web
page layout
Nested layer inherits the visibility of its parent layer
Nesting layers is not as complicated as table nesting
Nested layer moves with the parent layer
Example: 3-level nesting
<div>
<div>
<div>
</div>
8
</div>
</div>
Example 6.3: Use Nested Layers
Design a table layout using nested layers
9
LAYERS AND 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
10
FORMATTING VIA LAYERS
Formatting
via layers is based on the idea
of nesting them
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
11
Example 6.4: Formatting with layers
Develop a web page using layers for formatting
12
SUMMARY
Tables organize and format page content
• Layers are positioned using 2D coordinate system
• Layers have many properties for their
specifications
• The <div> tag is the most important tag to create
layers
• Layers can be nested for better control
• Layers are easier to use than tables
• Web page layout is formatted using layers
13
•