Framing Your Web Pages

In the world of Web design and publishing, most pros create layout and effects using Cascading Style Sheets (CSS) and scripts. Doing this ensures that Web pages not only comply with Web standards, but are also accessible. But CSS and scripts aren’t the only way to spice up your Web pages. An older Web technique, called frames, does a great job, too.

What Are Frames?

Frames are a way to divide a browser's display into separate windows. As you’ve probably guessed, those windows are called frames. The advantage of using frames over, say, tables is that frames allow you to display multiple pages in a single browser window. And each page is independent of the other pages. However, you can add links to the frames on your page and even to someone else's Web site.

One common use of frames is to display a menu in one window while displaying content in another. Each time you click the an item on the menu, it appears in the content frame.

The Tags

You only need three tags to create a framed Web page: <frameset>, <frame>, and <noframe>. There's also a fourth tag, <iframe>, which is discussed later.

<frameset>

The basis of a framed Web page is the <frameset> tag. A frameset is a container holding individual frames. The frameset is like a tray with multiple slots. The tray holds everything together, while each slot is an individual frame. You can add attributes to the <frameset> tag to control the number of columns and rows the frameset contains.

<frame>

The <frame> tag defines the size, location, and attributes of individual frames. as with the <frameset> tag, you can add attributes to the <frame> tag to control the size, position, and other characteristics of the individual frames on a page.

<noframes>

The <noframes> tag, as you may have guessed, lets you embed content for browsers that don't support frames. The use of this tag is discussed later in the article.

Putting Together A Simple Framed Page

Regardless of how you build your Web pages, sooner or later you’ll need to edit the pages at the HTML code level. Knowing how to build frames from scratch, and knowing what the frame tags do, will come in handy.

While adding frames to your Web page is simple, building a framed page takes a bit more work than creating a conventional page. First, you need multiple files: one to define the frameset, and one each for the individual pages that make up the individual frames in the frameset.

This example is a page divided into two vertical columns. The left column contains a menu, and the right column displays the content. The left column is smaller than the right one.

The skeleton of the page looks like this:

<html>

<head>

<title>My first framed page</title>

</head>

</html>

Notice there is no <body></body> tag pair. It's not necessary. Most frames-capable browsers won't display frames that are contained within <body> tags. You add the markup for the frames before the </html> tag.

Using <frameset>

Start off with the <frameset> tag. Alone it doesn't do much you have to add either the rows or colsattribute to tell a browser how to present the frames that make up the frameset. The rows attribute, obviously, defines the number of rows on the page. The cols attribute determines the number of columns.

To create two columns, use the cols attribute like this:

The left column will take up 30% of the screen, and the right 70% of the screen. You can also specify the size of rows and columns using pixels, like this: <frameset cols="150, 200">. To automatically size one row or column, use thiscode: <frameset cols="30%, *">. By using the asterisk (*), the right column will automatically take up 70% of the screen.

Using <frame>

Now that we have the container, it's time to add the frames themselves using the <frame> tag. For the left frame, set up the frame like this:

For the right frame, set up the frame like this:

Notice that the <frame> tags have the attributes src, name, and scrolling. Frames have several other attributes, but these are generally the most widely-used ones.

The src attribute points to the file that appears in the frame. The left frame displays a menu from the file menu.htm. The right frame displays the first page of your content, page1.htm. You can, of course, name these files whatever you want. You have to create these files yourself; if they don't exist, the frames will be empty.

The name attribute is useful when linking from one frame to another. The name attribute is discussed later in the article. The scrolling attribute controls whether or not a frame has a scrollbar. You can set the attribute to no, yes, and auto. auto adds a scrollbar only if the contents of a frame go past the edge of the browser window.

Your Framed Page

When you put it all together, the code for the page looks like this:

<HTML>

<head>

<title>My First Framed Page</title>

</head>

</frameset>

</html>

Remember that the principles described in this article also apply to pages made up of rows.

Linking Between Frames

If you want your visitors to click a link in one frame, and have the a page open in another frame, you must add the target= attribute to the link. The target= attribute points to the name of a frame defined using the name attribute.

In the page we built, we named the frames "menu" and "content". So, to open an item on the menu in the main frame, use a link like this:

<a href="basic_tags.htm" target="content">The Basic Frame Tags</A>

Linking to external Web pages and sites are a bit more tricky. It's annoying to click on a link to another site and have it open in your frameset. Especially if that site is framed itself. To avoid this, use the target="_top" attribute. The _top attribute breaks visitors out of your frames.

Inline Frames

You may want to stick a single frame on your Web page without dividing it into separate windows. You can can do with with an inline frame. An inline frame is a frame that sits as an independent portion of your document. The rest of your Web page flows around the frame, and isn't affected by it.

Add an inline frame to your page using the <iframe> tag. The same general rules that apply to using frames apply to using inline frames. You must specify the location of an HTML file that contains the content of the inline frame, and the height, width, and alignment of the frame.

Here is the basic code for an inline frame:

Some content for non-frames browsers

</iframe>

Inline frames are great for including content that frequently changes, like news flashes, a daily picture, or a daily review of a Web site or piece of software. By using an inline frame, you don't need to continually re-code your Web page. You only need to update the frame's source file. You can also add links to the inline frame. Unless you add the attribute target="_top" to the link, any page you link to will appear in the inline frame.

Using the <noframes> Tag

While frames-capbable browsers rule the Web, there are still millions of people out there using browsers that don't support frames. You should keep these people in mind when building your pages. That's where the <noframes> tag comes in. This tag contains content that browsers without frames support can display. Many Web authors use <noframes> like this:

<p>Click <a href="noframes.htm">here</a> to view a no-frames version of this page.</p>

Notice that the structure of an actual Web page is embedded between the <noframes></noframes> tag pair. When viewed in a non-frames browser, this content will automatically appear. All you have to do is copy and paste your main page or table of contents between those two tags. The only real work you may have to do is remove any target= attributes from the links on the embedded page.

How Many Is Too Many?

Theoretically, you can add as many frames to a Web page as you want. However, you should only add between two and four at the very most. Anything more becomes quite unsightly. I once saw a Web page divided into dozens of tiny frames. It looked like a checkerboard. All these frames did nothing for the Web page. When using frames, try to balance form with function. Use only what you need and nothing more.

Adding frames to your Web pages can give them an added bit of pizzazz. If created properly and with accessibility in mind, frames can also enhance the browsing experience of visitors to your Web page.