HTML Help: Building a Site with Frames

This tutorial will help you lay out your site in several layouts using frames. Frames is a method to divid up your screen into separate windows and place web pages inside each window. Frames are mainly used so the content of one frame does not have to reload if the content of another frame is changed. Once you understand the concept of frames, it is a wonderful tool to improve your site appearance and functionality.

To begin with, you need to understand that the page to build the frames is a page all on it's own. There is nothing in the frame building page except instructions for the browser. These instructions tell the browser how many frames you want on the page, what size and configuration you want the frames to be displayed, and what pages you want to load inside each frame when it starts.

Inside the Frame Building Page

The page will be enclosed in HTML and HEAD tags:
<HTML><HEAD> ... </HEAD></HTML>
The instructions for your frames will be enclosed in the following HTML tags:
<FRAMESET> ... </FRAMESET>
The frame building instructions will be placed inside and below is an example.

The above code will make the following frames:

You'll notice that inside the frameset tag is the COLS (columns) and ROWS.
COLS="100%" means one column at 100% wide.
COLS="50%,50%" means two columns at 50% wide each.
COLS="80,*" means two columns, one at 80 pixels wide and the second unrestricted.
COLS="50,50,100,*" means four columns, with fixed widths on the first three.
The same system applies to rows.

In the above example... there are two web pages that the frames page needs to grab.
- top.html will be placed in the frame named "top", and
- bottom.html will be placed in the frame named "bottom".
You don't have to use those names... the top one could be called Fred and the bottom Barney if you like.

Getting More Elaborate

What if you want to use a combination of rows and columns? Well... as long as you follow the basic rules, it is easily achieved. It does take practice, so don't be upset if it takes a while to get exactly what you want. My sample is basically a frameset inside a frameset.

The easiest way to explain it is to show you an example. I'll color the text differently so it's easier to understand.

The above code will make the following frames:

So to build a nice framed site with:
1) a header frame,
2) a navigation frame,
3) and a content frame,

We simply make three web pages that will be the content of our three frames. Once they are built... we make the frame building page (we're using index.html). When you're finished, index.html can be loaded in your browser and it will build your beautiful framed site!

Once you are comfortable with building frames, and how they work, you will probably want to explore various frame configurations and layouts to see which might work best for you.

Added Features

Once you have successfully built the frames from the example above, you can add little features to make the frames do what you want them to do. Here is a small list (not for all browsers though):

Targeting links to different frames

To start with, you have to know the NAMES of the frames you build. Notice in the code that it says frame name="top". That means the name of the top frame is "top". The others in our example are called left and right.

Now that all the frames are in place, and you want to navigate around the site, you have to remember to tell each link where you want it to open. This is called targeting. So if in the left frame I have a link to page two, and I want it to open in the right frame, I have to target it there. The right frame is named "right", so we target to "right"... like this:

If you want to "Break Out of Frames", you can make a link that tells the browser to target to the whole screen. This is called "target to _top". (note the underscore)

If you want to "Open a New Browser", you can make a link that tells the browser to target to a brand new browser window. This is called "target to _blank". (note the underscore)

Multimedia content is very popular with web surfers. Let us show you how to add sound files to your own site:

~~~~~ On to "Adding Sound To Your Page" ~~~~~