Frames

Frames are very useful for producing web pages that are easy to navigate. However, they are a bit complex to develop. With a set of templates, this is much easier. The basic layout is that you use a set of individual HTML documents to generate the frame set. The first HTML document specifies how the window will be divided (horizontal or vertical) and the number and size of each frame. This first document then specifies the name of the document to place in each frame. Frames may be nested and linked in a variety of ways to provide very useful navigation features. The best way to learn how this can be useful is to look at some frame sites. This is also a good way to learn how frames can cause problems.

Basic Tags.

  1. Base Target. This tag provides a default link to place new documents in the "top" window. Without this, you may accidently create nested frames. This tag should be included in any HTML page used with frames.
    2. <base target=_top>

  2. The following HTML generates a page with two horizontal frames. Top frame is 30% of area and displays file "header.html". Bottom frame is 70% and displays file "about.html".

    3. <FRAMESET ROWS=30,70>
    <FRAME SRC="header.html" NAME=Top>
    <FRAME SRC="bottom.html" NAME=Bottom>
    </FRAMESET>

  3. The following HTML generate a page with two vertical frames. Left frame is 100 points wide, right frame fills remaining space.

    4. <FRAMESET COLS=100,*>
    <FRAME SRC="left.html" NAME=left>
    <FRAME SRC="right.html" NAME=right>
    </FRAMESET>

  4. No Frames. These tags are for browsers that do not support frames. Any information between these tags is ignored by a frames capable browser. Use these to provide access to users without new browsers.

    5. <NOFRAMES> </NOFRAMES>

Frames Templates

These HTML documents may be used as a templates to develop a set of frames. Copy and paste the HTML code from the table below into an HTML editor for use. You can click on the link to see how it works, and you can right click on the link to save the file.
  1. Horizontal Frame Set
    1. Main. This file sets up the frames.

      2. <title>Template for a set of horizontal frames</title>

      <!-- Sets default target for any link to the "_top" window. Any link without a specified target will load into the full window. This prevents accidental nesting of frames -->

      <base target=_top>

      <FRAMESET ROWS=30,70>

      <!-- Define the frameset. As rows dividing the available space 30:70. Changing these numbers will change the relative size of the frame. You may specify more than two rows. -->

      <!-- Defining the document to place in each of the frames. The NAME, defines the name of the frame for future reference. -->

      <FRAME SRC="top.html" NAME=Top>

      <FRAME SRC="bottom_1.html" NAME="Bottom">

      </FRAMESET>



      <!-- The NOFRAMES part of the document is ignored by frames capable browsers. Browsers that can not view frames will see any information in this tag. Use this to provide access to users with old browsers. -->

      <NOFRAMES>

      This document is designed to view with a frames capable browser. If you see this, you should seriously consider upgrading your web browser. You may view the individual frames using the links below.

      <ul>

      <li><A HREF="top.html">Link to top frame</A>

      <li><A HREF="bottom.html">Link to bottom frame</A>

      </ul>

      </NOFRAMES>

    2. Top. This file is placed in the top frame.

      3. <title>Contents of Top Frame</title>

      <base target=_top>

      <H2 ALIGN=center>Contents of Top Frame</H2>

      This HTML document may be designed like any other HTML document. It is displayed in the top frame. It is possible to update other frames using links to new documents or to specific locations in the current document. Like Bottom Document 1, spot <A HREF="bottom_1.html#A" TARGET="Bottom">A</A> or <A HREF="bottom_1.html#B" TARGET="Bottom">B</A>. Or you can load a different document in the bottom Like Document <A HREF="bottom_2.html" TARGET="Bottom">Bottom 2</A>

    3. Bottom 1. This file is placed in the bottom frame.

      4. <title>This is the HTML document for the bottom frame</title>

      <base target=_top>



      <H3>This is the HTML document for the bottom frame</H3>

      This document may contain any HTML code. It is displayed in the bottom frame.<P>

      You may specify names for different locations in the document.<P>



      For example this is spot <A NAME="A">A</A> <BR><BR><BR><BR><BR><BR> <BR><BR><BR><BR><BR><BR> <BR><BR><BR><BR><BR><BR> <BR><BR><BR><BR><BR><BR> <BR><BR><BR><BR><BR><BR> <BR><BR><BR><BR>

      This is part <A NAME="B">B</A> (it is located further down the page)

    4. Bottom 2. This file may be placed in the bottom frame with the appropriate link from the top.

      5. <title>This is the HTML document for the bottom frame</title>

      <base target=_top>



      <H3>This is a different HTML document that is loaded in the bottom frame</H3>

  2. Vertical
    1. Main

      2. <title>bottom frame</title>

      <base target=_top>

      <FRAMESET COLS=400,*>

      <FRAME SRC="left.html" NAME=Left>

      <FRAME SRC="right.html" NAME=Right>

      </FRAMESET>

    2. Left

      3. <title>Contents</title>

      <base target=_top>



      This HTML document may be designed like any other HTML document. It is displayed in the left frame. It is possible to update other frames using links to new documents or to specific locations in the current document. Like Right document, spot <A HREF="right.html#A" TARGET="Right">A</A> or <A HREF="right.html#B" TARGET="Right">B</A>.

    3. Right

      4. <HTML>

      <HEAD>

      <TITLE>1</TITLE>

      </HEAD>

      <BODY>

      This document is displayed in the right frame.

      <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR>

      This is location <A NAME="A">A</A>

      <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR>

      <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR>

      <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR>

      This is location <A NAME="B">B</A>

      </BODY>

      </HTML>

Additional Information

  1. Frames Tutorial If you are really getting into this, learn about one of the latest HTML features and make really fancy pages. Note this is a Netscape extension that is not supported by all browsers. It has some significant advantages, but it is not easy and there are many pitfalls.

  2. HTML 4.1 Specifications, Frames. These are the standards for Tables based upon HTML 4.1. It details all the tags and variables that may be used. Other tags may be browser specific and may not display properly on all browsers.
  3. Generating Frames. The easiest way to generate frames is by using a set of templates. To get frames to do what you want, you will probably need to edit some HTML code by hand.

This page is maintained by
Scott Van Bramer
Department of Chemistry
Widener University
Chester, PA 19013

Please send any comments, corrections, or suggestions to svanbram@science.widener.edu.

This page has been accessed times since 1/1/97.
Last Updated Tuesday, September 10, 2002 11:42:50 AM