SmartFrames

Here's what I call my SmartFrames layout that I specially developed to address all of the problems described on the previous page.

It features the following:

It uses META tags and the noframes element in the frameset document to help search engines index your site.
It uses Javascript to write a cross-browser compatible hyperlink in the top right corner of the content frame that the user can click on to create a proper browser bookmark ("favorites" in Internet Explorer).
It uses Javascript to write the actual web address of the content page at the bottom to help users when sending links.
It uses Javascript to make sure that all frame source pages are always loaded inside of the frame layout.

Here's what it looks like. It's basically ready to go and the javascript will require very little editing to make it your own. I've tested it thoroughly in Internet Explorer 6, Firefox 1.0.4 and Opera 8 and it works both online and offline (with the exception of the 'Add to Favorites/Bookmark this page!' link which will only work online).

Here's the whole magilla packed into a zipfile that you can download. (Need a zipfile utility? Try EasyZip.)

This layout is a replica of the basic frame layout discussed in detail in my tutorial on Using Frames for Layout except that instead of using H. G. Wells War of the Worlds as the content, I just provide a brief description of the SmartFrames layout followed by some dummy text. (You'll be replacing this of course with your own content.) The zipfile contains 1 frameset document and 5 frame source documents (a menu page and 4 content pages). If you want to add more content pages, just make sure they contain the content page javascript.

Here's a quick rundown on what you need to know to make the SmartFrames layout work for you...

To Help Search Engines Index Your Site

To help search engines index your framed web site, you'll need to use META tags and the noframes element. These are described below:

META TAGS

In the SmartFrames layout these are already inserted for you. You'll have to edit some values, however, so that they apply to the content of your site. Open up the HTML source of the frameset document (index.htm) in a text editor and near the top you'll see the following lines of code:

<META NAME="description" CONTENT="A brief description of your website goes here...">


<META NAME="keywords" CONTENT="A, comma-separated, list, of, keywords, and, key phrases, relevant to your website content, goes, here">

Replace the parts highlighted in red with the appropriate text (self explanatory).

THE noframes ELEMENT

Hang on a second. You're not finished yet. Now you'll need to fill in the <noframes>...</noframes> tags. Scroll to the bottom of index.htm to find these lines of code:

<noframes>THIS WEBSITE IS ABOUT...<br><br>

<a href="menu.htm">Site Menu</a>

</noframes>

Replace "THIS WEBSITE IS ABOUT..." with a little more verbose description of what your website is about and replace menu.htm with the name of the framesource document you intend to load into the menu frame (it's easier to just call it menu.htm and be done with it).

The noframes element is officially used to provide a reasonable facsimile of your framed page to browsers that don't support frames. However, here in the 21st century, this is rarely an issue since a vast majority of browsers now support frames.

Many search engines, on the other hand, don't care if you're using frames or not and are only scanning your HTML documents looking for visible text and hyperlinks (of which a basic frameset document contains neither) to use to index your site. To remedy this, you can use the <noframes>...</noframes> tags (usually just before the last </frameset> end tag) to provide them with content to read and a link to your site menu to access the rest of your site.

Modifying the Javascript to Use Your Own File Names

You may not want to use menu.htm and page1.htm as the file names of the frame source documents to be initially loaded into the layout. To modify the javascript to work on file names of your choosing, you only need to locate the following lines of code in your frameset document (index.htm):


// REPLACE menu.htm WITH YOUR MENU PAGE

// REPLACE page1.htm WITH YOUR INITIAL CONTENT PAGE

menuURL = "menu.htm";

contentURL = "page1.htm";

In the example above, the parts you edit are highlighted in red. All you have to do is:

Replace menu.htm with the file name of your menu page frame source document.
Replace page1.htm with the file name of your initial content page frame source document.

All other content pages supplied with the SmartFrames zipfile download (e.g. page2.htm, page3.htm and page4.htm can have their file names changed to whatever you like and they will still function with all the SmartFrames features. You don't need to edit the javascript contained in them.

Creating Additional Content Pages

If you wish to create additional content pages for your SmartFrames layout, you need only to insert the following javascript in them to make them work with the SmartFrames features.

Copy-and-paste the following code into the <head>...</head> tags:

Now...

To automatically insert a hyperlink that can be used to open up the bookmark dialog, copy-and-paste the following code into the <body>...</body> tags (ideally right after the start <body> tag):

Next...

To automatically insert the proper URL to your content page (to help users who wish to email links), copy-and-paste the following code into the <body>...</body> tags (ideally right before the end </body> tag):

* * *

That's it.

If you have any problems or further questions about the SmartFrames layout, don't hesitate to contact me.

Overwhelmed by all it takes to make a functional and user friendly frame layout? You might want to try SSI: An Alternative to Frames...

<~ BACK

TOP

NEXT ~>