Frames Tutorial

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 Basics

The page format of the parent is a little different from that of a normal HTML document. It is like this.

<html> <head> <title>Your title here</title> </head> <frameset> <frame> <frame> </frameset> <noframes> <body> </body> </noframes> </html>

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.

Example:

<frameset rows="20%,50%,30%">

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".

<frameset cols="20%,50%,30%">

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)

Example:

<frameset rows="50,*,30">

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".

Frameset Attributes

We've already discussed cols and rows, so here is the rest of them.

framespacing=

Sets the width of the frame borders. This tag is Internet Explorer specific. However, Netscape does make use of border= to accomplish the same thing.
<frameset cols="20%,30%,50%" framespacing="10">

border=

Sets the width of the frame borders. This tag is Netscape Specific.
<frameset cols="20%,30%,50%" border="10">

frameborder="0" OR "yes"|"no"

Using this attribute, you can turn off the frame border to make it look like there is only one document displayed even though there is more. If done right, you can make a really neat effect. Microsoft has done a terrific job incorporating bordered and non-bordered frames in their site. If you see a page that has a scroll bar that starts in the middle of the page for no apparent reason, they are using a borderless frame. For an example of what Frame Example 1 (my "framed" page) would look like with the borders turned off, click here. Now the way Netscape and I.E. accept the value for the border-less frame is different. In I.E., if you want a border, you leave out the attribute all together. For no border, you use frameborder="0" AND you will also need to use framespacing="0" to remove every sign of a border. In Netscape, if you want a border, you can either leave it out or use frameborder="yes". If you don't want a border, use frameborder="no" AND border="0" to remove all sign of a border.
<frameset rows="250,300,*" frameborder="0" framespacing="0"> <frameset cols="*,30%,30% frameborder="no" border="0">

Frameborder= is also one of the attributes of <frame>. It is used to set the border on or off on a frame-by-frame basis. The usage is the same in the frame tag as it is in the frameset tag.

bordercolor=

Sets the color of the frame border. Values can be either a hex-triplet or a color name. (See my Color Information page. This is also an attribute of the <frame> tag.

The Frames

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:

src=

The URL of the page to be put into the frame.
<frameset cols="25%,75%"> <frame src="menu.html"> <frame src="viewer.html"> </frameset>

name=

Gives the frame a name. Used for targeting links. (See the section on <a>) The name must start with an alphanumeric character. There are some reserved names that begin with an underscore (_) that are discussed with <a>. A valid frame name CANNOT begin with the underscore. You should name all of your frames.
<frameset rows="60,200,*"> <frame src="frame1.html" name="menu"> <frame src="frame2.html" name="main"> <frame src="frame3.html" name="links"> </frameset>

For information on using <a> and frame names to target links in specific frames, see the <a> tag and look under the attribute of target=.

scrolling="yes"|"no"|"auto"

Tells the browser whether or not to display a scrollbar. Yes means that scrollbars are always visible. No means that scrollbars are never visible. Auto leaves it up to the browser and will display as needed. The default is auto.
<frame src="fr1.html" scrolling="no">

noresize

When used, this tells the browser not to let the client resize the frames. When not used, the client may resize the frames as needed. When you are just starting out with frames, it may be a good idea to leave out the noresize. You may inadvertently design your page so that the frames are smaller than the document displayed in them. The client (person reading your page) may feel the need to resize the frame so that all of the content can be viewed without scrolling. Take note of this when you design your page.
<frame src="tutorial.html" noresize>

frameborder="0" OR "yes"|"no"

Works the same way as it does in <frameset>. The only difference is that to turn every border off, you need to add this tag to every frame. In Internet Explorer, you can have partial borders displayed by adding the attribute to just one or two frames. In Netscape, frames share borders. If you want a frame border not to appear, you must set the frameborder to no for all the frames that share that border or else it will appear.
<frame src="page10.html" frameborder="0"> <frame src="page9.html" frameborder="no">

frameborder= is also one of the six attributes of <frameset>. It is used to globally set the border on or off. The usage is the same in the frameset tag as it is in the frame tag.

marginwidth=

Sets the left margin of the page in the frame. This value is set in pixels. If no marginwidth is specified, the browser will determine the appropriate margin for the document. This, in most cases, will look just fine. This tag is Netscape specific. If you want to set the margin width so that it will be compatible with I.E., you need to use leftmargin= of the <body> tag in the child documents.
<frame src="index.html" marginwidth="0"> <frame src="index2.html" marginwidth="9">

marginheight=

Works the same way marginwidth= does above only marginheight sets the margins at the top and the bottom. This tag is Netscape specific. If you want to set the margin height so that it will be compatible with I.E., you need to use topmargin= of the <body> tag in the child documents.
<frame src="index.html" marginheight="0"> <frame src="index2.html" marginheight="9">

bordercolor=

Sets the color of the frame borders. For this to be in effect, the frameborder must be set to 1 or on, of course. The value for bordercolor= can be any valid color value. (See my Color Information Page.) If you want to globally set the border color for all frames, you can use the bordercolor= attribute in the frameset tag.
<frame src="default.html" bordercolor="red"> <frame src="main.html" bordercolor="#0000ff">

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

Multiple Framesets

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.

 <frameset cols="30%,70%">  <frame src="menu.html">  <frameset rows="80%,20%">  <frame src="main.html">  <frame src="links.html">  </frameset>  </frameset>

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.

Targeting Links

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.

Parent:

<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.

Clearing Frames

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.

<head> <title>Your title here</title> <base target="_top"> </head>

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.

Browser Compatibility

	I.E.	Netscape
<frameset>	X	X
...cols=	X	X
...rows=	X	X
...framespacing=	X
...frameborder=	X	X
...bordercolor=	X	X
...border=		X
<frame>	X	X
...src=	X	X
...name=	X	X
...noresize	X	X
...scrolling=	X	X
...frameborder=	X	X

	I.E.	Netscape
...bordercolor=	X	X
...marginwidth=		X
...marginheight=		X
<noframes>	X	X
<a>	X	X
...target=	X	X
<base>	X	X
...target=	X	X
<body>	X	X
...leftmargin=	X
...topmargin=	X
...marginwidth=		X
...marginheight=		X

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.