| Charles Curley - Software Engineer, Writer
| << | < | > | >> | Blog | Linked In Profile
+ Larger Font | - Smaller Font
Charles Curley

Valid XHTML 1.0! Valid CSS!


Single Source Frames

Charles Curley


Abstract

One problem with HTML frames is that one is expected to provide content both for frames-capable browsers and for frames-challenged browsers. At first look, this appears to mean two separate source files, making maintenance difficult. This article shows how to use the same source file for both the frames and non-frames versions of a web page.

The Problem

The KISS Principle ("Keep It Simple, Stupid") applies to web pages as much as it does to anything else: we ignore it at our peril. The fundamental purpose of web pages is to convey information. No more, no less. Anything that gets in the way of that purpose detracts from a web page, no matter how technically well executed.

One complication is that the equipment used to view web pages varies greatly. The lucky few are running high end work stations with fat pipes directly into the backbone, and can slurp megabytes across the planet in seconds. At the other extreme are people who have 9600 baud links to their shell accounts, and run character browsers such as Lynx. These people have a problem reading Dilbert off the web, never mind your web page. Somewhere in between are the people with a 14,400 bps modem and second generation browsers. A heavily graphics intensive web page is a choice morsel to the first, and utterly wasted on the second. The third users probably have graphics turned off for speed.

HTML frames present a similar problem. The designers wisely provided for frames-challenged browsers by providing the option to provide a frame-less alternative.

Some web page designers take a "tough tacos" attitude here, and simply tell the user with the frames-challenged browser it's time to upgrade to a "real" browser. This is rude and condescending. It is much more civil to provide an alternative page that does not require frames. That is easily done. The challenge is to make such a web page easily maintainable. This article shows how to do that by using the same core files for both versions.

The Implementation

A skeleton web page with frames looks something like this:

<html> <head>
<title>Title</title>

</head>

<frameset rows="25%, 25%, *">
<frame src="file.for.first.frame.html">
<frame src="file.for.second.frame.html">
<frame src="file.for.third.frame.html" name="thirdframe">

<noframes>

<!-- stuff for frames-challenged browsers. -->

</noframes>
</frameset>

</html>

Skeleton Frame Web Page

One place where frames may be justified is to provide a "table of contents" into a reference document. The table of contents stays fixed in one frame, and the user may click on entries to move about in the main document in another frame. A simple application to show how this works is a resume. By curious coincidence, the author of this article just happened to have a suitable resume handy.

A resume using frames

The first frame is intended to keep the candidate's name in front of the reader. It is fixed, and, other than the email address, has no hyper links.

The second frame is the table of contents. This one is also fixed, so the reader can use it to navigate the body of the resume. Its hyper links all point to the third frame, which is dynamic.

Here is what the source for the resume file looks like:

<html> <head>
<title>Charles Curley's Resume</title>

</head>

<frameset rows="25%, 25%, *">
<frame src="objective.html">
<frame src="tocframe.html">
<frame src="allelse.shtml" name="allelse">

<noframes>

<!--#include file="resnoframe.shtml" -->

</noframes>
</frameset>

</html>

resframe.shtml

The frames portion of the file defines the three frames. It also names the third frame, so that the table of contents can point into that frame.

The non-frames portion simply includes a different file, which is the source for the non-frames version of the resume. This source could have been implemented here, and a separate file avoided. However, this include mechanism allowed the developer to use his modern, frame-capable browser to view the non-frame version for poofreading by loading the file "resnoframe.html".

This implementation is heavily dependent on server side includes (SSI), so before you implement something like this, make sure your server will support them. Also, interpreting SSIs slows down a server. Some site managers don't care, and will allow SSIs in documents with the extension .html. Others do not, and restrict SSIs to documents with the extension .shtml. (Since writing this, I put this article up on its present server, where .html files are allowed server side includes, and .shtml aren't. TANJ!)

The file for the first frame is straight-forward. If you've gotten this far in this article, you should be able to implement it with no problem.

The second file, for the second frame, has a table in it, and each entry has a hyper-link into the third frame. One row of the table looks like this:

<tr>
<td><center><A HREF="allelse.shtml#Employment" target = "allelse">Employment</A></center></td>
<td><center><A HREF="allelse.shtml#Computer Expertise" target = "allelse">Computer Expertise</A></center></td>
</tr>

Extract from "tocframe.html"

Each hyper-link points to a section of the file "allelse.shtml", as indicated by the anchor name. The target attribute points to the frame named "allelse", which is the third frame as defined in the resume source file.

