A frame is an area of the screen which will load an individual web page. This web page will NOT cover the entire screen, it will only fill the defined area. We'll use our old web site page as an example. See the illustration below:

  Frame 1 is the Menu Bar at the left which never moves. Frame 2 is the Header Bar at the top of the screen which also never moves, but can change whenever you go to another area at your web site. Frame 3 is the body with all the text for your web pages.

  Now, how do we do this? Actually it's very simple. Just copy the code below and save it as 'start.htm'. What this code does is divide your screen into 2 parts.

  Frame 1 will be in part 1 and the other half of the screen will be parts 2 and 3. 'Menu.htm' is the web page which will load into part 1 (your menu). 'Main.htm' is the file which will load into the other side of the screen.  'Col=150' defines the amount of pixels for the width of frame 1 (the menu width).

Note: The same thing could be done to divide the screen into top and bottom halves by replacing 'cols' with 'rows' in the below example code.

   Now, copy the below text into a file called 'main.htm'. What this does is divide the right hand part of the screen into two more frames, part 2 and part 3. So now you have a three part screen. The first part (on the left) loads the web page named 'menu.htm', the top right loads 'header_main.htm' and the bottom right loads 'body_main.htm'.

  When you double click on 'start.htm' to run it, it will load the menu.htm into the left side of the screen, 'header_main.htm' into the top right part, and 'body_main' into the right side of the screen.

Now just create a web page with your menu buttons and save it as 'menu.htm'.

Create another web page with your header graphics and/or text and save it as 'header_main.htm'.

Last, create the text for the body of your web page and save it as 'body_main'. These three files will load together to create the whole web page.

Using the Target Name

   Now I know this may be a bit confusing, but we're almost done. There's one other thing to note here: in both examples above, there is a variable called 'name' (i.e. Name=menu, main, header, body). There is a very good reason for this.

  When you create a hypertext link, instead of selecting the default of 'target=_self' (current frame) or 'target=_top' (for a new window), you can select 'target=name' and just load the part of the web page that needs to be changed.

  In other words, to load a new menu 'target=menu'. To load a new page of text 'target=body'. To load a new header 'target=header'. To load a new header and body 'target=main' where main is another file just like 'menu.htm', but with a different file name and it will load different web pages - this will load both a new header and body web page.

Search Engine Compatibility

  Frames have a problem with search engines. The search engine will index the text part of your site and ignore the menu button graphics. What happens is that the search engine will link to the body part of your web page so that when people visit your web site, they will just see the body and no menu buttons.

  There is a work-around for this, just copy and paste the following JavaScript code into the header part of your body pages and it will force the surrounding frames to load around it so that the page will be displayed properly. This should go between the '<header>' and '</header>' tags at the top of the web page for the body.

Note: Edit 'frame_name.htm' to be the name of the startup frame file for that web page. In our example above, this would be 'start.htm'. This short script will check to make sure that the surrounding frames are loaded and if not, it will force them to load.

Congratulations...
You are now a Master of Frames!

Article by Don Itjen
at 6star.net