HTML: The Definitive Guide - Chapter 10. Frames
Chapter 10: Using Frames
- An Overview of Frames
- Frame Tags
- Frame Layout
- Frame Contents
- The noframes Tag
- Named Frame or Window Targets
Besides extending the capabilities of HTML documents, the innovators at Netscape Communications also recently introduced a device that extends the capability of the browser window itself. The newest versions of Netscape Navigator (2.0 and later) let you divide its main display window into independent window frames, each simultaneously displaying a different document---something like a wall of monitors in a TV control room.
Figure 10-1 is a simple example of a Netscape frame display. It shows how the document window may be divided into columns and rows of individual frames separated by rules and scroll bars. Although it is not immediately apparent in the example, each frame in the window is displaying an independent document---HTML ones in this case---but the individual documents may be any valid content the browser is capable of displaying, including multimedia. If the frame's contents include a hypertext link the user selects, the new document's contents, even another frame document, may replace that same frame, another frame's content, or the entire browser window.
You enable Netscape frames with a special frame document. Its contents do not get displayed. Rather, the frame document contains extension HTML tags that tell the browser how to divide its main display window into discrete frames, and what documents go inside the frames.
The individual documents referenced and displayed in the frame document window act independently, to a degree; the frame document controls the entire window. So, for instance, the browser's ``Back'' and ``Forward'' buttons don't work for an individual frame, but links the entire frame document with others you viewed previously.
You can, however, direct one frame's document to load new content into another frame. That's done by attaching a name to a frame and targeting the named frame with a special attribute for the hypertext link a tag.
Netscape uses three new HTML tags to comprise the frame document: frameset, frame, and noframes.
A frameset is simply the collection of frames that make up the browser's window. Column- and row-definition attributes for the frameset tag let you define the number and initial sizes for the columns and rows of frames. The frame tag defines what document---HTML or otherwise---initially goes into the frames within those framesets, and is where you may give the frame a name to use for document hypertext links.
Here is the HTML source that generated Figure 10-1:
<html> <head> <title>Frames Layout</title> </head> <frameset rows="60%,*" cols="65%,20%,*"> <frame src="frame1.html"> <frame src="frame2.html"> <frame src="frame3.html" name="fill_me"> <frame scrolling=yes src="frame4.html"> <frame src="frame5.html"> <frame src="frame6.html"> <noframes> Sorry, this document can be viewed only with Netscape Navigator version 2.0 or later. <a href = "frame1.html">Take this link</a> to the first HTML document in the set. </noframes> </frameset> </html>
Notice a few things in the simple frame example and its rendered image (Figure 10-1): First, the order in which Netscape fills the frames in a frameset goes across each row. Secondly, frame 4 sports a scrollbar because we told it to, even though the contents may otherwise fit without scrolling. (Scrollbars automatically appear if the contents overflow the frame's dimensions, unless explicitly disabled with a special attribute in the frame tag.)
Another item of interest is the name attribute in one of the frame tags. Once named, you can reference a particular frame as where to display a hypertext-linked document. To do that, you add a special target attribute to the anchor (a) tag of the source hypertext link. For instance, to link a document called ``new.html'' for display in our example window frame 3, which we've named ``fill_me'', the anchor looks like this:
<a href="new.html" target="fill_me">
If the Netscape browser user chooses the link, say in frame 1, the new.html document will replace the original frame3.html contents in frame three. [target for a, 10.6.1]
Finally, since Netscape is the only browser that supports frames, it is likely that some other browser users will try and view your frame documents. That's why each of your key frame documents should provide a backdoor to your HTML document collection with the noframes tag. Frame-compatible browsers display your frames; non-compatible browsers display the alternative noframes content.
Anyone who has opened more than one window on their desktop display to compare contents or operate interrelated applications knows instinctively the power of frames.
One simple use for frames is to put content that is common in a collection, such as copyright notices, introductory material, and navigational aids, into one frame, with all other document content in an adjacent frame. As the user visits new pages, each loads into the scrolling frame, while the fixed-frame content persists.
A richer frame document-enabled environment provides navigational tools for your document collections. For instance, assign one frame to hold a table of contents and various searching tools for the collection. Have another frame hold the user-selected document contents. As users visit your pages in the content frame, they never lose sight of the navigational aids in the other frame.
Another beneficial use of Netscape's frame document is to compare a returned HTML form with its original for verification of the content by the submitting user. By placing the form in one frame and its submitted result in another, you let the user quickly verify that the result corresponds to the data entered in the form. If the results are incorrect, the form is readily available to be filled out again.
Frame layout is similar to table layout. Using the frameset tag, you arrange frames into rows and columns while defining their relative or absolute sizes.
Define a collection of frames
COLS, and ROWS
- End tag:
/frameset; never omitted
- Used in:
Use the frameset tag to define a collection of frames and other framesets. Framesets also may be nested, allowing for a richer set of layout capabilities.
Use the frameset tag in lieu of a body tag in the frame document. You may not include any other content except valid head and frameset content in a frame document, or the Netscape browser will ignore the frame HTML tags.
The frameset tag currently supports only two attributes. They let you define the size and number of columns (cols) and rows of either frames or nested framesets for the Netscape document window. Both attributes accept a quote-enclosed, comma-separated list of values that specify either the absolute or relative width (for columns) or height (for rows) for the frames. The number of attribute values determines how many rows or columns of frames Netscape will display in the document window.
You express each value in the rows or cols attribute in one of three ways: as an absolute number of pixels, a percentage of the total width or height of the frameset, or as a portion of the space remaining after setting aside room for adjacent elements.
As with tables, Netscape will match the size specifications you give a frameset as closely as possible. The browser will not, however, extend the boundaries of the main document window to accommodate framesets that would otherwise exceed those boundaries or fill the window with empty space if the specified frames don't fill the window. Rather, Netscape allocates space to a particular frame relative to all other frames in the row and column and resolutely fills the entire document window. (Did you notice a frame document window does not have scroll bars?)
creates three rows of frames, each extending across the entire document window. The first and last frames are set to 150 pixels tall, the second to 300 pixels. In reality, unless the browser window is exactly 600 pixels tall, Netscape automatically and proportionately stretches or compresses the first and last frames so that each occupies one quarter of the window space. The center row occupies the remaining half of the window space.
Frame-row and column-size values expressed as a percentage of the window dimensions are more sensible. For instance, the following example is effectively identical to the previous one:
Of course, if the percentages don't add up to 100 percent, the browser automatically and proportionally resizes each row to make up the difference.
If you are like us, making things add up is not a strength. Perhaps some of the Netscape designers suffer the same difficulty, which would explain why they included the very nifty asterisk (*) option for frameset rows and cols values. It tells the browser to size the respective column or row to whatever space is left over after putting adjacent frames into the frameset.
For example, when Netscape encounters the frame tag,
it makes a fixed-sized column 100 pixels wide, and then creates another frame column that occupies all of the remaining space in the frameset.
Here's a fancier layout example:
This one creates two very thin columns down the edges of the frameset and gives the remaining center portion to the middle column.
You may also use the asterisk for more than one row- or column-attribute value. In that case, the corresponding rows or columns equally divide the available space. For example,
creates a 100-pixel tall row in the middle of the frameset and equal-sized rows above and below it.
If you precede the asterisk with an integer value, the corresponding row or column gets proportionally more of the available space. For example,
creates four columns: the first column occupies 10 percent of the overall width of the frameset. Netscape then gives the second three-fifths of the remaining space, and the third and the fourth are each given one-fifth of the remaining space.
Using asterisks, especially with the numeric prefix, makes it easy to divide up the remaining space in a frameset.
Be aware, too, that unless you explicitly tell it not to, Netscape lets users manually resize the individual frame document's columns and rows, and hence change the relative proportions each frame occupies in their frames display. To prevent this, see the noresize attribute for the frame tag below.
You can create some elaborate browser displays with a single frameset, but the frame layout is unimaginative. Rather, create staggered frames and other more complex layouts with multiple frameset tags nested within a top-level frameset in the frame document.
For example, create a layout of two columns, the first with two rows and the second with three rows (Figure 10-2), by nesting two frameset tags with row specifications within a top-level frameset that specifies the columns:
<frameset cols="50%,*"> <frameset rows="50%,*"> <frame src="frame1.html"> <frame src="frame2.html"> </frameset> <frameset rows ="33%,33%,*"> <frame src="frame3.html"> <frame src="frame4.html"> <frame src="frame5.html"> </frameset> </frameset>
A frame document contains no displayable content, except perhaps a message for nonframe enabled browsers (see noframes later in this chapter). Rather, frame tags inside the one or more frameset tags, which encapsulate the contents of a frame document, provide URL references to the individual documents that occupy each frame. [noframes, 10.5]
The frame tag appears only within a frameset. Use it to set, via its associated src attribute, the URL of the document content that initially gets displayed inside the respective frame.
Define a single frame in a frameset
MARGINHEIGHT, MARGINWIDTH, NAME, NORESIZE, SCROLLING, and SRC
- End tag:
/frame; rarely included
- Used in:
Frames are placed into a frameset column by column, from left to right, and then row by row, from top to bottom, so the sequence and number of frame tags inside the frameset tag are important.
Netscape displays empty frames for standalone frame tags without an associated src document attribute and value and those trailing ones in the frameset that do not have an associated frame tag. Such orphans, however, remain empty; you cannot put content into them later, even if they have a target ``name'' for display redirection (see the name attribute below).
The value of the src attribute for the frame tag is a URL of the document that is to be displayed in the frame. There is no other way to provide content for a frame. You shouldn't, for instance, include any body content within the frame document; Netscape will ignore the frame tags and display just the contents of a body tag if it comes first, or vice versa.
The document referenced by the src attribute may be any valid HTML document or displayable object, including images and multimedia. In particular, the referenced document may itself be composed of one or more frames. The frames are displayed within the referencing frame, providing yet another way of achieving complex layouts using nested frames.
Since the source may be a complete HTML document, all the features of HTML apply within a frame, including backgrounds and colors, tables, fonts, and the like. Unfortunately, this also means that multiple frames in a single browser window may conflict with each other. Specifically, if each nested frame document (not a regular HTML document) has a different title tag, the title of the overall browser window will be the title of the most recently loaded frame document. The easiest way to avoid this problem is to ensure that all related frame documents use the same title.
The optional name attribute for the frame tag labels that frame for later reference by Netscape's target attribute for the hypertext link anchor a tag. This way, you can alter the contents of a frame differently from the one that contains the link. Otherwise, like normal browser windows, hypertext-linked documents replace the contents of the source frame. We discuss names and targets in greater length later in this chapter. [target for a, 10.6.1]
The value of the name attribute is a text string enclosed in quotes.
Even though you may explicitly set their dimensions with attributes in the frameset tag, users can manually alter the size of a column or row of frames. To suppress this behavior, add the noresize attribute to the frame tags in the row or column whose relative dimensions you do not want users fiddling with. For a two-by-two frame document, a noresize attribute in any one of the four associated frame tags will effectively freeze the relative proportions of all the frames, for example.
The noresize attribute is especially useful for frames that contain fixed images serving as advertisements, a button bar, or a logo. By fixing the size of the frame to contain just the image and setting the noresize attribute, you guarantee that the image will be displayed in the intended manner and that the remainder of the browser window will always be given over to the other frames in the document.
Netscape normally displays vertical and horizontal scrollbars with frames whose contents exceed the allotted window space. If there is sufficient room for the content, the scrollbars disappear. The scrolling attribute for the frame tag gives you explicit control over whether or not the scroll bars appear or disappear.
With scrolling="yes", Netscape adds scroll bars to the designated frame even if there is nothing to scroll. If you set the scrolling attribute value to ``no,'' scrollbars will never be added to the frame, even if the frame contents are larger than the frame itself. The value auto works the same as if you didn't include the scrolling attribute in the tag; Netscape adds scrollbars as needed.
Netscape normally places a small amount of space between the edge of a frame and its contents. You can change those margins with the marginheight and marginwidth attributes, each including a value for the exact number of pixels to place around the frame contents.
You cannot make a margin less than one pixel, or make it so large there is no room for the frame contents. That's because these attributes, like most other HTML ones, advise, they do not dictate to the browser. If your desired margin values cannot be accommodated, Netscape ignores them and renders the frame as it best sees fit.
A Netscape frame document has no body. In fact, it must not, since the browser will ignore any frame tags if it finds any body content before it encounters the first frameset tag. A frame document, therefore, is all but invisible to any non-frame capable browser. The noframes tag gives some relief to the frame disabled.
Supply content for nonframe-compatible browsers
- End tag:
/noframes; sometimes omitted
- Used in:
Use the noframes tag only within the outermost frameset tag of a frame document. The content inside the noframes tag and its required end tag (/noframes) is not displayed by Netscape or other frame-capable browser, but is displayed in lieu of other contents in the frame document by browsers that do not handle frames. The contents of the noframes tag can be any normal HTML body content, including the body tag itself.
Although this tag is optional, experienced HTML authors typically include the noframes tag in their frame documents with content that warns a frame-incompatible browser user that they're missing the show. And smart authors will give those users a way out, if not direct access to the individual documents that make up the frame document contents. Remember our first frame example in this chapter? Figure 10-3 shows what happens when that frame document gets loaded into Mosaic:
<noframes> Sorry, this document can be viewed only with Netscape Navigator version 1.2 or later. <a href="frame1.html">Take this link</a> to the first HTML document in the set. </noframes>
The reason noframes works is that most browsers are extremely tolerant of erroneous tags and incorrect documents. A nonframe browser simply ignores the frame tags. What's left, then, is the content of the noframes tag, which the browser dutifully displays.
If your browser strictly enforces some version of HTML that does not support frames, it may simply display an error message and refuse to display the document, even if it contains a noframes tag.
As we discuss above in the frame tag description section, you can label a frame by adding the name attribute to its frame tag. Once named, the frame may become the destination display window for a hypertext-linked document selected within a document displayed in some other frame. You accomplish this redirection by adding a special, Netscape-only (version 2.0 or later) target attribute to the anchor that references the document.
If you include a target attribute within an a tag, Netscape will load and display the document named in the tag's href attribute in a frame or window whose name matches the target. If the named frame or window doesn't exist, Netscape will open a new window, give it the target's name, and load the new document into that window. Thereafter, hypertext-linked documents that target that name will load into the new window.
Targeted hypertext links makes it easy to create effective navigational tools. A simple table of contents document, for example, might redirect documents into a separate window:
<h3>Table of Contents</h3> <ul> <li><a href="pref.html" target="view_window">Preface</a> <li><a href="chap1.html" target="view_window">Chapter 1</a> <li><a href="chap2.html" target="view_window">Chapter 2</a> <li><a href="chap3.html" target="view_window">Chapter 3</a> </ul>
The first time the user clicks one of the table of contents hypertext links, Netscape will open a new window, name it ``view_window,'' and display the desired document's contents inside it. If the user selects another link from the example table of contents and the ``view_window'' is still open, Netscape will again load the selected document into that window, replacing the previous document.
Throughout the whole process, the window containing the table of contents is accessible to the user. By clicking on a link in one window, the user causes the contents of the other window to change.
Similarly, you can place the table of contents into one frame of a two-frame document and use the adjacent frame for display of the selected documents:
<frameset cols="150,*"> <frame src="toc.html"> <frame src="pref.html" name="view_window"> </frameset>
When Netscape initially displays the two frames, the left frame contains the table of contents, and the right frame contains the preface (Figure 10-4).
When a user selects a link from the table of contents in the left frame, Chapter 1 for example, Netscape loads and displays the associated document into the ``view_window'' frame on the right side (Figure 10-5). As other links are selected, the lower frame's contents change, while the upper frame continuously makes the table of contents available to the user.
Netscape has reserved four target names for special document redirection actions. They are:
Netscape always loads a target="_blank" linked document into a newly opened, unnamed window.
This target value is the default for all a tags that do not specify a target, causing the target document to be loaded and displayed in the same frame or window as source document. This target is redundant and unnecessary unless used in combination with the target attribute in Netscape's special base tag in a document's head (see below).
The _parent target causes the document to be loaded into the parent window or frameset containing the frame containing the hypertext reference. If the reference is in a window or top-level frame, it is equivalent to the target _self.
A brief example may help clarify how this link works. Consider a link in a frame that is part of a three-column frameset. This frameset, in turn, is a row in the top-level frameset being displayed in the browser window. This arrangement is shown in Figure 10-6.
If no target were specified for the hypertext link, it would be loaded into the containing frame. If a target of _parent were specified, the document is loaded into the area occupied by the three-column frameset containing the frame containing the link.
This target causes the document to be loaded into the window containing the hypertext link, replacing any frames currently displayed in the window.
Continuing with the frame hierarchy shown in Figure 10-6, using a target of _topwould remove all the contained frames and load the document into the entire browser window.
All four of these names begin with the underscore (_) character. Any other window or target name beginning with an underscore is ignored by the browser. Don't use the underscore as the first character of the name of any frame you define in your documents.
It can be tedious to specify a target for every hypertext link in your documents, especially when most are targeted at the same window or frame. To alleviate this problem, Netscape lets you add a target attribute to its base tag. [base, 6.7.1]
The target attribute in the base tag sets the default target for every hypertext link in the current document that does not contain an explicit target attribute. For example, in our example table of contents document, most every link causes the document to be displayed in another window named ``view_window.'' Rather than include that target in each hypertext link, you should place the common target in the table of contents' base tag within its head:
<html> <head> <title>Table of Contents</title> <base target="view_window"> </head> <body> <h3>Table of Contents</h3> <ul> <li><a href="pref.html">Preface</a> <li><a href="chap1.html">Chapter 1</a> <li><a href="chap2.html" >Chapter 2</a> <li><a href="chap3.html">Chapter 3</a> </ul> </body> </html>
Notice we don't include any other target references in the list of hyperlinks because Netscape will load and display all the respective documents in the base target ``view_window.''
Before the onset of frames, each time you clicked on a hyperlink, the corresponding document replaced the contents of the browser window. With frames, this behavior is modified so that the corresponding document replaces the content of the referencing frame. This is often not the desired behavior and can be disconcerting to people browsing your documents.
For example, suppose you have arranged all of the documents on your site to present themselves in three frames: a navigational frame at the top of the browser window, a scrolling content frame in the middle, and a feedback form at the bottom. You named the content frame with the name attribute of the frame tag in the top-level document for your collection and used the target attribute of the base tag in every document on your site to ensure that all links will be loaded into the center content frame.
This arrangement works perfectly for all the documents on your site, but what happens when a user selects a link that takes them to a different site? The referenced document will still be loaded into the center content frame. Now the user is confronted by a document from some other site, surrounded by your navigation and feedback frames!
The solution is to make sure that every hypertext link that references a remote document has a target of _top. This way, when someone selects a link that takes them away from your site, the remote document will replace the contents of the entire browser window, including your navigation and feedback frames.
Comments are welcome
Copyright © 1996 O'Reilly & Associates and
Created: Nov. 21, 1996
Revised: May 20, 1997