Understand Frames

Although frames look intimidating on the surface, they really are simple to construct. In fact, one of the reasons for their overuse might be that when people find out how easy they are to create, they go “frame crazy” and use them all the time. However, frames are not an all-purpose site creation tool, but rather a means for creating dynamic layouts and efficient navigation systems.

Frames Allow for Multiple Page Display

What, exactly, are frames? Simply put, frames enable you to display more than one page at a time in the same window. Until now, when you have displayed your XHTML pages, you’ve done it one at a time. To display more than one document at a time, you would have to open multiple browser windows. Frames change all that. With a fairly simple set of elements, you can display two, four, eight, or even more pages in the same browser window. But why would you want to do this?

Say you are an author, and you want to put together a Web site to publicize your book. As you design the site, you decide that you want your book’s cover to appear on every page, but you’d like to include a lot of different content. Perhaps you want to put some reviews on one page, an excerpt on another, and reader comments on another, but you always want to keep your book’s cover in front of your potential customer.

You could design a site with tables, creating five or ten separate pages, each with the same layout but different content. Or you could construct a three-frame page that features the cover of your book and a banner with your name at the top, content on the right side, and a navigation bar on the left side. Then, when a visitor clicks a link in the navigation bar, only the content frame will change; everything else stays where it is. In this case, you have made your life easier by not creating the same layout ten times. You also have made things easier for your visitor because your pages will download more quickly. Remember, only the text content has to reload—not the images in the other frames. Less content equals faster load time.

Disadvantages of Frames

Although frames provide for more efficient site design and navigation, they come with some noteworthy disadvantages attached. In fact, if you are not careful, you actually can make getting around your site more difficult. Consider some of the following ways in which frames can make site navigation confusing:

  • Too many frames on a page present a dizzying array of visual options and choices, often causing the focus of your site to be obscured.

  • Overuse of frames slows down loading time. Keep in mind that each frame is loaded with a separate HTML document. Each of these documents takes time to download. Thus, the more frames you use, the longer it is going to take for your site to be fully loaded on the user’s machine.

  • Frames pages don’t mix well with search engines. Some search engines won’t even look at a frames-based site. Others will, but as you will learn later in this chapter, your frameset document provides no content in and of itself. If this is also the main page for your site, search engines don’t have much to work with.

  • Frames pages can pose navigation problems for someone who enters your site through a “back door.” If a search engine’s spider has indexed the content pages on your Web site, visitors might come to your site indirectly through one of these pages, rather than through your home page. In this case the page will display apart from the frame structure you created. If you are relying solely on frames for navigation purposes, your visitors will find no navigation bar. In other words, their visit to your site will be a dead end.

  • Frames pages are difficult to bookmark. Visitors to your site might want to mark a page on your site as one of their favorites. Because the basic building block of a frames-based site is a frameset document, they will actually be marking the location of the frameset, not the content they are viewing. If your site is a simple one, that might not be a problem; however, if your navigation system is complex, your visitors might have to wade through a lot of pages to get back to the one they thought they had bookmarked.

  • Although the numbers are small, there are still browsers out there that don’t support frames. Someone coming to your site with one of these browsers will find it inaccessible. Nonvisual browsers for the handicapped also have trouble with frames.

You might be wondering why you should even bother with frames. After all, there are plenty of other ways to present a Web site without using them. In fact, many excellent sites use no frames at all. So why use them?

Advantages of Frames

There are any number of reasons you would want to use frames on your site. Frames can help you do things that would be difficult or impossible to do without them. For example, frames enable you to create some of the following effects:

  • Frames allow you to display multiple pages in a single browser window.

  • Frames allow you to keep some content static as other content changes.

  • Frames allow your visitors to access content from a different Web site without leaving yours or opening a second browser window. Thus, if you have a second site and want to include content from it, frames make it easy.

  • When you use seamless frames you can create the impression of a single page with dynamically changing content.

  • Frames enable you to update the navigation system for your entire site by editing only one document.


    If you prefer to have a link open in a separate window rather than in one of your frames, just use the target="_blank" attribute in your link tag. For example, the link <a href"www.osborne.com" target="_blank">Open Osborne’s Web Site</a> will cause a new window to open. Be sure to include the underscore character ( _ ) before the word “blank.”

To keep frames in perspective, remember that, although frames are useful tools, no tool is right for every task. If frames help you create a better site, by all means use them. But don’t load your site with frames just because you think they’re cool.

Understand Frame Elements and Attributes

Like tables, HTML frames are very easy to build. As a matter of fact, they are so easy that you will wonder why you haven’t used them before now. In many ways, creating a site based on frames is easier than building it with tables. Although a frames-based site can become complicated, the basic concept is simple. First, you create the frames with a master document, called a frameset. This establishes the layout. Next you create standard a XHTML documents to fill the frames you’ve just designed.

start sidebar
Did You Know?—Who Developed the Idea of Frames?

Frames originally were developed by Netscape and first supported in Netscape 2. Later, they were made part of the HTML 4 standard. Virtually all new browsers support frames, but there are still some older browsers in use that do not.

