Frames

Frames can organize your shoddy links into a neat navigation system.

Frames can create a professional looking sidebar at the side of your page. They can split a web page into precise parts while keeping it neat. Frames work like this: you split a web page into as many equal parts as you like, and each part contains a separate page.

Now that you know what frames look like, you can start understanding the concept behind them. The different pages (main, menu, and bottom) are all different pages. You can put whatever content you want in any page. Notice, too, that the borders are resizable and have a scroll bar with a border. We will now manipulate all of these elements and show you how it's done.

First, we will go through how to make the frames on the previous page. Here is the script used for that page:

The <frameset cols="120,*"> tag defines the columns (menu and main). This says that the first column will be 120 pixels wide, and the second column will fill in the rest. (The asterik means that the rest of the page should be taken up.) The width number can be expressed as pixels as well as percentages.

The next line, <frame src="menu.html" name="menu">, gives us the page that should be inserted in the first column (menu). The following line, <frameset rows="*,50"> defines the rows. The asterik means that the first row (main), takes up all the pixels other than the 50 reserved for the bottom column. The next two lines, <frame src="main.html" name="main"> and <frame src="bottom.html" name="bottom">, give the source of these two frames. The last two lines are standard closing tags for the two framesets, </frameset> and </frameset>.

The last bit of frame knowledge you will want to know is how to change the default borders and spacing attributes. The three attributes you can add to the <frameset> tags are illustrated below:

They are pretty self explanatory. Border sets the width of the borders. Bordercolor sets the color of the border (you may use words or hexadecimal codes). Framespacing defines the spacing between the frames.

Computer Playground · Templates Resource