Designing with Frames - an Introduction

Frames are a feature of HTML that allows you, as the author, to control the layout of a Website in the user's browser. Specifically, frames allow you to divide the browser window into rectangular sections that can be treated as if they were separate browser windows. They can be scrolled and resized, and loaded with different Web pages. These sections are called frames.

Although they were not recognized by the W3C as an official aspect of any HTML specification until the current HTML 4.0, frames have been supported by the two mainstream browsers since their early versions (Netscape Navigator since version 2.0, Microsoft Internet Explorer since version 3.0). This fact has helped them become one of the most commonly-used (and misused!) "tricks" to spruce up a Website design.

Used properly, frames can add structure and ease of use to a site. Used badly, frames can make a site look crowded, patchy, and sometimes downright unusable on some hardware setups. Their most common use, the creation of a non-scrolling menu bar down the left-hand side of the window, is usually a good idea; however, if you try to cram too much information into that menu bar, some users with smaller monitor sizes won't be able to access the items at the bottom of your menu. Misguided frame layouts such as these have earned a special place in the list of pet peeves of most seasoned Web designers. For this reason, it is important that you not only learn the strengths of frame-based layouts, but also their weaknesses.

For the purposes of this article, a basic understanding of HTML is assumed. Some knowledge of JavaScript and its principles would also be helpful in the final sections, but is not required. Should you wish to read up on either of these languages, I recommend the Beginners' HTML series, and the Javascript 101 tutorial.

Basic Frames

In this section, we'll create a very basic set of frames. We will then modify some of their properties to make them work and look the way we want them to.