Frames

What are Frames?

Frames divide the document window into regions, where each region (usually) displays a different HTML file.
Frames within a document scroll independently.
Users can move the borders between frames.
Common uses:
- Put navigation tools in a frame so they don't scroll with the content (good).
- Display content from other pages in a frame contained within another document (evil).

Here is a link to this lecture in a frame. (If you're already in a frame, it might be amusing to click on this link again.)

If you're already viewing this page within frames and you'd like to escape, you can either use the "back" button or follow this link to escape from the frame

How to Make Frames

<html>
    <head>
      <title>Frames</title>
    </head>
         
    <frameset cols="130,*">
         
      <frame src="toolbar.html" name="toolbar">
      <frame src="index.html" name="notes">
         
    </frameset>
</html>

The FRAMESET tag replaces the BODY tag.
COLS attribute means that these frames will be laid out in columns.
The value of COLS, in this case, is the width of the columns in pixels. An asterisk means "the rest."
One FRAME tag for each column. The SRC attribute can be any URL.
The NAME attribute allows us to access the frame through the object hierarchy.

Advantages of Frames

Keep navigation tools from scrolling away. This is helpful to the user, particularly when pages are long. Of course, they are also used to keep the corporate logo and advertising banners always visible, taking up valuable space on the screen.
Allows side-by-side scrolling, say for side-by-side comparison of texts.
Berardinelli's Movie Review site offers a choice, so you can compare the same site with and without frames.
Another example of frames is the Tutorial on the C Programming Language. Can you guess what the source looks like?

Link Targets

Frames introduce a whole new twist on hyperlinks, because now you have to determine not only where to go, but what frame to put the result in. It's done with the TARGET attribute. Here's an example of the code:

<a href="http://www.wellesley.edu/" target="theOtherFrame">

The TARGET attribute of the A tag specifies where this link is displayed. Of course, you must have named the frame in the frameset.
The TARGET attribute of the BASE tag specifies the default target for all links that follow.
The target can be the name of a frame or the magic target name _top, which replaces the entire contents of the document window. That's how to "escape" from frames.

Disadvantages

Done badly, they complicate design and confuse the user.
They can obscure the origin/ownership of pages. It's generally not good to frame someone else's pages, since it can unintentionally imply that their page is yours.
They break one of the fundamental ideas of the web, which is that URLs uniquely identify a well-defined unit of content (the "page"). In other words, a URL is no longer a Uniform Resource Locator. Therefore:
- Frames break the history mechanism.
- They break the bookmark mechanism.
- Search engines may not index them properly.
They take up valuable space on the screen, so be sure they are adding something useful.
Finally, by dividing a page into several files, they make page maintenance a little more difficult.

© Computer Science 110 Staff
This work is licensed under a Creative Commons License
Date Modified: Thursday, 24-Jan-2008 12:34:37 EST