Web Tutor - Frames

	Sign In Sign-Up

HTML Studio's

Lesson : 1 - 2 - 3 - 4 - 5 - 6 - 7

Frames Tutor - Lesson 3

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

<FRAMESET COLS="50%,50%">
  <FRAME SRC="lisa.html">
  <FRAME SRC="terri.html">
</FRAMESET>

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

<FRAMESET COLS="50%,50%">
  <FRAME SRC="world.gif" WIDTH=146 HEIGHT=162>
  <FRAME SRC="terri.html">
</FRAMESET>

Remember it is always good practice to include HEIGHT & WIDTH attributes for any image tag.

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

<FRAMESET COLS="146,*">
  <FRAME SRC="world.gif" WIDTH=146 HEIGHT=162>
  <FRAME SRC="terri.html">
</FRAMESET>

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.

<FRAMESET COLS="146,*">
  <FRAMESET ROWS="162,*">
    <FRAME SRC="world.gif" WIDTH=146 HEIGHT=162>
    <FRAME SRC="lisa.html">
  </FRAMESET>
  <FRAME SRC="terri.html">
</FRAMESET>

The scrollbars that you see can be specified as YES, NO or AUTO. YES means the window gets scrollbars - whether they're needed or not. NO means there will be no scrollbars, even if your frame contents are as big as New Jersey... the browser will simply display as much as it can. AUTO is the default. If scrollbars are needed, they appear, if they are not needed they stay convienently out of the way. Let's get rid of our scrollbars.

<FRAMESET COLS="146,*">
  <FRAMESET ROWS="162,*">
    <FRAME SRC="world.gif" WIDTH=146 HEIGHT=162 SCROLLING=NO>
    <FRAME SRC="lisa.html">
  </FRAMESET>
  <FRAME SRC="terri.html">
</FRAMESET>

Keep in mind, that you should be very careful about turning off the scrollbars. I see many many pages where this was done, and the author never bothered to see how those frames looked at other resolutions or font sizes. Well, for some visitors, the bottoms of all the frames are chopped off and there's no way to see the rest of that frame. Mess with the scrolling only when absolutely necessary and know what it's going to look like at different resolutions.

Ok. Back to framing. We still have a problem. The image is not in the frame right. The next two attributes deal with margins. The browser automatically gives each frame some empty space around its contents. This is normally necessary for asthetics. You can control the size of these margins by using MARGINWIDTH and MARGINHEIGHT. They control the left & right and top & bottom margins respectively. We will set them both to 1. (1 is the minimum)

<FRAMESET COLS="146,*">
  <FRAMESET ROWS="162,*">
    <FRAME SRC="world.gif" WIDTH=146 HEIGHT=162 SCROLLING=NO MARGINWIDTH=1 MARGINHEIGHT=1>
    <FRAME SRC="lisa.html">
  </FRAMESET>
  <FRAME SRC="terri.html">
</FRAMESET>

Unfortunately that still doesn't quite do it. The frame dimensions are (often) measured center to center.

There is also that minimum border of 1 to deal with. Since the default border size is normally about 6 pixels, we have to add 8 to each image dimension (half of 6, plus 1, times 2). If that's confusing, just add 8 to each image dimension to get your window size.

<FRAMESET COLS="154,*">
  <FRAMESET ROWS="170,*">
    <FRAME SRC="world.gif" WIDTH=146 HEIGHT=162 SCROLLING=NO MARGINWIDTH=1 MARGINHEIGHT=1>
    <FRAME SRC="lisa.html">
  </FRAMESET>
  <FRAME SRC="terri.html">
</FRAMESET>

< Back Next >

Lesson : 1 - 2 - 3 - 4 - 5 - 6 - 7

Maintained by Nick Grant < htmlstudio@talk21.com >

HTML Studio's Main Page