Frames

< Day Day Up >

A framed document divides a browser window into multiple panes, or smaller window frames. Each frame can contain a different document. The benefits of this approach are obvious: users can view information in one frame while keeping another frame open for reference instead of moving back and forth between pages. The contents of one frame can be manipulated, or linked , to the contents of another. This enables designers to build sophisticated interfaces. For example, one frame can contain links that produce a result in another frame. An example of such an interface is shown in Figure 8-1.

Figure 8-1: Example frame interface

Frames offer many useful navigation possibilities such as a table of contents, site index, and lists of links. Frames also offer fixed-screen navigation ”whereby site navigation buttons stay onscreen throughout a visit regardless of the size of the document. The lack of scrolling and the minimization of screen refresh afforded by framed documents can provide great advantages over the single-window approach. On the other hand, framed pages can be difficult to deal with. Frame sites confuse many users because it's not always clear what parts of a page will update when a button is pressed. Furthermore, frames tend to cause other usability problems, such as hiding the current URL, causing printing and bookmarking difficulty, excluding some search engines, and taking up valuable screen real estate with scrollbars and borders.

Regardless of these potential problems, many site designers rushed to develop framed pages as soon as frames were introduced. They removed them just as quickly, however, due to navigational problems and user complaints. Fortunately, today many of the problems associated with frames have been fixed at the browser level, and users have become more comfortable understanding and working with frames. Used properly and in the right situation, frames are important tools in the Web designer's toolbox. Frame-phobic Web designers should consider that frames are no longer considered proprietary browser extensions and are included in the HTML and XHTML standards.

Overview of Frames

A frame is an independent scrolling region, or window, of a Web page. Every Web page can be divided into many individual frames, which can even be nested within other frames. Of course, fixed screen sizes limit how many frames can realistically be used simultaneously . Each frame in a window can be separated from the others with a border; in this way, a framed document might resemble a table. However, frames aren't a fancy form of tables. Each separate frame can contain a different document, referenced by a unique URL. Because the documents included in a framed region can be much larger than the space available onscreen, each frame can provide a scrollbar or other controls to manipulate the size of the frame. Individual frames usually are named so that they can be referenced through links or scripting, allowing the contents of one frame to affect the contents of another. This referencing capability is a major difference between tables and frames. Frames provide layout facilities and, potentially , navigation.

Simple Frame Example

The first thing to remember about a framed page is that the screen is composed of several documents. To illustrate , a page with two frames actually involves three files:

The framing document that defines the framing relationship
The file that contains the contents of frame one
The file that contains the contents of frame two

Consider the simple two-frame document shown in Figure 8-2. The first frame, on the left, covers about 20 percent of the screen and contains a list of links contained in a file called links.html. The larger column on the right, which takes up the other 80 percent of the screen, displays content initially referenced in a file called display.html. The actual document that sets up the framing relationship is called basicframes.html.

Figure 8-2: Simple two-frame example in Internet Explorer

The framing document (basicframes.html) has a slightly different structure than a typical HTML or XHTML file. Specifically, it uses a <frameset> tag instead of a <body> tag. Because of this you will notice that a frameset document actually uses a totally different doctype statement, which references a frameset DTD. Within the framing document, the frameset element defines the set of frames that makes up the document. The major attributes of this element are rows and cols . In this example, two columns take up set percentages of the total screen, so the code reads <frameset cols="20%, 80%"> . Setting up something like <frameset rows="10%, 80%, 10%"> , which sets up three rows across the screen taking up 10 percent, 80 percent, and 10 percent of the screen respectively, would be just as easy. Within the frameset element, individual <frame> tags are used to specify the documents that are placed within the rows or columns defined by the frameset element. The basic syntax of the <frame> tag is <frame src=" URL of framed document " name =" unique frame name " id=" unique frame name ">. Notice once again the use of both a name attribute for older browser support and an id attribute for newer browsers. The following is a simple example of a basic framing document:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">   <html xmlns="http://www.w3.org/1999/xhtml" lang="en">   <head>   <title>  Frame Example 1  </title>   <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />   </head>   <frameset cols="20%, 80%">   <frame src="links.html" name="links" id="links" />   <frame src="display.html" name="display" id="display" />   <noframes>   <body>   <p>  This document uses frames.      Please follow this link to a  <a href="noframes.html">  no frames  </a>  version  .</p>   </body>   </noframes>   </frameset>   </html>

