Frames Tutorial

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

    1. Create an html page that defines your frames, usually your first page (index.html).
    2. Define the number of frames, color, border, name, and attributes of each frame using the HTML tags outlined below.
    3. Create each separate 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 pixels that you want the frame to be.
      by percentage - type in the percentage of relative screen size. Make sure that all your percentages = a total of 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 attributes of each frame. It specifies the NAME of the frame, the html file to call for, and any other attributes for that frame that may be different than the default.

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


    • Let's 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 first html page, you add a link such as: <A HREF="products.html" TARGET="Frame2">Products</A>

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

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

    If you are totally confused 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, and html files can be modified.

       


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