File Under: HTML

Create Simple HTML Frames

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

So you pick up your plate, and it’s not just any kind of plate — it’s a special sturdy picnic plate (probably made by Coronet or some other fine brand) 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.

page.gif

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.

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.

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

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 will be able to visit picnicplate.html and delight in a home-cooked meal chez Atkinson.