Step By Step: Frames

Frames: Step By Step

Follow these steps to use frames in your Web pages.

This "Step By Step" consists of two parts. In the first part we explain how to create a "simple" frameset page, one that is divided up into either rows or columns, but not both. A good example of this would be a home page that has a "toolbar" that takes you to different portions of a Web site.

Once you've learned how to create simple frameset pages, it's actually quite straightforward to create a "complex" frameset page; one that can have both columns and rows. The second part of this page explains how to create a complex frameset page.

Creating a Simple Frameset Page

Step 1: Decide how many rows or columns you want.

Remember, frames are a way of dividing Internet Explorer's screen into different independent portions. In the "simple" case, you will be dividing the screen into columns or rows. For this example, we'll create a page with two rows.

Step 2: Create the pages that make up the rows or columns.

The most important thing to remember about frames is that a frameset consists of more than one HTML page. If you have a page with two frames in it, three HTML files are needed: one for each of the frames, and one that describes how the frameset will be laid out.

In this case, we'll say that you've created two HTML pages, row1.htm and row2.htm. The former will be shown in the top frame, and the latter will be shown in the bottom frame.

Step 3: Create the frameset page.

The next step is to create the frameset page that describes how the page is laid out. Here's the HTML for our frameset page:

<HTML>

<FRAMESET ROWS="20%, *">
<FRAME SRC="row1.htm">
<FRAME SRC="row2.htm">
</FRAMESET>

</HTML>

When viewed in Microsoft Internet Explorer 3.0, this page will be divided into two rows, showing the two files that you created: row1.htm and row2.htm.

To create a page with two columns instead of two rows, simply use COLS instead of ROWS in the FRAMESET tag:

<FRAMESET COLS="20%, *">

Step 4: Set the relative sizes of the rows or columns.

Observant readers will notice the following line in the above example:

<FRAMESET ROWS="20%, *">

This line determines the relative sizes of the two rows. In this case, the top row is 20% of the height of the window, and the bottom row takes up the remaining 80%. There are four ways to tell Internet Explorer how tall to make a row:

Percentage of screen height, as above.
Number of pixels. To make the first row 200 pixels tall, use ROWS="200, *".
Use "*", meaning "whatever is left over." The above example also uses this method.
Use "n*", where n is a number. This means "n parts of what's left over." Thus ROWS="*, 2*" makes two rows where the first one is 1/3 the height of the screen and the second is 2/3 the height of the screen. And ROWS="100, 2*, *" creates three rows: one 100 pixels tall, one that takes up 2/3 of the remaining space, and one that takes up the last 1/3.

Step 5: Decide where the links should go.

Because each frame is a separate browser, clicking a link in one of the frames will go to a new page in that frame. In some cases that may not be what you want.

It's possible to create a link that, when clicked, makes a new page show up in another frame. To do this, you need to name the frames:

<HTML>

<FRAMESET ROWS="20%, *">
<FRAME NAME="firstrow" SRC="row1.htm">
<FRAME NAME="secondrow" SRC="row2.htm">
</FRAMESET>

</HTML>

Let's say you want to be able to click a link in the top frame and have a new page come up in the bottom frame. To do this, place the following in row1.htm:

<A HREF="newpage.htm" TARGET="secondrow">Click here to see "newpage.htm" in the bottom frame</A>

The TARGET attribute causes the link to be opened in the bottom frame.

If you want to be able to click a link and have a new page fill the window (replacing the frameset), use TARGET="_top" as follows:

<A HREF="newpage.htm" TARGET="_top">Click here to see "newpage.htm" take up the whole window</A>

And if you want the page to come up in an entirely new Internet Explorer window, use TARGET="_BLANK" as follows:

<A HREF="newpage.htm" TARGET="_BLANK">Click here to see "newpage.htm" come up in a new window</A>

Note: This works even on pages that do not have frames. To avoid cluttering the user's desktop with windows, this feature should be used sparingly.

Step 6: Do you want users to be able to resize and scroll?

If you do not want users to be able to resize a frame, add a NORESIZE attribute to the FRAME tag:

<FRAME SRC="row1.htm" NORESIZE>

If you do not want a frame to have scrollbars, add a SCROLLING attribute to the FRAME tag and set it to "NO" to disable the scrollbar:

