Frames. Most people love 'em; some people hate 'em. If you have never seen frames before, you don't know what you're missing. Frames are a way to divide your page up into sections. You can have a menu on one side that remains on the screen at all times and on the other, a "viewer" that will change depending on what is clicked on in the menu.
For an example of how my site would look if I "framed" it, I would make it look something like this. This will open a new window with the page in it, as do all examples on this page. Please don't close them until I specify that you can, as I may be referring to them for examples.
Look at my example. See the three distinct frames? Adding frames didn't split the content of my page up like that. I did that so I could fill up the other two frames. In this example, it looks like there is only three documents in three frames right? Well there are actually four documents. The three that you see and there is a fourth file which actually calls and defines the frames' shape and size. The three you see are just normal HTML documents written and then loaded into the frames by the fourth file. Because of this, we won't focus on those three. Instead we will talk about that mysterious fourth document.
Throughout this tutorial, I will be referring to the fourth file, the file that calls the frames, as the "parent". In addition, I will be referring to the pages loaded into the frames as the "children".
You may now close the window "Frame Example 1".
The page format of the parent is a little different from that of a normal HTML document. It is like this.
Notice the <frameset> in the place of the <body>. The <frameset> section is where you define the frames. The <noframes> section defines the content to be viewed by browsers incapable of displaying frames like Internet Explorer 2.0. You treat the <noframes> section just like the <body> of a normal document by adding the <body> tags between the <noframes> and </noframes>. If there is a <body> tag (or a tag that goes in the body) before the <frameset> tag, the frames will be ignored. That's why they must be placed in the <noframes> section only. As for the <frameset> section, an explanation follows.
Here is the complicated part of understanding frames. The 2 main attributes to <frameset> are cols= and rows=. They define the breakup of the page. Using these attributes, you give a value for the width or the height of each frame. For example, the frame breakup lines for rows go across the screen horizontally. So the total height of all the frames set by rows must equal the height of the screen. The frame break-up lines for cols go up and down vertically. So the total width set by cols must equal the width of the screen. The width or the height can be set to pixels, a percentage of the screen, or as a relative size.
would create 3 rows with heights that would take up 20, 50, and 30 percent of the screen respectively. To see what this looks like, go here.
You may now close the window "Frame Example 2".
would create 3 columns with widths that would take up 20, 50, and 30 percent of the screen respectively. To see what this looks like, go here.
You may now close the window "Frame Example 3".
Those examples used percentages for the width and height of the frames. Now I will show you an example using pixels and relative size. Defining a frame size in pixels isn't very wise because you can never know for sure how large the viewer's screen is. That is why you use a relative size defined by a single asterisk (*). Yes that's what that's called. Not a star, not an astrick, or an asterik. It's an asterisk. (Pronounced with 3 syllables)
This would create 3 frames. The first with a height of 50 pixels, the third with a height of 30 pixels, and the second with a height of whatever is left over. To see what it looks like, go here.
The same syntax can be used for cols as well.
You may now close the window "Frame Example 4".
We've already discussed cols and rows, so here is the rest of them.
Now that you know how to define frames, you now have to put something in them. If you don't, the frames won't appear. You achieve this with the <frame> tag. You use it to define how the document in each frame acts when it is "framed". You need a <frame> tag for each and every frame division in the page. If you defined 3 frames using cols or rows, then you need to include 3 frame tags. The <frame> tags must be placed between the <frameset> and </frameset> tags. There are 8 attributes for the <frame> tag. They are as follows:
Those are all the attributes of the frame tag. Using various combinations of these attributes, you can create some very interesting effects. Try setting marginwidth= or marginheight= to a negative number, such as -1. See what happens. Just play around with them and see what you can come up with.
Tips and Tricks
If you would like your page to be broken down into more than just columns or just rows, you can "nest" frameset tags inside of each other. The purpose of this is to break frames up into other smaller frames. Here's an example.
<!--This defines the main page breakup -->
As you can see, the key in frames lies in the order of frameset and frame tags that you specify. If you can't get the frames to look right, check the order of the tags you specified. The problem may lie there.
Suppose you have 2 or more frames, we'll call them frame one and frame two. You have a link in frame one and when a user clicks on it, you want the page in frame one to stay the same but you want the link to be loaded into frame two. For this you use the name= attribute of the <frame> tag and the target= attribute of the <a> tag. Here's an example:
The following are excerpts from the pages affected by this procedure.
<frame src="menu.html" name="menu"> <frame src="index2.html" name="show_me">
Child: "menu" (frame 1)
<a href="bio.html" target="show_me">About Me</a> <a href="links.html" target="show_me">Links</a>
The results would appear as two frames, one named "menu" and the other named "show_me". Both links in the "menu", Links and About Me, when clicked, would be loaded into the "show_me" frame. The target= of the link must match exactly with the name of the frame that the link is to be loaded into. Remember CasE COUnts. So does spaces. Also, frame names cannot begin with the underscore (_) but it can be contained within the frame name, just not at the beginning.
Because of the nature of the way frames treat links, they pose an interesting problem. Whenever you click on a link in a frame and it doesn't have a target= specified, the link is loaded into that frame. This is true of a link to another website. I found out about this when I clicked on the I.E. logo on my page and the Internet Explorer Home Page loaded into my frames. That was not good. Here's what you do to "clear" the frames for external links (links taking you outside of your site).
There are two main methods to this, but they all involve the use of the special reserved frame name of "_top".This is not a name you give a frame, but rather is a name reserved by Netscape and I.E. for special purposes. When you set the target of a link to equal _top, that link will be loaded at the "top" level, thus clearing the frames for that link. So you would do this for every link you wanted to be loaded outside of the frames.
<a href="http://www.microsoft.com/ie/" target="_top">Get I.E. NOW!</a>
The other method is a little less repetitious but is more difficult to implement. It involves setting a "default" target for links. This is done with the use of the <base> tag. What you do is put the base tag in the <head> of the document that's loaded into a frame. This is a child document I'm talking about. This page will contain the links that need to be loaded outside the frames. Then you use the target= attribute of the base tag. Set it equal to _top. Here's what it'll look like.
This will make every link in the current document that doesn't have a target= specified be loaded at the top level, clearing the frames. If you have a link in the current document that you want to be loaded into the current or another frame, you need to set the target of the frame equal to the frame name itself or else it'll be loaded at the top level.
Now I suppose I've got you thinking "Which method should I use?". If you have a page that is made up of more internal links than external links, use the first method. If you have a page where there is more external links, use the second method.
That just about wraps up everything you need to know to make frames. Now that you know how to create the parent document, you just need to create the children files to be loaded into the frames. You create them just like you do any other normal HTML document with html, head, and body tags. The only file that needs the frame, frameset, and noframes tags is the parent document. If you are a little confused on some of the aspects discussed thus far, I ask that you open my first example at the top. Then view the source. Make sure you are viewing the source of the fourth file and not the three others. Look at it and compare to my examples. Do this at other sites that have frames. Experiment. That is the best way to learn. That's how I learned frames.
©1996-1999 Gilpo All rights reserved. This document may not be altered in anyway or distributed without the expressed written consent of Gilpo. All information contained herein is deemed to be accurate but is not warranted.