Frames are simultaneously the best and worst thing to happen to the Web lately. If you've hit a frame-based document in your browsing, you know that they're cool. They make your display look like the control panel of a jet fighter—so many different, independent chunks of information stimulating your brain at once. It's like picture-in-picture on a new TV, for people with eyes so info-hungry that just one program—or one page—at a time provides inadequate sensory input. Of course, frames also greatly expand the author's ability to offer a variety of document navigation scenarios to visitors.
For all that excitement, frames make us pay. Most significantly, because frames are a recently introduced Netscape extension, most browsers still do not support them. Even the previous release of Netscape Navigator (release 1.2) does not support them, just as many browsers that support the other extensions do not support frames. Frames also generally slow down initial access to a document (because the browser must download multiple files), and when poorly designed, frames force visitors to do a lot of scrolling simply to read the contents of a single page.
The moral? Before cramming your document into frames, ask yourself three questions: Are frames appropriate for the content I'm presenting, Can each portion of my content be effectively presented within the frame size I'm planning, and Do the advantages of frames presentation justify leaving behind the many Web surfers who can't see frames? (You can fudge this last question. See the section titled "Accommodating the Frame-Intolerant," later in this chapter.)
If the answer to all three questions is Yes, push ahead with frames. You'll find making them fun.
In this chapter, you
When publishing and publicizing your frame-based document, take care to direct visitors to the frame definition document, not one of the files that appears within a frame. See Chapter 15.
In a frame-based document, the content of each frame is contained within a separate HTML document. (See Figure 11.1.) The multiple documents are tied together by yet another HTML file, the frame definition document, which also contains the code dictating the number and size of the frames.
In the frame definition document, you can insert a message to be displayed only to visitors who can't see links. See the section titled "Accommodating the Frame-Intolerant," later in this chapter.
The frame definition document supplies no content to the page; it merely specifies how the page is to be split up, and which HTML document is to be displayed in each frame. In Figure 11.1, the URL shown in the Location box is the URL of the frame definition document; that's the URL a visitor accesses to open the document. The frame definition document then takes care of accessing the page within each frame.
Creating a frame-based document requires creating the various HTML documents that will appear within the frames, composing the frame definition document to define the number, size, and other aspects of the frames, and tying a specific file to each frame.
Figure 11.1. A frame-based document.
Within the frame definition document, you break up the page into frames by applying either of two attributes (or both together):
The ROWS or COLS attribute is always followed by an equals sign (=) and a measurement, in quotes. It is the measurement that determines the relative size and number of frames on the page. The measurement is expressed in any of three ways:
The number of measurement entries between the quotes determines the number of frames on the page. For example:
Avoid using a number of pixels as a measurement, since the number of pixels available in a window varies with the browser platform.
<FRAMESET ROWS="40%,60%"> — Creates two rows: the first (top row) 40% of the height of the window and the second (bottom) 60% of the height of the window.
<FRAMESET COLS="200,*"> — Creates two columns: the first (left) column 200 pixels wide and the second (right) column taking up the rest of the window.
<FRAMESET COLS="*,20%,50%"> — Creates three columns: the first (left) column filling the space left by the other columns, the second (middle) column 20% of the width of the window, and the third (right) column 50% of the window.
<FRAMESET ROWS="*,*,*,*"> — Creates four rows of equal size. (When multiple asterisks are used, each is given the same value.)
The content of each frame is supplied by a separate HTML file, which you compose like any other Web document. However, when composing files that will appear in frames, you must try to account for the size and shape of the frame in which the file will appear.
Browsers help adjust content for frames: They automatically wrap text to fit within a frame and also automatically shorten horizontal lines. Alignment properties are also preserved in a frame; for example, if your text is centered in the page when you compose it, the browser centers it within the frame when displaying it. However, browsers cannot adjust the positions or spacing of images (or images used as rules or bullets); images often make framing difficult.
Because frames are not created in the Editor, you may create your content files in the Editor, but you must use an HTML source editor to compose the frame definition document. After composing all your files, you'll want to browse the frame definition document and adjust the frame definition document and/or the formatting of the content files, to make the frames fit nicely.
Browsers automatically add scroll bars to a frame when the contents exceed the frame size. But a frame document showing a collection of fragmentary files and scrollbars is unappealing, and visitors tire quickly of excessive scrolling, especially horizontal scrolling to read wide text. Whenever practical, make the content fit the frame—or vice versa.
Using the medium of your choice (such as Netscape Editor or HotDog), compose the content documents that will appear in the frames. Be sure to organize and format them, if possible, in a way that will minimize the need for visitors to scroll them in their frames.
Note: If you're unfamiliar with HTML source files and editors, see Chapter 9, "Editing HTML Source Code."
In an HTML source editor, create a new HTML file, including the required structure tags and the title for your frames document, as shown here:
Figure 11.2. The final page.
Observe that a single change to the attributes in the <FRAMESET> block dramatically alters the resulting page. Suppose, for example, I wanted rows instead of columns. Besides reformatting my source documents so that they conformed better to wide rows than narrow columns, I'd need to do nothing to the frame definition document but change the COLS attribute to ROWS, as shown:
<FRAMESET ROWS="30%,*">
<FRAME SRC="MULTI.HTM">
<FRAME SRC="DESCRIP.HTM">
</FRAMESET>
The files referenced in the <FRAME SRC> tags will appear in rows from top to bottom, in the order listed. In other words, MULTI.HTM will appear in the top row because it appears in the first <FRAME SRC> tag, while DESCRIP.HTM appears in the second (bottom) row.
The result of the rows variation appears in Figure 11.3.
Figure 11.3. A ROWS variation of the page shown in Figure 11.2.
Although the examples shown in Figure 11.2 and 11.3 are legitimate frames documents, they have certain limitations:
The following two sections show how to modify your frame definition document and the links within the content files to build a leading-edge frames document.
Creating a document like the one in Figure 11.4, which has both rows and columns, requires nesting multiple framesets, each with its own ROWS and COLS attributes.
To begin, you must first determine which frameset—a frameset for ROWS or one for COLS—comes first, or which frameset is the parent frameset within which the next frameset is nested. You decide this based on the configuration of the page you want to create:
For example, in the page Figure 11.4, the bottom row stretches across the entire window. So the parent frameset will define the rows of the page. The page has two rows (the bottom row and the top row, which is broken into columns), at a 75/25 split. So here's the parent frameset:
<FRAMESET ROWS="75%,*"> </FRAMESET>
Next, I have to break that top row into two columns (at a 30/70 ratio). I accomplish that by inserting a new frameset within the parent frameset, as shown:
<FRAMESET ROWS="75%,*">
<FRAMESET COLS"30%,*")
</FRAMESET>
</FRAMESET>
Finally, I add the <FRAME SRC> tags to each frameset to call document files into the three frames:
<FRAMESET ROWS="75%,*")
<FRAMESET COLS"30%,*")
<FRAME SRC="MULTI.HTM">
<FRAME SRC="DESCRIP.HTM">
</FRAMESET>
<FRAME SRC="DEFINI.HTM">
</FRAMESET>
Figure 11.4. The complex document.
If you code your frame definition documents as shown up to this point in the chapter, a link appearing in any of the documents will open its corresponding file in the same frame that held the link. If you want a link in one frame to open a new document in another frame, you need to do two things:
Using the page shown in Figure 11.4 as a starting point, I'll name the frames. The NAME= attribute is added to the <FRAME SRC> tag after the filename (and a blank space). It doesn't matter what you call the frames, as long as you give each a unique name. The frame names do not appear on the page; just in the source code.
<FRAMESET ROWS="75%,*")
<FRAMESET COLS"30%,*")
<FRAME SRC="MULTI.HTM" NAME="Icons">
<FRAME SRC="DESCRIP.HTM" NAME="Text">
</FRAMESET>
<FRAME SRC="DEFINI.HTM" NAME="Definitions">
</FRAMESET>
Within the content files, I edit the links in order to add the name of the frame in which the linked files should open. This is done by adding the attribute TARGET= and the frame name (in quotes) to the link, following the filename. For example:
<A HREF="avidef.htm" TARGET="Definitions"></a>
Although adding the TARGET attribute is easy enough in an HTML source editor, you can add TARGET attributes in the Netscape Editor.
When entering the filename in the Link Properties dialog (see Figure 11.5), place a double quote mark (") following the filename, and leave off the closing quote mark following the frame name after TARGET. The Editor automatically places quotes around the entire string you enter in this field. If you quote it as shown, your entry comes out correctly in the HTML source, with quotes around the filename and the frame name.
Figure 11.5. Adding a TARGET attribute to a link in the Editor.
If you omit the TARGET attribute from any link, that link will open its file in the same frame that contains the link.
When the link shown in Figure 11.5 is executed, the file AVIDEF.HTM opens in the frame named Definitions (the bottom frame), replacing DEFINI.HTM.
Now suppose you wanted every link in the MULTI.HTM file to open its file in the Text frame. When all links are to open in the same frame, you can save time by using the <BASE TARGET> tag in the content file's header. All links in a file containing a <BASE TARGET> tag open their files in the frame named by <BASE TARGET>; you do not need to add any TARGET attributes to the link tags. For example:
<HTML>
<HEAD>
<TITLE>
<BASE TARGET="Text">
</HEAD>
<BODY>
page definition goes here
</BODY>
</HTML>
All links in the sample content file will open their files in the Text frame.
As mentioned earlier in this chapter (twice, in fact, so you wouldn't miss it), frame-based documents cannot be displayed by browsers that don't support Netscape's frames extensions.
In most other cases, extensions don't prevent whole pages from appearing—at worst, a portion of a page (such as a table) doesn't show up, or the page layout or character formatting reverts to the browser's defaults. But frames are evil—they render the whole page terra incognita to frame-intolerant browsers, which show nothing of a frames document but a sad, empty page (sniff!).
What can you do about it, short of denying yourself frames as an authoring tool? In your frame definition document, you can add the <NOFRAME>...</NOFRAME> tag to display a message or a link to the no-frames world. In the example below, I've added a <NOFRAME> message containing a link that leads to a no-frames version of my document.
<FRAMESET ROWS="75%,*")
<FRAMESET COLS"30%,*")
<FRAME SRC="MULTI.HTM">
<FRAME SRC="DESCRIP.HTM">
</FRAMESET>
<FRAME SRC="DEFINI.HTM">
<NOFRAME>This document uses frames. If your browser does not support frames, please view our <A HREF="framefree.HTM">no frames version.</A></NOFRAME>
</FRAMESET>
</FRAMESET>
You'll need a nonframe-supporting browser, such as Microsoft's Internet Explorer, to check your work when you use <NOFRAME>, because its effects don't show up in Navigator Gold.
When the frame definition document is browsed, the content within <NOFRAME> does not appear at all in frame-supporting browsers—even you won't see it in Netscape's Browser window. Only when the browser does not support frames does the <NOFRAME> content appear, as shown in Figure 11.6.
Figure 11.6. The <NOFRAME> message, as seen through Microsoft Internet Explorer, which does not support frames.
The Windows 95 version of Microsoft's Internet Explorer (see Figure 11.6), at this writing, is release 2.0, which does not support frames. However, at the time this book went to press, a new version, Internet Explorer 3.0, was in its early testing cycle. According to Microsoft's Web page, Internet Explorer 3.0 will support frames in its final release.
All too frequently, Web authors use <NOFRAME> to inform frame-impaired visitors that they're out of luck. Messages like "Sorry, this document must be viewed with Netscape Navigator 2.0 (or 3.0)" almost always mean frames lie ahead. This approach needlessly abandons a large percentage of the Web population.
Alternatively, you can supply a link to a no-frames version of your document, as I do in the example. Creating the no-frames version is a no-brainer: just copy and rename the content files, and adapt their formatting and links so that they look and act properly as a multipage, nonframe document. In the <NOFRAME> block of the frame definition document, supply a link to the top page of your frame-free version.
Pages created with the Page Wizard (see Chapter 2) or with Netscape's templates (see Chapter 3) automatically include the Netscape Now! button and link.
Instead of supplying a no-frames version (or in addition to it), you can apply for Netscape Now!, a program in which Netscape Communications Corp. grants you the right to put the Netscape Now! button on your page. The Netscape Now! button is the link source for a link to a page at Netscape Communications. This page leads visitors through a series of forms and selections to download a version of Netscape for their system. (They'll need version 2.0 or higher to see frames.)
Through the program, you can add the Netscape Now! button to your <NOFRAME> block, so visitors who find themselves locked out of your frame-based document can hop over to Netscape, pick up a copy of Navigator 3.0, and return to see your page.
Should you use the button? On the one hand, you help your visitors acquire the software they need to use your page. On the other hand, you're spending your time and server dollars to supply free advertising to a multimillion-dollar company. It's up to you.
The CD-ROM at the back of this book includes a program called FrameGang, which makes creating frame definition documents a snap. The program requires that you understand the basics of coding frames yourself, but it still makes framing simpler by automatically supplying some of the code, and by adjusting the measurements in the <FRAMESET> lines when you drag frame borders on the screen.
Frames are an exercise in careful choices and organization. Most important among the choices is choosing whether to use frames at all. Once committed to using frames, always try to supply a useful <NOFRAME> message and an alternative for the frameless.
Now...
Q: Sometimes, Netscape adds scrollbars to my frames when they're not really necessary. What can I do about that?
A: By default, browsers add scrollbars whenever a file's contents appear to exceed the frame. You may be able to eliminate the problem by adjusting the formatting of the content file, or the size of the frame it appears in, so that the contents sits comfortably in the frame.
If you're confident that scrollbars are unnecessary, but they still show up, you can prevent them from displaying by adding the attribute SCROLLING="NO" to the <FRAME SRC> line for the frame—for example:
<FRAME SRC="sample.htm" SCROLLING="NO">
By the way, you can force browsers to display scrollbars on a frame, even when the browser considers them unnecessary, by adding SCROLLING="YES" to the <FRAME SRC> line.
Q: Can a link that appears within a frame open a new file not in a frame, but filling the entire window (replacing the frames)?
A: Instead of a frame name, use "TOP" as the value for the TARGET attribute in the link. (See the section titled "To Specify the Frame a Linked Document Opens In," earlier in this chapter.) When the link is executed, the file it opens fills the browser window, replacing the frame definition document. Clicking the Back button restores the frames document.
Q: Will frames support among browsers catch up?
A: Netscape has proposed its frames tags for inclusion in HTML 3, and it's likely they'll wind up there. But a final HTML 3 specification is still a few years off, and by the time it shows up, most leading graphical browsers will have already added frames support; they must do so, to keep up with Navigator. Look for frames support to be a key ingredient of any major graphical browser release for the next year or so.
Small players among the graphical fold and the text-only browsers are pushed further behind the curve by frames, and that's unfortunate. But, frankly, users of such products have been surfing on borrowed time for a few years. The Web has become a de facto graphical environment, one whose evolution is largely an echo of Navigator's feature set. Sooner or later, everyone's going to have to go graphical (and go extensions) or drop out. C'est la Web.
