webmonkey/authoring/

Frames Are a Picnic
by Jill Atkinson

So, I was walking through the office yesterday and someone asked me, "Jillo — if you had to pick one thing you were good at, what would it be?" "Well," I said. "I tend a lovely garden. I'm very good with dogs. And I can explain frames in terms even my mother could understand: the picnic."

Imagine, if you will....

It's summer. It's somewhere in the Midwest. You're on vacation, so you drop in to see your mother (of course — my god! You fly over the Midwest, you have to visit your mother), and in your honor she holds a picnic.

So there you are. Dad, of course, is at the barbecue, making sure the beer cooler is always full, and the kids stick to the soda cooler. And Mom is spreading a buffet table out on the deck, with glorious amounts of food piled high in metal bowls, Tupperware, straw baskets, and the like.

[Plate]

So you pick up your plate, and it's not just any kind of plate — it's a special sturdy picnic plate that has separators. You know the kind. It has a big part for the meat product, and a little portion for the salad, and a little portion for the dessert.

Now, in a few minutes you'll be thinking of this separated plate as your frame document, but let's not go there just yet. Let's continue our picnic before we talk shop.

So you cruise down the buffet table and you see the chicken — aah ... barbecued chicken. You pick up a piece and put it in the big part — the chicken part - of your plate. Then you see the salad — your mother's fabulous salad, with tricolor bow-tie pasta, raisins, and broccoli — with lots of mayonnaise, of course. So you get some of that to make your mother feel good, but you put it in the little portion, because, well, it's really pretty gnarly. And then you go for the Jell-O. The layered Jell-O salad. You get a few cubes of that and off you go, ready to eat.

Then you sit down and think: "How nice this is. I have everything I need, yet everything is in its own compartment. Nothing touches anything else, unless I want it to."

Now, to get to the point (and I do have one) you can think of this nicely separated paper plate as your frameset. In the same way the plate sets up little spaces for your food, a frame document sets up little spaces for your HTML pages.

