Web Design Tutorials and Lessons: Setting up a frame document for a web page

How to add Frames to your Web Pages

The best way of understanding what a frames document is and does is to see one in action. So click the link below and play about with the page (it opens in a new windown). Click a hyperlink on the left hand side and watch what happens. Click a link on the right hand side, and again watch what happens.

An example of a Frames Document

What is happening is that 2 web pages have been joined together, or put into a frame. Frame targeting is then used with the hyperlinks to insert a web page into either of the 2 we started with.

If none of that makes sense, don't worry - it will become clear when you design your own frame document.

Creating a frames document can be split into two stages - setting up the frame document itself, and hyperlink targeting.

Setting up the document

When you open up a normal web page, you are requesting that a single page be placed in the browser window. With a frame document, you are requesting that 2 or more web pages be placed in the browser window. To do this, you need some special instructions for the browser. To tell the browser that you want to split the single window into frames, you need to use FRAMESET code. This is the code for the frames1.html frame document used as an example.

<HTML>

<FRAMESET Cols = "25%,75%" border=0>

</FRAMESET>

</HTML>

You can use your HTML Editor to insert this code for you, so you don't have to type it out yourself. We'll see how to do that shortly. First, an explanation of the code.

<FRAMESET Cols = "25%,75%" border=0>

After the <HTML> tag, you set up a frame by typing the word FRAMESET. This tells your browser that you want to split the single window into frames.

Next, you need to tell the browser what kind of splitting you want. Do you want to split the window horizontally, vertically, or a mixture of both? In the code above, we've specified that we want the window to be split vertically (in columns). The attribute we've used is Cols. After typing an equals sign, you then tell the browser how many columns you want, and what percentage of the screen to allocate each column:

Cols = "25%,75%"

We only wanted two columns. We wanted the first column to take up 25 percent of the screen, and the second column to take up 75 percent of the screen. The total adds up to 100 percent. (If you prefer, you can use pixel size instead of a percentage. But the calculations are easier to make using percentages.) You could, if you wanted, specify that the screen be split into four columns. You'd do it like this:

Cols = "10%, 40%, 40%, 10%"

If you wanted to split your screen horizontally, the attribute to use is ROWS:

Rows = "25%, 75%"

Note the use of commas to separate the two values. Miss them out and your entire frames document refuses to work.

We also added a Border attribute to the FRAMESET tag, and set the value to zero. This will ensure (in most modern browsers) that those awful grey frame borders will disappear.

Because we've split our window into two columns, the next thing we need to do is to tell the browser which pages are going to go into our two columns. We do this with the FRAME tag:

<FRAME SRC = NAME = >

We need one of these for every column or row in our frame document. After typing the word FRAME we need to tell the browser where the page is that is going to go into this first column. The first FRAME tag you use relates to the first value you use in the COLS or ROWS equals attribute. So our 25% column will take the web page specified in the first FRAME tag, and our 75% column will take the second web page.

<FRAME SRC = " page4.html" NAME = frame1>

In other words, we're telling the browser "Put the page called page4.html into the first column. This first column has a size of 25%." (You might have noticed that the SRC and the NAME attributes have swapped places. This has been done deliberately to demonstrate that the order of the attributes is not important. SRC doesn't have to come first, nor does NAME.)

The NAME attribute is very important. You use the NAME attribute in the target link. You can use anything you like for the NAME. We've called our first column "frame1". (Your HTML Editor will insert a default name for you.)

Our second column also needs a FRAME tag. It was this:

<FRAME NAME = frame2 SRC = "page1.html">

The page that is going into our second column is called "page1.html". The NAME we have given to our second column is "frame2".

To recap, then: