A simple frames page

Now we'll try a simple frames document. First, you need to create a frames definition document, usually called a frameset. This contains the information that defines the structure of the frames themselves. The FRAMESET tag replaces the BODY tag completely.

The FRAMESET tag will need to contain either a COLS or ROWS attribute. (Not both!) This attribute tells the browser how many frames to split the window into, and how wide those frames need to be. You will specify them as either columns (COLS) or rows (ROWS, of course!). You can define them as a specific pixel width (such as "300"), a percentage of the total width of the window (such as "20%"), or as a wildcard (*). A wild card will take up as much space as possible in the window.

Here's an example of a the frameset tag used on the web page at http://slumberland.org/gene/:

<FRAMESET COLS="175,*">

This is a COLS frameset. The COLS attribute contains values for the columns in the frameset, separated by commas. In this case, there are two values: 175, and *. The browser parses this tag left to right. The first (left) column is 175 pixels wide. The second column is defined with a * -- this means that this column will fill up all the space that's left over.

A ROWS frameset is similar. Here's a typical ROWS frameset:

<FRAMESET ROWS="75,*,20%">

In this ROWS frameset, the ROWS attribute contains values for the rows in the frameset. There are three values this time: 75, *, and 20%. The browser parses this tag top to bottom. The first (top) row is 75 pixels tall. The second row, in the middle, is defined with a *, so it will fill up all the space that's left over after the other rows are defined. Then the third (bottom) row is specified to be 20% of the total height of the window. Unlike the 75 pixel tall row (which will always be 75 pixels tall), the 20% row will change size depending on the size of the window.

Once you've set up the FRAMESET tag, you need to set up each frame within the frameset. You do this with the FRAME tag. For each column or row value in the FRAMESET tag, you will need a corresponding FRAME tag.

Each FRAME tag will contain a SRC attribute, that tells the browser what content to include in that frame. The SRC will usually be another HTML file. Remember, frameset pages never contain any of their own content -- they just link to other pages that contain content. The SRC attribute of the FRAME tag is used to do this.

Typical FRAME tags might look like this:

<FRAMESET ROWS="75,*,20%">
	<FRAME SRC="mypagetop.html">
	<FRAME SRC="mypagecontent.html">
	<FRAME SRC="mypagemenu.html">
</FRAMESET>

Since there are three values in the ROWS attribute of the FRAMESET tag, there also need to be three corresponding FRAME tags.

FRAME is not a container, so you don't need a /FRAME.

Here's another example, with a COLS frameset:

<FRAMESET COLS="175,*">
	<FRAME SRC="leftmenu.html">
	<FRAME SRC="mainpage.html">
</FRAMESET>

An exercise

At this point you know enough to make a basic frame page. Try to make a document that looks (roughly) like this drawing:

+--------------------------------------------------------------+
|  This will be the main frame.                                |
|                                                              |
|                                                              |
|                                                              |
|                                                              |
|                                                              |
|                                                              |
|                                                              |
|                                                              |
|                                                              |
|                                                              |
|                                                              |
|                                                              |
|                                                              |
|                                                              |
|                                                              |
|                                                              |
|                                                              |
+--------------------------------------------------------------+
|  This will be the menu bar frame.                            |
|                                                              |
|                                                              |
+--------------------------------------------------------------+

<<-------- p r e v // a i w e b // n e x t -------->>