Web Design Tutorials
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.
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.
After the 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:
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.
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:
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:
You set up a frames document with the FRAMESET tag
In the FRAMESET tag, you specify whether you want to split your frame document into
Cols or Rows
You give each Row or Column a value, which represents the area of the screen each
frame will take up
Each row or column in your frame needs a FRAME tag. The FRAME tag tells the
browser which page is going into your Row or Column
Each FRAME tag needs a SRC attribute. The SRC attribute tells the browser where to
find the web page that is going into the Row or Column
Give each FRAME tag a NAME. The NAME will be used for targeting
In the next part, we'll take a look at Frame Targetting.