Domain Registration : Discount Domain Pricing : Website and Domain Hosting : Frontpage 2000 Hosting : Website Development and Promotion : Secure E-Commerce : Shopping Cart Software : Linux and Windows NT : Graphic Design : Free Email Services : Fast Servers : Low Cost!


The most basic set of frames requires 3 .html documents: 1) The Frameset Document 2) A Source Page 3) Another Source Page

Here is an example of this simple frameset, laid out in a very common format: The Left Menu
  index.html (_top)  
  menu.html (Menu)
  • Link
  • Link
  • Link
  • Link

  main.html (Main)

Stuff, stuff, stuff

stuff, stuff, stuff

In this example, only the 2 Source pages will be visible to the user, and the Menu Frame will remain onscreen while the Main frame is updated by the links in the Menu. Lets look at the HTML source of each document to see how they work to achieve this effect:

1. The Frameset - index.html (_top)



    <frameset cols="30%,70%">

    <frame src="menu.htm" name="Menu">

    <frame src="main.htm" name="Main">



    <noframes><a href="main.htm">Click Here</a></noframes>


    All of the html tags in this example are required. We will look at some optional frameset effects in the next chapter.

    Now lets examine each tag individually:

    <frameset cols="30%,70%">

    Open Frameset creating Columns. Make the First Column 30% of the screen width, and the second column 70%

    <frame src="menu.html" name="Menu">

    For the First Column, display the contents of menu.html, and give this frame the name "Menu"

    <frame src="main.html" name="Main">

    For the First Column, display the contents of menu.html, and give this frame the name "Menu"


    Close Framesets

    <noframes><a href="menu.htm">Click Here</a></noframes>

    Older Browsers and Search Engines sometimes have trouble with frames. Adding a link to your menu page will make sure these users can get to your content!


2. The Menu Frame - menu.html (Menu)

    The source frames of any Frameset are normal html documents that you can design in any way you like. The IMPORTANT thing to remember is that each of your links will need a TARGET, which tells the link which frame it is to be opened in. If you do not specify a target for your links, the link will open inside the current frame.

    For our example, we will need to specify the target "Main" in each link, so that the link gets displayed in the correct frame:

    <a href="next.html" target="Main">Link</a>

3. The Main Frame - main.html (Main)

    This page can be anything you desire. As in the above example, you may want to create a link which updates the Menu frame, while leaving the Main page onscreen. Simply specify your target as "Menu":

    <a href="menu2.html" target="Menu">Link</a>

4. Important things to know about Frame Targets:

    The Target of a Link must correspond to the name="" of a frame created by the frameset document. Frame names/targets are case-sensitive, so be sure you are consistent.

    The frameset document is known as the parent of any particular frame. There are some special target names you can use to "clear" your frames - or break out of frames altogether. These names are _top and _parent. In the above example, targeting either _top or _parent will remove the frames completely and display the link in the full browser window.
Borderless Frames

One of the major things now in frame usage is borderless frames. To make borderless frames, just do these two simple things. Add framespacing="0" border="0" frameborder="0" into your <FRAMESET> tag. Then, add marginwidth="0" marginheight="0" into your <FRAME> tags. Thats it!

Copyright © 1995-2003 Sidetrips™ Internet Services, Inc. All rights reserved.

Reproduction in whole or in part in any form or medium without express
written permission of Sidetrips Internet Services, Inc. is prohibited.

sidetrips.com™, hostserver.com™, registera.com™, htmlshop.com™,
and associated domains are trademarks of Sidetrips™ Internet Service, Inc.

Privacy Policy | Acceptable Use Policy | Terms of Service