Frames and how they work

A frameset in HTML is a way to display multiple web pages at the same time. Quite often this is used to show, for example, a navigation bar which is common to all pages on a web site. It is also often used to keep an advertisement (such as a banner) displayed at a location on the screen (top or bottom) while a visitor surfs.

Some examples of various framesets are shown below. These are the frame templates from Frontpage 2000.

To the left is one of the most common frameset types used. As you can see, the main page is to the lower-right and is the largest page. This is generally used to display web pages as the visitors surfs through a site. The upper page might be used for a logo, and the navigation menu could be included on the left page. If you want to see this example as a full web page, just click on the image to the left (use your back key to come back ot this page).

The HTML code for a frameset is included in a special file. The file uses an HTML tag called <FRAMESET> to define how the pages are to be put together. This file contains only the information necessary to tell the browser how to put together the frame.

The three page frameset shown above has the following HTML code. This is defined in the file "example-frame.htm".

<frameset cols="150,*">
  <frame name="left" scrolling="no" noresize target="rtop" 
   src="example-left_page.htm">
  <frameset rows="20%,*">
    <frame name="rtop" target="rbottom" src="example-top_page.htm">
    <frame name="rbottom" src="example-lower_right_hand_pag.htm">
  </frameset>
  <noframes>
  <body>
  <p>This page uses frames, but your browser doesn't support them.</>
  </body>
  </noframes>
</frameset>

Let's examine this line by line.

<frameset cols="150,*>: The frameset is split into columns, which the first column defined as 150 pixels wide. The remaining columns are undefined (that's what the "*" character does).
<frame name="left" scrolling="no" noresize target="rtop" src="example-left_page.htm">: The first page of the frameset is defined here, and it's the left page. The "scrolling" attribute is set to "NO", meaning no scroll bars will ever be added. You can change this to "auto" which let's the browser determine if they are needed or "yes" to always include them.

"noresize" indicates that the size of the frame (150 columns wide) is not to change.

Target specifies that by default any links in any HTML document in this frameset will, when clicked, load the document into the "rtop" frame. See the lesson on special linking techniques for more information on how this works.

Finally, the page to be used is called "example-left_page.htm".
<frameset rows="20%,*">: Now the two rows are defined. This is a second "frameset", since it is contained within the first one. The "20%" indicates that the first row is defined as 20% of the screen.
<frame name="rtop" target="rbottom" src="example-top_page.htm">: Now the upper row is defined. The name is set to "rtop", and the default target is set to "rbottom". This means that any hyperlinks clicked in "rtop" will cause the document to load in "rbottom" unless the link includes the "target" attribute.

The HTML document name to load into the frame is "example-top_page.htm". Note that this could change later if someone clicks on a link in "left".
<frame name="rbottom" src="example-lower_right_hand_pag.htm">: This simply defines the name of the frame to "rbottom" and sets the HTML document to "example-lower_right_hand_pag.htm". Note that since no "target" is specified, any links that are clicked will load into "rbottom".
</frameset>: This finishes the inner frameset, which closes the definition of the two rows.
<noframes>: The <noframes> tag is optional but should always be included. It informs the browser what it should do if it does not support frames. You can include any HTML tags or text between the <noframes> and </noframes> tags, except for the frame tags themselves.
<p>This page uses frames, but your browser doesn't support them.</> </body>: These are just instructions to tell the visitor that he cannot see the frames. It is usually better (and highly recommended) to actually send the user to a version of the web site which does not use frames. You could do this by changing the above text to include something like "click here to get the non-frames version".
</noframes>: This finishes up the <noframes> statement.
</frameset>: This finishes the frameset.

Okay, so now you've defined a frameset which consists of three pages and a frameset document. How do you use it? Simply refer to the frameset document in hyperlinks and such. In this example, the file is named "example-frame.htm". That's the file you would submit to search engines or refer to from other documents.

Some of the problems with frames are:

Some search engines handle them fine, and others don't handle them at all. If you have a framed site, you will want to create a non-framed version to submit to search engines which do not handle frames.
Framed sites are difficult to submit to webrings. This is because you need to submit the frameset page (remember "example-frame.htm" above) to the webring, but the code is on one of the framed pages. Thus, the webring ring-checker cannot find the code and will always fail.
The same problem exists for link exchanges or anything else which performs automatic checking of links.
It is difficult to target an individual page from outside the frameset. Since you must refer to the frameset page (not the framed pages) to preserve your framed site, you may get very frustrated if you want to load an alternate page within the frame. This must be done with dynamic HTML or some other scripting language.

For example, let's say you have a two-page frameset with navigation on page a, and contents on page b. The user clicks on links within page a to display other pages into page b. He might display b1, b2 or b3. Let's say you have a second web site which wants to display b2. The only way to allow it to do this with straight HTML is to create another frameset document which displays b2 instead of b1. I know this sounds complicated, but trust me it can be a problem.