Frames 2 nd March. Write the code for this using tables and using layers …

FramesFrames

2nd March

Write the code for this using Write the code for this using tables and using layers …..tables and using 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

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

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

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 frame has width, height, location, 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 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




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 optimise 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 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

Conclusion Conclusion

Frames Frame layout and design Frame sets and nesting Using frames Target frames and windows

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

Documents

Frames 2 nd March. Write the code for this using tables and using layers …