The address for this web page is: http://fishcaro.crosswinds.net/day_36_intro_to_frames.htm
On to the next lesson! Back to the COURSE SYLLABUS

36. INTRODUCTION TO FRAMES

Frames are used to divide the browser window into smaller sub-windows, each of which displays a different HTML document. This web page has used frames to create the "navigational guide" on the left, which remains fixed, while you can independently scroll the lesson contents on the right.

INDEX CARD #36:

INTRODUCTION TO FRAMES (36a)

The browser window can be divided into two or more sub-windows, each of which displays a different HTML document. Each of these sub-windows is called a frame.

Although frames offer lots of flexibility in web page design, many designers avoid them because they are supported unevenly by current browsers. Basic frames are supported by Netscape Navigator 2.0 and higher, and by Microsoft Internet Explorer 3.0 and higher.

To work with frames, you must understand the difference between rows and columns. See below:

first row

second row

first column second column

USES FOR FRAMES (36b)

Here are some of the common uses for frames:

NAVIGATION: one frame (often on the left) holds a menu page and users click items in the menu to change the content in another frame.
ADVERTISING: Advertising stays in a fixed part of the page, so it is always visible while users scroll the main page contents.
INTERACTIVE TOOLS AND PAGES: The multidocument structure of frames makes them uniquely suited to certain JavaScript applications. For an example of what JavaScript can do with frames, click here.

ADVANTAGES OF FRAMES (36c)

Here are some of the primary advantages of frames:

Parts of the page can remain stationary, while other parts scroll. This is useful for things you may not want to scroll out of view, like menus or banner advertising.
Frames can bring together documents from different servers. You can combine your own material with other relevant material on the web.
With the <noframes> tag, you can add alternate content for browsers that do not support frames. This allows your web page to "degrade gracefully."

DISADVANTAGES OF FRAMES (36d)

Frames are not supported by older browsers.
The logic involved in using frames is definitely more complicated than a single-text-file web page. You need to produce and organize multiple files to produce a single page.
Navigating through a framed site may be confusing to some users.
Users cannot bookmark individual pages within a framed document. Any bookmark just sends you to the top-level frame, where the information you really want may not even be visible.
A large number of frames on a page may increase the server load considerably: loading three different 1K files is more work than loading a single 3K file.
Linking into a framed document is a bit complicated: in addition to specifying where you want a link to take you to, you must also specify which frame you want the destination page to appear in.
Framed documents can be a nuisance for search engines; however, you can help by intelligently using the <NOFRAMES>, <TITLE>, and <META> tags.

BASIC FRAME STRUCTURE (36e)

To see a basic frameset document, click here. To create this document, you need three files. First, create the top-level document, that defines the frame structure. Save it as sample_file.htm. Notice that it doesn't have a <BODY> tag; instead, it has a <FRAMESET> tag that describes the desired row/column structure.

<HTML>
<FRAMESET COLS="*,*">
  <FRAME SRC="left.htm">
  <FRAME SRC="right.htm">
</FRAMESET>
<NOFRAMES>Your browser does not support frames.</NOFRAMES>
</HTML>

Next, save the following two files as left.htm and right.htm , respectively.

<HTML>
<BODY>
This is the left frame.
</BODY>
</HTML>

<HTML>
<BODY>
This is the right frame.
</BODY>
</HTML>

TAGS for the BASIC FRAME STRUCTURE (36f)

<FRAMESET COLS=desired_columns> </FRAMESET> A FRAMESET container tag is used instead of a BODY tag in the top-level document. The COLS attribute gives the number and size of columns. The "*" is used to divide available space into equal portions. You can also specify absolute pixel widths and percentages, and combine in any desired way: COLS="3*,*" gives two columns; the first three times the width of the second. COLS="30%,20%,*,2*" gives four columns: the first two take up 50% of available space; the fourth column is twice as wide as the third. COLS="150,450" gives two columns, 150 and 450 pixels wide, respectively.
<FRAME SRC="URL_of_frame_contents"> Each frame tag gives information about the web document to reside in that particular frame. Frames are filled left-to-right for columns, and top-to-bottom for rows.
<NOFRAMES> </NOFRAMES> The NOFRAMES container may contain <BODY> </BODY> tags, and holds alternative content for browsers that don't understand frames.

Printable version of Index Card 36a

Printable version of Index Card 36b

Printable version of Index Card 36c

Printable version of Index Card 36d

Printable version of Index Card 36e

Printable version of Index Card 36f

WORKSHEET #36:

(W36.1) Create and save the files indicated in card 36e, and view your first framed document! Then, practice with the COLS attribute by refining your code, as follows:
- (W36.2) Make two columns, the first twice as wide as the second. Do this THREE ways: using absolute pixel widths; using percentages; using the "*" feature. What are the advantages/disadvantages of each way?
- (W36.3) Make two columns, the second 4 times as wide as the first Again do this THREE ways: using absolute pixel widths; using percentages; using the "*" feature.
- (W36.4) Next, save two files, top.htm and bottom.htm , containing the sentences "This is the top frame" and "This is the bottom frame", respectively. Repeat the exercises above, this time using the ROWS attribute in the FRAMESET tag.

There are some good web tutorials on frames, to reinforce and extend the material discussed here, as well as preview stuff in future lessons.

(W36.5) Do this one first: it's easy to read, and fun! http://www.pagetutor.com/pagetutor/frames/
(W36.6) This is a nice compact introduction to frames: http://home.netscape.com/assist/net_sites/frame_syntax.html
(W36.7) Please study the first two sections, "Building Frames" and "Using Frames," in the following tutorial: http://builder.com/Authoring/Frames/index.html (link is no longer valid)

ASSIGNMENT #36:

(A36.1) Please read pages 209–213 (from "Introduction to Frames" up to "Nesting Frames") in the Weasel Book.