Lesson 2

The <FRAMESET> tag does all the dividing. That's all it does... divide up windows. It specifies a few things regarding how to divide them up, but remember, whenever you want to do some dividing- use <FRAMESET>.
Can we divide it into more than 2 pieces? Yes, just make sure that you specify a page for each section or the browser's going to get confused.

<FRAMESET COLS="20%,20%,20%,20%,20%">
  <FRAME SRC="shameem.html">
  <FRAME SRC="sharf.html">
  <FRAME SRC="nows.html">
  <FRAME SRC="kassim.html">
  <FRAME SRC="sultan.html">
</FRAMESET>

VIEW IT

It's pretty obvious that we can make the frames all different sizes. Just make sure your arithmetic is correct or the browser will come up with its own interpretation.

<FRAMESET COLS="10%,20%,30%,15%,25%">
  <FRAME SRC="shameem.html">
  <FRAME SRC="sharf.html">
  <FRAME SRC="nows.html">
  <FRAME SRC="kassim.html">
  <FRAME SRC="sultan.html">
</FRAMESET>

VIEW IT

If we specify dividing into ROWS instead of COLS we get something else entirely.

<FRAMESET ROWS="10%,20%,30%,15%,25%">
  <FRAME SRC="shameem.html">
  <FRAME SRC="sharf.html">
  <FRAME SRC="nows.html">
  <FRAME SRC="kassim.html">
  <FRAME SRC="sultan.html">
</FRAMESET>

VIEW IT

Let's go back down to 2 frames, divided equally into columns.

<FRAMESET COLS="50%,50%">
  <FRAME SRC="shameem.html">
  <FRAME SRC="sharf.html">
</FRAMESET>

We can specify 50 pixels instead of 50%. And, we can use * instead of a number. The * means whatever is left over.

<FRAMESET COLS="50,*">
  <FRAME SRC="shameem.html">
  <FRAME SRC="sharf.html">
</FRAMESET>

Here is an important point.. Let's suppose that you make a frame 100 pixels wide on the left, and 100 pixels wide on the right. Since you are running an 800x600 screen you make the 3rd and middle area 600 pixels wide. Everything looks just good... to you. If anyone's screen is set at 640x480. Those 100 pixel wide frames you put in your page are now 80 pixels wide on their screen. If you use any absolute dimensions in your <FRAMESET> tags ALWAYS have at least one * as an elastic frame. That way everything will look good to everyone and there will be peace across the land once again.

This is the cause of a common problem with frames that I want to take the time to draw extra attention to. A popular frame layout is a narrow directory window on the left and a larger main window on the right like so. Here's the problem... If you divide up the windows using percentages (such as <FRAMESET COLS="15%,85%">) everything will probably look just nice to you. But... to someone with a different screen resolution it might look like this.

The reason this happens is because you have specified that the left window should be 15%. 15% of what? 15% of whatever their horizontal screen resolution is. That means that that left window might look a little different to different people. How to fix you say? Glad you asked... Just use an absolute dimension for the left window and make the right window elastic (such as <FRAMESET COLS="120,*">). Wow! Problem solved.

It's good idea to make that absolute dimension just a bigger than it needs to be. Give the stuff in that left window a little breathing room. For example, if 100 pixels gives a good but fit... make the window 120 or 125 pixels.

A good and painless way to check your layout at a couple different screen resolutions is with a little MS PowerToy called Quickres.

We can have more than one leftover frame and specify a size relationship between them.

<FRAMESET COLS="50,*,2*">
  <FRAME SRC="shameem.html">
  <FRAME SRC="sharf.html">
  <FRAME SRC="nows.html">
</FRAMESET>

Translated this says: Make 3 frames. Make the first 50 pixels wide. The rest divide between frames 2 and 3 but make frame 3 twice as big as frame 2. Put Shameem in the first frame, Sharf in the second and Nows in the third.

It is important to note that everything is done in order. The first <FRAME> is displayed according to the first size attribute in the <FRAMESET> tag (50/shameem) and the second with the second (*/sharf) and the third with the third (2*/nows). I know that this may be mind-numbingly obvious, but it is very important and I wanted to draw extra attention to it.

