HTML and Web Page Design

Back

NOTE: Although very handy, and easy to make, frames are officially frowned upon. There are better ways to achieve (almost) exactly the same thing, with CSS. For discussion and commentary, try searching for "css frames" in your preferred search engine.

Why does this site still use frames then? Someday it won't. At one time, frames were all the rage. It takes time to convert.

The Index File
Frame Layouts
The Frames Definition
Frame Contents Frame Borders
Link Targets (the TARGET= attribute)
Summary

Preliminaries: The Index File

Every web site has a "main" page, that is, the first document anyone sees when they go to a web site. That file is referred to as the index file. It is NOT an index in the other sense of the word: a list of contents. It is the first page anyone sees when they go to a web site. More often than not, it is in fact a file called "index.htm" or "index.html". It doesn't have to be called that, but that is the default of most web server software, and few site administrators change it (although they could change it to whatever they want). Anytime you point your browser to a web address that does not specify a file by name, the browser will be directed to the index file for that directory by the server software.

If there is no index file in a folder, the browser will display a listing of the files in that folder. Try this: point your browser at any HTML file in a folder (directory) that does not contain a file called index.htm or index.html; in the location bar, backspace over the file name to the first slash you see, and press Enter. This ability of browsers to see folder contents is not good from a security standpoint, and conscientious site administrators will block it.

Frames Layout

Frames are used to divide the browser window into two or more sections. The idea is to be able to view more than one document at a time. Some common layouts:

There are two important points to keep in mind:

You must have one file containing the frames definition, and nothing else; this is the index file, the one you point the browser to
Whatever appears in each frame is a separate file

That means, for example, if you have two frames (Example 1), you need at least three separate files: one for the frames definition, and one for each frame. To make things easier, put them all in the same folder (so you don't have to worry about paths).

Creating a document with frames is a several-step process:

Decide how many frames you want the browser window to display
Decide the size and location of the frames
Choose a name for each frame
Decide what appears in each frame
Create the files (you will need at least three separate files)

NOTE: Don't misunderstand here: your index file does not HAVE to have frames, unless that's what you want users to see first. The important thing is that the browser must be pointed to the file which contains the frames definition, not one of the files that occupies one of the frames.

Back to Contents

Examples

As with tables, the best way to explain them is by looking at a few examples. First, create two HTML documents that will appear in two frames. This is all you need in the first (and the <HTML> tag):

<BODY>

</BODY>

Save it as menu.htm.

Next, create this file:

Save it as body.htm.

Back to Contents

The Frames Definition

Now for the frames definition. This file is the index file. The following creates the layout in Example 1. Note that frames definitions do not have the <BODY> </BODY> tag.

Save this file as index.htm. Having said that, now I'll tell you a shortcut: an asterisk can be used to specify whatever space remains: COLS="25%,*" is exactly the same as COLS="25%,75%".

NOTE: When you make changes to a frames definition file, you may have to close the browser and re-open it for the changes to be visible - some browsers store the frames information in cache. Switching to another document, then coming back might also work. Changes to files in individual frames will be apparent immediately.

Frames divide a window in terms of rows and columns. The <FRAMESET> tag above specifies two columns, one 25% the width of the screen, the other 75% (i.e., the rest of it). Since ROWS is not specified, each column is 100% of the window height.

The <FRAME> tag specifies what appears in each frame:

SRC is the name (and path, if applicable) of the file which will appear in that frame
NAME is the name of the frame
SCROLLING="NO | YES | AUTO" if the page in the frame is too large to be seen all at once, the browser will provide scrollbars (or not)
NORESIZE means the user cannot move the frame border

To see the layout in Example 2, just change COLS to ROWS in the frameset definition. The top frame will be menu.htm, the bottom well be body.htm

Back to Contents

Frame Contents

Frame contents are assigned on a "first come, first served" basis: menu.htm appears in the left or top frame because its definition comes first. Try this:

<HTML>
<HEAD>
<TITLE>Frames - Example 2</TITLE>
</HEAD>

<FRAMESET ROWS="50%,50%" COLS="50%,50%">

<FRAME SRC="frame1.htm">
<FRAME SRC="frame2.htm">
<FRAME SRC="frame3.htm">
<FRAME SRC="frame4.htm">

</FRAMESET>

</HTML>

The browser window will be divided into four equal sized rectangles. Now create four files to fill the four frames, frame1.htm, frame2.htm, etc. with the following content:

<HTML>
<HEAD>
<TITLE>Frame 1</TITLE>
</HEAD>

<BODY>

Frame 1

</BODY>
</HTML>

Change the title and body text as appropriate.

Back to Contents

For Example 3 you need a frameset within a frameset. Create a file along the lines of menu.htm and body.htm, but call this one head.htm. You still have to create two columns, as in Example 1, but then the right column has be to divided into two rows:

For a variation, change COLS to ROWS in the first <FRAMESET> tag, and ROWS to COLS in the second <FRAMESET> tag. What you should see is:

Now, add some text to menu.htm, anything you like, so that it is long enough to activate the scroll bar:

<BODY>

<H3>This is menu.htm</H3>

<P>
blah blahblah blah blah blah blah blah blah blah
<P>
blah
<P>
blah
<P>
blah
<P>
blah

</BODY>

Back to Contents

Frame Borders

Frames have borders by default, but you can make the border invisible:

FRAMEBORDER="1 | 0"

This attribute goes with the <FRAME> tag: 0 = off, 1 = on. The default is on (1). There should be no confusion as to its use:

Link Targets

A link in a framed HTML document can be targeted to appear in the same frame, or another frame, or another browser window entirely. That is why frames have names: so you can tell a document to open in a particular frame.

Suppose you have a web page like Example 1:

Back to Contents

Look again at the frames definition for this layout:

The left frame is "menu", and the right is "body". To create a link in the menu frame for a page that will appear in the body frame, use the usual anchor link, with the TARGET attribute; the page you want to appear in the body is a file called resume.htm. What you see in the "menu" frame is menu.htm, so add the following line to menu.htm:

<A HREF="resume.htm" TARGET="body">My Resume</A>

What the user will see in the browser is a link in the left frame called "My Resume"; when clicked, the file resume.htm will appear in the right frame ("body"), as specified by the TARGET attribute.

Note: In this example, it is only for the sake of clarity that the frames and the documents that appear in them initially have similar names. The name of a frame and the name of the HTML document that appears in it need not have anything to do with each other.

The value of the TARGET attribute is either the name of one of your frames, or one of several "special" targets:

_blank opens a document in a new browser window (i.e. the user will end up with another copy of NS or IE running).

_self opens a document in the same frame, or the same window if the current document has no frames.

_top opens a document in the same browser, but full-windowed (no frames - unless the new document has frames).

_parent opens a document in the parent window of the frameset; if that frameset contained more than one frame (i.e. is part of a nested frameset), it won't anymore - the new document will occupy the whole frame.

In the example below, both B and C are part of the same frameset:

If there is a link in either B or C with TARGET="_parent" specified, the new document will occupy both B and C:

Back to Contents

Summary - Part 6

Defines the initial frame set or frame-within-a-frame for a page.

ROWS what proportion of the window each row should occupy
COLS what proportion of the window each column should occupy

Defines individual frames.

SRC the file or image that fills the frame
NAME the name of the frame, for reference
SCROLLING turns on/off the browser's scrollbars
NORESIZE prevents the user from moving frame borders

TARGET where (in which frame) the document or image appears

Back to Contents

Back

HTML and Web Page Design - Part 6

Frames

Contents

Summary - Part 6

Copyright © Michael Ward 1999 - 2010