Using Frames for Layout

This tutorial on using HTML frames to layout your web pages has two versions: the short version and the extended version.

Here's the short version:

DON'T USE FRAMES.

Simple, eh?

Why not, you may ask?

Many reasons. Here are but a few:

1. Frames are counter-intuitive.
2. Bookmarking a framed page may not work as the user intended.
3. Confusion will abound about how to send links leading to your framed pages.
4. Users may find your 'framed' pages displayed outside of their frameset.
5. It takes extra effort to make framed pages search engine friendly.
6. Links to external pages from framed pages must handled carefully.
7. Frames can look butt-ugly if you don't know what you're doing.
8. A one-file site menu can just as easily be created using SSI.

Not enough to discourage you? Still intent on using HTML frames to layout your web pages? Alright then, below is the extended version of this tutorial.

First of all, you'll want to know...

What Exactly Are Frames?

HTML frames split your web page into two or more sections within each of which is loaded a distinct and separate web page. Simply put, a web page using frames simultaneously displays multiple web pages in the same browser window.

Why would anyone want to do this?

Good question. Many web sites will sport a header and/or a site menu that remain unchanged as the user navigates from one page to the next loading new text and images into the content area. Using this site as an example, you see the Iron Spider logo at the top of every page and the site menu running down the left side of every page. What essentially changes as you move from one page to the next on this site is the content area which contains the text you are currently reading.

A website that does not use frames (such as this one) requires the user to reload the header and the site menu every time they move from one page to the next. A website that uses frames, on the other hand, allows the user to reload only the content area while the header and site menu do not get reloaded.

Using frames in this manner has a number of advantages:

1. The header and site menu can remain perpetually within the browser viewport as the user scrolls the content area.
2. Browsing is faster since only the content area must be reloaded.
3. The header and site menu can each be updated by editing just a single HTML document. (If you weren't using frames and you wanted to modify the header or site menu, you'd potentially be required to edit each and every page on your website. Be advised, however, that if this is the only reason you are using frames then SSI provides an excellent alternative.)

Basic Frame Layout

Here's a basic frame layout which uses the first four chapters of H. G. Wells War of the Worlds * as the content.

For demonstrational purposes only, I've created a fully functioning mini example of this frame layout below. As you can see, the browser viewport (represented by the green border) is divided into two frames:

The MENU FRAME - This frame contains the site menu which remains perpetually within the browser viewport. Clicking on links in this frame will load new pages into the CONTENT FRAME. The MENU FRAME initially loads menu.htm which is a separate and distinct web page. Click here to see menu.htm displayed outside of the frame layout. (Restore frame layout.)

The CONTENT FRAME - This frame can be scrolled and contains the main content pertaining to whatever link the user clicks on in the MENU FRAME on the left. The CONTENT FRAME initially loads chapter1.htm which is a separate and distinct web page. Click here to see chapter1.htm displayed outside of the frame layout. (Restore frame layout.)

How to Set Up Frames

We'll use our basic frame layout as our example. As we have already seen, the layout splits the page into two sections and then displays a distinct and separate web page in each section. This layout, however, actually requires three HTML documents to create it. These HTML documents are the frameset document (or the 'mother' page) and the two frame source documents which are loaded by the mother page to create the two frames in our layout. We'll start with the frameset document.

Frameset document

This HTML document sets up the frames to be loaded into the web page. The source code of a frameset document differs from the essential web page structure in that there are no <body>...</body> tags. These are replaced by the <frameset>...</frameset> tags which are used to define the frames. Here's the frameset document source code used to create our basic frame layout:

• Creating Columns ~ The cols attribute is used in the <frameset> start tag to split the page vertically into two or more columns. The value of the cols attribute is a comma-separated list of width percentages totalling to 100% of the browser viewport. Hence, in this example, the cols="25%,75%" attribute/value pair splits the browser viewport into two columns. The first column on the left spans 25% of the full width of the browser viewport while the second column on the right spans the remaining 75%. In this frame layout, each column represents one frame.
  
  You may also specify the width of a frame column in pixels. The asterisk * is used to specify that other frames will take up the remainder of the available space. Hence a <frameset> start tag with a cols="150,*" attribute/value pair will create two frame columns: a left frame column that spans 150 pixels in width and a right frame column that spans the remainder of the available space.
• Creating Rows ~ The rows attribute is used in the <frameset> start tag to split the page horizontally into two or more rows. The value of the rows attribute is a comma-separated list of height percentages totalling to 100% of the height of the browser viewport. Hence, in this example, the rows="25%,75%" attribute/value pair splits the web page into two rows. The top row spans 25% of the full height of the browser viewport while the bottom row spans the remaining 75%. In this frame layout, each row represents one frame.
  
  You may also specify the height of a frame row in pixels. Hence a <frameset> start tag with a rows="150,*" attribute/value pair will create two frame rows: a top frame row that spans 150 pixels in height and a bottom frame row that spans the remainder of the available space.
  
  

Frame Source Documents

Each frame in a frame layout displays a distinct and separate web page document. These frame source documents are loaded by using <frame> tags in the frameset document. Note that the frame element is an empty element thereby requiring no end tag. Each <frame> tag in the frameset document corresponds to one framed section on your web page.

Thus, in our basic frame layout, the page is split into two columns using cols attribute in the <frameset> tag and thereby requires two <frame> tags. These are placed in between the <frameset>...</frameset> tags in the frameset document.


The src attribute is used in each <frame> tag to designate the HTML document to be initially loaded in that particular frame. Hence, in the above example, two frame source documents —menu.htm and chapter1.htm— are initially loaded into the frame layout. In this example, the src attributes use relative addressing and hence all documents (both frameset and frame source) are placed in the same web directory in order to properly function together as a frame layout.

The name attribute is used in each <frame> tag to help with the special handling of hyperlinks required when using frames. The value of the name attribute can be anything you want as long as it's unique.

Each individual frame source document (e.g., menu.htm and chapter1.htm) is written up using the standard or essential web page structure.


*   *   *

Alright then let's crank it up a notch and learn how to make advanced frame layouts including how to make a little framed area in the middle of a standard web page (officially known as an 'inline frame')...