CS 561 - Lecture Notes
Frames






Using frames we break the browser window into a number of separate and independent windows. Each of these windows presents a different HTML file and its content can be independently scrolled and changed.

It is almost as each frame becomes a browser of its own.

Usually we use one frame (larger and on the right side of the window) to contain the document information and another one or two (smaller on the left side of the window) frames to contain information assisting in the navigation.

Effective organization (similar to Netscape's DevEge support site): When using frames we do not use <BODY> </BODY≶ tags to define the body section of a document but instead we use <FRAMESET> </FRAMESET> and define the frames within these container tags.

To divide a space for frames we use ROWS and COLS attributes within the <FRAMESET> tag, i.e. <FRAMESET ROWS="values" COLS="values">

"values" is a list of values that may mean pixels, percentages or relative scale values, e.g.
<FRAMESET ROWS="100, 200, 300"> 3 rows of 100, 200, and 300 pixels depth
<FRAMESET ROWS="30%, 40%, 30%"> 3 rows of 30%, 40% and 30% depth
<FRAMESET ROWS=*, 3*, 4*"> 3 rows of 1/8, 3/8 and 4/8 depth (1+3+4=8)
These measures can me mixed, e.g.
<FRAMESET ROWS="200,30%,*,2*"> 4 rows of 200 pixels, 30% of entire window depth, 1/3 and 2/3 of the left

FRAMESET tags attributes: To define a frame within the grid defined by a FRAMESET container we use a <FRAME> tag (it is not a container tag).
FRAME tag attributes: To illustrate creation of frames we will use the above mentioned Netscape DvEdge site:
<HTML>
<HEAD><TITLE>Netscape DevEdge Site</TITLE>
</HEAD>
<FRAMESET ROWS="20%, 60%, 20%" ALIGN=CENTER>
<FRAME NAME="topframe" SRC="topframe.html">
<FRAMESET COLS="30%, 70%">
<FRAME NAME="leftframe" SRC="leftframe.html">
<FRAME NAME="rightframe" SRC="rightframe.html">
</FRAMESET>
<FRAME NAME="bottomframe" SRC="bottomframe.html">
</FRAMESET>
</HTML>
We have to implement it as:
<HTML><HEAD><TITLE>Netscape DevEdge Site</TITLE></HEAD><FRAMESET ROWS="20%, 60%, 20%"> <FRAME NAME="topframe" SRC="topframe.html"><FRAME NAME="middleframe" SRC="middleframe.html">
<FRAME NAME="bottomframe" SRC="bottomframe.html">
</FRAMESET </HTML>
<HTML><HEAD>TITLE>TopFrame</TITLE></HEAD><BODY><H1>TopFrame</H1></BODY></HTML>
<HTML><HEAD><TITLE>BottomFrame</TITLE>
</HEAD>
<BODY>
<A HREF="newmiddle.html" TARGET="middleframe">Click Here To Change Two Frames </A>
</BODY>
</HTML>
<HTML><HEAD><TITLE>NewMiddle</HEAD><FRAMESET COLS="30%, 70%"><FRAME SRC="leftframe.html"><FRAME SRC="rightframe.html">
</FRAMESET>
</HTML>
<HTML><HEAD><TITLE>LeftFrame</TITLE></HEAD><BODY><H1>LeftFrame</H1></BODY></HTML>
<HTML>
<HEAD><TITLE>RightFrame</TITLE></HEAD><BODY>
</BODY></HTML>