HTML Code Tutorial

We'll use the diagram in Figure 1 for explaining the task.

In Figure 1 our main frameset is a 2 column structure.

The left column (A) will contain our links page, which will target our source pages into frame C.

Frame B contains our document or site heading.

Code for frameset - index.html:
<frameset cols="20/,80/">
<!--column 1-->
<!--Frame A-->
<frame src="links.html">
<!--column 2-->
<frameset rows="30/,70/">
<!--Frame B-->
<frame src="heading.html">
<!--Frame C-->
<frame src="home_page.html" name="frame_c">
</frameset>
</frameset>

The documents that appear in frame windows A,B and C are just plain ole HTML pages. The problem is not getting them indexed on a search engine, but what happens if they are indexed and someone accesses the page directly.

What if the heading page was indexed and a surfer accessed the page. All that he would see is the heading of our document. What if the links page was indexed and a searcher accessed it. All he would see is a list of links.

The same question arises for every source page that will exist on our website.

If a content page was indexed and a surfer accessed it in the SERPS they would see an HTML page with no frame wrapper.

One solution would be to place a hyperlink on each page with the caption Restore Frames. The hyperlink would be used to send the surfer to the main frameset page.

A Better Method

A better solution can be achieved by placing a little block of javascript in each page of your site.

index.html or main frameset

Place this block of javascript in the head section of your main frameset page:
<script language="javascript" type="text/javascript">
var fname="content"; //Content Frame **NAME**

window.onload=function(){
var d=document.location.search;
if(d!='')top.frames[fname].document.location.href=d.substring(d.lastIndexOf('?')+1,d.length);
}
</script>

Be sure to change this line if your content frame is not named content:
var fname="content"; //Content Frame **NAME**

Utilty pages

Let's call pages like the heading page, footer page and the links or navigation page, utility pages. We don't want people accessing these directly, but if they do we want them to go to the main page of the site.

Add this block of javascript to the head section of all utility pages:
<script language="javascript" type="text/javascript">
if(self.location==top.location)self.location="index.html";
</script>

Now if someone directly accesses the footer page it redirects to the main frameset and the default content page is presented.

Note: Your main frameset page should be named index.html. If it isn't change the page name in the javascript code.

Content Pages

We want content pages to redirect to the main frameset also. But we want the page that is directly accessed to appear in the content window. To do that we make a simple change to the block of code we placed in our utilty pages.

Place this block of code in the head section of your content pages:
<script language="javascript" type="text/javascript">
if(self.location==top.location)self.location="index.html?page4.html";
</script>

In this example, the page would be redirected to the main frameset page but page4.html would appear in the content window.

If the page was named carrots.html, the code would change to:
self.location="index.html?carrots.html";

Check out our Free Frames Template Kit or try our Free Frames Kit Demo

Copyright © 1997 - 2010 - Net Success 2000 Plus Inc - Somerset KY 42502