JavaScript Multiple Slideshows
SMTP FormMail Script with Attachments
Pre-Populate Forms with Javascript
One of the most common reasons that webmasters cling to the use of HTML frames in their website design is to incorporate a common navigation system or menu on every page of their website. That is, they use frames to allow them to use a single HTML file for navigation across their entire website. The attraction is obvious. Using this technique means you only have to edit one file in order to update the navigation menu your entire website.
But there are serious drawbacks to using
HTML frames. First of all, it's unfriendly to users because they cannot bookmark individual
pages on your site. When using frames, every page appears to have the same URL - that of the parent
frameset page. Second, search engines have difficulty presenting frame-based pages in
the search results because they have to worry about users clicking on links to pages
that were designed to fit into a frameset layout design. Third, when you use frames,
you have to make sure to properly set the 'target' attribute on all internal links so that the new pages load
into their proper position within the frameset. I've traditionally recommended that
you should strongly consider an alternative to frames in your website design. But truly, you should
simply avoid using frames. Full stop.
Presented here are some simple and effective alternatives to using frames to produce a single-file navigation system. They provide the same functionality without the drawbacks of frames. You can download all of my example code by using the button at the bottom of this page.
The HTML layout I use here to demonstrate ways to replace frames relies only on CSS2, which is widely supported by all browsers. The layout is merely for demonstration here and is not required to give you the convenience of having your navigation menu stored in a single external file. The alternatives I use as examples are:
Fortunately, the browser software used by about 99-44/100%
of users is fully capable of supporting all of these methods. I used this particular
layout to more closely mimic the behavior of frames in keeping the navigation menu in a fixed
position while the rest of the page scrolls. The navigation menu in
the left-hand column of this page contains links to examples of all four methods,
with details of how they work and how to best use them in your website design.
If you check the source for this page, take note of two things. First, the content
of the menu on this page is simple HTML file loaded via Server Side Include inside a div at the bottom of the page. Second,
that all of the CSS styles are contained in an external style sheet. The same
external style sheet is used for all of the example pages. It is only the implementation
of the external menu content that differs. The result is that all of the example pages
appear at first glance to be nearly identical. I used this two-column/menu-on-the-left
design for convenience and illustration purposes. It's dirt simple to install on any
website and expand it as you like. But there's nothing to prevent you from making a
menu-on-top/content-underneath design, a drop-down menu, or anything else you can construct
with HTML and CSS while using an external file to generate your navigation menu.
Alternative #1: Server-Side Includes have the
advantage of not relying on the user's browser for any special features. They require only
that your site be hosted on a server that uses Apache server software and that your hosting
service supports their use. After configuring your server control file (.htaccess), a simple
instruction inserted in your web pages will retrieve the contents of an external HTML file or
execute a CGI script to create the navigation links. The downside is that not all hosts
allow users access to these server control facilities. On those hosts you may have to rename your
HTML files with the extension ".shtml,". The advantage of Server Side Includes is that
the effect is invisible to the browser. All the browser sees is the final, complete HTML document.
Alternative #2: External
JavaScript files offer flexibility and a very high-degree of cross-browser compatibility. The ability to use
external JavaScripts has been around since 1996. The only limitation is that a small percentage of users run with
JavaScript support disabled, and there are simple work-arounds for them. JavaScript is a often the only choice for websites
that use free hosting services that do not support Server Side Includes or PHP.
Alternative #3: IFRAMEs
could be the second best alternative to Server Side Includes. This tag is supported by roughly
98% of browsers in use today. With little effort, an IFRAME is like a little sub-window within your pages. If
you know any HTML whatsoever, you can use an IFRAME. It works much like regular frames by adding content of an
external HTML file and inserting it into the parent HTML document, but doesn't require a FRAMESET page. However,
since using an IFRAME means that the navigation links are not actually a part of the parent page, your site may
not perform as well in the search engines as it would if you used the other options, so I don't really recommend using
this method.
Alternative #4: PHP is the
most popular programming language on the web today. It's easy to learn, and even easier to use on a website. The essential
fact is that PHP allows you to "include" external files in virtually the same way that Server Side Includes
operate. All you have to do is use the ".php" extension on your HTML files and then add a small snippet of PHP
code to call in the external menu file. Examples of this can easily be found on the web or at
http://www.php.net - a wonderful resource for PHP users. PHP is easy to learn, even for
non-programmers. Best of all, it's easy to experiment with, and you can even install it on your home computer and learn to
use it offline and out of sight of your users. Like Server Side Includes, PHP's 'include' instruction creates a seamless
integration of the external file with the parent document in a manner that is invisible to browsers and search engines.
Each of my examples use a different method of incorporating an external file containing the navigation links into a parent web page. The page designs are all nearly identical to demonstrate the fact that the method is independent of the web page layout. So all you have to do is construct your external navigation menu file, and add the appropriate support code to your other web pages. When using the IFRAMEs method, keep in mind that you have to create a complete HTML file for your navigation menu, with its own links for external stylesheets or JavaScripts.
The page design I used here requires two DIVs, one for the page content and one for the navigation menu. The navigation menu content is stored in a DIV whose ID is "nfNavMenu" and the page content is stored in a second DIV whose ID is "content". These DIV are styled to control the overall layout, keeping the menu display in a fixed position in the browser window just like FRAMEs do. This is done by using "position:fixed" for the menu DIV and setting an appropriate left margin on the content DIV. No CSS positioning magic is required.
The example code I provide displays a simple two-column layout with the navigation menu in the narrow left-hand column and the second column that occupies the balance of the page width contains the content of each page. From here, your choice of implementations differ only as to how the contents of the navigation menu are generated and displayed.
The External JavaScript method is very similar, except that instead of requiring
an external HTML file, you can also use an external JavaScript file to generate the HTML that displays your
navigation menu. The latest version of my JavaScript alternative does support using an external HTML
file, and I highly recommend that method.
Rainbo Design's No-Frames Navigation System© is provided free of charge. If you use and enjoy this software,
I would appreciate it if you would place the following link on your site:
a href="https://www.rainbodesign.com/pub/" Rainbo Design Tools & Scripts/a
The button below will allow you to download a .zip archive containing all of the
files in this series of articles. Just install them in their own directory on your computer.
This page was last modified on August 27, 2020
Copyright © 2005-2024 by Richard L. Trethewey - Rainbo Design Minneapolis. It's not that I think this is such an earth-shatteringly great presentation, but if you want to copy it, I'd appreciate it if you would ask for permission. I've been working with computers for over 30 years now, and one phrase keeps popping into my head - "I hate it when it's right!" And laptops and smartphones are no better.
Looking for more website design information? See my Sitemap!