Article
Practical Web Design - Frames and Frame Usage Explained
The starting point for any framed set of Web pages is the <frame> tag, which usually uses the src attribute to point to a particular HTML document.
<frame src="mainpage.html">
The <frame> tag defines the content of a single framed page. The example above assumes that you want to have a file called mainpage.html displayed within the frame. The only required attribute for the <frame> tag is the src attribute, which obviously tells the browser what file to display inside the frame. So far so good.
You can also control the appearance of scrollbars inside the frame with the scrolling attribute:
<frame src="mainpage.html" scrolling="yes">
The default value for this attribute is auto, which lets the browser decide whether or not scrollbars are to be displayed. The other two values are yes and no, which are pretty self-explanatory.
There is no closing </frame> tag.
You should not include any <head> tag information in the mainpage.html file, since the file represents a larger document. Everything on this page should be included within the <body> tags.
Now you need to construct your frameset page. This page, usually called index.html for obvious reasons, contains the header information for the entire site as well as the <frameset> tags that construct the skeletal design for the site. Here's a basic example, leaving out such necessities as DOCTYPEs and <meta> tags:
<html>
<head>
<title>Frames Document</title>
</head>
<frameset rows="50%,50%">
***add framed pages here using the <frame> tags***
</frameset>
</html>
Note that there aren't any <body> tags in this document. The <frameset> tags take their place (placing BODY code before the <frameset> tag causes the frameset to be ignored). The <frameset> tags have one necessary attribute, ROWS or COL(umn)S. The example above uses percentages to divide the available display space into two equal, horizontal areas. The COLS attribute will do the same thing, but divide the available space into two equal, vertical areas:
<frameset cols="50%,50%">
A lot of Web designers like to divide their pages into three vertical columns, with the two outside frames being narrower than the center column, which will contain the main body of information (this layout emulates the traditional three-column style of site design). If you want to do this, try something like:
<frameset cols="100,*,100">
where the left- and right-hand columns are 100 pixels wide, and the larger center takes up the rest of the display space. As always, I recommend sticking with percentage widths (or heights) whenever possible, as people use a variety of display sizes. Note that the asterisk in the center of the above code simply means something like "the rest of the display." If you wrote it like so:
<frameset cols="100,500,100">
you would have a set page width of 700 pixels, which would leave a lot of display real estate unused for our friends with bigger displays. You can also organize your display in relative terms, which specifies the size of the frames relative to other frames. This example shows two columns, where the one on the right is twice the width of that on the left:
<frameset cols=*,2*">
The * is simply a placeholder. The above code tells the display, "cut the display into two columns, and make the right side twice the size of the left."
If the ROWS attribute is not set, the columns extend to the entire length of the page. If the COLS attribute is not set, the rows extend to the entire width of the page. If neither attribute is set, the frame takes up the exact area of the browser display -- and what's the use of that? (Maybe there is a use for a frameset with no COLS or ROWS attributes, but I can't think of one offhand. If you can, post it in the forums.)
You can mix absolute, relative, and percentage measurements, but check them carefully to see how they display. In fact, you should carefully check all your column and row measurements to see how they display, and don't forget to check the layout in different display sizes and different browsers. Here are three examples of mixing measurements, cribbed from the W3C page on HTML frames:
<frameset cols="1*,250,3*>
***yadayada***
</frameset>
This example creates three columns: the center space fixed at 250 pixels, useful for a chunk of content with a known size such as a graphic or a Flash window, and two columns on either side; the left-hand column receives 25% of the remaining space and the right-hand column gets the other 75% of the remaining space.
<frameset rows="30%,70%" cols="33%,34%,33%>
***yadayada***
</frameset>
This example gives you a 2-by-3 grid of subspaces.
<frameset rows="30%,400,*,2*">
***yadayada***
</frameset>
Here, you have a browser display divided horizontally in four separate areas. The first gets 30% of the display space. The second gets 400 pixels exactly. The other two split up the remaining turf between them, with the fourth area getting twice the amount of the third. If your display is exactly 1000 pixels high, unlikely as that is, the first row will get 300 pixels, the second 400, the third 100, and the fourth 200.
Now let's put together a sample frameset page, using the example codes from above and a few more:
<html>
<head>
<title>Frames Document</title>
</head>
<frameset cols="100,*,100">
<frame src="leftside.html">
<frame src="mainpage.html">
<frame src="rightside.html">
</frameset>
</html>
This gives you the three-column display, with the two side columns restrained to 100 pixels each, and the center column used for the main content. Remember that in each column, if your content exceeds the available width, you get horizontal scrollbars. Nobody likes horizontal scrollbars. Again, play with the column widths so that you can avoid scrollbars as much as possible. Using rows in your framesets gives you vertical scrollbars, which are more acceptable.
Remember, frames can be resized by simply moving the cursor over the border, waiting until it changes to a double arrow, and dragging the frame border to where you want it. Text will adapt itself to the change; graphics and other rigidly-sized content will not, and scrollbars will appear. Don't want to let your visitors change your frames around? Use the noresize attribute (it has no values).