Exercise - Frames


Frames divide a single browser window into multiple, independent regions, each of which can display a different HTML document. You begin by created FRAMESET document, which sets up the "layout" by establishing the number of frames, their position and other characteristics.

This frameset document is structural only and does not contain any of the content that will appear on the final web page. It does however, specify a URL reference for each frame, which will be the HTML document, or "normal" web page that will be displayed within it.

Hyperlinks in one frame can update the contents of another frame through the use of the TARGET attribute.

Frames are controversial, however. Like many other web elements, such as background graphics, animations, and font colors, they can be poorly handled and often irritating, so give it some careful thought before you use them.

Advantages of Frames

1. They allow parts of the screen to remain static while other parts scroll. This can be useful for navigation menus or logos that you don't want to scroll off the screen.

2. They can be handy when you want the user to be able to view a number of images chosen from a long list. See example.

2. You can introduce material from different servers on the same page, simply by assigning the appropriate URL's.

Disadvantages of Frames

1. Navigating through a framed site can be challenging for many users, as the forward and back buttons do not work as expected.

2. Bookmarking a framed site is difficult, as only the top level document is noted. Users have the ability to work around this by opening the frame of interest in a new window and bookmarking it, but they may not aware of that.

3. Since a framed page is loading more than one URL, it may load more slowly, particularly if calling upon different servers.

4. Frames present problems for search engine indexing.

That said, let's get on with the exercise. The table below simulates a common layout on the web, consisting of a banner across the top of the browser window, with the remainder of the page divided into two columns. See example.

For this exercise we need to create 4 documents, all within the same folder:

  1. "frameset.html" - the frameset document itself.
  2. "banner.html" - the banner that runs across the top of the browser window.
  3. "column1.html - the page that will display in column one. This page will contain a hyperlink that will load an external web page into column two.
  4. "column2.html" - the page that will display in column two when the frameset is first viewed. This page will be replaced by new content when the user clicks on the hyperlink in column one.

Banner
Column One Column Two

frameset.html

<HTML>
<HEAD>
<TITLE>
Frame Example</TITLE>
</HEAD>


Create the document head as usual, but without a body tag.
<FRAMESET rows="40,*">
The first frameset defines the number of rows in the document and their height. This example creates two rows. The top row is 40 pixels high and the second can vary in height. Values for height can be specified as an exact number of pixels, as a percentage, or can be variable with the use of an asterisk.
<FRAME SRC="banner.html" name=top> Now indicate the source, or URL, of the web page to be displayed in the top row. In this example we'll use the one we created called banner.html

Name=top simply identifies this particular frame. You may name it anything you like.
<FRAMESET cols="230, *">
Insert another frameset in the second row and specify two columns this time. Here the variables indicate column width, and like row variables, can be expressed as the number of pixels, as a percentage, or can vary by using as asterisk. In this example we are setting the width of column one at 230 pixels and allowing column two to vary in width.
<FRAME SRC="column1.html" name=col1>
<FRAME SRC="column2.html" name=col2>
Give the URL source for each column, and name them.
</FRAMESET>
</FRAMESET>
Close both framesets.
</HTML> Close the HTML tag, note there is no body tag to close

2. banner.html

<HTML>
<HEAD>
<TITLE>
Banner</TITLE>
</HEAD>
<BODY>
Banner
</BODY>
</HTML>

3. column1.html

<HTML>
<HEAD>
<TITLE>
Column 1</TITLE>
</HEAD>
<BODY>
<A HREF="http://www.life.uiuc.edu/" target=col2>Life Sciences</A>
</BODY>
</HTML>

4. column2.html

<HTML>
<HEAD>
<TITLE>
Column 2</TITLE>
</HEAD>
<BODY>
This is Column 2
</BODY>
</HTML>

Return to Table of Contents
2000 - E. Barbara Meyer - EdTech Center - Life Sciences - University of Illinois at Urbana-Champaign USA