What are Frames?

If you've been on the web for long then you'll probably know what frames are - many sites use them.

Many people hate frames, but that's probably because a fair number of sites use them very badly. However, a well designed framed site can be both easy to navigate and maintain. Just learn how to do things properly and don't use frames just for the sake of using them.

It's also worth remembering that if someone else wants to link to a particular piece of content on your site they will have difficulty because of the frame set.

How do frames work?

A framed page allows the browser window to be split into two or more frames that each contain independent HTML files. A common use of frames is to have a navigation bar or menu in a frame at the top or left of the screen while the actual content pages appear in a separate frame alongside it. This method means that when you change your navigation bar (for example by adding another section to your site) you only have to change one file and not every page on your site.

A page containing two frames actually requires three HTML files. There are the two frames themselves (completely independent files that could actually be opened on their own if required) and a third master page, called the frame set, which tells the browsers how to layout the frames and where they are located.

Your First Frameset

A frame set file starts off as any HTML file does with a HEAD section. If you need to go over this try a refresher of the basics.

After that you would normally put your BODY tag, then all your page content. This is where the frame set starts to look a little different. Instead of BODY tags, you need to put FRAMESET tags.

To tell the browser how to display your frames, you need to put an attribute in the FRAMESET tag. For this first example, let's imagine that you want to split the browser window horizontally, with the top frame being 100 pixels and the lower frame taking the remaining space:

<FRAMESET ROWS="100,*">

You list the number of pixels you want each frame to be, starting at the top, and put them all into an attribute called ROWS. The * in the second frame is telling the browser to let that frame take up all the remaining space. Just like we did with tables earlier.

If you'd wanted three frames, you'd have listed three numbers (or two and a *).

To split a page vertically, replace ROWS with COLS. Again just list the frame sizes starting from the left.

Again just like in tables you could use percentage sizes in your FRAMESET. We recommend you use absolute sizing, as that way you can be fairly sure how your page will look at most screen resolutions.

Frames? What Frames?

Now that you've told the browser how to layout the frames, you've got to tell it what to put in them. That's where the FRAME tag comes in - you'll have one frame tag within your FRAMESET tags for each frame on the page, in this example two.

The most important attributes of the FRAME tag are NAME and SRC. The NAME tag let's you give the frame a name which you can use to refer to it when linking (we'll come to that later). SRC gives the path (addressing as before) to the file you want to appear within the frame.

A completed (very basic) frame set could therefore look like this:

<FRAMESET ROWS="100,*">

<FRAME NAME="navbar" SRC="navbar.html">
<FRAME NAME="main" SRC="main.html">

</FRAMESET>

After this you just put your closing </HTML> tag and the frame page is done.

Click here to see what this frame set would look like.

In the next section we'll learn how to get those frames behaving just how we want them to.

Nested Frames

Now you know how to do frames horizontally. You also know how to do them vertically. But what if you wanted to do both at the same time? For example, one frame going across the whole of the top of the window, then two vertical frames below it (see right). Now how do you do that?

There are actually two ways. Firstly, you could use multiple frame documents. In your main frame you set up two horizontal frames - one for your top frame and one for the rest of the window.

As the source (SRC) of the second frame, you give the path to another frame set file which splits the space into the two vertical frames. You therefore have five separate files - the three frames and the two frame sets.

This will work perfectly well, as long as your careful with your frame naming and don't duplicate. It could get very complicated very quickly though.

The other way of doing it is to nest the frame sets in a single file. Your main frame set will contain the ROWS attribute, and this will be followed by the FRAME tag for the top frame.

After that, where you'd normally put the next FRAME tag, you put another FRAMSET tag with the COLS attribute for the two lower frames. Then you have its two FRAME tags, just as before.

Have a look at the code and things should be clearer:

<FRAMESET ROWS="100,*">

<FRAME NAME="navbar" SRC="navbar.html">

<FRAMESET COLS="100,*">

<FRAME NAME="left" SRC="left.html">
<FRAME NAME="right" SRC="right.html">

</FRAMESET>

</FRAMESET>

Click here to view this frame set in action.

Hopefully you'll now understand this enough to be able to create the pattern you want. If not, have a look at some of the frame templates for more examples of frame set coding.

Most WYSIWYG HTML editors will allow you to automatically create frame sets.