The key to maintainability is to have the same file that goes into the "allelse" frame also go to the non-frame version of the page. That is done by using the server side include #include to import the file "allelse.shtml" into the non-frame file, as follows:

<html> <head>
<title>Charles Curley's Resume</title>

</head>

<body bgcolor=#ffffff><a name="top"></a>
<h1><center>Charles Curley's Resume</center></h1>

<em><A HREF="index.html">Back to the home page</A></em><HR SIZE=2 WIDTH=65% ALIGN=Center>

<!--#include file="objective.html" -->
<em>Up to the <a href="#top">Top of the Page</a></em><p>

<!--#include file="tocnoframe.html" -->
<em>Up to the <a href="#top">Top of the Page</a></em><p>

<!--#include file="allelse.shtml" -->

<HR SIZE=2 WIDTH=65% ALIGN=Center>
<em><A HREF="index.html">Back to the home page</A><HR SIZE=2 WIDTH=65% ALIGN=Center></em><p>
<em>Up to the <a href="#top">Top of the Page</a></em>
<HR SIZE=2 WIDTH=65% ALIGN=Center>
<address>For <a name="Questions&Comments">Question and Comments</A>
about our web site, please write our Speaker to Web Pages,
<a href="mailto:ccurley@wyoming.com">Charles Curley</a>.</address>
<br>
Copyright &#169; 1996, 1997, Charles Curley. Various trademarks are the
property of their owners.<br>
<!-- hhmts start -->
Last modified: Wed Jan  1 10:47:08 1997
<!-- hhmts end -->

</body>

resnoframe.shtml

The three included files are the key to the concept. The first, "objective.html", contains the candidate's name, address, etc, and the brief objective statement. That is the same as the objective frame in the frame version of the page. So far so good.

With the table of contents portion of the resume, we run into a problem. If the frame version of the table of contents is used in the no-frames page, Netscape launches a separate browser and displays the rest of the resume in the new browser. That's neat and way cool, but there is no guarantee that other browsers will be so co-operative. So we provide a separate, non-frame, version of the table of contents. Fortunately, this is not a high maintenance item, so this is an acceptable alternative to not knowing if the user can read the resume.

The last include statement brings in the file "allelse.shtml", which isn't quite the same file as that for the third frame. "allelse.shtml" provides some "glue" around the text of "allelse.html" and includes that file, like so:

<body bgcolor=#ffffff><a name="top"></a>
<em><A HREF="index.html">Back to the home page</A><HR SIZE=2 WIDTH=65% ALIGN=Center></em>

<!--#include file="allelse.html" -->
<em>Up to the <a href="#top">Top of the Page</a></em><p>
<HR SIZE=2 WIDTH=65% ALIGN=Center>
Back to my <A HREF="index.html">home page</A>, <A HREF="smpldoc.html">sample documentation</A>, or to <A HREF="smplc.html">sample code</A>.
<HR SIZE=2 WIDTH=65% ALIGN=Center>
<address>For <a name="Questions&Comments">Question and Comments</A>
about our web site, please write our Speaker to Web Pages,
<a href="mailto:ccurley@wyoming.com">Charles Curley</a>.</address>
<br>
Various trademarks are the property of their owners.<br>
This web page copyright&copy; 1996 and renewed the date of last modification by Charles Curley<br>

<!-- hhmts start -->
Last modified: Sun Dec  1 11:30:39 1996
<!-- hhmts end -->
</BODY>

</HTML>

allelse.shtml

The "glue" consists of information such as the web master's email address -- always a courtesy -- and copyright information. There is some duplication between "allelse.shtml" and "resnoframes.html" that could be resolved by moving the duplicate material into "allelse.html". However, the top of the two allelse files must be different, so, unfortunately, we can't get rid of one of them.

Results

The key result of all this finagling is that the core of the resume is one file, "allelse.html" is shown in both the frames and non-frames versions of the web page. That means that the resume is much easier to maintain. In the future, as the author moves from job to job, and adds skills and experience to his resume, he need make changes in only one place to update it. That makes all the extra work worthwhile.

Acknowledgments

The web page shown was prepared with Emacs, using the html helper mode from Nelson Minar. The server was Apache, and the browser, Netscape Navigator, all running on Linux 2.0.0 and XFree86. Emacs, html helper mode and ispell were used to write the article in html. John Bradley's graphics manipulation tool xv was used for the screen capture.

The author would like to thank all those who have contributed to freeware and shareware.

Note: This was implemented on my previous web site. I like it better without the frames.


Copyright © 1996 through 2011 by Charles Curley
Last Modified: 28 Oct, 2011
100% Microsoft-free web site.