Designing with Frames - an Introduction

More on <FRAMESET>

As mentioned above, the <FRAMESET> tag is used to provide information on how the window should be divided up into frames. This is done using the ROWS and COLS attributes to define the rows and columns the window is to be divided into respectively.

These divisions can be defined in three ways: percentages, pixels, and ratios. These three methods can be clearly illustrated using a few examples.

<FRAMESET COLS="50,*,*">

In this example, the window will be divided into three columns; the first of which will occupy a width of 50 pixels. The second and third frames will each occupy half of the remaining space.

<FRAMESET COLS="50%,*,20%">

This example defines three columns, occupying 50%, 30% and 20% of the window respectively. The first and third have their percentages defined, while the second takes up the remaining 30% of the window.

<FRAMESET ROWS="3*,1*,2*">

This time the window will be divided into rows instead of columns. The first will take up half the height of the window, the second will take a sixth, and the last will take a third of the window. This may seem confusing at first, but think of it in terms of ratios. The window is divided into 6 equal parts (3+1+2=6). The first frame takes up 3 of them (three sixths is a half), the second one takes up 1 (a sixth), and the last will take the remaining two (two sixths is a third).

<FRAMESET ROWS="30,50%,2*,1*">

This time there will be four rows. The first frame will take up 30 pixels of the height of the window, while the remaining frames take up the rest. The second frame will take 50% of the total height of the browser window. The third and fourth frames take up the space that is left in a ratio of 2 to 1. That is to say, the second frame will take up twice as much space as the third.

It's generally not recommended to mix the three methods like this. This method makes it very difficult for someone who reads your code to guess what it will look like ahead of time. In cases like this, I usually recommend using nested framesets for the sake of readability. More on this in a moment.

You are free to use either the ROWS or COLS attributes on their own, or together, to define a grid layout:

<FRAMESET ROWS="60,50%,*" COLS="1*,2*,3*">  
<FRAME SRC="frame1.html">  
<FRAME SRC="frame2.html">  
<FRAME SRC="frame3.html">  
<FRAME SRC="frame4.html">  
<FRAME SRC="frame5.html">  
<FRAME SRC="frame6.html">  
<FRAME SRC="frame7.html">  
<FRAME SRC="frame8.html">  
<FRAME SRC="frame9.html">  
</FRAMESET>

If you need more flexibility in the definition of your layout, you can use a technique called nested framesets. As the name suggests, this involves placing framesets within framesets. For example, if you wanted a navigation bar 50 pixels wide down the left-hand side of your page, but you also wanted a 30 pixel-high title frame across the top of your page, you could use this:

<FRAMESET COLS="50,*">  
<FRAME SRC="menu.html">  
<FRAMESET ROWS="30,*">  
  <FRAME SRC="title.html">  
  <FRAME SRC="body.html">  
</FRAMESET>  
</FRAMESET>

Notice how the "inner" <FRAMESET> tag goes where a <FRAME> tag would normally go. You replace as many frames as you want with nested framesets, and you can even define framesets within framesets within framesets (and so on)!

Besides ROWS and COLS, there are several other attributes to the <FRAMESET> tag that allow you to affect the way a frameset looks:

FRAMEBORDER="n"

Sets whether or not to display a 3D border between the frames. If n is 1, a 3D border will be displayed just as if this attribute had been left out. If n is 0, the border will be invisible. You can also use YES instead of 1, and NO instead of 0. This attribute works with Netscape and Internet Explorer versions 3 and later.

BORDER="n"

Sets the width of the 3D border between frames. n is a number of pixels. This attribute works with Netscape versions 3 and later, and Internet Explorer versions 4 and later.

FRAMESPACING="n"

Sets the amount of space between frames. n is a number of pixels. This lets you space out your frames even if you have chosen not to display a 3D border. This attribute works with Internet Explorer browsers only.

BORDERCOLOR="color"

Sets the color of the 3D border between frames. color is a standard HTML color (e.g. "RED", "#FFFFFF", etc.). This attribute works with Netscape 3 and above, as well as Internet Explorer 4.

Experiment with these yourself, but always keep in mind which browsers support the attributes you use, and which don't. Also, make sure your frameset is usable on as many browsers as possible, so that people can access the most important part of your site -- the content.