end sidebar

Understand the Frameset DTD

You learned in Chapter 7 that XHTML has three Document Type Descriptions or DTDs: Transitional, Strict, and Frameset. In Chapter 8, you applied the Transitional DTD to your table-based layout. For your frames pages, you need to use the Frameset DTD. This means that the very first line of your HTML document (even before the opening <html> tag) needs to be a document type declaration, identifying the document as a frameset. This declaration should be typed in exactly as you see it in the following code listing:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"   "DTD/xhtml1-frameset.dtd">

You need only one frameset document for a frames-based page. The documents that actually fill the frames should be normal XHTML documents, using either the Transitional or Strict DTD. If you find this confusing, think of the frameset document as if it were a picture frame capable of holding more than one photo. You’ve seen these in stores: one big frame, several places for pictures. That’s how a frameset works. The frameset is like a big picture frame, divided into multiple sections. Your XHTML documents are the “photos” that go into the various parts of the frame.

Understand the Frameset Document

Another unique part of the frameset is how the document is constructed. By now, you are accustomed to using the standard sequence of XHTML document elements:

<html>      <head>         <title>Standard XHTML Document</title>      </head>      <body>      </body> </html> 

There is one significant difference in how a frameset document is built. The frameset document does not have a <body> element. Instead, you use the <frameset> and <frame /> elements. A basic frameset document (with no frames defined) would look like the following code:

<html>      <head>           <title>Basic Frameset Document</title>      </head>      <frameset>      </frameset> </html>

As you’ll see in the next section, to add frames to your frameset, you insert one <frame /> element for each frame. The <frame /> elements are nested between the <frameset> tags.

Understand Basic Frame Elements

The first step in learning how to work with frames is in understanding the elements used to create them. You need only two elements to create a page with frames: <frameset> and <frame />. The basic frame elements (and what they do) are listed here:

  • <frameset> The frameset element is what actually creates the multiple frames. When creating a frames-based page, you use this element instead of the <body> </body> element.

  • <frame /> The frame element is used to specify each of the frames that will be visible on your page. Like the <img /> element, <frame /> is an empty element and requires no closing tag.

Understand Basic Frame Attributes

Two attributes are essential to creating frames, while others enable you to fine-tune your frames. The essential attributes are the columns and rows attributes. These attributes enable you to control the layout, size, and number of frames that will appear on your page.


Actually, you only need one of these two attributes. Unlike HTML tables, you do not need to have both rows and columns; you can create a frame page with either rows or columns.

  • cols= "column width" This attribute defines a frameset in columns. The default setting is one column, which takes up 100 percent of the page. If you want more than one column, specify the width of each column, separated by commas. You can specify width in pixels or percentages. By using the asterisk (*) as a wildcard, you can create a column that dynamically adjusts to whatever space is left over. In the following example, the columns attribute will create three vertical frames, one taking up 20 percent of the screen, the next using 30 percent, and the last using the remaining 50 percent:

    <frameset cols="20%, 30%, *">
  • rows="row height" The rows attribute defines a frameset in rows. The default setting is one row, taking up 100 percent of the page. As with columns, you can define row height with pixels (fixed design) or percentages (dynamic design) and use an asterisk as a wildcard.


    Whenever possible, specify row and column dimensions with percentages and the asterisk. The advantage of using dynamic design is that your frames will adjust to fit browser windows, no matter how they are sized. If you give absolute dimensions in pixels and a visitor has resized his or her browser, your frames might be cropped. Also, how a page will be displayed is determined by the screen resolution your visitor is using. Visitors making a quick scan of your site might miss parts of the page that scroll off screen if they are using a low resolution (640 480).

Although there are some other elements, and quite a few other attributes, that can be applied to frames, these are more for fine-tuning the frames and how they display and are covered later in this chapter. All you need for creating your first frames page are the elements and attributes we’ve covered so far.

Project 13: Create a Simple Frameset

The best way to learn HTML frames is by experimentation. By constructing a simple page with four frames, you will learn what you can do with them and how to modify them. For this example, you will start by creating some display documents.

Build Your Display Documents

Frames need something to display to work correctly. Before you begin constructing a frameset, you will want to create some simple HTML pages. For this example, these pages needn’t be complicated or filled with content. A plain page with the text “This is page 1” (or something equally simple) will suffice. Just for fun, you might want to specify a different background color for each of the pages.

To create a set of display documents, follow these steps:

  1. Create a directory on your hard drive named Framesample.

  2. Open template.htm and save it as frame1.htm.

  3. In the <body> </body> portion of the page, add this line: <h1>This is page 1.</h1>.

  4. To add visual interest, choose a background color for the page by adding a the <style> element in the <head> portion of your page. In between the two <style> tags, add a rule that uses the CSS background-color property to define a background color, as in the following example.

    <style>      body {background-color: white;} </style> 
  5. If you set a page to a dark color (such as black, navy, green, maroon, or purple), you also might want to specify white or another light color as a text color, as in the following listing:

    <style>      body {background-color: black;            color: white} </style>

    For other color possibilities, read Chapter 4.

  6. Save the page as frame1.htm, in the Framesample directory.

  7. Create seven more pages, saving them as frame2.htm, frame3.htm, and so on.

