"*, *"> <frame

Download Report

Transcript "*, *"> <frame 

Frames
2nd March
Write the code for this using tables and
using 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

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 & 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 & 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
Frame Sets & Nesting
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


<frame> - Creates a frame in a frame set


Attributes : name, src, noresize, scrolling, frameborder,
marginwidth, marginheight, longdesc
<iframe> - Creates an inline frame


Attributes: rows, cols : rows, cols
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

<frameset cols="*, *">
<frameset rows="*, *">
<frame src="...."/>
<frame src="...."/>
</frameset>
<frame src="...."/>
</frameset>
Target 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 & Windows
Target Frames & Windows
Example.html
<frameset cols=“160, *">
<frame src=“toc.html"/>
<frame src=“initialContent.html“
name=“myTarget”/>
</frameset>
initialContent.html
<h2> Click any link in the left frame…. </h2>
toc.html
<a href=http://www.neu.edu
target=“myTarget”>NU programs</a><br/>
<a href=http://www.mit.edu
target=“myTarget”>MIT programs</a><br/>
Conclusion

Frames




Frame layout and design
Frame sets and nesting
Using frames
Target frames and windows
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