 | ||
|
| ||
| ||
|
| ||
Robert Hess
Developer Relations Group
Microsoft Corporation
December 23, 1997
The following article was originally published in the Site Builder Magazine (now known as MSDN Online Voices) "More or Hess" column.
Many aspects of Web page design can be confusing, or difficult to master. Based on the feedback I get, the proper use of frames is one aspect that most troubles beginners. Let's explore the use of frames a bit, and maybe resolve some of the problems you might have encountered.
In the first place, avoid frames if at all possible. While frames appear, at first blush, to be a very slick feature, in practice they have serious side effects that make a frame-based site more difficult for the user.The main problem arises from the difficulty of designing a frame-based site that allows the user to choose the current view as a favorite and easily return to it. If the user does manage to set a favorite, the result is the "initial" frame layout, and not the view that the user arrived at by navigating through a site.
Let's say you've designed your site around an initial frameset that presents the user with three frames: a "title" frame across the top, a "navigation" frame on the left, and a "content" frame, which takes up the bulk of the browser window, on the right. As the user clicks through the site, new documents are pushed up into the title frame to indicate where the user is, and new navigational options are pushed into the left-hand frame to indicate the choices available to the user. Now let's imagine a user spends a fair amount of time navigating through your site, finally comes across the information he or she wants, and marks it as a favorite. What happens when the user tries to use that Favorite link? He or she ends up at the page originally defined by the frameset, and must try to retrace his path back to the desired document.
I have seen few frame-based sites that work well. One reasonably good example is http://www.CocktailTime.com
, HotWired's Cocktail Web site. It minimizes the bookmarking problem by tightly narrowing the focus of which documents are shown in a given frameset. The site's builders create a whole new frameset for each week's set of articles. This means that from any one frameset, the user has only a small handful of documents from which to choose, making it a lot easier to get back to the information sought.
A second problem: Frames make it difficult for the user to print a page. A user selecting Print from Internet Explorer 4.0 can choose to print either a single page that is laid out in frames, or one selected frame, or each frame individually. From Netscape Navigator, the user can't even select the Print option until a frame has been selected, and the only option is to print that frame's contents.
By now, you have thought twice (or even three times) about being too dependent on a frame-based layout for your site. If you still feel you have a good reason to use frames on your site, consider some of the most common problems beginning site builders run into.
Q. My frames come up fine in Microsoft Internet Explorer 3.0, but I get a blank page in Internet Explorer 4.0 or in Netscape Navigator.
A. This is a common problem, and almost always has to do with the position of the <FRAMESET> declaration in your document. Netscape introduced the <FRAMESET> element for use in a Web document. And as Netscape interpreted it, a document was either a description of a <FRAMESET>, or it contained the <BODY> of the document to be displayed. Once the <BODY> tag was encountered in a document, the browser assumed this was a normal Web document, and would then ignore any <FRAMESET> definitions. Internet Explorer 3.0, however, allowed a <FRAMESET> to be included within the <BODY> container, allowing some of the additional attributes of the <BODY> tag to assist in describing features for the frameset, specifically, the BGCOLOR and BACKGROUND.
This meant that the following HTML
<html> <body background="clouds.jpg"> <frameset cols="150,*"> <frame src="links.html" name="links"> <frame src="content.html" name="content"> </frameset> </body> </html>
would produce a perfectly valid page using Internet Explorer 3.0. The clouds.jpg image in the code example would be used for any margins between the frames. However, if this page were viewed with either Internet Explorer 4.0 or Navigator, only the cloud background image would be displayed. To make the page work properly in those browsers, you would need to move the <BODY> description below the <FRAMESET> description. The cloud background wouldn't be used for Internet Explorer 4.0 or Navigator, but it would still work for Internet Explorer 3.0. Note that if you used the View Source option in Internet Explorer 4.0 on the code above, an analysis message would be displayed telling you about this problem and how to fix it.
Q. How can I click on something in one frame, and have it update the contents in another frame?
A. This is such a common activity with framesets that it surprises me how often the question gets asked. One of the most important things somebody learning the ropes of Web design can do is to use the View Source option to see how designers achieve various effects on their pages. It's the best way to find answers to your questions.
To update contents in another frame, use the TARGET attribute on the anchor element to indicate in which frame you want to load. Notice in the above example code, I provide a NAME element for each of the frames. By doing this, I allow the page that gets loaded up in the "links" frame to push content into the "content" frame by including a target:
<a href="overview.html" target="content">
Q. How can I click on something in one frame, and have it update the contents of more than one frame?
A. This is a slight, but important, variation on the previous question. Not only is it a bit trickier to do this, but there also many different ways to do it. Let's again use my original frameset example. The user clicks on a navigational link in the "links" frame, which will then update the content frame. But at the same time, you want to update the links frame to indicate new navigational choices available to the user, based on which document was chosen. One way to do this is to bring the onload event of the document into the "content" frame.
For example, the <BODY> tag might look like this:
<body onload="parent.links.location='OverviewLinks.html'">
This, however, can lead to the problem I've already mentioned. After browsing dozens of documents, the user could end up with the frames on the page showing content to which it's difficult to return via a simple bookmark. A better approach: If you want to update more than one of the frames on a page, jump to an entirely new frameset description.
Do this with an anchor description, such as:
<a href="overview-f.html" target="_top">
where -f is simply your shorthand for indicating that this is the frameset description for that particular document view. TARGET="_top" is how you force the document to be loaded into the topmost level of the browser's window, replacing all frames within it.
Robert Hess is an evangelist in Microsoft's Developer Relations Group. Fortunately for all of us, his opinions are his own and do not necessarily reflect the positions of Microsoft.
Every month, MSDN Online Voices columnist Nadja Vol Ochs explores Web design issues and solutions in Site Lights. And look for in-depth technical articles in the MSDN Online Web Workshop.
Did you find this material useful? Gripes? Compliments? Suggestions for other articles? Write us!
© 1999 Microsoft Corporation. All rights reserved. Terms of use.
Back to top