[Index of Lessons]
[Advanced Lesson 8]
[Advanced Lesson 10]

A9. Frames

Frames
Frames are a method of dividing a page into separate sections.
The code behind frames is actually quite simple. The concept goes
like this:

Each frame is a regular, complete html document.
If you wanted to divide your page into 2 side by side frames, then you would put one complete html document in the left frame and another
complete html document in the right frame.
You also need to write a third html document.
This page contains the <frame> tags that specify what goes where.
As a matter of fact, that's its only function.

So it logically looks like :

Frame Page

Page 1

Page 2

With Frame Page being in the background and Pages 1 and 2 are the only pages that a user sees when they load that Page. Frame Page is the page that gets accessed by the browser, so it normally ends up being the index/start/main page of a web site.
There are only two main frame tags to contend with:

<frameset> and <frame>.

Now it's time to make use of this piece of knowledge, remember a frame based site can look either good or bad, my advice don't have more than 4 frames to a page. And only 4 if one is small and is out of the way.

Now frames are a lot different to explain with examples the way I have been showing you, so this is what is going to happen, you will have to make some new files (the code for all of these will be shown below)and to return to this page you will have to use the back button on your browser.
Okay, let's begin.

Make a new page with the following code in it

<html>
<title>Frames Page</title>
<frameset>
</framset>
</html>

Notice that there is no <body> tags, this is because the frameset tags replace them. Now lets decide on how many frames we want shown. Lets work with two to start with. The code for this is :

<html>
<title>Frames Page</title>
<frameset cols="50%,50%">
</framset>
</html>

Now this still doesn't do much, but it does inform the browser to split the page into 2 coloumns that take up 50% of the page. You can also do this with rows. The code for this is:

<html>
<title>Frames Page</title>
<frameset rows="50%,50%">
</framset>
</html>

This is just the same as above except that the page is split into rows, instead of columns. It's time to add some actual pages to the frames. First we'll have to make them, we'll make small pages that only load a single word. This is just so you can get an idea on how these frames will work.

Here is the code for the two pages that we will use as examples :

<html>
<title>Frame 1</title>
<body bgcolor=white text=black>
Batman
</html>
<html>
<title>Frame 2</title>
<body bgcolor=white text=black>
Superman
</html>

First they will be loaded as columns :

<html>
<title>Frames Page</title>
<frameset cols="50%,50%">
<frame src="bats.htm">
<frame src="sup.htm">
</framset>
</html>

Click here (Frames Example 1) to view these pages loaded. Remember to use the back button to return here.

First they will be loaded as columns :

<html>
<title>Frames Page</title>
<frameset rows="50%,50%">
<frame src="bats.htm">
<frame src="sup.htm">
</framset>
</html>

Click here (Frames Example 2) to view these pages loaded. Remember to use the back button to return here.

The <framset> tag does all the dividing. It specifies a few things regarding how to divide them up. It is quite possible to load up more than 2 pages as frames. Just remember to specify a page for each section of the browser. It's obvious that the frames can be made in differents sizes. Just ensure that the arithmetic used to calculate the percentage of each frame is correct or the browser will come up with its own interpretation.
The mathematics behind this are very easy, the browser screen for frames is split into 2 possible methods of splittng, ie rows and cols. Just remember that when you split up a page for frames, the numbers involved must add up to 100%. ie, for 4 frames in columns; you could use :
<frame set cols="25%,25%,25%,25%">
or you could have
<frame set cols="15%,35%,35%,15%">

Relative Frame Sizing
A relative frame is a frame that isn't set in it's width. As you have seen you can set the columns for frames as percentages. It is also possible to set them in pixel format. One thing about frames is that when you measure without a relative size, what looks good on an 800x600 screen is going to shrink and look terrible on a 640x480, in fact it will lose approximately 20% of it's size.
This can be fixed by using a relative or elastic frame. This is when you set your <frameset> up with a * in place of a number. This way the frames will shrink or grow to retain the settings for your monitor.
So instead of having a frameset as 25%,25%,25%,25% we should have one as 25%,*,25%,25%. This is one of the most common problems encoutered with frame usage.
Also if you are making a frame that "just" fits a page, ie you have a window on the left that is set at 100 pixels and it fits perfect with no room for error. Then a good idea is to make it 125 pixels instead, this way if the resolution of someone's monitor isn't the same as yours, the window won't looked cramped.

Okay, now lets make a few more simple pages so we can start incorporating some different techniques. The 2 new pages are :

<html>
<title>Frame 1</title>
<body bgcolor=white text=black>
Robin
</html>
<html>
<title>Frame 2</title>
<body bgcolor=white text=black>
Flash
</html>

