Let's go back to something a wee bit simpler.

<frameset cols="50%,50%">
  <frame src="lisa.html">
  <frame src="terri.html">
</frameset>

VIEW IT

We can put pictures in the frames if we want to. Grab the picture above and save it into your working folder as world.gif. (Right click and choose Save Picture As...)

Then replace lisa.html with world.gif...

<frameset cols="50%,50%">
  <frame src="world.gif">
  <frame src="terri.html">
</frameset>

VIEW IT

Let's try to frame the picture nice and neat. First shrink the left frame to 146 pixels wide (the width of the image). Since we are using an absolute dimension, we should make the other frame elastic.

<frameset cols="146,*">
  <frame src="world.gif">
  <frame src="terri.html">
</frameset>

VIEW IT

Next we will divide the left frame horizontally into 2 sections. The top section to be 162 pixels high and the bottom section to be whatever is left over. We will put in world.gif and Lisa respectively. (Again, we get the numbers 146 and 162 from the image. The image is 146 pixels wide by 162 pixels high.)

<frameset cols="146,*">
  <frameset rows="162,*">
    <frame src="world.gif">
    <frame src="lisa.html">
  </frameset>
  <frame src="terri.html">
</frameset>

VIEW IT

As you can see, we have a bit of a problem.

Frames Tutor

Lessons: Intro 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

Frames Templates      HTML 4.0 Reference      Barebones HTML Guide