FRAMES TUTORIAL

At one time, frames were a very popular design tool for web pages, however many people misused them and they are now generally disliked by most web surfers. Search engines also have a problem indexing pages using frames.

Tables have now taken the place of frames and for the most part they are no longer needed. However, they can still be useful in some design situations.
 

The basic layout for a frames page is quite simple. You have a main page that controls the frames (index.html normally) and a separate page for each frame. Only the index or control page actually tells the frames how to act, so this is the only page we will be discussing in this section of the Tutorial.

Frames come in two different styles, column (cols) and rows (rows). You can combine any number of column and rows to achieve a desired effect.

The basic layout:

<frameset cols="18%,82%">
<frame src="left.htm">
<frame src="right.html">
<noframes>
Content for people with old, no frame browsers can go here.
</noframes>

As you most likely noticed, this code creates 2 very simple columns (to make rows, just change cols to rows). We will now add some variables to the frames in order to make them look and function better.

variables:

<frameset .... >

• cols="x,y" this creates column for the frames
• rows="x,y" this creates rows for the frames
• framespacing="0" this spaces the frames from each other
  
• frameborder="0" this determines the border for the frames
  
• border="0" this also determines the border for the frames
  

• marginwidth="0" this sets the margin width for the frames (any number works)
• marginheight="0" this sets the margin height for the frames (any number works)
• name="name-here" this works for targeting (talked about later)
• scrolling="no" this tells the browser to allow scrolling or not (yes/no/auto)
• noresize this tells the browser not to allow a frame to be re-sizeable by the user (optional)

• Note how we close the <frameset> tag last. Remember to close it or Netscape won't see your frames!

By combining many different elements of frames and rows/column, you can create some amazing layouts.
 

Now, we will explain targeting, a function which is possibly the most used yet most misunderstood aspect of frames design.

As you read before, one of the variables for the <frame> tag is name="name-here". This is part of targeting. A function that allows the webmaster to direct where a page should load (which frame). To use targeting, give each frame a name. Once you have done this, you are ready to target. The trick to targeting is simply entering the correct name in the link. For instance, if you had a page with a right frame (name="right") and a left frame (name="left"), and you wanted to have a link from the left frame open in the right frame, you would add target="right" to the link. So now, the link looks like <a href="url" target="right"> click me </a>. Of course, you can do much more complex targeting if you want, such as having a link open in multiple frames at once. 

Besides targeting from one frame to another, you can target to a new page and more. Below are some common targets.

• target="_new" open the page in a new window, but only once
• target="_blank" opens the page in a new window, every time
• target="_top" opens the page in the same window, but erases all current frames

Return to the main index