Sample Code - Using Frames to Create a Web Site Template

Let's say you want to use frames to make a reusable web site template that looks like this:

My Website
Home Contact Links	Welcome to my web site

In case you have never heard of frames before, frames are a basic feature of HTML that allow you to split a page into separate parts. Frames are a bit unusual in that you need to create a lot of different HTML pages to use them. Overall, to create a reusable template like the one you see above, you will need one html file for each rectangular part of the site that stays the same (in this case, header and navigation bar), plus one file for each main page (in this case home, contact, and links), plus one file that wraps everything together. The last one, the file that wraps everything together, is the key part. This is the file that actually uses frames to determines how large each area of your site is and how these areas are filled. In short, it is the glue that pieces together all the other HTML files to create a complete page.

So, if you wanted to create a layout like the one above using frames, your HTML code would look like this:

header.html:

<h1>My Website</h1>

navigationbar.html

<p><a href="home.html" target="mainarea">Home</a></p>

<p><a href="contact.html" target="mainarea">Contact</a></p>

<p><a href="links.html" target="mainarea">Links</a></p>

home.html

<p>Welcome to my web site</p>

index.html:

<frameset rows="100,*">
  <frame name="header" src="header.html" 
      frameborder="0" noresize="noresize" scrolling="no" > 
  <frameset cols="120,*">
    <frame name="navigation" src="navigationbar.html" 
        frameborder="0" noresize="noresize" scrolling="no" >
    <frame name="mainarea" src="home.html"
        frameborder="0" noresize="noresize" >
  </frameset>
</frameset>

Explanation:

The key file to understand is index.html. It defines the overall site layout and says that your site consists of 3 areas, each represented by a frame. It assigns names to these areas ("header", "navigation", "mainarea"), and fills each area with its initial content, which is stored in another html file (navigationbar.html, header.html, and home.html). Finally, it defines how large each area is. Take a good look at index.html - it is what your site looks like to your browser!

The magic happens when you click on a link. In the navigation bar, notice how each link uses "target='mainarea'". If you had links in your content area, they would use this trick as well. Recall that 'mainarea' is the name of the large frame that holds the content for your site. So, what this does is instead of opening the link in the current window or in a new window, the link is opened in the main area, which as mentioned before you can think of as another window.

To fully understand what is written in index.html, there are a few more things you need to take note of:

the <frameset ...> elements are what divides the site into 3 areas.
<frameset rows="100,*"> divides the site into two parts - one row with a height of 100 pixels, which is the header, and the other row taking up the rest of the screen.
<frameset cols="120,*"> then divides the remaining area into two more parts - one column with a width of 120 pixels, and the other column taking up the rest of the screen. The 120 pixel wide column is the navigation bar, and the other column is the main area.
by default, a frame behaves like a window. So, you would be able to resize, scroll through, and see a small window border around the navigation bar and heder. This is not a desired behavior, so we eliminate these features by setting the noresize, scrolling, and frameborder attributes. In case you are wondering about frameborder - borders are a styling issue and should be handled by style sheets, which offer much more flexibility. So even if you wanted borders around your site's areas, you would still disable frame borders by using 'border=0', and use your style sheet to add borders instead.