Credit: J. Trauger (JPL/NASA)
HTML frames let you create independentally scrollable windows on your screen. The
general syntax is:
<HTML><HEAD><TITLE>text for head</TITLE></HEAD>
<FRAMESET COLS="column-list" ROWS="row-list">
<NOFRAME>
Text for browsers that cannot support frames ...
</NOFRAME>
<FRAME SRC="url-for-this-window">
...
<FRAME SRC="url-for-this-window">
</FRAMESET>
</HTML>
Frames may be one dimensional, two-dimensional, or even nested in such a way that you
can have different numbers of rows in different columns or vice-versa. Typically the row
and column lists are given in terms of percentages, but other messures (not explained
here) may be used as well.
Simple 1-D Example
This first example shows a simple 1-dimensional frame with left and right scrollable
windows. The left window occupies 20% of the screen width and the right window the
remaining 80%. The left window is filled with the contents of file frame_1d_f1.html
and the right window is filled with the contents of
frame_1d_f2.html. The
code for this
example is:
<HTML><HEAD><TITLE>1-D Example</TITLE></HEAD>
<FRAMESET COLS = "20%,*">
<FRAME SRC = "frame_1d_f1.html">
<FRAME SRC = "frame_1d_f2.html">
</FRAMESET>
</HTML>
More Complex 2-D Example
This second example shows a 2-dimensional frame with 2 rows in the first column and 3
rows in the second. The code for
this
example is:
<HTML><HEAD><TITLE>2-D Example</TITLE><HEAD>
<FRAMESET COLS="50%,50%">
<FRAMESET ROWS="50%,50%">
<FRAME SRC="frame_2d_f11.html">
<FRAME SRC="frame_2d_f12.html">
</FRAMESET>
<FRAMESET ROWS="33%,33%,33%">
<FRAME SRC="frame_2d_f21.html">
<FRAME SRC="frame_2d_f22.html">
<FRAME SRC="frame_2d_f23.html">
</FRAMESET>
</FRAMESET>
</HTML>
Controlling One frame By Another
The real power of frames, however, comes from the ability to link two or more frames on
the same page in such a way that selecting an item in one frame activates a link in an
adjacent frame. A typical example is a table of contents (TOC) in one frame which selects
what is displayed in the adjacent frame.
In order to use this feature you need two more elements of frames: NAME and TARGET.
NAME is an optional name that you assign an individual frame in the HTML file that
declares the frames, and TARGET identifies the frame that a link refers to. Consider the
following 1-dimensional frame with a table of contents in the left frame and the actual
contents appearing in the right frame. For this we need 2 files in addition to the actual
contents:
- the HTML file, call it
frame_tocx.html, that declares the frameset and
identifies each frame by name:
<HTML><HEAD><TITLE>Define Frameset</TITLE></HEAD>
<FRAMESET COLS = "30%,*">
<FRAME SRC = "frame_toc.html" NAME = "TOC">
<FRAME SRC = "frame_con1.html" NAME = "CONTENTS">
</FRAMESET>
</HTML>
In this case, TOC is the name of the left window (30% of the screen width) which
contains the links for the table of contents, and CONTENTS is the name of the window that
receives the information selected in TOC.
- The HTML for the table of contents. This is in file
http://staff.washington.edu/larryg/Classes/R561/zz-frame_toc.html
mentioned above and it contains the links to the actual contents. Note that the file frame_con1.html
mentioned above preloads the right window with the first set of contents.
HTML><HEAD><TITLE>TOC</TITLE></HEAD>
<UL>
<LI><A HREF="frame_con1.html"
TARGET="CONTENTS">Contents-1</A>
<LI><A HREF="frame_con2.html"
TARGET="CONTENTS">Contents-2</A>
<LI><A HREF="frame_con3.html"
TARGET="CONTENTS">Contents-3</A>
</UL>
</HTML>
Click here
for an example.
