Frames

Section 1 - Introduction
Section 2 - Basics
Section 3 - Next Level
Section 4 - Advanced
      Fancy Lists
      Forms
      Advanced Tables
      Frames
         About frames
         Frameset
         Frame source & name
         Nesting Frames
         Target & Noframes
         Frameset borders, etc.
         Scrolling & Resizing
         Margin width, borders
         IFrame
         Should you? Try it
      Style Sheets
      Image Maps
Section 5 - Publishing
Section 6 - Extras
Appendices

Now that you've seen the simplest of framed pages, it's time to learn how to make a more complex page. Suppose you wanted to make the page with the following frames:

Well, so far you've only learned to make frames with either rows or columns, but not both. How is this problem solved?

By putting framesets within framesets.

That's right, frames within frames is how to get a page divided up exactly the way you want it. Let's look at the picture above. If I wanted to make a page that looked like this, I would first try to divide it into two sections. You may notice a horizontal line spanning the page. Just measuring it with the eye, it looks like it takes up about 15% of the page. So, the first thing I would do is to make a frameset like this:

So far, so good. Instead of putting frames inside, I"m going to put more framesets. Look at the top section. It looks like the first horizontal area covers about 80% of the top, while the little square at the right is about 20% of the width. Here's how I'd make that designation:

And, of course, you need to put something into that frameset for the top half of the page. Let's try it again with "cool" and "fuzzy."

Well, that takes care of the top frame. Now we do the same with the bottom frame. Looking at the bottom frame, there is a stripe on the left that looks like it's about 20% of the page, and then the main section. We'll add another frameset to the bottom area to make two frames there. Let's fill the frames with pages called "framesblank.html" and "wuzzy.html." If these frames were by themselves, we'd have:

Finally, we put all this mess together into one document. Here's what the code looks like:

And this code would make the page you can get to by following this link. Note that each frame has a different name. That's very important.