Frames are a simple concept and simple to do, but there are a few tricks to make them look & work right. Many people don't like frames, becuase they take a longer time to load and many people don't know how to use them correctly. Using frames should be a benifet to your viewers not a pain. Here is a quick overview:

1. Create a html page that defines your frames, usually your first page (index.html).
2. Define the number of frames, color, border, name & attribues of each frame using the HTML tags outlined below..
3. Create each sepertate HTML page that will go inside of your frames page.

The Code:

• Your HTML code for frames needs to be inside of your HEADer tags, not your BODY tag. Here is the HTML for a simple two frame layout:

  <FRAMESET cols="*,140">
  <FRAME SRC="homepage.htm" NAME="Frame1">
  <FRAME SRC="menu.htm" NAME="Frame2">
  </FRAMESET>
  
  <FRAMESET> starts the frame, you must end this with a </FRAMESET>. Here you define how many ROWS or COLS that you want. You also define the size of the frames. There are three ways to do this.
  

  • by pixels - just type in the number of pixles that you want the frame to be.
    by percentage - type in the percentage of relative screen size. Make sure that all your %'s = 100%
    wild card - All of the extra space left over can be summed up by the asterisk *. For example, you can type 20%,20%,60% or type 20%,20%,*
    

  <FRAME> defines the attribues of each frame. It specifies the NAME of the frame, the html file to call for, and any other attribues for that frame that may be differnt than the default.

  The NAME is important. This is name that you will use in your links (HREF) to specify what frame to point to. I will give you an example:

  • 
    Lets say you have a simple frames layout with two columns and you have several buttons in your first frame. By clicking on these buttons, you want the linked page to appear in the second column. So, in your 1st html page you add a link such as: <A HREF="products.html" TARGET="Frame2"&gtProducts</A>

    By putting TARGET="_top" in a link, it will place the link in a fresh new page (Breaks the farmes).

  If you would like borderless frames, insert this inside of your FRAMESET tag: FRAMEBORDER="no" BORDER=0

  If you are totally confused by now, look at the examples below. The icon to the left represents your screen, and the text to the right is what you would have to type in to make that type of frame. Remember any of the numbers, names & html files can be modified.

  <FRAMESET cols="*,140"> <FRAME SRC="homepage.htm" NAME="Frame1"> <FRAME SRC="menu.htm" NAME="Frame2"> </FRAMESET> <FRAMESET cols="100,*"> <FRAME SRC="homepage.htm" NAME="Frame1"> <FRAME SRC="menu.htm" NAME="Frame2"> </FRAMESET> <FRAMESET rows="100,*"> <FRAME SRC="homepage.htm" NAME="Frame1"> <FRAME SRC="menu.htm" NAME="Frame2"> </FRAMESET> <FRAMESET rows="*,60"> <FRAME SRC="homepage.htm" NAME="Frame1"> <FRAME SRC="menu.htm" NAME="Frame2"> </FRAMESET> <FRAMESET rows="*,60"> <FRAME SRC="homepage.htm" NAME="Frame1"> <FRAMESET cols="50%,50%"> <FRAME SRC="menu.htm" NAME="Frame2"> <FRAME SRC="menu2.htm" NAME="Frame3"> </FRAMESET></FRAMESET> <FRAMESET cols="*,50%"> <FRAME SRC="homepage.htm" NAME="Frame1"> <FRAMESET rows="15%,15%,70%"> <FRAME SRC="menu.htm" NAME="Frame2"> <FRAME SRC="menu2.htm" NAME="Frame3"> <FRAME SRC="menu3.htm" NAME="Frame4"> </FRAMESET></FRAMESET> <FRAMESET cols="50%,50%"> <FRAMESET rows="50%,50%"> <FRAME SRC="homepage.htm" NAME="Frame1"> <FRAME SRC="homepage2.htm" NAME="Frame2"> </FRAMESET> <FRAMESET rows="50%,50%"> <FRAME SRC="menu.htm" NAME="Frame3"> <FRAME SRC="menu2.htm" NAME="Frame4"> </FRAMESET></FRAMESET> <FRAMESET rows="15%,70%,15%"> <FRAME SRC="homepage.htm" NAME="Frame1"> <FRAMESET cols="15%,70%,15%"> <FRAME SRC="menu.htm" NAME="Frame2"> <FRAME SRC="menu2.htm" NAME="Frame3"> <FRAME SRC="menu3.htm" NAME="Frame4"> </FRAMESET> <FRAME SRC="homepage.htm" NAME="BIG"> </FRAMESET></FRAMESET>

  
  
  With all of these examples you should figure it out pretty fast. You just have to experiment until you get what you want.