So You Want To Frame It?

Frames are very complex and very controversial. Many people say frames are a pain, and many say the are a god send.

My personal opinion, I love them and I hate them. I use frames because they can add a lot of dimension to your site. I hate frames because you can't use them like regular documents, i.e., the back button doesn't work just the way we are used to and neither does the location bar.

This page loads slow because of all the screenshots needed to show you the code. Please be patient.

Here is a brief example of a directly nested frameset. Look it over and then move on down the page for a more, I hope, in depth look at building a frames site. At the end of the page will be a link to the true experts.

Now I will try to explain clearly what all that code means.

1.< FRAMESET ROWS="30%,70%" >
This tells the browser that the screen will be split in two portions one 30% of the screen and the other 70%.

2.< FRAME NAME="FRAME1" SRC="doc1.html" >
This tells the browser to load doc1.html in the top 30% of the frameset.

3.< FRAMESET COLS="50%,50%" >
This tells the browser to start a new frameset (nested) in the first one and split the bottom 70% in two equal portions of 50% each.

4.< FRAME NAME="FRAME2" SRC="doc2.html" >
This tells the browser to load doc2.html in the bottom left frame of the frameset.

5.< FRAME NAME="FRAME3" SRC="doc3.html" >
This tells the browser to load doc3.html in the lower right frame of the frameset.

6.< /FRAMESET >
This tells the browser that instructions for the second frameset are complete.

7.< NOFRAMES >
This tells the browser that if it can't read frames to show the message you have placed between the beginning and ending noframes tag.

8.< /NOFRAMES >
This tells the browser this is the end of the noframes instructions.

9.< /FRAMESET >
This tells the browser that the instructions for the total frameset are done.

10.< /HTML >
We already knows that this ends the document.


I am going to start out slow, by, introducing you to a two frame frameset. I will do one that makes a left frame and a right frame, and then one that will make a top frame and a bottom frame. Later we will get into making three frame framesets.


Ok, this first frameset will be one that loads a left frame and a right frame. In order to make this frameset work, you have to make three seperate html files. For ease of understanding I have named these files index.html, menu.html, and main.html.

You actually need to make the menu.html and the main.html before you make the index.html, so that is how I will present it here. It takes a little planning. Let's start with the menu.html. You will need to know what pages you want to link to. I have used a very easy example, page2.html, page3.html, page4.html. You can have as many links as you want here, and you can add more as you want also.

FIG. 1

You can use whatever editor you like. You will have to assume that I already have page2, page3, and page4.html completed.
Please notice the target for the links. This will be important when you get to making the actual frameset, and is one of the things you need to plan when you are planning your frameset.

This is the file named main.html.

FIG. 2

As you can see, this is pretty straight forward. Just a plain html file. This would be where you would make your introduction to your site. Explain a little about it, have your counter here, because this is the main entry point and will always be loaded first. I have added a Guestbook to, just to fill the file so you can see the different things you can do.

And now for the frameset file. This is pretty simple, and easy once you have done it a couple of times.

FIG. 3

The first thing you will notice is the frameset tag:

frameset cols="30%,*"

This instructs the browser that the page is in frames and to break the screen up into two columns, one that will take up 30% of the screen, and one that will take up the rest of the screen. You can set this to pixels instead of percentages also, but, keep in mind that different viewers are browsing your site with different screen resolutions, so, the percentage really works better for all viewers.

The next two parts name the first and second frame and tells the browser which document to load into those frames. The frame name is important if you are going to want to use links to load different pages in each frame. If you go back a look at what page is specified to load into the left frame, and then look at the links on that file, menu.html, you will see that the links are specified to load into the "right" frame. If you do not do that, the links will load into the frame that the link is on.

Now, you always have to assume that there will be browsers out there that are not capable of viewing frames. So, there is an alternative. The noframes tag. In between the beginning and ending noframes tag, you can add whatever text or images you want, even links. For instance, you could put a link there to a section that was not in frames, for those viewers who can't view frames. Yes, this is a lot of work, but, you don't want to have viewers that cannot enjoy your site, so if you choose to use frames, you might think about making a noframes section.

The actual document that specifies frames is really not that big at all, as you can see.

Here is kind of what the frameset we just worked on will look like.

FIG. 4

Ok, now let's apply that same principle to a two frame frameset, only let's make a top frame and a bottom frame instead. The rules are still the same, you must make three html documents, index.html, menu.html, and main.html for this example.

We will use the same menu.html as above, but, it will load in the bottom frame instead of the right frame, and the menu.html will load into the top frame.

So, we need to make a menu.html that targets the links to the bottom frame instead of the right frame.

FIG. 1

We will use the same main.html as above.

But, we will need to adjust our frameset to reflect the top and bottom frame.

FIG. 2

And, this is close to what it would look like:

FIG. 3

Now, we will look at a directly nested frameset. That means that you will only use one file for the frameset, but, it limits you in your options for linking and targeting frames. With a directly nested frameset, you can only update one frame at a time, whereas with an indirectly nested frameset you can update two frames, (using a three frame frameset), at a time.

We are again, going to use the menu.html and main.html we have already used, so the only new files you will need to see is the frameset file and the header.html.

FIG. 1

The header.html file will load into the top frame of the frameset.

FIG. 2

And the finished product will look something like this:

FIG. 3

Ok, now here is where it gets complicated. This example, will require that five files be made. You will need your frameset file (index.html), frameset.html (holds the second frameset), header.html, menu.html, and main.html.

FIG. 1a

FIG. 1b

FIG. 1c

As you can see we will still use the main.html and menu.html for this frameset and it will look exactly as the directly nested frameset above when viewed. The difference is that you would be able to update two frames at once instead of just one frame because you could target your links to either the top or bottom frame, and using another frameset file break that original frame into more that one frame.

Why do you want to go to this much work? when the directly nested frameset looks the exactly the same and is much easier? The answer is this. Let's assume that instead of using the header.html file to load into the top frame, you used your menu.html to load in the top frame (check out the example below). The point would be that you could divide your site better. For instance, if you had a Genealogy section, and an HTML section, and a Sports section, etc., you would use the top frame for the Main Menu and load the sub menu and sub main page into the "bottom" frame, thus allowing you to have each section seperate. For now, let's just do a simple example and if you need more specific help you can feel free to email me! vikki@web-helper.net

This last frameset is pretty interesting and very practical if you have a large site devoted to several different topics.

FIG. 1

This first image shows only a two frame frameset, but, it has the links in the top frame. Those links are main links, that link to submenus that will load a menu in the left frame on the bottom and the main file in the right frame. The code for the links would look something like this:

<a href="sports.html" target="bottom">Sports</A>
<a href="genealogy.html" target="bottom">Genealogy</A>
<a href="htmlhelp.html" target="bottom">Html Help</A>

The three files, sports.html, genealogy.html, and htmlhelp.html, will be framesets themselves. They will be two column framesets that will call their own menu.html file and their own main.html file. The example below shows what would happen if a viewer clicked on the Sports link.

FIG. 2

This type of frameset can seem pretty complicated at first, but, really all it is, is a bunch of two frameset files. It takes planning. Make your plan on paper before you try to attempt to put something like this together. If you would like to do this sort of frames site, and you need help, you can always email me for help. vikki@web-helper.net I would be happy to try and help. Before you email me about this, please be sure you understand how to create html files.

Now, for that link to the experts. You should try The Information Commons. I found a lot of good information there, and not just about frames.