home | O'Reilly's CD bookshelfs | FreeBSD | Linux | Cisco | Cisco Exam  

Book HomeWeb Design in a NutshellSearch this book

14.7. Frame Design Tips and Tricks

Using frames effectively requires more than just knowing the HTML tags. This section provides a few pointers and tricks for framed documents.

14.7.2. External Links

In most cases, it is not appropriate to load whole external sites into the context of another framed document. By default, any link within a frame loads the new document into that same frame. To prevent external links from loading into the current frame, be sure to add target="_top" to all your external links; the new site will open in the full browser window. As an alternative, set the target to "_blank" to open the link in a new browser window.

14.7.3. Helping Search Engines

Search engines all work differently but pretty much uniformly do not understand frames or any content within a <frameset> or <frame> tag. This means search engines will not find any links that require burrowing through a site for indexing purposes, and all the content of your framed site will be missed.

There are a few measures you can take to make your site more friendly to search engines:

For more information about search engines and how they work, see the Search Engine Watch site at http://www.searchenginewatch.com (from which the previous information was gathered).

14.7.4. Loading Two Frames from One Link

Ordinarily, a link can target only one frame, but there are a few options for creating links that change the contents of two frames at once. One involves simple HTML and the others use JavaScript controls. Loading a framed document

In HTML, you can only load one document with a link, and that document can occupy just one window or frame. Loading two or more frames (essentially two documents) with a single click requires a bit of fakery. What you're actually doing is loading a single document that is divided into frames itself. What the user sees is a number of frames being replaced at once.

This effect cannot be achieved by nesting framesets as shown in Figure 14-4. Instead, the nesting happens as a product of a framed external document loading into a single frame.

For instance, the following code creates a frameset with two frames: a narrow "top" frame and a "main" bottom frame. This frameset is called top.html.

<FRAME SRC="toolbar.html" NAME="top">
<FRAME SRC="two_frames.html" NAME="main">

The bottom frame displays the contents of a document with two vertical frames called two_frames.html, shown here:

<FRAME SRC="left.html" NAME="leftframe">
<FRAME SRC="right.html" NAME="rightframe">

It is assumed that there are a number of documents like two_frames.html that can be accessed by links in the top frame. Each link from the top frame loads one document in the "main" frame, but the contents of two frames change at once.

Of course, this method works only for neighboring frames. Loading two frames with JavaScript

Adding an onClick JavaScript command within the link allows the browser to load documents into two frames based on one mouse click.[7] For this example, imagine a document that contains two frames, a list of options on the left and the contents in the main window on the right. We want a link in the left frame to change the contents on the right, but also to load a new list of options (perhaps with the current choice highlighted) into the left frame. The code is quite simple:

[7]This tip was gathered from Webmonkey, an online magazine for web developers; see http://www.webmonkey.com.

<A HREF="content.html" onClick="window.self.location='newlist.html'" 

The text in bold is the JavaScript line that tells the browser to load newlist.html into the same window/frame as the link. The remaining code is the standard HTML link that will load content.html into the display frame on the right.

Another (and more robust) method for changing two frames with one click uses a function that changes the contents of two frames (named "toolbar" and "main"), as shown in this sample code:

function changePages (toolbarURL, mainURL) {

Within the anchor tag, the additional code provides the URLs for the documents that will be used in the script (and loaded into the respective frames), as shown in the following example:

<A HREF="javascript:changePages('toolbar_document2.html',
'main_document 2.html');">

It is important to keep in mind that if JavaScript is turned off in the user's browser, this link will have no effect; therefore, you should use this method cautiously.

14.7.9. Keeping Pages in Their Frames

In some cases, users might come across a content document independent of the frameset that is intended to contain it (such as from a link in search engine results). To prevent your content pages from appearing out of context, use this JavaScript code in the head of any document that needs to appear in a frameset:

if (top.location == self.location) {
// -->

The first line of the script checks to see if the topmost frame of the current window is the document. If it is, the second line of the script instructs the browser to replace the document with the frameset document (frameset.html in this example, but fill in your own file name in this location).

14.7.10. Frame Sizes in Netscape Navigator

Some framed page designs rely on precise pixel measurements to achieve a desired effect. While Internet Explorer (all versions) and Netscape 6 do not have a problem rendering frames with pixel accuracy, this is not the case for Netscape Navigator Versions 4.7 and earlier. They handle frames in a way that makes it nearly impossible to get the frame sizes you specify.

The reason is that Navigator's frame code (developed way back for Version 2.0) records all frame dimensions in percentages. Any pixel measurements provided in the rows or columns attributes are calculated as a percentage of the available screen space and then rounded off to the nearest percentage point. The rounding results in the rendered frame being up to 12 pixels different (usually smaller) than the specified size. If alignment is crucial for your design, 12 pixels of shift may be unacceptable.

Unfortunately, there is not much that you can do about this other than to use JavaScript to specify a new window with known innerWidth and innerHeight measurements, and then base your frame measurements on even percentages of those values. Otherwise, you may want to simply avoid pixel-dependent frame designs.

On the bright side, this problem was fixed in Netscape 6, and the older versions of Navigator make up an ever-diminishing percentage of overall browser use. Eventually this will be a non-issue, but in the meantime, just be aware that if your frames are misbehaving, it may be Navigator and not your code that's to blame.[9]

[9]This tip taken with permission from CNET's Builder.com. It appeared in an article by Paul Anderson entitled "Frame Quirks in Navigator" (12/6/99). You can read the original at http://www.builder.com/Authoring/Tagmania/120699/index.html.

Library Navigation Links

Copyright © 2002 O'Reilly & Associates. All rights reserved.