Some people hate frames, in fact there's even an Offical I Hate Frames Club... Older browsers didn't handle them very well, and many people didn't do them very well at first. But if you take the time to do them right, they can make navigation incredibly simple and add a great deal to the look of your site.

Frames divide the browser widow up into smaller windows, and allow you to control each frame individually. You can have a navigation scheme in one window, a logo in another, and display different pages in a third.

Frames can be pretty confusing to just talk about, so I've created an example. Click here to open up a new browser window with a pretty simple frame example. Then you can switch back and forth between browser windows and use the View-Document Source and View-Frame Source to see what we're talking about in action.

The example site is a common format. It has split the browser window into two frames, a Table of Contents and the Main window where the different pages of the site will be displayed.

Frames start out with a FRAMESET page. The page that defines the FRAMESET doesn't have anything else on it, it's just a outline.

You need the normal HTML, HEAD and TITLE tags, with their closing tags, but don't use a BODY tag. Instead you have the FRAMESET tag.

The FRAMESET tag and its attributes

FRAMESET is a container tag, can hold other html tags, requires a closing /FRAMESET tag, and must take one or the other of the following attributes, but not both.

• COLS
• ROWS

It can also take the following:

• FRAMEBORDER
• BORDER

or

Our example will use:

The COLS and ROWS attributes
COLS and ROWS defines how you want to cut the window up. Visualize how you want to set up the page, then figure out how the frames will fit together. The value of the attribute is the width (or height) of the frames, expressed either in pixels, or as a percentage of the available space. The asterisk (*) means "everything left over", so if you define

Once you've cut up the window with the FRAMESET, you need to define how each frame will act and what will be shown inside it when the page first loads. For that, you use the FRAME tag.

The FRAME tag and its attributes

The FRAME tag is not a container tag. It goes between the opening and closing FRAMESET tags, and refers to the COLS or ROWS that you specified in the FRAMESET tag. So if you used the FRAMESET above, you would need two FRAME tags to define each of the windows. It can take the following attribute:

• SRC
• NAME
• FRAMEBORDER
• MARGINWIDTH
• MARGINHEIGHT
• SCROLLING
• NORESIZE

The SRC attribute
Like the SRC attribute for the IMG or A tags, FRAME SRC refers to the html page, image or other data you want the browser to put in the frame. The value of SRC follows all the rules for absolute and relative file references previously discussed. In this example, we have already created a Table of Contects page that lists all the contents of the site, and named it "tableofcontents.html".

The NAME attribute
The NAME attribute names the frame, so that when you want to send new pages to a specific frame, you can tell the <A HREF> tag where to send stuff using the TARGET attribute. In this case, we name it TOC (for Table Of Contents). The value of NAME can be anything you like, with a few exceptions that we'll discuss on the next page.

The FRAMEBORDER attribute
The FRAMEBORDER attribute sets the width of the border around this particular frame. Unless your design really needs it, this will usually be zero. I've set it at 2 for this example so you can see what it does.

The MARGINWIDTH and MARGINHEIGHT attributes
These set the amount of space, in pixels, to be left between the contents of the frame and its edges. Again, usually set at zero, but exaggerated in this instance for clarity.

The SCROLLING attribute
This tells the browser if scroll bars are allowed. The allowable values are YES, NO, and AUTO (which is the default, and means they will only show up if they are needed). If you know that the size of the page in the frame will be less than the available space, and you don't want scrollbars or borders to split the page up, set SCROLLING="NO". Otherwise, leave it alone.

The NORESIZE attribute
This attribute doesn't have a value. Including it tells the browser that the viewer isn't allowed to grab the frame borders and move them around. If you don't include it, your design can be moved around and changed by your visitors.

Switch over to the other browser window and take a look at the Document Source. What you'll see is the contents of "frame.html", which defines how the window will be split up and where to find the pages to fill each frame.

Then click anywhere in one of the frame panes and take a look at Frame Source. Now you'll see the source for the actual page filling up the frame window.