Introduction to Frames

The Frames feature of Netscape 2.0 is a powerful way of organizing material for web page, and with a bit of practice isn't terribly complex. Many of the organizational features of tables are extended with frames. A key benefit of using frames is that if you want to have consistent elements (for example a navigation bar), you can load the consistent elements into one frame, and not have to reload them over and over again.

Beware, however, that only users with Netscape 2.0 or later will be able to view documents that use frames. Frames have also gotten a bad rap for having a confusing user interface. The main problem was that frames did not allow the user to go back within a frame. This problem was solved in Netscape 3.0. Clicking and holding inside a frame will go back within that one frame, instead of to the document viewed before the entire frameset was loaded.

Documentation

Here is a beginning primer of the syntax of the frames tags.
And here is some updated info in the Navigator 3.0 release notes.
Info on the TARGET attribute.
Microsoft's new HTML documentation.

Methodology

The most important things to do when working with frames are to plan the layout of your document ahead of time, and to properly construct the URLs for all of the component pages.

Things to think about: the main document which contains frames should be designed carefully ahead of time, does it contain horizontal bands which stretch from margin to margin? If so, use the

<frameset rows="...> tag. If there are vertical bands which stretch from top to bottom of the page, use the <frameset columns="...> tags.

Another thing to think about is that the elements of a frame document are all individual HTML pages. Plan out your supporting pages ahead of time.

So when you are about to design a set of frames, do things in this order:

  1. Sketch your layout.
  2. Create the necessary framesets.
  3. Create your individual pages.
  4. Decide on the look you want for your frames.
Examples
An example with no border.
An example with a colored border.
An example with a 3d border.
An example with a totally plain border.

A slightly more complicated example.
One more example.

Remember that not all browsers can display frames. They are not even part of the HTML specification, and are supported primarily by Netscape and Microsoft. In order to assure that the pages you create will show something to viewers with non-frames-enabled browsers, you should make use of the NOFRAMES tag. The noframes tag will act as a container for an HTML page which will be shown as an alternative to the FRAMESET page. Older browsers ignore the frames information, and display only the HTML which is inside the NOFRAMES tag. Check out the source of this page for an example.

Troubleshooting tips:

Floating Frames

Microsoft has developed a variant on the FRAME structure called IFRAME, aka "floating frames." This is a way to nest a frame within the body of a normal HTML document. This does not require the normal FRAMESET/FRAME structure.

Basic syntax takes the form of:

<iframe src="page.html" align="center" width=200 height=200 frameborder=1> </iframe> Notes about this construction:

Targeting Windows

If in your tag you include a NAME parameter, you will find that you can target links to a particular window of a frame. This is very functional and nice, and you should get in the habit of using this feature so that you can take more advantage of it with JavaScript later.

Targets can be used in the following tags:

Here are some special targets:

Target Examples
Building Web Sites - ITP Winter 1999 - Mike Cosaboom, Instructor
mc39@acf2.nyu.edu