Web Design Stuff
HTML Tutorials    CSS Tutorials    Web Hosting   Resources
Create a Web Page 101
Making Web Pages Intro What is a Web Page? Why Make a Web Page? The History of HTML Learn HTML or XHTML?
Basic HTML
Basic HTML Tutorials Basic HTML Necessities How to Make a Web Page How to Edit a Web Page The Basics of HTML Tags Basic HTML Page Structure HTML Attributes
HTML Font Codes
HTML Font Codes Intro HTML Font Color Codes HTML Font Size Codes HTML Font Style Codes HTML Bold/Italic Codes Combining Font Codes
Formatting Text
Formatting Text Intro Making Paragraphs Miscellaneous Formatting Headings & Subheadings Creating Hyperlinks
Using Graphics
Using Graphics on the Web Add Graphics to Your Pages Graphics and Accessibility How to Align Graphics Page Color & Background Graphics as Hyperlinks Horizontal Rules
Creating Tables
HTML Tables Tutorials HTML Table Fundamentals Background & Border Color Table Frames & Rules Table Width and Alignment Cells 1 -Space & Alignment Cells 2 -Row Column Span Cells 3 -Width & Height
Making Lists
HTML Lists Tutorials Bulleted Lists Numbered Lists Definition Lists
HTML Frames
HTML Frames Tutorials Using Frames for Layout Advanced Frame Layouts Putting Hyperlinks in Frames Frame Border Width Color, Margin and Control Problems with Frames SmartFrames: A Solution SSI: An Alternative to Frames
Web Page Forms
Making Feedback Forms A Simple Feedback Form Installing NMS FormMail Debugging Your Setup My Web Host is Out to Lunch User Input Components Text Fields Checkboxes & Radio Buttons Dropdown Menus Push Buttons Layout and Presentation
Basic CSS
Basic CSS Tutorials What is CSS? Why You Should Use CSS How to Use CSS Inline Styles Embedded Style Sheets External Style Sheets Class Selectors ID Selectors Combining Selectors
CSS Properties
CSS Properties Intro Font Styles Width, Height & Spacing Borders Backgrounds Position Float & Alignment Hyperlinks
All About Web Hosting
Hosting Your Own Website What is a Web Host? Your Website's Home Page Building a Website Offline About Free Web Hosting Best Free Web Hosting Commercial Web Hosting How to Get a Domain Name Ecommerce Web Hosting Web Hosting Terminology
Free Web Design Tools
Best Free Website Tools Best Free Text Editors Best Free Graphics Editors Free Website Analysis Tools
Setting Up HTML Kit
HTML Kit Introduction How to install HTML Kit Screenshot Breakdown Basic Configuration Overall Appearance Shortcuts and Startup Editing Window Customizing Toolbars Using the Favorites Tab Making a New Actions Bar Odds and Ends
Free Templates
Free Website Templates Two Column Fixed Width Three Column Liquid Layout Miscellaneous Templates Dynamic Menu Effects Two Column Experimental Terms of Use About These Templates
Website Templates Help
Getting Started Template Zip File Download How to Edit Your Template What to Edit in the HTML How to Add Your Logo Making a Website
Web Design Tips
Web Design Basics Tables vs. Tableless Using Tables for Layout Example Table Layouts World's Crappiest Web Page
Twitter Backgrounds
Twitter Backgrounds Intro Cool Twitter Backgrounds Cool Twitter Backgrounds 2 Plain Twitter Backgrounds Dark Twitter Backgrounds Best Twitter Backgrounds Cute Twitter Backgrounds Music Twitter Backgrounds Music Twitter Backgrounds 2 Twitter Backgrounds 101 TERMS OF USE
All About Web Browsers
What is a Web Browser? Mozilla Firefox Internet Explorer Opera How to Set Up Firefox Top 5 Firefox Extensions
 
Contact
Post Some Feedback Send Me An Email Iron Spider Blog About Iron Spider... Site Conventions
 
 
 

 

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:

  1. It uses META tags and the noframes element in the frameset document to help search engines index your site.
  2. 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).
  3. It uses Javascript to write the actual web address of the content page at the bottom to help users when sending links.
  4. 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:

  1. Replace menu.htm with the file name of your menu page frame source document.
  2. 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.

smiley (1K)


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





Best Free Stuff
for webmasters

Free Text Editors
Free Graphics Editors
Website Analysis Tools
Free Website Templates

See also:

Best Free Web Hosting

 

If you need a .COM web address, you can get one quick and easy at...

www.GoDaddy.com
<~ BACK TOP NEXT ~>
 
HTML Tutorials |  CSS Tutorials |  Web Hosting |  Domain Names |  Web Design Resources
Iron Spider © Copyright 2004-2011 Robert Darrell