Frames: the User Perspective
What are Frames?

HTML frames are subdivisions of the browser window, allowing the user to see multiple pages in the window, and potentially allowing each to be scrolled separately.

This modules is constructed using frames as an example.
Pros and Cons of Frames

Frames are somewhat controversial because of the number of negative side-effects and disadvantages they have. Here's a listing; do you know any others?

Advantages
Disadvantages
  • Good control over layout.
  • Navigation elements and title don't get lost.
  • Pages are reloaded more quickly because only a part of the page needs to be downloaded.
  • Content frames can be printed separately from navigation frames.
  • If the navigation is in a frame separate from the content, each part can be worked on by a different team.
  • Main viewing area is reduced.
  • Audio text-reading software for the visually impaired has difficulty with frames.
  • Lawsuits have been brought against organizations that put copyrighted material in their own frames.
  • Printing can be confusing, because only the page that is currently "active" - the top left frame or whichever was clicked in most recently - is printed.
  • Keyboard navigation only works in the currently active frame, making it difficult for disabled users who have difficulty controling a mouse.
  • The navbar must remain static. It's can't easily change to provide sub-navigation or indicate where you are.

 

Frames: the Designer Perspective
Overview

Figure 1: Simple FrameA page with frames consists of at least 3 HTML files:

  • One frameset page
  • Two normal pages

The purpose of the frameset page is to control the layout of the normal pages. At least two normal pages are needed, but more are possible.

Multi-frame Options

When a more complex arrangement of windows is wanted, it may be necessary to have more than one frameset page. This is particularly true whenever rows have different numbers of columns, or columns have different numbers of rows, as in the illustration below.

Figure 2: Nested FramesFor example, this module consists of two frameset pages and three display pages:

  • w25c.htm: primary frameset, controls entire window, dividing it into small upper frame and larger frame below
  • w25c_head.htm: top frame, goes across entire window
  • w25c_body.htm: secondary frameset, controls lower part of screen, dividing it into two columns
  • w25c_contents.htm: left column in lower part of screen, for contents / navigation
  • w25c_main.htm: right column in lower part of window (where you're reading this)

The ability to nest frames in this manner gives us a great deal of flexibility. The nested framesets can be in the same file as well, which reduces the number of files used.

Frames: Coding
The Frameset Tag

The <frameset> tag is used in frameset pages instead of a <body> tag. (So frameset pages are the exception to the rule that all HTML pages have a Head and a Body.)

The <frameset> tag itself contains directions for positioning the frames in the page; it also encloses the <frame> tags. But let's look first at the information in the <frameset> tag itself:

  • Size of rows: ROWS="64,*"
    and/or
  • Size of columns: COLS="20%,*"

The size of rows and columns can be either in pixels or percent - numbers by themselves (as in ROWS above) are assumed to be pixels. The star * means "whatever is left over". If there is more than one star * in the definition, the browser will divide the space evenly between them. Unlike table columns, frame columns don't get larger or smaller based on their contents.

These are optional:

  • Set the thickness of the 3D border: BORDER="3"
  • Set the color of the border: BORDERCOLOR="#FF0000"
  • Set the space between frames: FRAMESPACING="5"
  • To turn off the 3D border: FRAMEBORDER="0"

In this simple example, we create a window with two horizontal frames, the top one 64 pixels high, the next taking up the rest of the browser window:

<frameset rows="64,*">
<!-- frames go here -->
</frameset>

The Frame Tag

Between <frameset> and </frameset> there need to be <frame> tags that tell the browser where to get the pages to put in each code, and what to call them.

Each <frame> tag should have:

  • a name: NAME="somename"
    and
  • a source: SRC="somefile.htm"

Here's a minimal frame tag:

<frame name="top" src="top.htm">

Ordinarily, a browser provides two services for the user of a page with frames:

  • Scrolling, if the frame is too small to show everything in the window. A scroll bar appears when it's needed. If you want to hide the scroll bars in a frame, add this to the frame tag: SCROLLING=NO
  • Resizing, in case the user wants to readjust the size of frames. If you want to make sure the frames stay the same size, you can turn this off by adding: NORESIZE

Here's a frame tag with these options set:

<frame name="top" src="top.htm" scrolling=no noresize>

 
The Noframes Section

Occasionally, users with older browsers come along and can't see the framed pages. HTML provides the <noframes> tag to allow us to put in something for those who can't see frames with their browsers.

The <noframes> tag is put right after the </frameset> tag. At the end of the Noframes section, put a </noframes> tag to close it properly. The Noframes section can contain anything you feel would help to get the information to users who can't see frames. There's an example in the next section.

It is generally not helpful to state that the user should get a browser that can handle frames. Usually, there is a reason why someone has a no-frames browser. Though most users have frames-enabled browsers, it is often the case that visually impaired users with simple-text browsers and text-to-speech software will have difficulty with frames. So even though it seems unlikely that anyone would still have a browser that can't handle frames, including a Noframes section allows better access to the disabled.
Complete Example

Let's put all the pieces together by showing a simple frameset file:

<html>
<head>
<title>w25c: Frames in HTML</title>
</head>

<frameset rows="64,*">
<frame name="head" src="w25c_head.htm">
<frame name="body" src="w25c_body.htm">
</frameset>
<noframes>
<div align="center">
<h3>w25c: Frames in HTML</h3>
<h4>This page is best viewed with a frames-capable browser</h4>
However, you may view the body of the page by clicking
<a href="w25c_main.htm">here</a>.
</div>
</noframes>

</html>

In order for a frameset to work, it is necessary for the Web coder/author to create all the files referred to (unless they are created by others). In this case, the coder/author needs to create w25c_head.htm and w25c_body.htm.

About This Document
Review

Click here Review Buttonfor review questions.
Audience and Objectives

This module is for people who are familiar with the fundamentals of HTML including links (see module W23c), and want to learn how to construct pages with frames.

 

On successful completion of this module, you will be able to:

  1. Explain the concept of Web pages with frames from the user viewpoint;
  2. Discuss the pros and cons of using frames in Web pages;
  3. Explain the relationship between files in an HTML frame set;
  4. Recognize correct HTML syntax for creating frames.
Module W25c: This document is part of a modular instruction series in Computer Instruction. For more information, see the overview or the list of modules in this series, W: World Wide Web. This document has been used in the following classes: INP 150.
History: Original: 2 December 2002
Last modification: Monday, 31-Aug-2009 11:48:06 EDT
Copyright Washtenaw Community College logoCopyright © 2003, Laurence J. Krieg, Washtenaw Community College
Instructors: You may pint to this file in your Web-based materials; however, its location may change without notice.
Students: You are welcome to make a copy for your personal use.
All other uses: Please contact the author, Laurence J. Krieg, for permission: krieg@ieee.org.