Tutorial 15: You've been Framed, Part II - HTML with Style | WebReference

Tutorial 15: You've been Framed, Part II - HTML with Style

index123456

Tutorial 15: You've been Framed, Part II

The trouble with frames

Way back in Tutorial 1, I mentioned that the main function of the Web is to provide documents that are linked to each other. In Tutorial 2, we explored the fundamentals of linking by explaining URLs and hyperlink heads and tails. The most important feature of the Web is that any document or part of a document can be linked to from somewhere else in the Web. This is accomplished by our friend the anchor element, A.

Another critical tool we use to link documents is URLs. A URL should be the only thing you need in order to refer to a document or document fragment. It's supposed to be a simple, human-readable address for any document you might want to have anywhere on the Web.

One problem that is often overlooked when designing framed sites is that it is impossible to link to a set of framed documents other than that defined by a frameset. Let me explain this with an example. Imagine the following frameset:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN"
 "https://www.w3.org/TR/REC-html40/frameset.dtd">
<HTML>
<HEAD><TITLE>Acme Computer Corp. Homepage</TITLE></HEAD>
<FRAMESET COLS="20%,*">
 <FRAME NAME="sidebar" SRC="navigation.html">
 <FRAME NAME="main" SRC="home.html">
</FRAMESET>
</HTML>

You can view the example here.

This is a simple enough scenario. Let's imagine that the URL of this document is https://www.acme.com/. The document https://www.acme.com/navigation.html will be placed in the frame called sidebar. This document can contain links to various places in the site and act as a navigation aid, loading various documents into the frame called main. The main frame starts out containing the document found at https://www.acme.com/home.html, which is the main part of Acme's home page. This is what most people use frames for: A static, non-scrolling navigation bar that is constant between pages.

The alternative to this approach is to insert the navigation bar into all of the documents in the site and not use frames. The reason people opt for the framed solution is that the links in the navigation bar, which are typically the ones users will use most, are constantly visible while the user scrolls through the main page. You have to give it one thing: It's neat. It's cool. But...

Imagine you have a document called aboutacme.html in the same directory. If you didn't use frames, this document would be accessible through the URL https://www.acme.com/aboutacme.html. Now for the framed version, you remove the navigational links from this document and put them in your sidebar. You insert the appropriate link in the sidebar, which loads the document in the main frame. Viewers can load the URL https://www.acme.com/, click on the link and see the the "About Acme" page in the main frame and keep the navigational links in the side bar. This is still really neat. Here's a simple example of such a setup in action. Load this page in a frames-capable browser, and click on the "About Us" link in the sidebar. You'll see the "About Us" page. Then click on the "Home" link. You're back in the homepage. Though the actual documents in the example are rather short and will probably not require any scrolling, in the real world this would be a nice solution as users would be able to easily navigate through your site.

Frames and links don't mix

Now imagine a document that is not supposed to appear in this frameset. You're writing this document, and you want to link to the home page. Easy. Just link to https://www.acme.com/. What if you want to link to the "About Us" page? This is where things start getting hairy.

You can link to https://www.acme.com/aboutus.html, but that URL points to the "About Us" page without the sidebar. If a viewer loads this URL, he gets just the text and no way to find the rest of your site. You can link to https://www.acme.com/ and say "follow this link and then follow the 'About Us' link," but this is not really a solution, and if you've got more than a couple of pages on your site, it's definitely a problem. But before we look at some more viable solutions, let's see how big a problem this is.

index123456

URL: https://www.webreference.com/html/tutorial15/1.html

Produced by Stephanos Piperoglou
Created: May 28, 1998
Revised: February 25, 1999