WebDeveloper.com �: Where Web Developers and Designers Learn How to Build Web Sites, Program in Java and JavaScript, and More!   
Web Developer Resource Directory WebDev Jobs
Animated GIFs
CSS Properties
HTML 4.01 Tags
Site Management
WD Forums

    Web Video
    Expression Web



    Forum, Blog, Wiki & CMS

 Site Management
    Domain Names
    Search Engines
    Website Reviews

 Web Development
  Business Issues

    Business Matters

    The Coffee Lounge
    Computer Issues

I've Been Framed! Part 1

I've Been Framed!
Part 1

by Scott Clark

For the past year, I've been hosting a Web site that uses frames, and I've come to a couple of realizations. Used properly, frames can be a useful tool for simplifying Web site navigation, and they can bring about a whole new experience for the viewer. Unfortunately, however, through the use of surveys and server log analysis, I found that only about 50 percent of viewers are using a frames-capable browser; of those, 55 percent did not like the use of frames. I actually find frames to be quite useful, so I wonder why others just don't like them.

Frames can be great. You can create a part of the screen for the viewer that never changes, which might contain a menu or icons that will take them to other pages within the site. Frames can be a pain, however, in that viewers can no longer use the URL bar to see where they are, and they can't bookmark a frame, or switch to a non-framed version (unless the designer has included that option). And once in a framed site, if you cruise around a bit and then hit the back button, you go back to the previous site--completely out of the framed site.

In this column, I'll show you how to accomplish the task of competent framed-site construction, using what we learned in the September/October issue about tables as a jumping-off point. Then, I'll provide a frame alternative in order for you to understand what you should do when creating a framed site, and how you can achieve it.

I came up with "Welcome to Jamaica" as a sample for this column. It can be viewed in all of its glory, or it can be viewed in its non-framed version without changing much of the functionality or appearance of the site.

A Frame Foundation

When you use frames, you're always playing to a limited audience, because the only browsers capable of displaying them are Netscape Navigator 2.0 and above, and Internet Explorer 2.0 and above. Newer versions have even more possibilities for developers; among the most useful features of the new Netscape 3.0 and Explorer 3.0 are borderless frames, which allow you to incorporate one or more frames inside the page while having it appear to be a single page with no frames.

Using a non-framed version of a site in conjunction with the framed version lets the viewer decide which they prefer. For instance, users may find one particular page on your site is worth visiting each day, but they really don't want to hassle with the frames; the non-framed version will allow them to bookmark the page directly.

The "Welcome to Jamaica" site first appears in its non-framed version. In the lower left portion of the page is a hyperlink to the framed version of the site. If you click on this hyperlink, the new page you will be on won't look much different than the one you started at. As you click each link in the table of contents on the left, you'll see the corresponding article appear on the right, regardless of which version you're using. The change is apparent when you scroll down the page, and the table of contents either moves along with the rest of the page or stays where it was, ready for you to change to the next article. This site could have been further embellished with icons or hyperlinks to take the reader back to the table of contents, but in this article we're concentrating on frames.

Here's how I created the non-framed version of the site:

 <html> <head> <title>Welcome to Jamaica</title> </head> <body background="bg.gif" bgcolor="#80ffff" text="#004080" vlink="#004000"> <center><table><td width=180> <center><table><td width=180> <b><center>THE HISTORY OF JAMAICA</center> <p> <font size=-2> <img src="BULLET.GIF" hspace=3 align=middle> <a href="disco.html">"Discovery" </a><p> <img src="BULLET.GIF" hspace=3 align=middle> <a href="spanish.html">the Spanish</a> <p> <img src="BULLET.GIF" hspace=3 align=middle> <a href="slavery.html">Slavery </a><p> <img src="BULLET.GIF" hspace=3 align=middle> <a href="independence.html"> Independence</a><p> </font> <b><center>TOURIST SITES</center> </font><p> <font size=-2> <img src="BULLET.GIF" hspace=3 align=middle> <a href="montegobay.html"> Montego Bay</a><p> <img src="BULLET.GIF" hspace=3 align=middle> <a href="ocho.html">Ocho Rios</a> <p> <img src="BULLET.GIF" hspace=3 align=middle> <a href="negril.html">Negril</a> <p> <img src="BULLET.GIF" hspace=3 align=middle> <a href="antonio.html">Port Antonio</a> <p> <img src="BULLET.GIF" hspace=3 align=middle> <a href="kingston.html">Kingston</a> <p> <img src="BULLET.GIF" hspace=3 align=middle> <a href="bharbor.html"> Blue Harbor</a><p> <center><b> <a href="fjamaica.htm">frames</a> </b></center> </b></font></table> </center> <td width=6><img src = "DOT_DARK.GIF" width=2 height=345> <td> <center> <img src="head.gif" alt="Welcome to Jamaica"> </center><p> <center><h2><i><font color="#ba413a">Jamaica, independent since 1962 </font></i></h2></center> <p> <center><img src="jamaica.jpg" hspace=30 alt="Jamaica" width="500" height="300"> </center> </table></center> </body> </html> 

I used a table for the page's main layout. The table has just one row, but two data sections. The section on the left is only about 180 pixels wide; I specified it as such by including the <width> parameter in the <td> tag of the table. I then created another table within the same data tag to center the list in that section. I made the data section the same width in the inner table as it is in the outer. Inside the inner table, I used small bullet images and hyperlinks to the individual pages in the site to create a sort of table of contents.

By using the same table arrangement on each page, and just changing the text for each article or chapter, I was able to keep the style of the site the same throughout. For the hyperlinks in the table of contents, I simply removed the <a href> tag from around the link on the page that is being viewed. This way, the link can no longer be clicked on, but it is still visible along with the other active links. Since most of each page is actually in hyperspace, with only one approximately 8.5"-by-11" document showing at a time, the bottom of the page has a chance to download while the user is reading the top. I used a small font size, specified in <font> tags surrounding the text, for all the hyperlinks, and I also used the <font> tag to change the colors of some of the text to red.

Remember that if the browser displays frames, it will also handle font tags — now even in Explorer. Used together with frames, these tags can make your site quite a presentation. You just don't want to overdo it: Harsh colors on an otherwise mild background can ruin the presentation.

[ I've Been Framed!:
Part 2 > ]

HTML5 Development Center

Recent Articles