Save them as rob.htm and fla.htm.
First, we will make a page with 4 columns and at least one refence relative, this is done by changing the frameset line from
<frameset cols="50%,50%"> to <frameset cols="25%,25%,*,25%"> and the following two lines should be added :
<frame src="rob.htm">
<frame src="fla.htm">
This way you should have a page that loads 4 columns, like this (Frame Example 3) page.

Now, we do the same with rows, change the frameset line to :
<frameset rows="25%,25%,*,25%">
This way you should have a page that loads 4 rows, like this (Frame Example 4) page.

Now, let's get technical. You have seen basic columns and basic rows, now lets make a page which has two columns on it and two rows. For this, you'll have to edit your frame page so it matches the following :
<html>
<title>Frames Page</title>
<frameset cols="50%,*,25%">
<frame src="bats.html">
<frame src="rob.html">
<frameset rows="50%,*">
<frame src="fla.html">
<frame src="sup.html">
</framset>
</frameset>
</html>

This way you should have a page that loads like this (Frame Example 5) page. Note how the first frameset still has 3 columns listed. This is because you are still have three columns, it's just that one of them is divided into rows.

Frame Pictures
Frames can also be used to load up an image. By having an image as a separate frame you can speed up the loading of other frames, especially if the image normally appears on all other pages. Such as a company logo, a standard banner or an image menu system. It's time to go through the steps in making an image frame.

Step 1
<html>
<title>Frames Page</title>
<frameset cols="50%,*,">
<frame src="iran_ufo.gif" width=80 height=60>
<frame src="bats.html">
</frameset>
</html>

Save this as your frame page and then compare it to this (Frame Example 6) page. As you can see this loaded the picture quite nicely in to the frame. Though that is a huge amount of space wasted just for that one pic. It's now time to mold the frame around the picture. So let's change the width of the first frame to match that of the picture.

Step 2
<html>
<title>Frames Page</title>
<frameset cols="80,*,">
<frame src="iran_ufo.gif" width=80 height=60>
<frame src="bats.html">
</frameset>
</html>

Compare what you have done to this (Frame Example 7) page. As you have noticed, the picture didn't quite fit and we are still wasting a lot of space below it. We will add a third frame to go below the image, and we will make the frame the exact size of the image.

Step 3
<html>
<title>Frames Page</title>
<frameset cols="80,*,">
<frameset rows=60,*">
<frame src="iran_ufo.gif" width=80 height=60>
<frame src="rob.html">
</frameset>
<frame src="bats.html">
</frameset>
</html>

Compare what you have done to this (Frame Example 8) page. Well as you can see, the frame might be right, but the image is hidden behind the scroll bars. The scrollbars that you see can be specified as YES, NO or AUTO. YES means the window gets scrollbars- whether they are needed or not. NO means there will be no scrollbars, even if your frame contents are much larger than the frame... the browser will simply display as much as it can. AUTO is the default. If scrollbars are needed, they appear, if they are not needed they stay convienently out of the way. Let's get rid of our scrollbars.

Step 4
<html>
<title>Frames Page</title>
<frameset cols="80,*,">
<frameset rows=60,*">
<frame src="iran_ufo.gif" width=80 height=60 scrolling=no>
<frame src="rob.html">
</frameset>
<frame src="bats.html">
</frameset>
</html>

Compare what you have done to this (Frame Example 9) page.The image is still not in the frame right. The next two attributes deal with margins. The browser automatically gives each frame some empty space around its contents. This is normally necessary for asthetics. You can control the size of these margins by using MARGINWIDTH and MARGINHEIGHT. They control the left & right and top & bottom margins respectively. We will set them both to 1. (1 is the minimum)

Step 5
<html>
<title>Frames Page</title>
<frameset cols="80,*,">
<frameset rows=60,*">
<frame src="iran_ufo.gif" width=80 height=60 scrolling=no marginwidth=1 marginheight=1>
<frame src="rob.html">
</frameset>
<frame src="bats.html">
</frameset>
</html>

Compare what you have done to this (Frame Example 10) page. Unfortunately that still doesn't quite do it. Frame dimensions are measured center to center. Which creates an incorrect measurement when each frame has a border of 6 pixels. What this means is that on the left and right margins there is 12 extra pixels not counted for, and the same applies to the top and bottom margins. The way to fix this is quite simple, what you do is increase the absolute numbers used for the fame setting, ie the 80 and 60 numbers are added to. There is a formula for it, what you do is halve the margin width, add 1 to it and then double it to account for both margins ((6/2+1)x2). Or you could make life really easy and add 8 to the frame size. So that gives you :

