Home

Web 1

Web 2

Web 3

Web 4

Web 5

Web 6

Doo-dads

META Tags

Backgrounds

Pictures

Definitions

Links

 

Web 6 - Frames

By the end of this exercise you should have:

  • 1 FRAMESET page
  • 1 outline sub-page
  • 1 default sub-page (picture or summary) for the left-hand frame
  • A sub-page for EACH main point on your outline  (~12 pages)
  • Graphics and/or charts sub-pages for MOST of you main points (actual graphics not yet necessary; just make a page to receive them once you have them
  • a specified TARGET frame or window for all sub-pages

Be sure to look at My Sample for tips

What Are Frames?

Frames subdivide your page so that you can exhibit multiple webpages on the screen at once.  They are generally used to enhance organization and navigation.

A frames page usually consists of 3 pages:  the FRAMESET page, which is a sort of vessel or format into which other html pages can be inserted, and the 2 other html pages that appear in each respective frame.

Thus, I could have a FRAMESET page called "home.htm" which, when opened, would display 2 other pages:  one called "Contents.htm" and the other called "Gallery.htm"

New pages can be opened within the FRAMESET by clicking on the links in the Contents and Gallery pages.  You, the webbie, determine into which the new pages open, or if they open in a new window altogether.

For a presentation website, one might use 1 frame for the outline (or a series of pieces of the outline) and the other frame to display pages linked to the outline that contain more detailed text, data, or images.

If you want people to read your information in a linear (essay-like) fashion, be sure to indicate the sequence of readings clearly.

How to do it

Below is a sample FRAMESET page called "proposal.htm".  It references two other pages, called "outline.htm" and "summary.htm".

<HTML>

<HEAD>

<TITLE> Sample Frame Page </TITLE>

</HEAD>

<FRAMESET cols="50%, 50%">

<FRAME name="left" src="outline.htm">

<FRAME name="right" src="summary.htm">

</FRAMESET>

</HTML>
  1. To make your own Frames page, create the 1st (<FRAMESET>) of 3 documents.  The FRAMESET document should look like the one above.

    DO NOT use a <BODY> tag on a FRAMESET page - use the <FRAMESET> tag instead.
  2. Set the cols attribute in your <FRAMESET> tag

    The cols="_%,_%" attribute lets your set the number of columns on your page and what percent of the page they will take up.  These should add up to 100%.  More than 2 frames is STRONGLY discouraged.  (NOTE:  you may use as "row="_%,_%" attribute instead if you wish to divide your page horizontally rather than vertically)

  3. Insert 1 <FRAME> tag and give it a name using the "name" attribute ("left" or "right" or "1" or "2," for example)

    The first <FRAME> tag calls up outline.htm into the left-hand column.  The "name" attribute allows you to name the space into which outline & other html pages may be called.

  4. Insert a 2nd <FRAME> tag and give it a name using the "name" attribute ("left" or "right" or "1" or "2," for example)

    The second <FRAME> tag calls summary.htm into the right-hand column

  5. Make the outline.htm document.  The contents should be a rough outline of what you will be proposing for your final project.

  6. Make the summary.htm document, summarizing the content of your proposal.

  7. Load all three onto your server - be sure they are all in the same folder.  When you open proposal.htm, the two pages should appear.  See my sample if you need help.

Targets

The last skill you need to know to put your frame in action is to target all of the links in your aubpages (outline.htm and summary.htm).  Within each hyperlink, identify into which frame you would like the page to appear.  Use the name that you assigned to each frame (like "left" or "right") for this purpose.

For example

<A HREF="summary.htm" target="right">Summary</A>

If you would like your link to open in a brand-new window (leaving the FRAMESET window open underneath),  insert 

target="_blank"

into the HREF tag:

<A HREF="summary.htm" target="_blank">Summary</A>

If you want all of your pages to open in a particular frame, insert the following code into your head:

<BASE href="complete URL of your FRAMESET page" target="right">

In context of the page's head, and using a sample URL, this will look like:

<HTML>
<HEAD>
<TITLE> Mel's Page </TITLE>
<BASE href="http://www.cwrl.utexas.edu/~ulrich/RHE306fall01/GalactiWebBuilding/Framesample/sampleframe.htm" target="right">
</HEAD>

<BODY>
...

Create new pages of 1 -2 paragraphs each for each point in your outline.

You may also include links to graphics and statistics on your outline, and have them appear in the right-hand window.  I encourage you to try this. 

Worry about the content later - today just set up the structure of your page.