In the preceding example, the file links.html would be placed in the frame column comprising 20 percent of the screen, and the file display.html would be placed in the 80 percent column. Always make sure to consider the order of the <frame> tags, as their positions should be relative to the rows or columns defined in the nearest enclosing <frameset> tag. Once the framing document is set up, you then have to populate the individual frames using the <frame> tags. The src attribute is set to the URL of the document to load in the particular frame. For a complete example, the contents of links.html and display.html are presented here:

File: links.html

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">   <html xmlns="http://www.w3.org/1999/xhtml" lang="en">   <head>   <title>  Links  </title>   <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />   </head>   <body>   <h2>  Links  </h2>   <hr />   <a href="http://www.democompany.com"  target  ="display">  Demo Company  </a>   </body>   </html>

File: display.html

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">   <html xmlns="http://www.w3.org/1999/xhtml">   <head>   <title>  Display  </title>   <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />   </head>   <body>   <h2>  Display  </h2>   <hr />   <p>  Contents of second frame and link clicks will be displayed here.  </p>   </body>   </html>

Putting all three files in the same directory and loading the framed document (basicframes.htm) into a browser should produce a rendering similar to the one shown in Figure 8-2. (Online, see http://www.htmlref.com/examples/chapter8/basicframes.html.)

The Use of <noframes>

The <noframes> tag should contain the markup and text to be displayed when a browser that doesn't support frames accesses the Web page. The <noframes> tag should be found only within the frameset element. Nevertheless, <noframes> is often found directly outside the frameset element. Because of the permissive nature of browsers, this tends to be interpreted correctly. Also, for XHTML compliance, the noframes element should contain a body element and a correctly formed HTML document within it; HTML 4 does not require a body tag within noframes .

The following example provides the links that occur in the links frame for browsers that don't support frames:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">   <html xmlns="http://www.w3.org/1999/xhtml" lang="en">   <head>   <title>  Simple Noframes Example  </title>   <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />   </head>   <frameset cols="20%,80%">   <frame src="links.html" name="links" id="links" />   <frame src="display.html" name="display" id="display" />   <noframes>   <body>   <h2>  No Frame Navigation  </h2>   <hr />   <p>   <a href="http://www.yahoo.com">  Yahoo  </a><br />   <a href="http://www.microsoft.com">  Microsoft  </a><br />   <a href="http://www.netscape.com">  Netscape  </a>   </p>   </body>   </noframes>   </frameset>   </html>

Most browsers today support frames. Of course, extreme legacy browsers such as Netscape 1. x generation browsers and some less capable browsers such as those on cell phones or personal digital assistants will not render frames. A demonstration of <noframes> is shown in Figure 8-3.

Figure 8-3: Legacy browsers might lack support for frames.

Although it seems more and more pointless to support rarely used legacy browsers, today's restricted browsers such as PDA-based browsers or digital cell phone browsers often have problems with frames due to limited screen region or memory. Furthermore, many search engine indexing spiders do not fully support frames. Because of this, <noframes> really should be used. Although putting a second copy of site content within <noframes> makes the site usable across browsers, you must then update two copies of the same content. Because of this, many designers simply put a statement in the noframes element that indicates that the site requires a frame-supporting browser for viewing. This doesn't make the site very accessible, but it does provide some feedback to users and cuts down on content duplication.

Frame Targeting

When you use frames, it is often beneficial to make the links in one frame target another frame. When a user clicks a link in one framed document, the requested page should load in another frame. In the simple frame example in the preceding section, you might want to have the links in the frame named links target the frame named display. Link targeting has two steps:

Ensure frame naming by setting the name and id attributes in each <frame> tag to a unique value. While the specification encourages the use of the id attribute for naming frames, practice shows that frame targeting in browsers is still generally accomplished using the name attribute and not the id attribute, which is used mostly for scripting and style sheet access even in modern browsers. For the sake of safety, designers should consider setting both id and name in a <frame> tag to the same value.
Use the target attribute in an <a> tag to set the target for the anchor. For example, a link such as <a href="http://www.yahoo.com" target="display"> loads the site specified by the href into the window called "display," if such a frame exists. If the target specified by the name doesn't exist, the link typically spawns a new window.

You can name your frames anything you like. A simple short word without special characters is the best approach, such as window1, frame3, displayregion, or similar value. Designers also should be wary of using special characters or spaces in the frame name, as they could cause problems. Some values for the target attribute could also have special meanings, and should never be used as a frame name. These values and their meanings are summarized in Table 8-1.

Table 8-1: Reserved target Values
Value	Meaning
_blank	Load the page into a new, generally unnamed, window.
_self	Load the page over the current frame.
_parent	Load the link over the parent frame.
_top	Load the link over all the frames in the window.

Setting the target attribute of the links within a site to _top ensures that any frames being used are removed after a link is followed. Regardless of your use of frames, using the _ top value for the target attribute in links in your site might be beneficial. Sites often frame external links in an attempt to "capture" the user. Because this can limit layout or be undesirable in other ways, site designers often use scripts or simply set target attributes on all site links to _top to break out of any enclosing frames.

The _blank value for target is also useful because it opens another window in which to display the link. The only problem with this action is that the window might tile directly on top of the previous browser window, and the user might not know that multiple windows are open. With JavaScript, as discussed in Chapter 14, it is possible to size and position windows that are opened.

The _parent value isn't encountered often because it is useful only when frames are nested to a great degree. The _parent value enables you to overwrite the parent frame that contains the nested frame without destroying any frames that the parent might be nested within.

The _self value for target , which loads a page over its current frame, duplicates the typical default action for most browsers.

Note	The HTML and XHTML specifications discourage frame names beginning with an underscore because they might be reserved for values such as _top .

The following is an alternative for the file links.html presented previously. This document uses frame targeting with the names defined in the previous simple frame example. Use it in place of the previous links.html file and load the frameset file to test the target attribute for the <a> tag. (Online, see http://www.htmlref.com/examples/chapter8/frametargetting.html, which references this code in the file linktargets.html.)

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">   <html xmlns="http://www.w3.org/1999/xhtml" lang="en">   <head>   <title>  Link Targeting  </title>   <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />   </head>   <body>   <h2 align="center">  Test Links  </h2>   <hr />   <ul>   <li><a href="http://www.yahoo.com" target="display">  Yahoo in frame named display  </a></li>   <li><a href="http://www.aol.com" target="_blank">  AOL in new window  </a></li>   <li><a href="http://www.msn.com" target="_self">  MSN in this frame  </a></li>   <li><a href="http://www.excite.com" target="_top">  Excite over whole window  </a></li>   <li><a href="http://www.google.com" target="_parent">  Google over the parent window (should be whole window)  </a></li>   <li><a href="http://www.democompany.com" target="mysterywindow">  DemoCompany in a window that hasn't been named  </a></li>   </ul>   </body>   </html>

Figure 8-4: Frames within frames problem

As shown in the example, when referencing a nonexistent window such as "mysterywindow" the browser generally creates a brand-new window.

As long as you keep names consistent and frame layouts relatively basic, window targeting is fairly straightforward. However, sloppy coding can lead to a problem in which frames keep nesting inside of one another, as shown in Figure 8-4; authors should test links in a framed site thoroughly.

< Day Day Up >