HTML Frames


  1. Purpose
  2. A Generic Frame Page
  3. Adding a Banner or Title Frame
  4. FrameBorder and FrameSpacing
  5. Frame Name and Frame Target
  6. Noresize and Scrolling
  7. Useful Tips

Purpose

The concept around Frames is: allow multiple ".html" documents to be displayed inside a single browser window at a time.

This means: a page with no content on it, but rather tells the browser which web pages are to be opened.


A Generic Frame Page

Frames are typically used to get a menu in one frame, and content in another frame.

When someone clicks a link on the menu frame, that page will be opened on the content frame.

Lets see a classic example of a basic menu / content frameset:

        <html>
          <head>
          </head>
          <frameset cols="30%,*">
            <frame src="menu.html">
            <frame src="content.html">
          </frameset>
        </html>
      

This results in:

A good rule of thumb is to call the page which contains this frame information "index.html" because that is typically a site's main page.


Adding a Banner or Title Frame

Add a row to the top for a title and graphics with the code as follows:

        <html>
          <head>
          </head>
          <frameset rows="20%,*">
            <frame src="title.html">
              <frameset cols="30%,*">
                <frame src="menu.html">
                <frame src="content.html">
              </frameset>
          </frameset>
        </html>
      

This results in:

In the above example we chose the new title (the 1st row) to be 20% of the total page height and used a "*", which means that menu and content (which are the 2nd row) will use the remaining height.


FrameBorder and FrameSpacing

You probably noticed those ugly gray lines that appear between the frames.
It is possible to remove these and manipulate the spacing between frames with frameborder and framespacing.
These attributes appear within the frameset tag.

Note: Framespacing and border are the same attribute, but some browsers only recognize one or the other, so use both, with the same value, to be safe.

Here's an example of the same frameset without the borders.

        <html>
          <head>
          </head>
          <frameset framespacing="0" border="0" frameborder="0" rows="20%,*">
            <frame src="title.html">
              <frameset framespacing="0" border="0" frameborder="0" cols="30%,*">
                <frame src="menu.html">
                <frame src="content.html">
              </frameset>
          </frameset>
        </html>
      

This results in:


Frame Name and Frame Target

How nice would it be to make each menu link load into the content page?

We do this by naming each frame and setting the correct base target inside menu.html.

This will be the index.html code:

        <html>
          <head>
          </head>
            <frameset rows="20%,*">
              <frame name="title" src="title.html">
                <frameset cols="30%,*">
                  <frame name="menu" src="menu.html">
                  <frame name="content" src="content.html">
                </frameset>
            </frameset>
        </html>
      

And this will be the menu.html code:

        <html>
          <head>
            <base target="content">
          </head>
          ...
        </html>
      

This results in:

We first named the content frame "content" on our frame page and then we set the base target inside menu.html to point to that frame.

Our frame page is now a perfectly functional menu & content layout!


Noresize and Scrolling

It's possible to further customize the <frame> tag using the noresize and scrolling="" attributes.

        <html>
          <head>
          </head>
          <frameset rows="20%,*">
            <frame src="title.html" noresize scrolling="no">
              <frameset cols="30%,*">
                <frame src="menu.html" scrolling="no" noresize>
                <frame src="content.html" scrolling="yes" noresize>
              </frameset>
          </frameset>
        </html>
      

This results in:

The scrolling for the content frame was set to yes to ensure visitors will be able to scroll if the content goes off the screen.

The scrolling for the title frame was set to no, because it does not make sense to have a scrollbar appear in the title frame.


Useful Tips