The following code creates a black page with white text. Change the bgcolor and text values to create different combinations:

<html>      <head>           <title>Frames</title>           <style> body {background-color: black;        color: white}           </style      </head> <body> <h1>This is page 1</h1> </body> </html>

After you have some documents to display, it’s time to move on to the next step in making frames pages: constructing the frameset.

Construct a Frameset

The heart of a frames page is the frameset. Think of it as a master document that controls the display of your frames. Although a frameset document is an HTML page in its own right, it displays no content of its own. The frameset’s contents are the frames. Keep in mind that when you are doing frames you must always have one extra document: the frameset.

Build a Frameset

You construct a frameset document the same way you do any other HTML page—with one important exception: A frameset page uses the <frameset> element in place of the <body> element. The reason for this is that your frames make up the body of the frameset document.


A frameset page can use the <body> </body> element, but only if it is contained within the <noframes> </noframes> element. This is to provide content for browsers that do not support frames.

At its simplest, with no frames defined, a frameset will look like the following code listing. Using template.htm, create a frameset by replacing the <body> element with the <frameset> </frameset> element. Save it as framesample.htm.

<html>      <head>           <title>Frame Sample</title>      </head>      <frameset>      </frameset> </html>

However, if you try to display this, you won’t see much of anything because the frames have not yet been defined.

Define Frame Structure

As mentioned earlier, you define frames using the cols=" " and rows=" " attributes. If you read Chapter 8, the idea of table columns and rows will be familiar. However, frames work a bit differently. You can have either columns or rows or a combination of both. For example, to construct a frameset with four equal columns, you would modify the opening <frameset> tag to read:

<frameset cols="25%, 25%, 25%, 25%">

If you want instead to have a frameset with four equal rows, change to the rows attribute:

<frameset rows="25%, 25%, 25%, 25%">

To divide your frameset into four equal parts with both columns and rows, you would modify the <frameset> tag to look like this:

<frameset rows="50%, 50%" cols="50, 50%">

If you add this code to your page and try to display it, you will still get a blank page. Why? Because defining a frameset is not enough. You also must specify what pages your different frames will load. For that, you use the <frame> </frame> element.

Specify Frame Content

Your frames provide the content for your page. If you define frame structure in the <frameset> element but don’t tell the browser what to put into the frames, it will ignore the frameset altogether. Because the last example uses both rows and columns to construct four frames, you will use the <frame /> element four times.

For each <frame /> you create, you must also use the src attribute to tell the browser which file to load in that frame. For example, to use frame1.htm in one of your frames, you would include the following tag: <frame src="/books/4/238/1/html/2/frame1.htm" />.

Try including the preceding line plus three others in your frameset. Your complete frameset should look like the following code and illustration:

<html>      <head>           <title>Frame Sample</title>      </head>      <frameset rows="50%, 50%" cols="50%, 50%">           <frame src="/books/4/238/1/html/2/frame1.htm" />           <frame src="/books/4/238/1/html/2/frame2.htm" />           <frame src="/books/4/238/1/html/2/frame3.htm" />           <frame src="/books/4/238/1/html/2/frame4.htm" />      </frameset> </html>

click to expand

Create Nested Frames

You can create even more complicated framesets by nesting them. Chapter 1 covers the concept of nesting, which means putting complete sets of tags inside one another. To nest frames, you will place another set of frameset tags inside your existing frameset. For example, consider the preceding frameset, which created four equal-sized frames. What if you decide to divide the bottom-right frame into two smaller frames? One way to do it would be to add another <frameset> in place of the <frame /> tag for that frame. Your code will be changed to look like this:

<html>      <head>           <title>Frame Sample</title>      </head>      <frameset rows="50%, 50%" cols"50%, 50%">           <frame src="/books/4/238/1/html/2/frame1.htm" />           <frame src="/books/4/238/1/html/2/frame2.htm" />           <frame src="/books/4/238/1/html/2/frame3.htm" />                 <frameset cols="50%, 50%">                      <frame src="/books/4/238/1/html/2/frame4.htm" />                      <frame src="/books/4/238/1/html/2/frame5.htm" />                 </frameset>      </frameset> </html>

click to expand


By changing the columns and rows attributes, you can come up with many different possible frame constructions. The preceding illustration is only one possibility.

Although it is possible to come up with many different combinations of nested framesets, you might want to think twice about doing it. Nesting frames is one way to make your pages so complicated that you destroy their effectiveness. If you have a good reason to nest frames, by all means do it. Otherwise, let nested frames remain a curiosity, but not part of your regular Web arsenal.


Don’t forget to include closing tags (or closing slashes on empty elements). Also, don’t forget to properly nest your elements. If you make any mistakes, your frames will not display properly.

How to Do Everything with HTML & XHTML
How to Do Everything with HTML & XHTML
ISBN: 0072231297
EAN: 2147483647
Year: 2003
Pages: 126

Similar book on Amazon

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net