Frames

This tutorial will try and explain to you the html for frames. Frames are the different "columns" in websites, for instance on sites you see a top, left, middle, and right frameset.

Putting Together the Frames
A site with a left, middle and right column isn't all one page and script. It is actually four different pages. Below is a description of the pages and scripts for the different sets.

  1. index.html: The first image is of the index.html file. This is the page that will tell the frames where they need to go, and what they need to do. This is the code you will need for the index frame:
    • Go to Start >> Programs >> Accessories >> Notepad.
    • Copy the code in the above textarea into the notepad document and save it as index.html. (If you use a different kind of editor, copy the above into a new document and save it as index.html).
    • Replace My Page with the name of your website
    • Replace your main page.html with the URL to your website.


  2. left.html: This page is known as the menu page, where you put the links to the different places on your website. Save the name of this document as left.html.

  3. right.html: I refer to this page on my site as the main page. This is where usually most sites, keep their update box, and any other little tid bids they want. Save the document as right.html.

  4. The last image is the combination of the three previous ones. This is what the website will look like after you've done the previous steps.


Here are some codes for different framesets:

Top and Left Frames









Three Frames




Some Helpful Tips: In order for your links to link to a page other then the one you are clicking from, you have to direct which frame the link will open up with.

  • Add Links to Top or Left frames: <a href="newpage.html" target="rightside">Name of your link</a> Change where it says rightside with either left, right, main, etc.

  • Getting rid of scrollbars: Sometimes like on the top of the page, you don't have any reason for a person to scroll a frame so it is best just to take the scrollbar off. On the index.html page, you need to add "scrolling=no" to the frame src tag. For instance change:
    <frame src="top.html" NAME="top"> to <frame src="top.html" NAME="top" scrolling=no>
  • Remove Frame Borders: Frame borders may show up around each frame, and if you don't want that then change :
    <frameset cols=20%,80%> to <frameset cols=20%,80% border=0 frameborder=0 framespacing=0>