Layers&Frames

Layers & Frames

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 organize 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 height

Visibility – specifies whether a layer is hidden or visible

Background color – a colour 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

Properties of Layers

Using Layers

XHTML provides the <div> and the <span> tags to create layers (document sections)

<layer> and <ilayer> are obsolete

<div> - defines cascading style sheets (CSS) block layers

Attributes : id, position, left, top, width, height, z-index, border, background-color, background-image, visibility, overflow, clip

<span> - another tag to create layers in-line

Using Layers (div)

<h2><center> Using 2 Layers </center></h2> < div id= "Layer 1" style= "position: absolute ; width:300 px ; height:175 px ; left:54 px ; top:45 px ; background-color:#33FFFF; layer-background-color :#33FFFF; border:1 px "><b>T his is layer 1 </b></div> < div id= "Layer 2" style= "position: absolute ; width:200 px ; height:165 px ; left:54 px ; top:100 px ; background-color:red; layer-background-color:red; border:1 px "><b> this is layer 2 </b></div>

**Note all format details are in “style attribute”

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

< div id= "parent layer" style= "position: absolute ; width:400 px ; height:200 px ; left:50 px ; top:60 px ; background-color:#33FFFF; layer-background-color: #33FFFF; border: 1 px ; visibility: visible "><b></b> <div id= "layer 1" style= "position: absolute ; width:100 px ; height:100 px ; left:0 px ; top:0 px ; background-color:#FFFF66; layer-background-color: #FFFF66; border: 1 px ; visibility: visible "><b> Cell 1 </b> </div> <div> <div id= "layer 2" style= "position: absolute ; width:100 px ; height:100 px ; left:100 px ; top:0 px ; background-color:#00CC99; layer-background-color: #00CC99; border: 1 px ; visibility: visible "><b> Cell 21 </b> </div> <div id= "layer 3" style= "position: absolute ; width:100 px ; height:100 px ; left:200 px ; top:0 px ; background-color:#FFFF66; layer-background-color: #FFFF66; border: 1 px ; visibility: visible "><b> Cell 22 </b>

</div> </div> </div>

Cell 1 Cell 21 Cell 22

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

Div 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

Frames

Frame layout and design

Frame sets and nesting

Using frames

Target frames and windows

Frames

Web pages that do not use tables, layers or frames tend to be left-side heavy

Frames divide a browser window into regions, with each region having its own web page

When a surfer clicks on a link, from a set of links, the browser displays the corresponding HTML file in a new web page, which may not have the same links, for further navigation – frames solve this

Frame Layout & Design

A frame is a rectangle that has a width and height, a location in a browser window, and content

A collection of frames is referred to as a frame set. It controls the layout of its frames

A frameset and a frame are created using the <frameset> and <frame> tags (+ <noframes> )

The <frameset> tag replaces <body> tag

Frame Layout & Design

Useful tips:

Keep the frameset simple

Keep the frame’s content short

Keep the frames organised – use a driver frame

Frame Sets & Nesting

A frame set width is defined by number of columns, cols

A frame set height is defined by number of rows, rows

Units of rows and cols can be pixels or percentage of browser window

Frame Sets & Nesting

XHTML does not have a limit on the depth of frame nesting

However, one or two levels of nesting is all that is needed in practice

Using Frames

There are 4 XHTML tags that can be used:

<frameset> - Encloses all other frame tags

Attributes : rows, cols : rows, cols

<frame> - Creates a frame in a frame set

Attributes : name, src, noresize, scrolling, frameborder, marginwidth, marginheight, longdesc

<iframe> - Creates an inline frame

Attributes : name, src, width, height, align, scrolling, frameborder, longdesc, marginwidth, marginheight

<noframes> - specifies alternative content for a browser

Attributes : NO ATTRIBUTES

Using Frames

The <iframes> tag creates inline frames

An inline frame is a frame that is embedded inside the content of a Web page

No frame sets are required to create inline frames

Unlike the <frame> tag, the <iframe> tag is used inside the <body> tag

Using Frames < frameset rows= "*, *" cols= "50%, *"> <frame src= "...." name= "myFrame1" frameborder= "0"/> <frame src= "...." name= "myFrame2" frameborder= "0"/> <frame src= "...." scrolling= "no"/> <frame src= "...." noresize marginwidth= "0" marginheight= "0"/> < /frameset >

Using Nested Frames