<FRAME SRC="row1.htm" SCROLLING=NO>

Both of these settings are useful when creating toolbars.

Step 7: Do you want 3-D borders around your frames?

By default, frameset pages have 3-D borders between the frames. For a completely seamless look, change the FRAMESET tag to the following:

<FRAMESET ROWS="20%, *" FRAMEBORDER=0 FRAMESPACING=0>

This instructs Internet Explorer to turn off all 3-D borders between frames and to place the frames right up against each other. This feature, which is unique to Internet Explorer, is called borderless frames.

To learn how to place a colored or textured border between your borderless frames, see Advanced Topics below.

When using borderless frames, it's often helpful to be able to position a frame's contents directly at the top left corner of the frame, instead of a few pixels down and to the right, as is the default.

To do this, change the individual frame page (in this case, row1.htm or row2.htm) so its BODY tag includes the following:

<BODY TOPMARGIN=0 LEFTMARGIN=0>

Congratulations!

That's all it takes to create a simple frameset page of your own. The next section explains how to make complex framesets, which can be divided into both columns and rows.

Creating a Complex Frameset Page

Now that you know how to create simple frameset layouts, it's very straightforward to make complex ones. A complex frameset is just a simple frameset, some or all of whose frames are also framesets.

Let's say we want to create a page that has an index on the left and three frames of content on the right:

To do this, we create a frameset with two columns. The first column will contain frame 1, and the second will contain frames 2 through 4. Here's the HTML:

<HTML>
<FRAMESET COLS="20%, *">

The first column is just a single frame:

<FRAME SRC="frame1.htm">

But for the second column, instead of using another FRAME tag, we insert a FRAMESET tag with three rows.

<FRAMESET ROWS="20%, *, 20%">
<FRAME SRC="frame2.htm">
<FRAME SRC="frame3.htm">
<FRAME SRC="frame4.htm">
</FRAMESET>

Then we close the FRAMESET and HTML tags, and we're done.

</FRAMESET>
</HTML>

Thus, by "nesting" one frameset inside another, complex frame layouts can easily be built from simple ones.

We could have created the same layout by using two FRAME tags and pointing the second FRAME tag to a separate file that was itself a frameset. The above syntax, in which we can insert a FRAMESET block instead of a FRAME tag, is actually a shorthand that reduces the number of files needed by one.

There's one case in which you don't want to use the shorthand: when you want to click a link in frame 1 and have a page come up that replaces frames 2, 3, and 4. In that case, you would do it the longer way, giving the second frame a name and using <A HREF="address" TARGET="name of right-hand frame"> to replace the contents of that frame.

Advanced Techniques

Making Frameset Pages Visible in Browsers that Don't Support Frames

Since frameset pages usually contain no content, just a set of FRAMESET and FRAME tags, they tend to not show up at all in browsers that don't support frames. Fortunately, the frames standard provides an easy way to provide content for non-frame browsers.

<HTML>

<FRAMESET ROWS="20%, *">
<FRAME SRC="row1.htm">
<FRAME SRC="row2.htm">
</FRAMESET>

<NOFRAMES>
Welcome to my home page! Click below to see my vacation photos...
etc.
</NOFRAMES>

</HTML>

Internet Explorer and other browsers that support frames will ignore everything between <NOFRAMES> and </NOFRAMES>. Browsers that do not support frames will ignore the frames and display everything between the NOFRAMES tags.

Placing a Colored or Textured Border Between Frames

With Internet Explorer 3.0 you can not only turn off the 3-D borders between frames (see Step 7 above), you can also specify that the borderless frames should be a particular distance apart. Because this allows the background of the frameset page to show through, if your frameset page has a background color or image the effect is that of a colored or textured border between the frames.

<HTML>
<BODY BACKGROUND="woodgrain.gif">

<FRAMESET ROWS="20%, *" FRAMEBORDER=0 FRAMESPACING=20>
<FRAME SRC="row1.htm">
<FRAME SRC="row2.htm">
</FRAMESET>

</BODY>
</HTML>

The code above places a 20-pixel border between the two rows of the frameset. Because the author has specified a background graphic (woodgrain.gif), there will now appear to be a 20-pixel-wide textured border between the frames. (To use a background color instead of a background image, use BODY BGCOLOR=color name or value.)

Back to the HTML Authoring Features page