Chapter 26
Frames
What are Frames?
Frames provide the ability to divide the browser’s window into several sections, each
containing a distinct HTML document. There are many different ways to use frames. You can
display, for instance, the table of contents on one side of the window, and the content
itself on the other side. You can then direct all links in the table of contents to load
documents in the other frame, thus ensuring that the table of contents is present at all
times. While surfing the Web, you can occasionally recognize a frame-separated window by
the frames’ borders. Borderless frames, though, have recently become much more popular.
Creating Frames
Frames are basically plain HTML which are loaded by a parent document. In order to
specify the frames in the top-level document, you must use the <FRAMESET>
definition. This tag specifies how to divide the window. A single <FRAMESET>
tag can divide a document into a set of rows or columns, depending on the desired design.
For example, the following definition divides a document into two frames:
<FRAMESET COLS="50, *">
These two frames are organized in columns. The left frame is 50 pixels wide, whereas
the other frame fills the rest of the document. An asterisk (*) represents the remaining
space in a document, after allocating space for the other frames.
You can also specify the percentage width of a column frame out of the window’s
width, or the percentage height of a row frame out of the window’s height. The following
definition, for instance, divides a document into two frames (laid out as rows), where the
upper one takes up one quarter of the document, and the bottom one takes up three quarters
of it:
<FRAMESET ROWS="25%, *">
The following tags are equivalent to the preceding one:
<FRAMESET ROWS="*, 75%">
<FRAMESET ROWS="25%, 75%">
The <FRAMESET> tag must always be specified along with its closing
counterpart, </FRAMESET>. The basic attributes of the <FRAMESET>
tag are cols and rows (they cannot be present simultaneously). Netscape
Navigator 3.0 introduced two more attributes:
The FRAMEBORDER attribute accepts either a no or a yes.
Alternatively, you can replace the “no” with a 0 digit, and the “yes” with a 1
digit. This attribute enables you to create a document that consists of frames with
invisible borders. The BORDERCOLOR attribute accepts a color, either in the form
of a hexadecimal triplet or a recognized color name. Since there is a plain gray
transition line between two borderless frames, you should specify a white border even when
setting FRAMEBORDER to no. Setting FRAMEBORDER to no
is not sufficient to completely hide the transition from one frame to another under IE
3.0x. To work around this problem, you should set the FRAMESPACING attribute to 0
under IE 3.0x.
The <FRAMESET> tag specifies a set of frames, each defined by a <FRAME>
tag and usually a URL which reflects the initial document in the frame. The following
construct creates a document consisting of two frames:
<FRAMESET COLS="100, *">
<FRAME SRC="frame1.html">
<FRAME SRC="frame2.html">
</FRAMESET>
The SRC attribute specifies the URL of the document in the frame. You can
always load a different document in that frame by clicking a link, submitting a form, and
so forth. The preceding source requires three documents: the parent HTML document that
includes the <FRAMESET> definition, frame1.html, and frame2.html
(note that you can use either a relative or absolute URL). Take a look at the following
documents:
<HTML>
<HEAD>
<TITLE>Frames</TITLE>
</HEAD>
<FRAMESET COLS="150, *">
<FRAME SRC="ex26-1a.htm">
<FRAME SRC="ex26-1b.htm">
</FRAMESET>
<NOFRAMES>
You must download a frame-capable browser
in order to view this document.
</NOFRAMES>
</HTML>
Example 26-1 (ex26-1.htm). The top-level FRAMESET document.
<HTML>
<HEAD>
<TITLE>First frame</TITLE>
</HEAD>
<BODY BGCOLOR="white">
Frame #1
<HR>
</BODY>
</HTML>
Example 26-1a—first frame (ex26-1a.htm). The initial document for the left
frame.
<HTML>
<HEAD>
<TITLE>Second frame</TITLE>
</HEAD>
<BODY BGCOLOR="white">
Frame #2
<HR>
</BODY>
</HTML>
Example 26-1b—second frame (ex26-1b.htm). The initial document for the
right frame.
Figure
26-1. A simple frames document.
You can delete the borders by replacing the <FRAMESET> tag in Example
26-1 by the following definition:
<FRAMESET COLS="150, *" FRAMEBORDER="no" FRAMESPACING=0 BORDER="0"
BORDERCOLOR="#ffffff">
The result is illustrated in Figure 26-2:
Figure
26-2. A frames document without a border.
Now take another look at Example 26-1, and notice the <NOFRAMES>…
</NOFRAMES> portion. These tags enclose alternative content for browsers which
do not support frames. They are similar to the <NOSCRIPT>…</NOSCRIPT>
tags which specify alternative content for browsers that do not support JavaScript or have
their JavaScript disabled by the user.
){kind=link}
){kind=link}