Welcome to a Frames Tutorial.

INTRODUCTION TO FRAMES

Frames features of HTML 3.0/3.2 allow authors to provide unique page designs that include interactive displays of data and/or images. With frames - which divide Web pages into multiple, scrollable regions - you can present information in a more flexible and useful fashion. Each region, or frame, has several features:

  1. It can be given an individual URL, so it can load information independent of the other frames on the page;
  2. It can be given a NAME, allowing it to be targeted by other URLs, and;
  3. It can resize dynamically if the user changes the window's size. (Resizing can also be disabled, ensuring a constant frame size.)

These properties offer new possibilities:

  1. Elements that the user should always see, such as control bars, copyright notices, and title graphics can be placed in a static, individual frame. As the user navigates the site in "live" frames, the static frame's contents remain fixed, even though adjoining frames redraw.
  2. Table of contents are more functional. One frame can contain TOC links that, when clicked, display results in an adjoining frame.
  3. Frames side-by-side design allows queries to be posed and answered on the same page, with one frame holding the query form, and the other presenting the results.

Frames have been submitted to the Internet Engineering Task Force and the World Wide Web Consortium for consideration as Internet standards, but at this time are proposed features for HTML3.2. Not all browsers understand frames, and different versions may show variation. Essentially, frames allow simultaneous display of more than one HTML page, and this extra capability can slow presentation to an unacceptable speed for some Internet users. Navigation with browser buttoms (e.g. Back button), can be disabled by the code, and the ability to view document source can be compromised. For these reasons, Frames are cursed by some users, and at the very least, the author of frame pages must optimize structure and content.

The frames feature has new syntax that must be learned to successfully incorporate the allowable options that increases flexiblity of presentation and use. Links to several examples appear at the end of this page. My intent is to provide a few guidelines, touch on the syntax and put up a few examples. I encourage you to construct one or two to better understand this neat addition to the hypertext code. This presentation is divided into the three topics.

Guides to Layout
Frames & Targets
Examples & Templates

GUIDES TO LAYOUT

Not all pages are candidates for a frame style presentation and its use should be selective. Frames do, however, provide a super way of indexing data by allowing the user to have constant visibility of selectable information. Thoughtful layout is the first step. You need to decide what form or "look" you require before starting construction.
The <frameset> tag is the container for all code in the layout and it replaces <body> open and close tags. The attributes of <frameset> are columns and rows so you must decide how they apply to your layout.
For starters, two examples will show a page divided into columns and a page divided into rows. One column of the first and one row of the second will further be subdivided into two columns and the second two rows as shown here. Columns division uses <frameset cols=>; and rows, <frameset rows=>. Widths of columns (or heights of rows) may be specified in pixels or percentages of window size. Inserting an asterick (*) conveniently allows for use of remaining space.
Columns
(Two columns with two rows in column #1.)
col 1, row 1 col 2
col 1, row 2

The basic code:
<frameset cols="60%,40%">
<frameset rows="50%,50%">
    <frame src="col1row1.html">
    <frame src="col1row2.html">
</frameset>
    <frame src="col2.html">
</frameset>
Rows
(Two rows with two columns in row #1.)
row 1, col 1 row 1, col 2
row 2

The basic code:
<frameset rows="50%,50%">
<frameset cols="50%,50%">
    <frame src="row1col1.html">
    <frame src="row1col2.html">
</frameset>
    <frame src="row2.html">
</frameset>

Note:
Above examples demonstrated division by only two although additional division is possible and may be desirable for a project. In a following example, a window is divided into three rows.

Elements of the Frame tag.

Name, scrolling, and noresize are three important attributes of <frame>. Applying a name to the frame, name=" ", provides its use as a target as I will discuss later, but may be omitted if the frame is not to be targeted. Scrolling is specified as scrolling="yes", scrolling="no" and scrolling="auto". Scrolling= "auto" lets the browser decide if scroll bars are required which may provide increased frame area for data. As an author, you may restrict browsers from changing frame size by adding noresize.

This example includes all elements of the <frame> tag.

<frameset rows="40,*,20">
<frame name="banner" scrolling="no" noresize src="banner.html">
<frame name="content" scrolling="yes" noresize src="content.html">
<frame scrolling="no" noresize src="toolbar.html">
</frameset>

The resultant layout.

40 pixel banner, no scrolling
content, scrolling
20 pixel toolbar, no scrolling

<noframes>

A word of caution:

Not all browsers are "frame-capable" and Netscape has provided a <noframes> tag set to follow the <frameset> command. Those using Netscape 2.0 or greater or Internet Explorer will see the frames layout and others will view an alternate or normal page. The code for the "normal" page is bounded by the <noframes> and </noframes> tag set and includes the <body> and </body> tag set and all code therein.

A basic sequence of code is shown here.

<frameset cols="80%,20%">
<frame src="col1.html">
<frame src="col2.html">
</frameset>

<noframes>
<body>

normal window
</body>
</noframes>
Viewed with frame-capable browser
col 1, 80% col 2
20%
Viewed with "noframes" browser
normal window

FRAMES & TARGETS

For each <frameset> in the layout a separate html file is required for each <frame>. These are "normal" pages but must be sized to fit within the areas assigned in the layout. Each page is named to match that used in the layout and included in the <frame src="___.html"> tag. Since these html files are viewed in a smaller window pane (frame), attention must be given to the size of images and fonts used and the arrangement of text.

Hint: <table> tags combined with height and width specification provides good control of these smaller frames. The <nobreak> and <br> tags are useful in controlling text.

Here are a few ideas that might stir your imagination:

  • Frames can be used to keep footers and/or headers visible at all times. These may include a toolbar for selecting linked pages that will open in an adjacent frame above or below the toolbar.

  • Fixed or scrollable vertical linking lists can be made visible in a left or right frame that will display the selection in the adjacent frame while keeping the list visible.

  • Horizontally scrollable panoramas or lists are possible and may add interest to a presentation.

TARGETED FRAMES

It is necessary to provide control within the frame that changes information in another frame. If the <frame> tag in the layout included name="content", the controlling frame should include <base target="content">. The targeted frame name="content" needs to include the tag, <target="_top">. This tag will make the "content" frame load over itself each time it is targeted.

Example Layout:
<frameset cols="80%,20%">
<frame name="content" src="content.html">
<frame src="index.html">
</frameset>
Frame, content.html:
<target="_top">
<body>

</body>
Frame, index.html:
<base target="content">
<body>

</body>

A review of the Netscape page on
frame syntax and targeting windows may be beneficial at this time to learn of other tag options that control how targeted frames respond.
Hint: When targeting a web page from a frame within the frameset and you wish for it to load in a 'new' window, include target="_parent" in the anchor for that link. Otherwise, the linked page will load in the frame.

TEMPLATES
     Template 1
     Template 2
     Template 3
     Template 4
Using one of the templates above (for example Template 3), one of the areas may be used as a menu to open new pages in another section. By refering to new pages with the TARGET option specifying the NAME from the frame definition document, one of the frames can serve dynamic content. Since each frame is a separate html page, the browser View Source option can only show the contents of each frame. View each frame, and the frameset definition document source to study this use of frames.
Menu Frame Example