| Frames Tutor - 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 gonna get confused.
<FRAMESET COLS="20%,20%,20%,20%,20%"> <FRAME SRC="lisa.html"> <FRAME SRC="terri.html"> <FRAME SRC="kim.html"> <FRAME SRC="tina.html"> <FRAME SRC="shannon.html"> </FRAMESET>VIEW IT
By the way, if hitting the Reload button is not quite resetting everything, hit the Reload button while holding down the SHIFT key.
It's pretty obvious that we can make the frames all differents 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="lisa.html"> <FRAME SRC="terri.html"> <FRAME SRC="kim.html"> <FRAME SRC="tina.html"> <FRAME SRC="shannon.html"> </FRAMESET>
<FRAMESET ROWS="10%,20%,30%,15%,25%"> <FRAME SRC="lisa.html"> <FRAME SRC="terri.html"> <FRAME SRC="kim.html"> <FRAME SRC="tina.html"> <FRAME SRC="shannon.html"> </FRAMESET>
Let's go back down to 2 frames, divided equally into columns.
<FRAMESET COLS="50%,50%"> <FRAME SRC="lisa.html"> <FRAME SRC="terri.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="lisa.html"> <FRAME SRC="terri.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 dandy... to you. My screen is set at 640x480. Those 100 pixel wide frames you put in your page are now 80 pixels wide on my 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 dandy 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,*">). Bingo. Problem solved.
It's good idea to make that absolute dimension just a wee 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 snug 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 nifty 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="lisa.html"> <FRAME SRC="terri.html"> <FRAME SRC="kim.html"> </FRAMESET>VIEW IT
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 Lisa in the first frame, Terri in the second and Kim 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/lisa) and the second with the second (*/terri) and the third with the third (2*/kim). 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 kim 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 Kim with a <FRAMESET> tag pair.
<FRAMESET COLS="50,*,2*"> <FRAME SRC="lisa.html"> <FRAME SRC="terri.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 Lisa in the first frame, Terri 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="lisa.html"> <FRAME SRC="terri.html"> <FRAMESET ROWS="50%,50%"> </FRAMESET> </FRAMESET>
And I think we'll put Kim back in on the top and Tina on the bottom. And that's that.
<FRAMESET COLS="50,*,2*">
<FRAME SRC="lisa.html">
<FRAME SRC="terri.html">
<FRAMESET ROWS="50%,50%">
<FRAME SRC="kim.html">
<FRAME SRC="tina.html">
</FRAMESET>
</FRAMESET>
That was so much fun I think we'll do it again! Let's divide Lisa horizontally into 3 sections. The top window needs to be 50 pixels high. The other two can be split equally. We will put Lisa into all three. Here are all the changes in one big chunk.
<FRAMESET COLS="50,*,2*">
<FRAMESET ROWS="50,*,*">
<FRAME SRC="lisa.html">
<FRAME SRC="lisa.html">
<FRAME SRC="lisa.html">
</FRAMESET>
<FRAME SRC="terri.html">
<FRAMESET ROWS="50%,50%">
<FRAME SRC="kim.html">
<FRAME SRC="tina.html">
</FRAMESET>
</FRAMESET>
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 minority that's surfing the web with outdated or special equipment. If you would like to help these folks out you can write a non frames version of your main page and add it within the main <FRAMESET> tag pair thusly...
<FRAMESET COLS="50,*,2*">
<FRAMESET ROWS="50,*,*">
<FRAME SRC="lisa.html">
<FRAME SRC="lisa.html">
<FRAME SRC="lisa.html">
</FRAMESET>
<FRAME SRC="terri.html">
<FRAMESET ROWS="50%,50%">
<FRAME SRC="kim.html">
<FRAME SRC="tina.html">
</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 nuther page? Probably.
* How many people will be missing my page if I don't do this? Very few.
* Do you think I should worry about it? Nope.
* Do you worry about it? Nope.
* 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>
</FRAMESET>
| 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 handicapped's screen readers have a really hard time with frames. And those outside the US are often left out of framed pages for various reasons. 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 Matthew Miller, of the HTML Writers Guild for pointing this out. |
| ||||||||