Creating Frames
Some Web designers use frames on their pages, for design purposes and to make a site more user friendly. Frames make it easier to navigate a site without losing your place, so to speak. You know that frames have been used when a portion of a Web page remains stationary and another portion of the same page changes when a link is clicked. To check out a Web page with frames, visit The Birch Aquarium.
In The Birch Aquarium page, the top and the very bottom of the page remain constant, while the middle portion changes according to the chosen link. This page is separated into three frames, meaning that three different HTML documents are being displayed at one time. You can choose how many sections you would like your page divided into, in what manner they will be divided and what HTML documents you want to include within each frame.
Advertisement
First, it is important to plan your page well. Consider the layout in terms of rows and columns. How many horizontal sections, or rows, do you want to display? How many vertical sections, or columns? How much room, either pixel or percentage wise, do you estimate each section will need?
The Frameset DocumentA frameset document is an HTML document that instructs the browser to arrange the Web page content in a particular way. In a frameset document, a "frameset" tag replaces the "body" tag.
You will begin the frameset document in the usual HTML format:
<html><head><title>Title</title></head>
Next, insert the "frameset" tag:
Example: <frameset rows="20%, 80%">
This tag indicates that the page will be divided into two sections, a top and a bottom, as indicated by the two values within the tag. If three rows were needed, you would include three values:
Example: <frameset rows="10%, 50%, 40%">
The number values tell the browser the amount of space, in the browser window, that each section is to occupy. You can use percentage values or pixel values. An "*" can also be used in place of a value, indicating that a particular section can use whatever space is available on the browser window:
Example: <frameset rows="100, *, 50">
This tag states that the page will be divided into three rows. The first (top) frame will occupy 100 pixels of space, the bottom frame will occupy 50 pixels of space and the middle frame will occupy whatever space is left in the browser window.
If your page is to be divided into columns, use the frameset tag for columns along with the number values:
Example: <frameset cols="200, *">
This tag tells the browser to divide the page into two columns. The left column will occupy 200 pixels of space. The right column will occupy whatever space remains in the browser window.
You can also combine frameset rows and frameset columns to create quite complicated layouts. The "nesting" of frameset documents is discussed later in this article.