p14.html

	Previous Contents Next
14. Using Frames

Frames divide a web page into multiple, scrollable regions in which you can have multiple pages displayed at the same time. Very often there are three main types of frames: a header that contains an identifying logo, an advertiser's strip, or other constant information that doesn't change; a menu frame that permits the user to navigate among the pages of the web; and a document frame where the various pages are displayed. If this present web were to be viewed in frames, it might look like Figure 14-1.

Figure 14-1. View of the present web in a frames-capable browser.

As a matter of fact, this web is viewable in frames, and you can view this page and others by switching to it. GO FRAMES!

The Frame Document

A "frame document" describes the overall structure of a page subdivided into frames. It is a standard HTML document except that the <BODY> section is replaced by a <FRAMESET> section. The <FRAMESET> is where you describe your frames and how they will be populated by the content of other HTML documents. The general structure of the frame document is shown below:

<HTML>

<HEAD>
<TITLE> Title of document </TITLE>
</HEAD>

<FRAMESET>
Section where frames are described
</FRAMESET>

</HTML>

Describing Frames

Very much like for tables, frames are described in a column and row format. Consider, for example, a page subdivided into three frames like the following:

Frame 1
Menu
Buttons

Frame 2
Heading Information

Frame 3
Page Displays

The <FRAMESET> section would be coded something like the following:

The first line <FRAMESET COLS="20%,80%"> describes the number of columns to display in the browser window and the proportion of the window to assign to them. In this case there are two columns (by the simple fact that there are two percentages given); the first column takes up 20% and the second column takes up 80% of the window. This <FRAMESET> tag has a matching close tag </FRAMESET>. You can visualize this portion of the description as follows:

Column 1
20%

Column 2
80%

The next line <FRAME SRC="frame1.html"> identifies which HTML document will be displayed in the first column frame:

Column 1
20%
(frame1.html)

Column 2
80%

The next section describes the second column. In this case it is divided into two frames (or rows)--one sized 20% of the column, the other 80%. The first (top) row will be used to display a page named "frame2.html," the second (bottom) row will be used to display page "frame3.html."

Column 1
20%
(frame1.html)

Column 2 - Row 1
20%
(frame2.html)

Column 2 - Row 2
80%
(frame3.html) NAME="frame3"

Notice that the description for the bottom-right frame includes an assigned name in addition to the name of the source document that initially appears in the frame: NAME="frame3". The reason for the name is that this frame will be a "target" frame to display the contents of multiple pages. Documents sent to a frame named "frame3" will display in this frame. In contrast, neither of the other two frames have names. This is because only one document--the original source document--will be displayed in each of these.

Frame Syntax

That's about all there is to defining frames except for some parameters that can be used in the <FRAME> tag. The following listing summarizes the syntax of the HTML tags used to describe frames:

<FRAMESET>...</FRAMESET>

Used to describe a row or column using the ROWS and COLS attributes:

ROWS="n|n%|*": Describes a row of the browser window. The value that it can take is the number of pixels in width (n), the percentage of the window (n%), or any remaining space left over from other row descriptions (*).
COLS="n|n%|*": Describes a column of the browser window. The value that it can take is the number of pixels in width (n), the percentage of the window (n%), or any remaining space left over from other column descriptions (*).

<FRAME>

Defines a single frame within a FRAMESET. No close tag is used.
Parameters include:

SRC="filename.html": The name of the document (or other URL) that will be initially displayed in the frame.
NAME="framename": Used to assign an author-supplied name for the frame so that it can be targeted by links in other documents. For example, the specification <A HREF="p1.html" TARGET="framename"> sends the document named "p1.html" to the frame named "framename."
MARGINWIDTH=n: Specifies, in pixels, the amount of space to leave between the contents of the frame and the left and right frame edges; cannot be less than one pixel.
MARGINHEIGHT=n: Specifies, in pixels, tha amount of space to leave between the contents of the frame and the top and bottom frame edges; cannot be less than one pixel.
SCROLLING=YES|NO|AUTO: Determines whether or not a frame should have a scroll bar. AUTO (default) permits the browser to determine when scroll bars are needed.
NORESIZE: Indicates that the frame is not resizable by the user dragging a frame edge to a new position; by default all frames are resizable.

Populating Frames

During definition of the FRAMESET you indicate the contents of the frames. Recall from above that the tags

denote that the documents "frame1.html" and "frame2.html" will be displayed in the associated frames. The third case is that the tag

denotes that document "frame3.html" will initially populated the third frame; however, it was assigned a target name that can be referred to when wanting to put other documents there.

Assume for the moment that your "frame1.html" document is a menu bar. Within this document are buttons that will display down column 1 of the browser window. When any one of the buttons is clicked, you want the associated page displayed in the third frame. Figure 14-2, taken from the previous illustration, shows this arrangement of frames

Figure 14-2. When the user clicks on one of the buttons in the left frame, the associated page is displayed in the bottom-right frame.

The "frame1.html" document appearing in the left column contains a series of graphic anchors, each pointing to the "frame3" target. The general format of these anchors is:

<A HREF="document.html" TARGET="frame3"><IMG SRC="button image"></A> where the TARGET parameter of the anchor tag refers to the name of the frame where the document.html will appear when the user clicks on the button image. There will be as many of these statements as there are buttons, each pointing to "frame3" as the TARGET.

You can use as many frames as is practical, all or none of which have dynamic content controlled from other frames. If you do not utilize target frames, then the contents of any one frame changes just as in the full-window version of a page. Each frame would work independently of the others.

As you're designing frames, make sure to keep in mind some potential drawbacks. First, the average size of computer screens make it impractical to employ more than two to four frames. Beyond that, screens tend to get cluttered, making the user more cognizant of the machinations of the frames than of their content.

Second, avoid a lot of interdependence among frames (the user clicks in frame 1 to call up a menu in frame 2 which displays a document in frame 3 that automatically reloads frame 1 triggering frames 2 and 3 to exchange pages spilling the contents on the keyboard!).

Third, many independent frames permit the user to scurry off in many directions at once, possibly missing the point of the structure of your presentation. Sometimes its best to control the exposure of your material so the user sees it in a related, understandable fashion.

Previous Contents Next