Article
Designing with Frames - an Introduction
Our First Frameset
People are often surprised at how easy it is to create a Web page that contains frames. Each rectangular section into which you want to divide the browser window is called a frame. To define the set of frames you intend to appear in your Website, all you have to do is write a special HTML file that defines the size, position, and initial contents of each frame. You must then write separate HTML files for the contents of each frame, just as you would for a normal browser window.
Don't worry if this isn't making sense to you just yet... I'll get back to these ideas in a moment. For now, let's concentrate on the HTML file that defines your set of frames. This is simply called the frameset, and looks something like this:
<HTML>
<HEAD>
<TITLE> Our First Frameset </TITLE>
</HEAD>
<FRAMESET>
<FRAME>
<FRAME>
...
</FRAMESET>
<NOFRAMES>
...
</NOFRAMES>
</HTML>
Note that this HTML file doesn't contain a <BODY> tag. Notice also the use of three new tags in this file:
<FRAMESET><FRAME><NOFRAMES>
The <FRAMESET> tag takes the place of the <BODY> tag in a "normal" HTML file, and is used to provide information about the set of frames that will appear in the browser window. Information such as how the window is to be divided up, how many frames there will be, and any other information that relates to the set of frames as a whole is specified using this tag.
Let's use a concrete example. Suppose you wanted to create a Web page with a horizontal division right across the middle of the browser window. In other words, you'd have two frames, each occupying 50% of the vertical space in the window. This way of thinking about frames as divisions of the available space is important, because this is how the <FRAMESET> tag works:
<FRAMESET ROWS="50%,*">
This simply says to the browser:
"I want a set of frames that divides the window into rows. Of the available space, the first frame will occupy 50%, and the second will occupy whatever is left."
Notice especially the fact that the asterisk ("*") stands for "whatever is left". More on this later.
To place the division vertically down the middle of the page, you would simply type the following:
<FRAMESET COLS="50%,*">
Note that for the sake of brevity, HTML takes "COLS" to mean "columns". That is, COLUMNS="50%,*" will not work!
Now, as you may have guessed, the <FRAME> tag provides information specific to each individual frame. You will have to enter a number of <FRAME> tags that's equal to the number of frames you specified with the <FRAMESET> tag. In our simple example, this tag will be used simply to tell the browser which HTML file to load into each frame, as follows:
<FRAME SRC="topframe.html">
<FRAME SRC="botframe.html">
So the first (top) frame in our frameset will be loaded with topframe.html in it, while the second (bottom) frame will contain botframe.html.
Finally, the <NOFRAMES> tag follows the <FRAMESET> tag, and is used to specify content to be displayed if the user's browser is unable to display frames. Although this is becoming increasingly uncommon, many educational institutions still allow students to access the Internet on text-based terminals. Web browsers for this medium, the most popular of which is Lynx, are generally unable to display frames.
<NOFRAMES>
<P>Sorry, but it appears you are using a Web browser
that does not support frames. Click <A HREF="noframes/
index.html">here</A> to access the non-frames version
of our site.</P>
</NOFRAMES>
The way the <NOFRAMES> tag works is by saying to any browser that does support frames: "Do not display this." As any Web browser that doesn't support frames will not know any more about this tag that it will the <FRAMESET> and <FRAME> tags, it will simply ignore them all, and be left with the enclosed text to display. In the example above, I have provided a link to a version of the site that does not use frames. If this is not feasible, it is still good practice to include a note telling users of frames-incapable browsers that your site cannot be accessed using their browser.
Gathering all this together, we have our simple two-frame frameset.