View
1.002
Download
1
Embed Size (px)
DESCRIPTION
Citation preview
Layers & FramesLayers & Frames
LayersLayers
Layer positioning Properties of layers Using layers Nesting layers Layers and tables Formatting via layers
Layer PositioningLayer 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 PositioningLayer Positioning
Appearance of layer content depends on the order of stacking
Properties of LayersProperties 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 LayersProperties of Layers
Using LayersUsing 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)Using Layers (div)
<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:red; layer-background-color:red; border:1px"><b>this is layer 2</b></div>
**Note all format details are in “style attribute” **Note all format details are in “style attribute”
Nesting LayersNesting 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 LayersNesting Layers
<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:100px; 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 3" 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>
Cell 1Cell 1 Cell 21Cell 21 Cell 22Cell 22
Div Layers & TablesDiv 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 LayersFormatting 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 LayersFormatting Via Layers
FramesFrames
Frame layout and design Frame sets and nesting Using frames Target frames and windows
FramesFrames
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 & DesignFrame 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 & DesignFrame Layout & Design
Useful tips:
Keep the frameset simple Keep the frame’s content short Keep the frames organised – use a driver
frame
Frame Sets & NestingFrame 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 & NestingFrame Sets & Nesting
Frame Sets & NestingFrame Sets & Nesting
Frame Sets & NestingFrame 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 FramesUsing 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 FramesUsing 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 FramesUsing 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 FramesUsing Nested Frames
<frameset cols="*, *"><frameset rows="*, *">
<frame src="...."/> <frame src="...."/>
</frameset>
<frame src="...."/> </frameset>
Target Frames & WindowsTarget Frames & Windows
Frames optimize web page layout and facilitate navigation
Contents of some frames may never change and that of others may change frequently
Frames offer convenience to web surfers Target frames receive content from other frames Target frames must be given names when they are
created i.e. use name attribute of the <frame> tag The source frame can then refer to a target frame
source by its name i.e. use target name attribute
Target Frames & WindowsTarget Frames & Windows
Target Frames & WindowsTarget Frames & Windows<frameset cols=“160, *">
<frame src=“toc.html"/> <frame src=“initialContent.html“
name=“myTarget”/>
</frameset>
<h2> Click any link in the left frame…. </h2>
<a href=http://www.neu.edu target=“myTarget”>NU programs</a><br/>
<a href=http://www.mit.edu target=“myTarget”>MIT programs</a><br/>
Example.htmlExample.html
initialContent.htmlinitialContent.html
toc.htmltoc.html
Reference 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