Today, we're talking about how to specify into which frame you'd like your linked documents to load. If you're a little fuzzy on the concept of frames, you should go back and read the first piece in this series, where we explain frames in the context of a Midwestern picnic. Go ahead, we'll wait....
Now, the most powerful feature of frames is that certain regions on a page can remain stationary — acting as a control panel or navigation bar — while others reload. So I can follow a link in one section and have a new page appear in a different section. Pretty cool.
Let's return to our picnic plate to illustrate.
![[1]](stuff/1.gif)
So we have three frames, which we named "pastasalad," "chicken," and "jellocubes." Each of these frames pulls in a different HTML document — pastasalad.html, chicken.html, and jellocubes.html, respectively. The HTML looks 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>
Up until now, it seemed unnecessary, if not downright silly, to name the frames (Kind of like naming a cat. Why bother? It's not going to answer to it or anything). But here's where it all starts to make sense. Because each of our frames has been named, we can create links in one region that will load a document into another (which we will specify by name. Is it starting to come clear?).
Now this will come in handy for my Dad. See, Dad doesn't believe in boundaries between food. He likes to mush things together, dipping his chicken into the pasta salad, his corn into the barbecue sauce, and so forth.
So, just for Dad, we're going to work some dipping functions into our HTML document. Let's say we want to add a link to the chicken section, which will dip some chicken into the pasta salad section.
To do this, we'd create a link within chicken.html that looks like this:
<a href="chicken.html" target="pastasalad">Dip!</a>
This will load the document "chicken.html" into the frame named "pastasalad," creating a page that looks like this.
![[2]](stuff/2.gif)
Now, of course, you can link to any file you want; it doesn't have to be one of the ones already in use on the page. So, for example, let's say you've had just about enough of the gnarly pasta salad, when who should come wandering over but Jack, the neighbor's Newfoundland (or maybe he's a Chesapeake Bay) retriever ... well, he's some kind of location dog. Anyway, so Jack comes running over, and Jack fetches rocks and climbs ladders — he's not what you'd call a smart dog — which makes him a perfect candidate for my mother's pasta salad.
So instead of using the link in chicken.html to dip my chicken into the pasta salad, I'll change the link to bring in a new page, jack.html.
The new link within chicken.html will look like this:
<a href="jack.html" target="pastasalad">Hey, Jack!</a>
So now Jack will do away with the troublesome pasta salad:
![[3]](stuff/3.gif)
Be careful, though. If you don't specify a target frame, the new document will automatically load into the frame that contains the link. And Jack would get your chicken, instead of the salad.
But what happens if you want a to load your document into a page without any frames? No problem.
next page»
