Platinum Edition Using HTML 4, XML, and Java 1.2
(Publisher: Macmillan Computer Publishing)
Author(s): Eric Ladd
ISBN: 078971759x
Publication Date: 11/01/98

CHAPTER 7
Frames

by Eric Ladd

In this chapter

Introduction to Frames 212

Applications 213

Setting Up a Frames Document 214

Placing Content in Frames with the <FRAME> Tag 218

Respecting the Frames-Challenged Browsers 221

Creating Floating Frames 222

Using Hidden Frames 224

Developing Framed Layouts in an HTML Editor 225

Introduction to Frames

Netscape introduced the idea of frames when it released Netscape Navigator 2.0. At the same time, Netscape proposed frames to the World Wide Web Consortium (W3C) for inclusion in the HTML 3.0 standard. When the HTML 3.2 draft was released, frames were not part of the standard, but W3C indicated it was still considering other proposals that were put forward for HTML 3.0. When it released the HTML 4.0 specification, the W3C included the frame tags as proposed by Netscape, along with a few new twists that Microsoft and other W3C members threw in.

Since their introduction, frames have evolved much like tables. Initially, a number of browsers implemented both tables and frames, even though they were not part of the HTML standard. Frames are part of the HTML 4.0 recommendation now, however, so you can feel more comfortable about using frame-related tags. Used wisely, frames can provide users with an improved interface and a better experience with your site. However, some developers do not use frames wisely, and that has resulted in an outcry from people who try to promote usable Web pages. If you hear dissent about frames these days, it is most likely related to these usability issues and not to frames being non-standard HTML.

This chapter introduces you to the basics of frames and how you can make intelligent use of frames on your site. Before jumping into how to create framed documents, it’s helpful to take a moment to get a feel for what they are, what they do, and what browsers render them correctly.

The main idea behind a framed document is that you can split the browser window into two or more regions called frames. After this is done, you can load separate HTML documents into each frame and enable users to see different pages simultaneously (see Figure 7.1). Each frame can have its own scrollbars if the document is too big to fit in the allocated space.

FIGURE 7.1  You can present multiple Web documents simultaneously using frames.

Additionally, you can resize a frame with your mouse. To resize a frame, follow these steps:

1.  Place your mouse pointer over the border of the frame you want to resize.

2.  Click and hold down the left mouse button.

3.  Drag the border to its new position and release the mouse button (see Figure 7.2).

FIGURE 7.2  Unless the content author has specified otherwise, users are free to resize frames to their liking.

After the border is moved to its new position, the browser repaints any affected frames according to the new distribution of screen real estate.

---

NOTE:  In some instances, a document author might include a command in the frame setup that prevents users from resizing the framed layout. You should do this only if it is absolutely essential that your layout be maintained exactly as you specified. This is occasionally the case when you have an image in a frame and you want the entire image showing at all times.

---

Applications

Like any page element, frames should not be used just because they’re cool. Your decision to use frames should be based on the needs and characteristics of your audience and how effective frames will be in communicating your messages.

Frames lend themselves well to applications in which you want one set of content to remain on the browser screen while another set of content changes. This is easily accomplished by splitting the browser window into two frames: one for static content and one for changing content. Items typically found in static content frames include

•  Navigation tools

•  Tables of contents

•  Banners and logos

•  Search interface forms

Users interact with the static content (click a hypertext link, enter search criteria into a form, and so on), and the result of their action appears in the changing content frame.

Another useful application for frames is for documents that are heavy on definitions or footnotes. You can display the main document in a large frame and have a glossary or bibliography file displayed in a secondary frame. A user could then click key terms or footnote indicators in the large frame to cause the appropriate glossary entry or footnote to appear in the secondary frame.

Setting Up a Frames Document

After you’ve made the decision to use frames on your site, you need to know the HTML tags that make it possible. The next several sections show you how to create framed pages and how to provide alternatives for those who can’t view frames.

	A good first step, especially for intricately framed layouts, is to draw a pencil-and-paper sketch of how you want the framed page to look. In addition to helping you think about how to create the most efficient layout, your sketch also helps you determine how to order your <FRAMESET> tags, if you have more than one.

The <FRAMESET> Tag

The first step in creating a framed document is to split the browser screen into the frames you want to use. You accomplish this with an HTML file that uses the <FRAMESET> and </FRAMESET> container tags instead of the <BODY> and </BODY> tags. <FRAMESET> and </FRAMESET> are not just container tags. Attributes of the <FRAMESET> tag are instrumental in defining the frame regions.

Each <FRAMESET> tag needs one of two attributes: ROWS, to divide the screen into multiple rows, or COLS, to divide the screen into multiple columns. ROWS and COLS are set equal to a list of values that instructs a browser how big to make each row or column. The values can be a number of pixels, a percentage of a browser window’s dimensions, or an asterisk (*), which acts as a wildcard character and tells the browser to use whatever space it has left. The following HTML, for example:

<FRAMESET ROWS=”40%,20%,20%,5%,15%”>
...
</FRAMESET>

breaks the browser window into five rows (see Figure 7.3). The first row has a height equal to 40% of the browser screen height; the second and third rows each have a height equal to 20% of the browser screen; the fourth row has a height equal to 5% of the screen; and the fifth row has a height equal to 15% of the screen. Similarly, the following HTML:

<FRAMESET COLS=”135,75,4*,*”>
...
</FRAMESET>