Before we get to a how-to, let's talk about what frames are good for--and what they're not. Frames are great for keeping a navigational system (that is, a menu of options) on the screen while the user investigates the site (see Figure 1).
Figure 1: Users click on options in the left-hand frame to bring up information in the right-hand frame. The options frame does not change.
Another good reason to use frames would be to keep a banner or advertisement in a static place on the screen while allowing the user to scroll through the main text or options. The Developer's Forum section combines both of these reasons to use frames.
When are frames superfluous--and perhaps even damaging to your company's image, not to mention your reputation as a Web designer? Probably the cardinal sin is using frames to cram as many words, graphics, animations, or backgrounds onto the screen as possible. People can only absorb so much at once, so stick to a single focal point on screen. If the "border" frames are busy, keep the center one very simple.
Working with frames can be like a chess game, where you have to plan a series of moves in your head before anything happens on the board; it can get confusing very quickly. Familiarizing yourself with the pieces and how to line them up is absolutely essential before you begin to play the frames game. A quick primer on frames syntax is available on Netscape's site; either stop and read it now or print it out to use as a reference as we go through the example.
We'll begin our foray into frames fairly simply, with a page that is divided vertically into three sections. [Clicking on this link should open the page in a separate window, so you'll be able to poke around as directed and keep reading this at the same time.] First, notice that if you use the scrollbar, only the middle frame scrolls--the top and bottom frames stay put. This is one of the main features of frames.
If you view the source of our sample page, you'll also notice that it looks
different from the source of other pages. The contents of the different
frames is not revealed--only the frameset and the
<NOFRAMES> text is visible (the
<NOFRAMES> text is for people who don't have
frames-capable browsers; without it, all they'll see is a blank page). The
frameset is as follows:
<frameset rows="70,*,35">
<frame src="header.html" marginwidth=0 marginheight=1 noresize
scrolling="no" name="header">
<frame marginwidth=10 marginheight=10 src="info.html"
name="main">
<frame marginwidth=2 marginheight=5 src="options.html"
marginwidth=0 marginheight=3 noresize scrolling="no"
name="options">
</frameset>
What the sourcecode tells us is that our frames document is made up of three separate documents: one called "header.html," one called "info.html," and one called "options.html." The top frame ("header") is limited to 70 pixels high, the bottom frame ("options") is limited to 35 pixels high, and the middle frame ("main") gets whatever room is left.
Now click one of the options ("the album," "the members," or "the shows").
You'll notice that although you clicked in the "options" frame, it was
the "main" frame that changed. A quick look at the source of options.html
(replace "thumper.html" in the location bar of your browser with
"options.html" and select View Source) reveals why: In each link, there is
a target="main", which tells the browser to display the
results of the link in the frame called "main." Without the
target specification, the results would load in the same frame
as the link.
Go back to the thumper.html document (use the Back button on your browser)
and select "the music," then follow the link to Athens, Georgia. Notice
that when the Flagpole page loads, it completely replaces the Thumper page.
Yep, it's another target specification at work; this time,
target="_top". There are several magic targets like this one listed at the Netscape site.
There's one other thing I'd like to point out about our basic frames document before I close for this week. You'll notice that the whole "header" frame is filled with what looks like a red graphic. Let's look at the source and see what's really going on (again, replace "thumper.html" with "header.html" in the location bar of your browser, and View Source). You'll see, even before you view the source, that the whole background of "header.html" is red. The graphic is only 200 pixels by 60 pixels; it just has a background of the same color red as the HTML file (I also could have made it transparent).
If you've deduced at this point that frames allow you to specify a different body attribute for each frame (actually, for each document in a frame), congratulations. However, I beg of you: PLEASE do not take the opportunity to specify a different background image in each frame document. Different background colors, if carefully chosen, can be effective (e.g., a black "options" frame would have been within the color scheme of the Thumper site, and it would have helped to draw attention to the white "main" frame). But different tiling backgrounds in a frames document are at best ugly and at worst a health hazard (don't look at this horrid example if you're prone to migraines or seizures).
Next week we'll get a little more complex by exploring nested framesets. Until then, you might want to practice a bit of chess to get your brain in shape!
