Frames | Simple Examples 		Next

Simple Examples

Let's begin learning how pages that use frames are constructed by first looking at a few very simple schematic examples. In each case we will show the HTML code that is used to create the frame set and load files into the various frames. Most of this code is shown in a blue font to set off the code from the surrounding discussion. In some cases, portions of the HTML are shown in a red font to emphasize important differences in two sections of HTML that we are comparing. We will also illustrate the frame set that this code creates by showing the frames in a new broswer window that we open with Javascript.

Don't be confused by our use of new windows to illustrate the frame sets. You don't need to use a new browser window to use frames. We only open the example frame sets in new windows here:

1)

so you can simultaneously view the frame set code and the frames that the code creates, and

2)

to avoid the possibility of confusion that might result if we were to open one or more new frame sets inside the frames we're already using for webTeacher.

Also note that we open the new windows with Javascript here rather than with HTML simply because we want the new windows to have minimum browser adornments (no point having extra buttons and menus getting in the way) and because we want to be able to control the size of the new windows. A little later we'll discuss how the size of a frame set relates to the size of window that contains the frame set.

Very Simple Frame Sets - Two Rows or Two Columns

Two Rows - Let's begin our consideration of frames with Example 1. This is a frame set with two rows: the top frame takes up 20% of the available vertical space and the bottom frame takes up 80% of the available vertical space.

The HTML code used to create this first frame set is:

<frameset rows="20%,80%">
<frame src="file1.html">
<frame src="file2.html">
</frameset>

Two Columns - As our second example, here is a frame set with two columns: Example 2. The left frame takes up 20% of the available horizontal space, and the right frame takes up 80% of the available horizontal space.

The HTML code used to create this second frame set is:

<frameset cols="20%,80%">
<frame src="file1.html">
<frame src="file2.html">
</frameset>

The red text, as we mentioned earlier, is used here to indicate the only difference in the HTML code for the two examples.

The most important things to notice in these examples are:

  • The code to create a frame set is enclosed by the frameset tag. <frameset> marks the beginning of the set and </frameset> marks the end.
  • There must be at least one attribute of this tag to specify the "geometry" of the frame set. In Example 1, the HTML indicates that the frame set will consist of two "row" frames, i.e., two frames with one on top of the other. In Example 2, the HTML indicates that the frame set will consist of two "column" frames, i.e., two frames with one beside the other. The number of rows or columns is indicated by the number of values that appear in the comma-delimited list after either the rows or cols attribute of the frameset tag.
  • Inside the frameset tag there is one frame tag for each frame in the frame set. Each frame tag has a src attribute that specifies the file that is to be loaded into that frame. The first frame tag goes with the first (topmost or leftmost) frame in the set. The next frame tag goes with the next (below or to the right) frame in the set, etc.

The frameset and frame tags may have additional attributes that will allow further customization of a frame set and/or endow the frame set with additional functionality. We begin our discussions by considering only the minimum attributes that these tags must have; we'll take a look at some of the other features later.

In these examples file1.html and file2.html are very simple files; each just has a short piece of text on a solid color background:

file1.html

<html>
<head>
<title>File 1</title>
</head>
<body bgcolor="#ff0000">
File 1
</body>
</html>

file2.html

<html>
<head>
<title>File 2</title>
</head>
<body bgcolor="#0000ff">
File 2
</body>
</html>

Here is file1.html displayed in a window by itself, and here is file2.html displayed by itself. We chose these simple files to load into the frame set because we wanted to emphasize the structure of the frame set and how to create it, not obscure matters with particular material in the files that are loaded into the two frames.

In fact, however, you can load into any frame any HTML file (even a full frame set), any image file, or any other type of file that can be displayed inline on a web page. The files can, of course, be either local files or files anywhere on the web, as long they are specified with the correct local path or URL.

Example 1 Reversed

You've probably guessed by now that if you want to interchange the frames in our first example, all you need to do is switch the values in the list assigned to rows:

<frameset rows="80%,20%">
<frame src="file1.html">
<frame src="file2.html">
</frameset>

Here's the new frame set this modified code creates: Example 3.

But now file1.html is in the large frame while file2.html is in the small frame. If we also want to switch the files as well as the two frames to get Example 3a, it should be clear what we need to do:

<frameset rows="80%,20%">
<frame src="file2.html">
<frame src="file1.html">
</frameset>

Next