Step 6
<html>
<title>Frames Page</title>
<frameset cols="88,*,">
<frameset rows=68,*">
<frame src="iran_ufo.gif" width=80 height=60 scrolling=no marginwidth=1 marginheight=1>
<frame src="rob.html">
</frameset>
<frame src="bats.html">
</frameset>
</html>

Compare what you have done to this (Frame Example 11) page. This is about as good as you get, technically you are about .5 of a pixel of pure symmetry, but I don't think anoyone will notice.
Next is the ability to remove the borders from around pictures and frames, thereby giving a seamless appearence. This is used quite alot in professional framed web sites.

Frame Border Tips 1
<html>
<title>Frames Page</title>
<frameset cols="88,*," frameborder=no>
<frameset rows=68,*" frameborder=no>
<frame src="iran_ufo.gif" width=80 height=60 scrolling=no marginwidth=1 marginheight=1>
<frame src="rob.html">
</frameset>
<frame src="bats.html">
</frameset>
</html>

Compare what you have done to this (Frame Example 12) page. As you can see this makes the page seem seamless, with everything blending so well. You can do the exact opposite, you can make the borders extra large so they stand out. This is done like :

Frame Border Tips 2
<html>
<title>Frames Page</title>
<frameset cols="88,*," border=10>
<frameset rows=68,*" border=10>
<frame src="iran_ufo.gif" width=80 height=60 scrolling=no marginwidth=1 marginheight=1>
<frame src="rob.html">
</frameset>
<frame src="bats.html">
</frameset>
</html>

Compare what you have done to this (Frame Example 13) page. As you can easily see the border thickness can embed the frames within them. This attracts attention to each frame separately, the border colour is also variable.

Frame Border Tips 3
<html>
<title>Frames Page</title>
<frameset cols="88,*," border=10 bordercolor=blue>
<frameset rows=68,*" border=10>
<frame src="iran_ufo.gif" width=80 height=60 scrolling=no marginwidth=1 marginheight=1>
<frame src="rob.html">
</frameset>
<frame src="bats.html">
</frameset>
</html>

Compare what you have done to this (Frame Example 14) page. There is one final part to deal with frame borders, this is the ability to stop users from resizing them manually. this is done like this :

Frame Border Tips 4
<html>
<title>Frames Page</title>
<frameset cols="88,*," border=10 bordercolor=blue>
<frameset rows=68,*" border=10>
<frame src="iran_ufo.gif" width=80 height=60 scrolling=no marginwidth=1 marginheight=1>
<frame src="rob.html">
</frameset>
<frame src="bats.html" noresize>
</frameset>
</html>

Compare what you have done to this (Frame Example 15) page. As you can see the Batman frame can no longer be changed but the image frame is still changable. By adding the noresize tag to the image frame src, the image border will also be no longer movable.

Now that all of this has been firmly understood, it's time to make frames useful, this is done by adding links. Links are what make a web site work.

Frame Links 1
We will skip back to two frames and the code for that is below. First thing will be adding a link from the frame Batman (file is bats.htm) to Robin (file is rob.htm). This is the easiest link there is and works by adding a link to the Batman. So what you should end up is with your main frame containing the Frames Page code and the Batman file containing the code displayed under the title Frame 1 :

<html>
<title>Frames Page</title>
<frameset rows="50%,50%">
<frame src="bats.htm">
<frame src="sup.htm">
</framset>
</html>
<html>
<title>Frame 1</title>
<body bgcolor=white text=black>
Batman 
A link goes <a href="rob.htm">here</a>
</html>

In case you are wondering, I'll call this file bats1.htm for my reference. Take a look at the new file here (Bats1.htm) and now use this new page with the code shown above to produce the following page( Frame Links 1).
I told you it was an easy link.

Frame Links 2
Well thats how you replace one frame with another, though normally what most people want is a link that loads a page into the frame next to it. This is what we will do now. There are two tags that you have to know about to do this, first is the Name and second is the Target.
The Name tag goes into your frame page where it serves to make a specific window accessable. The Target tag goes into the page in which the link is in (in this case bats1.htm). So lets modify the two pages so they look like this :

In case you are wondering, I'll call this file bats2.htm for my reference. Take a look at the new file here (Bats2.htm) and now use this new page with the code shown above to produce the following page( Frame Links 2).

