Developer

Fun with frames: Build a basic frameset

Learn what a frameset page is, and find out how to build one.

By Paul Anderson
(updated 5/20/99)

A frameset page is an HTML document that differs slightly from a regular Web page. It still begins with an <HTML> element and a <HEAD> containing the title and any scripts or meta tags. But the only other content in a frameset page is a layout for displaying other pages. So instead of a <BODY> element, it sports a <FRAMESET> tag.

The <FRAMESET> tag subdivides the browser window into rows or columns using the <rows> and <cols> attributes. These give a list of values indicating the sizes of the rows or columns—each as a fixed number of pixels, a percentage of total space, or a multiplier and asterisk representing proportional shares of remaining space. For example:

cols="80,20%,*" 80 pixels, 20 percent of the window, and whatever's left over
rows="25%,75%" 25 percent and 75 percent of the window
rows="*,3*" Same as above: one and three equal shares of the window

Between this tag and the closing </FRAMESET> tag, you need to put a <FRAME> tag for each subdivision—from left to right (for columns) or from top to bottom (for rows). Each <FRAME> requires an src attribute that gives the URL of the frame's contents. This can be any valid URL that the browser can display, including that of another frameset. (To prevent recursion, a frame cannot contain its own frameset page.) You must use a name attribute to identify the frame so that you can change the contents later.

<HTML>
<HEAD>
<TITLE>Simple frameset</TITLE>
</HEAD>
<FRAMESET cols="40%,60%" rows="2*,*">
<FRAME name="TopLeft" src="red.html">
<FRAME name="TopRight" src="green.html">
<FRAME name="BotLeft" src="blue.html">
<FRAME name="BotRight" src="white.html">
</FRAMESET>
</HTML>

As shown in the above example, a <FRAMESET> with both rows and cols produces a grid; the frames are defined from left to right in complete rows starting at the top.

To produce a nongrid layout, you can nest framesets, dividing any frame into subframes. Just replace the <FRAME> tag with another <FRAMESET> element, with its own rows, columns, and nested frames. The entire structure is still considered a single frameset page. The following arrangement uses three <FRAMESET> tags to produce four frames:

<FRAMESET rows="105,*">
<FRAME name="adbanner" src="ad.html">
<FRAMESET cols="40%,60%">
<FRAME name="left" src="red.html">
<FRAMESET rows="*,*">
<FRAME name="top" src="blue.html">
<FRAME name="bottom" src="white.html">
</FRAMESET>
</FRAMESET>
</FRAMESET>

Paul Anderson is senior producer and technical editor for CNET Builder.com.

Editor's Picks

Free Newsletters, In your Inbox