Something you will want to decide, early on in the lifetime of your website, is whether or not you wish to use frames.

The frameset has evolved...it is no longer the fashion to use a conspicuous frameset. Sites using frames must create a seamless look.

You can also create a "fake frame"--basically a table containing links--and place the table on each page of the site. If you use Javascript to draw the table, it will be just as easy to make global changes to it, as it would be using a frameset.

It is still important to know how to use frames. They are still used and still may be used well.

[ top ]

The logic of the frameset is straightforward. You put a set of <FRAMESET> </FRAMESET> tags on your HTML page. Between the <FRAMESET> </FRAMESET> tags, you place two or more <FRAME> tags (these don't require closing tags).

The attributes inside these tags specify the size and style of the frames. Each frame gets its own <FRAME> tag.

Here's an example:

That was the original index.html page for thebroadroom. We have since replaced our frameset with the "fake frame" in the upper left-hand corner of this page.

Why the change? For practical purposes, many of our pages are found in search engines. People finding the pages that way, never see the main frameset unless they happen to visit the front page of the site.

Getting back to the example--what does this example tell us?

When we load the page, the browser looks at the <FRAMESET> </FRAMESET> tags. The COLS attribute tells the browser to place the frames inside the frameset in columns (i.e., side by side, or vertically).

COLS="133,*" tells the browser that the first, left-most frame, should be 133 pixels wide, and the next (and in this case, last) frame should fill up the rest of the screen.

BORDER=0 tells the browser not to put that funny 3-dimensional grey border between the frames.

BORDERCOLOR="#ffffff" sets the border color to white. Of course, since we're not using a border, it's not necessary to include this attribute. I left it in so I could play with it later on. :)

FRAMESPACING=0 doesn't seem to do much in my browser. Probably it does something fancy in some other browser so I leave it set to zero.

FRAMEBORDER=0 also tells the browser not to put that funny grey 3-D border between the frames. If FRAMEBORDER is set to zero and BORDER is not specified, I get a narrow white 2-dimensional border between my frames (might be different on a different browser).

That's it for the frameset; now for the frames themselves.

Each frame needs its own <FRAME> tag. Remember to put them in order! With vertical frames, the first frame tag specifies the left-most frame. With horizontal frames, the first frame tag specifies the top-most frame.

The first attribute inside the <FRAME> tag is SRC. SRC specifies the HTML page that will load initially inside the frame.

In our example, when you go to www.thebroadroom.net, your browser loads menu.html into the left-hand frame, and main.html into the right-hand frame.

NAME is the next attribute. This is the name you give the frame. Name all of your frames. You can use any name except for the few predefined target names listed in the table below. Usually the names you choose will be descriptive (i.e. "top" and "bottom"--or "left" and "right"--or "menu" and "main").

You'll need to use the names later on when you want to link to a page from one frame and have that page open inside another frame.

MARGINWIDTH and MARGINHEIGHT specify how much space to pad the inside of the frame with. In this example, only the top and bottom of the right-most frame is padded, with 5 pixels. Most of the time you can control how the pages look inside the frames from the pages themselves. I added the slight padding to the right-most frame because I didn't like having something like a table smack up against the top of the frame.

SCROLLING determines whether there will be scrollbars. Sometimes you just don't want scrollbars; hence SCROLLING="no". Be careful if you set SCROLLING to no; test out your page on a low-resolution, small monitor to make sure nothing inside the frame becomes impossible to see.

Sometimes you want scrollbars as necessary; hence, SCROLLING="auto". This is the default value for the frame btw.

Occasionally you will want mandatory scrollbars although I can't think offhand of why you would want to do that. That would be SCROLLING="yes".

Finally, NORESIZE prevents the user from manually resizing the frame.

End of frames and frameset.

The text between the <NOFRAME> </NOFRAME> tags is displayed in browsers that don't render frames at all. It is kind to provide a link there so that people using such a browser will be able to at least partly use your site.

[ top ]

To do this exercise, you will need to create and save 5 small HTML documents. Don't type the code; just copy and paste it into the text editor.

If you want to skip doing the exercise, you can:

to get a feel for what frames can do.

To continue with the exercise, open your text editor of choice and get a new document in there. Copy and paste the following code into the new document, and save it as referrer.html:

