9.1 The Frame Page

What your Web page visitor cares about is what's in the frames: the text and graphics. But for you, the biggest challenge is creating the special Web page—the frameset page—that gives the frames their structure. The frameset page itself usually doesn't contain text or graphics; it just describes the number, size, and placement of the frames.

This page tells a browser which Web page should load into each frame, whether the frame has borders or scroll bars, and whether the visitor is allowed to resize the frame by dragging its border.

Frames let you keep one element in place—the banner and navigation bars shown here at www.mnh.si.edu/africanvoices/, for example—while other contents of the Web page change. This way, the banner and navigation bar remain visible in one frame, even as your reader scrolls to read a long page full of text or even reloads the page in another.

The frameset page accomplishes all this with the help of two HTML tags: the <frameset> and <frame> tags. A <frameset> tag provides the superstructure of the layout: the number and size of frame rows and columns, as well as the overall border properties of all of the frames. Nested inside the <frameset> tag, a <frame> tag identifies the specifics for each frame: which page loads into the frame, and what visual elements —such as scroll bars—appear within the frame.

When your visitor's Web browser loads a Web page that contains frames, it first loads the frameset page and determines the number, size, and appearance of the frames, as described in the frameset. It then draws each of the frames in the browser window, and finally downloads the Web pages that appear in each frame.

UP TO SPEED When Frames Aren't the Best Solution Frames are useful for banner logos, navigation bars, and so on. But if you look around, you'll notice that not many big-time Web sites use them. The reason: frames have serious drawbacks. First, bookmarks and favorites don't always work with frames. When you click a link inside a frame, a new page loads inside it; if you click a link on that page, yet another page will load. While it looks as if you are on a different page, the URL in the Address bar remains unchanged. That's because a Web browser uses the address of the frameset page. In other words, suppose you follow several links within a single frame, and then use your browser's Add Bookmark or Add to Favorites command. Later, when you select the bookmark or favorite, you'll see the frameset page and the original pages inside it—you won't see the page you wound up on. Printing a Web page with frames can be tricky, too. Since a frames-based page is composed of multiple Web pages, the browser doesn't know which page you want to print. Different browsers handle this dilemma differently, much to the confusion of novice Web surfers who don't understand the frames concept. For example, if you're using the Mac version of Internet Explorer 5 to view the second page in Figure 9-2, and you click one of the navigation buttons in the top frame, Internet Explorer thinks you've selected that frame. If you then choose EditPrint, you'll print only that top frame—a useless row of buttons! Still, used in moderation and in good taste (see Figure 9-2), frames can be an excellent addition to your bag of Web tricks. Small sites, where users aren't likely to print or bookmark the pages, can make good use of frames. And you needn't use frames everywhere on a site. You can effectively create small presentations within a site—such as an online portfolio—that benefit creatively from frames.

Since a frameset page is just an empty structure, you must also create Web pages for each frame you wish to display. So if you add three frames to a page, you're actually creating four different Web pages—the frameset page, plus a page for each of the three frames. Because frames create more Web site files for you to manage, you may save yourself some headaches by keeping the number of frames in your site to a minimum.

Frames can be obvious and ugly, or subtle and effective. Top: This fictional Web page has five frames. Notice the thick border between the frames and the unnecessary scroll bars that appear in the banner and sidebar.

Bottom: This page (bmrc.berkeley.edu/resources/) has three frames, but with borders turned off, the frames merge into a unified presentation. Only a single scroll bar appears in the content area (middle frame) of the page. This is your only clue that this page uses frames.

In this example, the advantage of using frames is that the site logo and the navigation (top frame) and the site tools (bottom frame) always remain visible even if you scroll to read the text contained in the middle frame.