Web Page Design: Frames

CS6204: Java and the WWW

References:

L. Stein, How to Set Up and Maintain a Web Site, Addison Wesley, 1997, pp. 283-292. [Read this before reading Powell!]
J. Powell, HTML Plus!, Wadsworth, 1997, Ch. 17.

Frames Basics

HTML generating above:

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

<FRAMESET COLS="40%,60%">
  <FRAME SRC="HTML.html">
  <FRAME SRC="History.html">
</FRAMESET>

</HTML>

There is no body!
COLS="40%,60%" splits window into side-by-side frames.
COLS="40%,*" does the same.
COLS="40,*" would make content frame 40 pixels wide. (Good for a vertical banner of artwork that is exactly 40 pixels wide.)
COLS="1*,2*" would make text frame twices as wide as content frame.

Targeting Frames

In our example, clicking on contents item replaces the left frame with the text. To replace the right frame, use the modifications is red below:

<FRAMESET COLS="40%,60%">
  <FRAME SRC="HTMLwithTargets.html" NAME="Contents">
  <FRAME SRC="History.html" NAME="Text">
</FRAMESET>

Next we must modify file HTML.html to list Text as the target frame in the text in red (call modified file HTMLwithTargets.html):

<HEAD>
   <TITLE>CS6204:  Web Page Design</TITLE>
   <BASE TARGET="Text">
</HEAD>

Click here to see the modified example.

An alternative to the last is to add the target attribute to each list item in the contents list. This would help if there were multiple content frames. For example:

<LI><A HREF="History.html#basic" TARGET="Text">
History HTML</A> </LI>

From a software engineering viewpoint:

First case requires modification of the target document to add base, making it be "frames-aware". Too bad -- you can't drop an arbitrary document into a frames page. Worse, if you reuse the same target doc in multiple frames in your Web site, you have a global naming problem -- name must be unique across all frames.

Second case is even worse -- the contents document also must be "frames-aware".

When Browsers Don't Support Frames

Add the following after a frameset to provide alternate text to browsers without frames enabled. (Web browsers ignore unknown HTML tags, so they will ignore the frameset tags, as well as the noframe tags, and hence only show the text below.)

<BODY>
<NOFRAME>

<UL>
<LI><A HREF="HTML.html">Contents</A></LI>

<LI><A HREF="History.html">Text</A></LI>
</UL>

<P></NOFRAME></P>

</BODY>

Nesting Framesets:

Example of Web page with nested framesets...

In this example, the window contains two columns. Nested within the left column is a frameset of two rows, and we put an image into the bottom row.

<FRAMESET COLS="50%,*">
  <FRAMESET ROWS="1*,1*">
    <FRAME SRC="HTMLwithTargets.html" NAME="Contents">
    <FRAME SRC="HTMLtools/Netscape Editor.gif">
  </FRAMESET>
  <FRAME SRC="History.HTML" NAME="Text">
</FRAMESET>

Other Frame Features

More attributes for frame tag:

SCROLLING=yes/no/auto
NORESIZE

Here is the result if we make the modifications shown below...

<FRAMESET COLS="50%,*">
  <FRAMESET ROWS="1*,1*">
    <FRAME SRC="HTMLwithTargets.html" NAME="Contents" NORESIZE>
    <FRAME SRC="HTMLtools/Netscape Editor.gif">
  </FRAMESET>
  <FRAME SRC="History.HTML" NAME="Text" SCROLLING=NO>
</FRAMESET>

Note that you can no longer resize the panes, and the right frame now lacks scrollbars.

Some other frame target types...

TARGET="_blank": Popping up a new blank window in which to display target URL
TARGET="_self": Load URL into same frame as the document link is in
TARGET="_parent": Load URL into document's parent's frame.
TARGET="_top": Destroy all framesets and load the URL into the whole window -- required when you link to an external site.


Return to CS6204 home page.

Send comments to abrams@vt.edu.

Last modified on 16 June 1997. [This is http://ei.cs.vt.edu/~jwww/courseNotes/HTML/Frames.html.]