by Eric Ladd
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 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. This means we may yet see frames incorporated into standard HTML.
In the meantime, frames have evolved much like tables-a number of browsers have implemented them even though they have not yet become part of the standard. For this reason, you may want to consider framed versions of your pages if there's a good reason to create them. Used wisely, frames can provide users with an improved interface and a better experience with your site. And since a majority of users are probably using a browser that supports frames (Netscape Navigator or Microsoft Internet Explorer), you won't be leaving too many people out by having framed pages. This chapter introduces you to the basics of frames, as proposed by Netscape, as well as how you can make intelligent use of frames on your site.
Before jumping right into how to create framed documents, it's helpful to take a moment to get a feel for what they are, what they can do, and what browsers are able to render them correctly.
The main idea behind a framed document is that you can split up the browser window into two or more regions called frames. Once this is done, you can load separate HTML documents into each frame and allow users to see different pages simultaneously (see Figure 13.1). Each frame has its own scrollbars in case the document is too big to fit in the allocated space.
Figure 13.1 : MCI uses a framed page to present Vinton Cerf's Internet column.
Additionally, you can resize a frame with your mouse. To resize a frame, follow these steps:
Figure 13.2 : Resizing this Bank of Montreal page makes the navigation frame on the left wider.
Once the border is moved to its new position, the browser will repaint any affected frames according to the new distribution of screen real estate.
It is important to keep in mind that frames are not yet part of standard HTML. The frame-related tags are, as of this writing, still extensions to HTML-tags and attributes implemented by only some browsers. This means that users who are not running a frames-capable browser will not be able to view your framed pages. Fortunately, there are tags that allow a framed page to degrade to a non-framed page for users without frames-capable browsers (see Figures 13.3 and 13.4). Note in the figures that everything you see in the framed version of the page, except for the "List of Media Cities" title, can also be found on the non-frames version as well.
Figure 13.3 : Netscape Navigator is able to render the Film Festivals Server page with frames.
| NOTE |
In its Activity Statement on HTML, the World Wide Web Consortium notes that it is still considering frames for incorporation into standard HTML. The W3C ranks frames as "roughly" third on its priority list behind embedding client-side scripts and improvements to the HTML form tags. |
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 tend to lend themselves well to applications in which you want one set of content to remain on the browser screen all the time, 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:
Users interact with the static content (click a hypertext link, enter search criteria into a form, etc.) and the result of their action appears in the changing content frame.
Once 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 walk you through how to create framed pages and how to provide alternatives for those who aren't able to view frames.
A good first step, especially for intricate 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 will also help you determine how to order your <FRAMESET> tags, if you have more than one.
The first step in creating a framed document is to split up 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, though. 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. For example, the following HTML:
<FRAMESET ROWS="40%,15%,45%"> ... </FRAMESET>
breaks the browser window into three rows (see Figure 13.5). The first row has a height equal to 40 percent of the browser screen height, the second row has a height equal to 15 percent of the browser screen, and the third row has a height equal to 45 percent of the screen. Similarly, the following HTML:
Figure 13.5 : The ROWS attribute of the
<FRAMESET COLS="150,100,3*,*"> ... </FRAMESET>
splits the window into four columns (see Figure 13.6). The first column is 150 pixels wide, the second is 100 pixels wide, and the remaining space is divided between the third and fourth columns, with the third column three times as wide (3*) as the fourth (*).
Figure 13.6 : Similarly, COLS divides the window into multiple columns.
| CAUTION |
Don't put a ROWS and a COLS attribute in the same <FRAMESET> tag. Frames-capable browsers can only do one or the other at a time |
An optional attribute of the <FRAMESET> tag is FRAMEBORDER, which you can use to set the thickness of the border between frames. You can even set FRAMEBORDER to zero so that frames appear seamless.
To produce really interesting layouts, you can nest <FRAMESET> and </FRAMESET> tags. Suppose you want to split the browser window into six equal regions. You can first split the screen into three equal rows with the following HTML:
<FRAMESET ROWS="33%,33%,33%"> ... </FRAMESET>
This produces the screen shown in Figure 13.7.
Figure 13.7 : The first step in creating six equal regions is to create three equal rows.
Next you need to divide each row in half. To do this, you need a <FRAMESET> ... </FRAMESET> pair for each row that splits the row into two equal columns. The HTML <FRAMESET COLS="50%,50%"> ... </FRAMESET> will do the trick. Nesting these tags in the HTML at the beginning of this section produces the following:
<FRAMESET ROWS="33%,33%,33%">
<FRAMESET COLS="50%,50%"> <!-- Split Row 1 into two columns -->
...
</FRAMESET>
<FRAMESET COLS="50%,50%"> <!-- Split Row 2 into two columns -->
...
</FRAMESET>
<FRAMESET COLS="50%,50%"> <!-- Split Row 2 into two columns -->
...
</FRAMESET>
</FRAMESET>
The previous HTML completes the task of splitting the window into six equal regions. The resulting screen is shown in Figure 13.8.
Figure 13.8 : Dividing each row in half creates the desired six equal regions.
| TIP |
Not sure whether to do a <FRAMESET> with ROWS or COLS first? Take a look at your sketch of what you want the browser window to look like. If you have unbroken horizontal lines that go from one edge of the window to the other, do your ROWS first. If you have unbroken vertical lines that go from the top of the window to the bottom, do your COLS first. If you have both unbroken horizontal and vertical lines, it doesn't matter which one you do first. |
Of course, you're not limited to making regions that are all the same size. Suppose you want an 80 pixel high banner graphic to appear all the way across the browser screen and, below the banner, you need a 175 pixel wide column for a table of contents; the balance of the width is for changing content. In this case, you could use the HTML:
<FRAMESET ROWS="80,*"> <!-- Split screen into two rows. -->
... <!-- Placeholder for banner graphic row. -->
<FRAMESET COLS="175,*"> <!-- Split row 2 into two columns. -->
... <!-- Placeholder for table of contents. -->
... <!-- Placeholder for changing content frame. -->
</FRAMESET>
</FRAMESET>
The ellipses you see in the previous code are placeholders for the tags that place the content into the frames that the <FRAMESET> tags create. You put a document in each using the <FRAME> tag discussed in the next section.
Using <FRAMESET> tags is only the beginning of creating a framed page. Once the browser window is split into regions, you need to fill each region with content. The keys to doing this are the <FRAME> tag and its many attributes.
With your frames all set up, you're ready to place content in
each frame with the <FRAME> tag. The most important
attribute of the <FRAME> tag is SRC, which
tells the browser the URL of the document you want to load into
the frame. The <FRAME> tag can also take the attributes
summarized in Table 13.1. If you use the NAME attribute,
the name you give the frame must begin with an alphanumeric character.
| Attribute | Purpose |
| MARGINHEIGHT=n | Specifies the amount of white space to be left at the top and bottom of the frame |
| MARGINWIDTH=n | Specifies the amount of white space to be left along the sides of the frame |
| NAME="name" | Gives the frame a unique name so it can be targeted by other documents |
| NORESIZE | Disables the user's ability to resize the frame |
| SCROLLING=YES|NO|AUTO | Controls the appearance of horizontal and vertical scrollbars in the frame |
| SRC="url" | Specifies the URL of the document to load into the frame |
To place content in each of the regions you created at the end of the previous section, you can use the following HTML:
<FRAMESET ROWS="80,*"> <!-- Split screen into two rows. -->
<FRAME SRC="banner.html">
<FRAMESET COLS="175,*"> <!-- Split row 2 into two columns. -->
<FRAME SRC="table_of_contents.html">
<FRAME SRC="changing_content.html">
</FRAMESET>
</FRAMESET>
The resulting screen appears in Figure 13.9.
Certainly, the SRC attribute in a <FRAME> tag is essential. Otherwise the browser would not know where to look for the content that is to go into the frame.
You'll probably find yourself using the other attributes frequently as well. In particular, MARGINWIDTH and MARGINHEIGHT let you set up left and right (MARGINWIDTH) and top and bottom (MARGINHEIGHT) margins within each frame. Putting a little white space around the content in each frame enhances readability, especially when you have FRAMEBORDER set to zero.
The NORESIZE and SCROLLING attributes are handy
when you want to modify the user-controlled aspects of a frame.
Recall that a user can change the size of a frame by clicking
a border of a frame and dragging it to a new position. NORESIZE
is a Boolean attribute that, when present in a <FRAME>
tag, suppresses the user's ability to change the size of the frame.
You may want to do this if it is imperative that the size of a
frame not change so that it can always accommodate a key piece
of content. SCROLLING can be set to YES if you
always want horizontal and vertical scrollbars on the frame, and
to NO if you never want scrollbars. The default value
of SCROLLING is AUTO, in which case the browser
places scrollbars on the frame if they're needed, and leaves them
off if they're not needed.
| TIP |
Be careful about setting SCROLLING to NO. You should do this only if you are absolutely sure that all of the content in a frame will always be visible. Otherwise, users might find themselves in a situation where content runs off the side or bottom of a frame and they have no way to scroll around to see it. |
Probably the trickiest thing about frames is getting content to appear where you want it to appear. This is where naming the frames you create becomes critical. By naming the changing content frame "main", you can then use the TARGET attribute in all of your <A> tags to direct all hyperlinked documents to be loaded into that frame:
<FRAMESET ROWS="80,*"> <!-- Split screen into two rows. -->
<FRAME SRC="banner.html">
<FRAMESET COLS="175,*"> <!-- Split row 2 into two columns. -->
<FRAME SRC="table_of_contents.html">
<FRAME SRC="changing_content.html" NAME="main">
</FRAMESET>
</FRAMESET>
With the frames set like the previous frames, an example link in the file "table_of_contents.html" might look like:
<A HREF="software/index.html" TARGET="main"> Software Products </A>
The TARGET attribute tells the browser that the file "software/index.html" should be loaded into the frame named "main" (the changing content frame) whenever a user clicks the hypertext "Software Products" in the table of contents frame.
If all of the links in "table_of_contents.html" target the frame named "main", you can use the <BASE> tag in the head of the document to set a value for TARGET that applies to all links:
<HEAD> <TITLE>Table of Contents</TITLE> <BASE TARGET="main"> </HEAD>
With this <BASE> tag in place, every hyperlink
will target the changing content window
named "main".
| NOTE |
Netscape set aside some reserved frame names when it introduced the frame-related tags. These "magic target names" include: "_blank" targets a new blank window that is not named. "_self" targets the frame where the hyperlink is found. "_parent" targets the parent <FRAMESET> of the frame where the hyperlink is found. This defaults to behaving like "_self" if there is no parent document. "_top" targets the full window before any frames are introduced. This creates a good way to jump out of a nested sequence of framed documents. |
While the TARGET attribute is useful for targeting the effects of hyperlinks, you can use it in other HTML tags as well. Placing the TARGET attribute in a <FORM> tag instructs the browser to target the response from the form submission to the specified frame. This enables you to set up a search form in one frame and have the search results appear in a separate frame.
The other tag you can use TARGET in is the <AREA> tag used to define a hot region in a client-side image map. This permits the document associated with a hot region to be loaded into the frame of your choice.
If you create a document with frames, people who are using a browser other than Netscape Navigator 3.0 or Microsoft Internet Explorer 3.0 will not be able to see the content you want them to see because their browsers don't understand the <FRAMESET>, </FRAMESET>, and <FRAME> tags. As a courtesy to users with "frames-challenged" browsers, you can place alternative HTML code between the <NOFRAMES> and </NOFRAMES> container tags. Any HTML between these two tags will be understood and rendered by other browsers. A frames-capable browser, on the other hand, ignores anything between these tags and works just with the frame-related HTML.
Some users have a browser that can render frames but the users dislike framed documents. For this portion of your audience, you should consider having a non-frames version of all of your pages available (see Figure 13.10). This way, users who like frames can stick with them and those who don't like frames have a way to view the same content without being burdened with an uncomfortable interface.
Figure 13.10 : Netscape includes a "Hide Frames" option on each of its framed pages.
| TIP |
When making framed versions of existing pages, don't discard your non-frames content. Very often, you can use the non-frames HTML documents as the alternative content found between the <NOFRAMES> and </NOFRAMES> tags. |
| CAUTION |
The <NOFRAMES> and </NOFRAMES> tags must occur after the initial <FRAMESET> tag, but before any nested <FRAMESET> tags. |
To give you an idea of how other Web designers have made use of frames, this chapter closes by looking at some sites with framed pages. Be on the lookout for other clever uses of frames as you spend time on the Web.
Hollywood Online's Web site (http://www.hollywood.com/) makes extensive use of frames, both on the main page and on subordinate pages. Figure 13.11 shows a synopsis of an upcoming movie from HO's database. The frame across the top of the page is a banner frame used to keep the Hollywood Online logo and paid corporate advertising visible at all times. Note that this layout is exactly like the one you learned how to code earlier in the chapter-a banner frame across the top with a navigation frame and a changing content frame below.
Figure 13.11 : Hollywood Online's logo is always in sight thanks to a banner frame.
CMP, publisher of several information industry trade magazines, offers it TechWeb service (http://techweb.cmp.com/) to Web surfers. Figure 13.12 shows a sample page from the TechWeb site. A banner frame is found at the top of the window. Below and to the left of the banner is a navigation frame featuring the mastheads of CMP's various publications. By clicking one of the images, you can navigate to a site that focuses on the magazine title you clicked.
The All4One search site (http://www.all4one.com/) lets you search the AltaVista, Yahoo, Lycos, and WebCrawler databases simultaneously. The results are presented in the framed layout shown in Figure 13.13. The top two frames are for user controls and corporate advertising. The bottom four frames present the search results from each of the online indexes. You can scroll through each one all on the same screen!