Web Site Building · HTML Advanced Topics · Frames 1

What this is about:

Love 'em or hate 'em, frames are an integral construct in site building. Done right, frames can be an effective navigational tool. Done wrong, you'll incur the wrath of everyone who visits your site, once. Therefore, it's a good idea to also offer viewers the opportunity to select a non-frames version of your site.

Frames Partition the Page

How Does It Work?

Frames divide a page into panels or sections, each containing another page or HTML file. By using frames you create a simple and consistent means of navigation that allows you to take your visitor anywhere on the site from the same central location. A framed page is actually what is called a Frameset. This set contains the placement and size information that determines the individual frames that make up the page. Each frame is its own separate HTML file, and the URLs of these files form the frameset. When designing the frameset, consider what you want to accomplish. Think first of how it's going to work, then how it's going to look.

Simple, huh? Well, that's everything you need to know about frames. No? Alright, just kidding. Here's what the above frameset means. It is a two column set featuring a frame for navigation on the left taking 22% of the page width, and the main area frame to its right using the rest (indicated by the *) of the available page width. Place framesets in the <HEAD> section of your primary entry page.

When defining and rendering frames as columns, the browsers parse and order the <frame> tags from left to right. Switching the size attributes of the <frameset> tag and the order of the <frame> tags will reverse the display of the columns on the page. You may also specify frame widths as actual pixel sizes rather than as a percetage of page width. This method gives you more control over absolute layout. Remember that not everyone sizes their browser window the same. To make the above frameset display the navigation frame as 130 pixels rather than 22% of page width, code the tag <frameset cols="130,*">.

Rows, Nests, and Borders

Now that you know how to control the size of frames, how can you make them vertical instead of horizontal? For example, instead of a navigation menu on the side, you want a frame on top to place your ad banners in. This is easily accomplished by modifying the frameset tag to specify rows instead of columns:

This sample will generate a three row frame beginning with a 60 pixel high banner frame on top, a 20 pixel footer at the bottom, all surrounding the rest of the main page. Just don't get carried away, we'll talk about do's and don'ts later.

Nesting Frames

It is possible to include both rows and columns on your framed page. Imagine in your mind the examples we have explored so far. You can create a page that has a navigation menu on the left, a banner ad title area at the top, and your main content display frame on the remainder of the page. To do this, include a frameset within another frameset. This technique is known as nesting, and is also commonly found in tables. Let's examine a nested frame sample:

Interpreting the tags above, the banner frame is created first. Then, instead of placing a regular frame for the bottom window, a second frameset is inserted that splits vertically into two more frames. The frame on the left represents the navigation menu, and the frame on the right is the main content area. Using nested frames, there are infinite possibilities, but again don't go overboard. A conservative layout is nearly always best.

By default, frames will be surrounded by ugly borders. They will also be resizable, which means all your hard work making the frames have just the right layout will go down the drain when your visitor resizes them. To prevent that you add the following four attributes to each HTML tag within the frameset: "border=0 frameborder=0 framespacing=0 noresize". Of course, if you want borders, you can change to non-zero values. Use what works best for you.

Proceed to HTML Frames Page 2.