Frames: The Simple Frameset

The Simple Frameset

One of the simplest types of framed web documents uses a newspaper-style layout.

In such a document are three frames:

a horizontal upper frame for a nameplate or banner
a narrow vertical frame on the left side of the screen for a table of contents
a wider vertical frame on the right side of the screen to hold the main site pages.

Frame for a Banner
Frame for a Table of Contents	Frame for the main contents of a web site. The viewer might click on a link in the table of contents area to the left to cause the contents of this frame to change.

Before you create your frameset document, sketch out the layout of your frames page.

Then create a few files that will go into your frames.

For the example above I might create the following web pages:

banner.htm for the banner frame
toc.htm for the table of contents frame
default.htm for the main page of my site
pagetwo.htm for the next page of my site

Note that in this case both default and pagetwo are meant to appear in the larger frame in the lower right column.

To create a framed web document, first create a frameset document.

This frameset document is actually a blank page. It contains no content, only instructions for the frames that will be displayed.

Each frame will contain a body document, i.e., a normal web page.

To create a frameset document,

replace the <BODY> </BODY> tag pair with the <FRAMESET></FRAMESET> tag pair.

Specify the frameset rows
If you also want columns (as in the sample frameset structure above), nest another frameset within the second frameset row.
Name each frame.
Specify the source file for each frame.

Here, with annotations, is the HTML for the frameset document:

<HTML>
<HEAD>
<TITLE>Frameset </TITLE>
</HEAD>

NOTE: So far this code is the same as it would be for a normal web page.

<FRAMESET ROWS="15%, 85%">

NOTE: We replace the opening <BODY> tag with the opening <FRAMESET> tag.

We use the ROWS attribute to indicate that we want two frames, one below the other.

The first row (i.e., the banner) will take up 15% of the screen; the second row will take up 85% of the screen.

<FRAME NAME="banner" SRC="banner.htm">

NOTE: We name the first frame banner. We then use the SRC attribute and specify the file that will go into that frame.

<FRAMESET COLS="25%,75%"> <FRAME NAME ="toc" SRC="toc.htm"> <FRAME NAME="main"SRC="default.htm">

NOTE: We now divide the second frame into two columns; the first column (i.e., the table of contents) will take up 25% of the screen; the second column will take up 75% of the screen

</FRAMESET>
</FRAMESET>

NOTE: We close the second frameset. Then we close the first frameset.

</HTML>

Finally we close the document.