Tutorial #12:
Manipulating Frames

Other tutorials
The Basics
The Basics - Part II
Working With Text
Text - Part II
Making Links
Images
Lists
Tables
CSS
CSS Text Control
CSS-P
Frames
Forms
JSS
Layers
Colors
Marquees

Frames are a powerful addition to a web site. They can display separate pages where you want them, rather than one big confusing page that has everything.

To see frames in action, click here. Are you back yet? OK. Did you see how he had 'Welcome' in one frame, the links in another, and other stuff like the credits? That is what you can do with frames. When using frames, you have to remember the fact that not all web browsers support frames.

When setting up frames, you must remember to not put in the <body> tag. Instead, you put the <frameset> tag. Here's an example of a bare bones frame page (Click on code to see the example):

<html>
<head>
<title>Frames example</title>
</head>
<frameset cols="25%,75%">

<frame src="example.htm">
<frame src="example2.htm">

</frameset>
</html>

Let's tear this script apart. It starts out as your ordinary document until we get to the frameset tag. I told you a little about it before. I put cols because I wanted to create columns. You can also create rows by putting, well, rows. By looking at the page, I think you can guess why I put in the 25%,75% in. I think that you can use pixels and other stuff like that, but stick with percents. It's a heck of a lot easier. If you want to have more than two columns, that's fine and dandy. Just put in something like 20%,40%,40% or whatever. Or, if you want to, you can put in 100%.

Now, you need to call in the files that go into a frame by using the frame src tag. And of course, once you are done with that, type in </frameset> and you're all set. Well, not really...

More Complicated Stuff

What if you wanted a page that had both rows and columns? "How do you do that?" you might ask. Well look at the code to do this.

<html>
<head>
<title>A Little Framework</title>
</head>
<frameset cols="80%,20%">
<frame src="framestutorial.html">

<frameset rows="50%,50%">
<frame src="tips.html">
<frame src="survey.html">

</frameset>
</frameset>
</html>

So as you can see, another set of frames, a frameset, is inserted between the first one. Pretty simple, if you understand it.

If you want to make a good frameset complete, it gets even more complicated. Take a look...

<html>
<head>
<title>A Little Framework</title>
</head>
<frameset cols="80%,20%" cellspacing=0 cellpadding=0 border=0>
<frame src="framestutorial.html" name="main" scrolling="auto">

<frameset rows="50%,50%">
<frame src="tips.html" name="tips" noresize scrolling="no">
<frame src="survey.html" name="survey" noresize scrolling="no">

<noframe>
You don't need to learn about frames if your browser doesn't support them. I suggest that you upgrade! : )
<noframe>

</frameset>
</frameset>
</html>

I added a couple of things. First of all, I got rid of the border with the cellspacing=0 cellpadding=0 border=0. The next thing I did was name the frames. This becomes useful when you make links, and I'll tell you about that later. Another thing that I did was control the scrolling. I think that the auto scrolling is default, but don't quote me on that. when I have scrolling="no", then there is no scrolling. (Duh!) I also have noresize there, and that also is self-explanatory. The last thing that I did was add the noframe tag. This text only shows when the browser doesn't support frames. You could a link to a non-frames version of your site, or you could put in a link to Netscape's and/or Internet Explorer's home pages. I did neither, but that's just me.

Almost Done!

I want to talk about one more thing: linking. Do you remember how I had the frames named? This is where they come into play. Here's the script:

<a href="next.html" target="main">Learn it!</a>

The target is the part that makes this work. Well, that was easy. Here's the last thing that I am including. What if you want to open up a new set of frames when you click on a link or get rid of the frames altogether? Then put target="_top". I don't know why there is the underscore and all, but that's what you have to do.

You'll want to do the forms tutorial now.