What if we want to divide nows in half horizontally? Remember that I said that if you want to do any dividing you must use the <FRAMESET> tag. First we must replace Nows with a <FRAMESET> tag pair.

<FRAMESET COLS="50,*,2*">
  <FRAME SRC="shameem.html">
  <FRAME SRC="sharf.html">
  <FRAMESET>
  </FRAMESET>
</FRAMESET>

At this point we have told the browser: Make 3 frames. Make the first 50 pixels wide. The rest divide between frames 2 and 3 but make frame 3 twice as big as frame 2. Put Shameem in the first frame, Sharf in the second and the third frame we are going to divide further. Now we have to specify how to divide up that third frame.

We were going to divide it in half horizontally.

<FRAMESET COLS="50,*,2*">
  <FRAME SRC="shameem.html">
  <FRAME SRC="sharf.html">
  <FRAMESET ROWS="50%,50%">
  </FRAMESET>
</FRAMESET>

And I think we'll put Nows back in on the top and Kassim on the bottom. And that's that.

<FRAMESET COLS="50,*,2*">
  <FRAME SRC="shameem.html">
  <FRAME SRC="sharf.html">
  <FRAMESET ROWS="50%,50%">
    <FRAME SRC="nows.html">
    <FRAME SRC="kassim.html">
  </FRAMESET>
</FRAMESET>

That was so much fun I think we'll do it again! Let's divide Shameem horizontally into 3 sections. The top window needs to be 50 pixels high. The other two can be split equally. We will put Shameem into all three. Here are all the changes.

<FRAMESET COLS="50,*,2*">
  <FRAMESET ROWS="50,*,*">
    <FRAME SRC="shameem.html">
    <FRAME SRC="shameem.html">
    <FRAME SRC="shameem.html">
  </FRAMESET>
  <FRAME SRC="sharf.html">
  <FRAMESET ROWS="50%,50%">
    <FRAME SRC="nows.html">
    <FRAME SRC="kassim.html">
  </FRAMESET>
</FRAMESET>

VIEW IT
I know it doesn't look like much. Actually if a page was divided up that much it would look pretty crappy. A good rule of thumb is don't have more than 3 frames on your page. If you can avoid them altogether, that's even better.

Now's also a good time to think about the poor folks that are using non frames capable browsers. Although most, if not all of your visitors will be able to see frames, there is a helpless minority that's trying to peruse the web with outdated equipment. If you would like to help these folks out you can write a non frames version of your main page and add it...

<FRAMESET COLS="50,*,2*">
  <FRAMESET ROWS="50,*,*">
    <FRAME SRC="shameem.html">
    <FRAME SRC="shameem.html">
    <FRAME SRC="shameem.html">
  </FRAMESET>
  <FRAME SRC="sharf.html">
  <FRAMESET ROWS="50%,50%">
    <FRAME SRC="nows.html">
    <FRAME SRC="kassim.html">
  </FRAMESET>
</FRAMESET>
<NOFRAMES>
<BODY>
Put your non-frames page down here. If someone is using an old
browser, it will skip everything above and come straight
down here. Frames-capable browsers will ignore what is between
the <NOFRAMES> tags. You may be asking a couple questions right now.
Do I have to write a whole page?
How many people will be missing my page if I don't do this? Very few.
Do you think I should worry about it? No.
Do you worry about it? No.
Why did you put it in this tutorial? Because it's a major feature
and I wanted you to at least know about it.
Are you always this witty and charming? Of course.
</BODY>
</NOFRAMES>

Note- My personal opinion aside, there is a strong argument for using the <NOFRAMES> tag. Quite a few businesses are still using older, non-frames capable browsers. The handicapper's screen readers have a really hard time with frames.  The bottom line is, if your page is "frames only" you will be cutting off some people. If it is important to you to reach everyone, then take the time to use the <NOFRAMES> tag. -----My thanks to few of my friends  for pointing this out.