[Frame

Your frame document, using this elaborate metaphor, would be called picnicplate.html. And within this page, you'd have three sections, set up for three different pages — the chicken.html, the pastasalad.html, and the jellocubes.html. And so picnicplate.html sets aside space for each of the sections, and then pulls each page into its space, keeping them separate — yet related — and allowing you to enjoy all of them at once.

Once you know what you want, and where you want it, you're ready to build that page.

Ready, Frameset, Go!
Every frames page begins with a <frameset> tag, which replaces the <body> tag you find in normal HTML pages. The frameset (or framesets — they can be nested inside each other) describes how the page will be divided up, and it can be defined in terms of either rows (horizontal units) or columns (vertical units), but not both. These columns or rows can then be further divided by nesting additional framesets within them.

For our picnic page, we'll define our initial frameset in terms of columns. There are two columns: The left-hand column will hold the chicken.html, and the right-hand column will hold both pastasalad.html and jellocubes.html.

So the next question is: How big do we want each column to be? We can size them either by percentage of the screen width, or by absolute value (in pixels). In this case, let's say that we really like chicken, and we want chicken.html to take up about two-thirds of the screen, leaving only one-third for the other portions.

Our frameset will be defined like this:

<frameset cols="66%,34%">

So there are two columns. The first (or left-hand) column will take up 66 percent of the screen width, and the second (or right-hand) column will take up 34 percent of the screen width. (Note: Values are separated by a comma.)

Now that we've defined the frameset, we'll go ahead and describe the frames within it. Each frame — or region — in a document is described by a single <frame> tag. The <frame> tag has several attributes, but we'll only go into two of them today: the source and the name. The source is essential, because it tells the browser which document to pull into the frame; the name becomes important when you start linking between frames.

Frames are always described from left to right, and top to bottom — so the first frame we describe in picnicplate.html will be the chicken section:

<frame src="chicken.html" name="chicken">

So again, "src" (source) indicates the HTML document that will be pulled into that frame, and "name" is just the name of the frame (which doesn't necessarily have to correspond with the name of the HTML document).

So far, our frame document looks like this:

<frameset cols="66%,34%">

<frame src="chicken.html" name="chicken">

Here's where it gets fun. We're up to the second — or right-hand — frame, which will actually be divided into two frames that sit on top of each other (pastasalad.html and jellocubes.html). To do this, we need to create a second frameset, and nest it inside the first.

Nesting Instincts
The second frameset will describe how the right-hand frame should be divided (how much space each of the horizontal regions gets). We can do this one of two ways: We could divide it by percentage as we did with the first frameset, or by absolute value. What the heck, let's do it by absolute value....

You never want to define the absolute values for all the frames in a frameset, because the total number of available pixels varies with the size of a user's monitor. Instead, you'll want to assign a fixed size to one of the frames, and leave the other frame undefined (indicated by *), so it can fill the remaining space.

In our case, we'll give the pasta salad, oh, let's say about two inches, or 100 pixels (which, to be perfectly blunt, is more than enough for my mother's pasta salad), with the rest of the space going to Jell-O cubes.

We'd indicate this by writing:

<frameset rows="100,*">
So the top frame will be 100 pixels high, and the bottom frame — marked off with an asterisk — will vary in size, depending on the height of the monitor.

Now let's go ahead and define these frames:

<frame src="pastasalad.html" name="pastasalad">

<frame src="jellocubes.html" name="jellocubes">

Now we just have to close off both of our framesets, and we're done with our frame document. So, to recap, picnicplate.html will look something like this:

<html>

<frameset cols="66%,34%">

<frame src="chicken.html" name="chicken">

<frameset rows="100,*">

<frame src="pastasalad.html" name="pastasalad">

<frame src="jellocubes.html" name="jellocubes">

</frameset>

</frameset>

</html>

Now, everyone who has a frames-capable browser will be able to visit picnicplate.html and delight in a home-cooked meal chez Atkinson. But what about everyone else? Right now, anyone using a browser that doesn't support frames would get an empty page when they arrive at my picnic. And that's no way to greet a visitor (as my mother would tell me in no uncertain terms). So make sure you also lay out a welcome mat for those non-frame folks.

Now, let's take a look at a few more ways to customize your frames.

Customizing Frames
marginwidth, marginheight

You can control the margins of your frames, or the amount of white space between the borders and the contents, by using the marginwidth and marginheight attributes; marginwidth controls the amount of space on the left and right side; marginheight controls the space on the top and bottom. Both are determined in pixels.

So your HTML would look something like this:

And your frame would have a 5-pixel margin on the left and right side, and a 10-pixel margin on the top and bottom.

scrolling

You can also set whether or not your frame has a scrollbar, using the scrolling attribute. There are three possible scrolling options: yes, no, and auto. Yes will place a scrollbar, whether it's needed or not; no will prevent the scrollbar from appearing, whether you need it or not; and auto will place a scrollbar only when necessary (i.e., when there's more content than can fit in the user's window).

The HTML would look something like this:

In general, I'd recommend leaving the scrolling attribute on auto (there's nothing more frustrating than inaccessible content). The only time I'd turn it off is when the frame holds a single image that doesn't need to be seen in its entirety.

noresize

Finally, and somewhat controversially, there's the noresize attribute. It has no numerical value, as it's only added in a specific instance; that is, when you want to prevent people from resizing your frames. Although most people don't realize this, frames pages can be modified by the viewer; anyone can change the look of a frames page by grabbing the edge of a frame border and dragging it to where they'd like it to be. That is, they can alter any frames page that doesn't include the noresize attribute.

A frame with a noresize attribute looks like this:

Now, some people see the noresize attribute as a hostile act, one that unfairly limits the choices of the user. But here's what I think: I think that people build pages in frames because they want control — let's face it, frames are for control freaks — and there's really no need to give your users the option of messing up your page. Not a popular view, I know. But, that's what I think.

Got all that? Good! Now you're ready to tackle the somewhat complicated, but ultimately easy, linking between frames.



Jill Atkinson is activity director emeritus for Wired Digital. Her mom says she's as cute as Velcro.