This is, the standard way of using frames. To have a link from your site to an outside page is the exact same as a normal link except that you add the target="window" part to the link. Just a note, the target does not have to be called window, it could have been called fred, or anything else that pops into mind. But that is beside the point.
Outside links, many people surfing the web encounter frames and one of the most annoying things that happens a lot is that when they click on a link to leave, they find the new page being loaded into a frame. There are special target commands that are appreciated. They are :

_top
_blank
_self
_parent
_TOP This is a different command to _top

Lets test _top first use the following code.

<html>
<title>Frames Page</title>
<frameset rows="50%,50%">
<frame src="bats.htm">
<frame src="sup.htm" name="window">
</framset>
</html>
<html>
<title>Frame 1</title>
<body bgcolor=white text=black>
Batman 
A link goes <a href="rob.htm" target="_top">here</a>
</html>

As you can see only the Batman file is modified, I'll call this file bats3.htm for my reference. Take a look at the new file here (Bats3.htm) and now use this new page with the code shown above to produce the following page( Frame Links 3).

Notice that _top loaded the Robin file to the whole browser screen. This is the most important attribute to have when loading outside links. Next is _blank. The code used is :

<html>
<title>Frames Page</title>
<frameset rows="50%,50%">
<frame src="bats.htm">
<frame src="sup.htm" name="window">
</framset>
</html>
<html>
<title>Frame 1</title>
<body bgcolor=white text=black>
Batman 
A link goes <a href="rob.htm" target="_blank">here</a>
</html>

As you can see only the Batman file is modified, I'll call this file bats4.htm for my reference. Take a look at the new file here (Bats4.htm) and now use this new page with the code shown above to produce the following page( Frame Links 4).

Notice that _blank gave the Robin file a new browser screen. Sometimes this is useful, but when surfing, too many of these forms of links and the user might have his browser crash because of the amount of memory all of the new browser windows take up. Next is _self. The code used is :

<html>
<title>Frames Page</title>
<frameset rows="50%,50%">
<frame src="bats.htm">
<frame src="sup.htm" name="window">
</framset>
</html>
<html>
<title>Frame 1</title>
<body bgcolor=white text=black>
Batman 
A link goes <a href="rob.htm" target="_self">here</a>
</html>

As you can see only the Batman file is modified, I'll call this file bats5.htm for my reference. Take a look at the new file here (Bats5.htm) and now use this new page with the code shown above to produce the following page( Frame Links 5).

Notice that _self gave the Robin file the same browser space as the Batman file. Basically it works like a standard link. Next is _parent. The code used is :

<html>
<title>Frames Page</title>
<frameset rows="50%,50%">
<frame src="bats.htm">
<frame src="sup.htm" name="window">
</framset>
</html>
<html>
<title>Frame 1</title>
<body bgcolor=white text=black>
Batman 
A link goes <a href="rob.htm" target="_parent">here</a>
</html>

As you can see only the Batman file is modified, I'll call this file bats6.htm for my reference. Take a look at the new file here (Bats6.htm) and now use this new page with the code shown above to produce the following page( Frame Links 6).

Notice that _parent gave the Robin file the same ability as the _top command. Lastly is _TOP. The code used is :

<html>
<title>Frames Page</title>
<frameset rows="50%,50%">
<frame src="bats.htm">
<frame src="sup.htm" name="window">
</framset>
</html>
<html>
<title>Frame 1</title>
<body bgcolor=white text=black>
Batman 
A link goes <a href="rob.htm" target="_TOP">here</a>
</html>

As you can see only the Batman file is modified, I'll call this file bats7.htm for my reference. Take a look at the new file here (Bats7.htm) and now use this new page with the code shown above to produce the following page( Frame Links 7).

Notice that _TOP gave the Robin file the a new browser window, just remember not to go overboard with these commands.

Thats Frames...well not quite

Well you have just seen all of the code needed to make a frames capable web site. But what happens when someone gets to your site and doesn't have a frames capable browser. Are they out of luck?? No, whenever making a frames capable site you should always use the tags <noframes>, <body>....</body>, </noframes>. What this means is that you make a web page without frames and stick it inbetween that set of tags. This way non frames capable browsers will have something to lok at when they hit your site. You do this in your main frame page so the code for that would look like this :

<html>
<title>Frames Page</title>
<frameset rows="50%,50%">
<frame src="bats.htm">
<frame src="sup.htm" name="window">
</framset>
<noframes>
<body>
This line exists just to tell you that your system can't handle frames, and now for the good news you are not left out in the cold here..... and so forth.
</body>
</noframes>
</html>

Thats it for frames. And yes using frames means you should duplicate your work for non frame using systems. Hard work, yes, apreciated always.

Click on Advanced Lesson 10 to continue, or click here (Top) to return to the top of document