Close referrer.html. Open a new document, copy and paste the following code into it, and save it as frameset.html:

Close frameset.html. Open a new document, copy and paste the following code into it, and save it as red.html:

Close red.html. Open a new document, copy and paste the following code into it, and save it as green.html:

Close green.html. Now we're on the last one! Open a new document, copy and paste the following code into it, and save it as navbar.html:

Now you're ready to try it out. Open your browser and open referrer.html inside it. You should get something like this:

OK, let's step back and figure out what's happening here.

referrer.html has a link that opens up the page with the frameset tags in it--frameset.html.

The code inside frameset.html is as follows: FRAMESET ROWS="*,*,20%". The ROWS attribute tells the browser to put the frames horizontally, one on top of the next. Here we tell the browser to set aside 20% of the screen for the bottom frame. The * character tells the browser to divide the rest of the screen evenly between the top two frames.

[ top ]

Here is another instance in which you'll need to use the TARGET attribute of hypertext links.

To link to a page from one frame and have the new page open into a different frame--set TARGET equal to the name of the frame you want to load the new page into.

Example:

Recall, when I made the frameset for thebroadroom, I named the left-hand frame "menu" and the right-hand frame "main" (all frames should have names!).

If I place the sample link on thebroadroom's menu page, I can click it to open the Tech section's index.html page inside the right-hand frame.

To break out of the frameset entirely and open the new page inside a full browser window--set TARGET="_top". (Make sure you spell it exactly that way.)

Example:

This opens index.html, thebroadroom's front page containing our frameset, inside a full browser window rather than inside any frame.

To open the new page inside a new browser window--set TARGET="_blank".

In fact, here is a table of all the predefined link TARGET values.

[ top ]

Make sure you spell these exactly right or they'll do something entirely different.

Likewise, when you're setting up your frameset, don't use any of these to name your frames.

[ top ]

Nested framesets are not a big deal. There is no reason you can't put a page with a frameset in it, inside a frame on a page.

Here is an example:

Notice that when you click "all white" from the blue bar, the white page is loaded into the parent frame of the blue bar. That causes a problem when you want to click "green" again from the red bar. The link on the red bar can no longer find its target, since the frameset on the right-hand side has been destroyed.

When the browser can't find the frame you specified, it opens a new browser window and loads the new page into that.

How can you fix that problem? It is possible to fix it. Instead of linking to the green page from the red bar, you could use Javascript to draw a new frameset to the screen, with the green page loaded into the top frame and the blue page loaded into the bottom frame.

I don't recommend this kind of code however. To me it's needlessly complicated, and if you make a change to the white-and-blue frameset, you'll have to go back and change the Javascript as well. Try making it so that all of your links load new pages into frames without having to create new framesets.

Can you open two or more documents into different frames, from a single link?

Of course you can. You have to use Javascript. Instead of a plain hypertext link, make a link to call a Javascript function. Inside the function, put code to open the documents where you want them:

If you study the Javascript code, you'll see that each document with a frameset, keeps track of all its frames in an "array" called...frames.

What is an array? An array is just a way of storing data and then retrieving it. You give the array a name...the frames array is called frames, so let's use that...then store data in it like this:

frames[0] = first piece of data
frames[1] = second piece of data
frames[2] = third piece of data
frames[3] = fourth piece of data

And so forth. (Arrays can get to be quite long.)

Why do items in the array start at 0, rather than 1? It's because the name of the array represents its location in your computer's memory. More specifically, it represents the beginning of the array. In short, the name tells your computer where to start looking for the data!

The index of the array...the number that appears inside the square brackets...represents an offset to the beginning of the array.

Another way to look at it would be this:

frames + 0 = first piece of data
frames + 1 = second piece of data
frames + 2 = third piece of data
frames + 3 = fourth piece of data

It makes more sense the more you work with arrays. Just remember to start your array at 0 rather than 1.

Since we're asking the parent frame of the red bar to do the work, we call the frames array of its parent frame:

parent.frames[1]

This gets at the second frame of the parent frameset.

Now that we have hold of the second frame, we want to get at its first and second frames:

parent.frames[1].frames[0] (gets at its first frame)
parent.frames[1].frames[1] (gets at its second frame).

[ top ]