![[Previous]](prev.gif)
![[Home]](home.gif)
![[Next]](next.gif)
(R561) Scrollable Frames
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.
This page only discusses manual scrollable frames, but Scrollable Frames can be more easily created using web authoring programs such as MicroSoft's FrontPage.
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
zz-frame_toc.htmlmentioned above and it contains the links to the actual contents. Note that the fileframe_con1.htmlmentioned 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.
Class Topics