Adam's Advanced HTML Guide- Frames
While some people may tell you that frames are irritating and have no practical use in real life, the majority of web designers, including myself, will have to disagree with that. For the uninitiated, frames are individual windows contained within the main window, each capable of containing a separate document. Yes, while it is true that when abused, frames can be a surfer's worst nightmare, but isn't that the case for everything else in life? A nicely designed frames page can actually help tremendously in site navigation and user interaction, and is a technology that should be embraced.
The basic concept
The basic concept of a frame document is this: It contains at least three parts- The Frameset document, which holds all of the frames, and at least two frames:
Think of the frameset document as a container that contains two or more separate documents (Frame 1 and Frame 2).
The following shows the syntax of a basic two column frame page [Click here for demo first]:
Syntax for Frameset document:
<html>
<head>
<title>Homepage</title>
</head>
<frameset cols="20%,80%">
<frame src="frame1.htm">
<frame src="frame2.htm">
</frameset>
</html>
Syntax for Frame 1:
<html>
<body>
Page 1
</body>
</html>
Syntax for Frame 2:
<html>
<body>
Page 2
</body>
</html>
The key part to notice here is the syntax for the frameset document, which is the page that holds the individual frames. Instead of the <body> tag, this document uses the <frameset> tag. The "cols" attribute inside this tag tells the browser that you want column frames. Try replacing that attribute with "rows" instead: You'll get row frames instead. Following the <frameset> tag is the <frame> tag, with a "src" property that specifies the path of the document for each individual frame. We then close all this up with </frameset> and </html>, and you get your very first frames document!
Applying multiple
<frameset> tags to create more complicated frames
The key to creating frames is the <frameset> tag, which cuts out the individual frames. By utilizing this tag more than once in your frames document, you can create more complicated frames, like the one shown below:
| Frame 1: | Frame 2: .. |
| Frame 3: .. |
Here's the syntax for the frameset document:
<html>
<head>
<title>Homepage</title>
</head>
<frameset cols="50%,50%">
<frame src="frame1.htm">
<frameset rows="50%,50%">
<frame src="frame2.htm">
<frame src="frame3.htm">
</frameset>
</frameset>
</html>
The first <frameset> tag creates the two main columns, and the second one carves the second column into two additional rows. Using the same idea, you can create frames that are as complicated as you can imagine them to be!
Frame attributes
Most tags have attributes that allow you to "fine-tune" the appearance of the tags- frames are no different. I've listed some of the most commonly used frames attributes here:
| border=? | Specifies the border of the frame. In pixels or % |
| noresize | This attribute, when added, causes the frames to be non-resizable. |
| scrolling=? | Specifies whether the frame windows should be scrollable. Valid values are yes, no, and auto. |
Go ahead, try adding the above attributes to your frames, and see how it affects the frame's appearance.
Recommended resources
|