When frames were first introduced into Netscape 2 and IE 2.1, they were often criticized as ugly, slow and unmanageable. Thankfully, today's browsers have come along way with their implementation of frames, and a well-used frameset can go a long way to making a site more attractive and easier to navigate.
For example, a site may use one small frame for its navigation menu, with the main content displayed in a second, larger frame. The navigation frame would remain the same while the main content page changed to display the different content pages.
The FRAMESET and FRAME tags
The two tags used to create a framed site are <FRAMESET> and <FRAME>. The first of these, <FRAMESET>, is placed at the top of your site, where you would normally put a <BODY> tag. The second tag, <FRAME>, is used to specify each frame within the frameset. In addition, you can put further <FRAMESET> tags within the outer <FRAMESET>, so you can have nested frames.
To simplify things, we're not going to cover the whole <FRAMESET> and <FRAME> syntax here; just the options that are most often used.
Let's take a look at the <FRAMESET> tag first:
<FRAMESET rows|cols="a,b,c,..." border=n frameborder="1|0"
framespacing=n>
</FRAMESET>
NOTE: All the attributes are optional except the rows or cols attribute.
The first attribute, rows or cols, specifies whether the frameset will consist of frames lined up in rows or columns. (To create a frameset containing both rows and columns, you need to nest framesets inside the main frameset - The rows and cols attributes also allow you to specify how those rows or columns will appear within the frameset. Each of the rows/columns is specified in turn, separated by commas. Each value can take one of the following four forms:
| n |
The row/column will be n pixels deep/wide |
| n% |
The row/column will take up n% of the width/height of the parent window/frame |
| * |
The row/column will take up whatever space is available to it |
| n* |
The row/column will take up proportionately n times as much space as a row/column defined with * |
The border attribute (Netscape only!) allows you to specify the width (in pixels) of the borders between the frames in the frameset. The default is 5 pixels wide.
The frameborder attribute specifies whether the frames will have borders or not. Often it is nice to have seamless frames, as in the Online Japery frameset - this option allows you to turn off frame borders altogether with frameborder=0. Note that this will not always produce borderless frames in all browsers, as they all have additional settings which can result in flat-colour borders between frames! To be safe, specify border=0, frameborder=0 AND framespacing=0.
The framespacing attribute (IE only!) specifies the width between frames in pixels, and hence the border width; effectively the same as the border attribute in Netscape.
Now let's take a look at the <FRAME> tag:
<FRAME src="framesource" name="framename"
scrolling="yes|no|auto" frameborder="1|0"
noresize marginwidth="n" marginheight="n">
</FRAME>
NOTE: All the attributes are optional.
The src attribute specifies the content of the frame - usually an HTML page. For example, <FRAME src="main.html"> will create a frame which displays the page main.html. It's always a good idea to specify a source for each frame, although you don't have to.
The name attribute allows you to associate a name with each frame in the frameset. This is necessary to target frames (see the linking between frames section). Example: <FRAME name="main">.
The scrolling attribute selects whether the frame will have scrollbars in it. A value of yes means it will always have scrollbars; no means it never has scrollbars; and auto means it will have scrollbars only if the frame's content is too big to fit in the frame.
frameborder works like the equivalent FRAMESET tag, and allows you to turn the border off or on for individual frames (the border will only turn off between two adjacent frames if they both specify frameborder=0).
The noresize attribute, if present, means that the user cannot resize the frame by dragging the frame border around.
Finally, marginwidth and marginheight control how much space appears between the edges of the frame and the frame's content, in pixels. If they're not specified, default values are used (approx. 10 pixels, though different browsers have different defaults!).
Take a look at some of the frameset examples at the end of this page to see how the <FRAMESET> and <FRAME> tags work together.
Linking between frames
Often you want to have a hyperlink in a document in one frame that opens a document in another frame. For example, one frame might be a navigation or menu frame, containing links to pages that should be opened in another frame.
So how's it done? Easy. You add the keyword target to the <A> tag to specify the name of the frame to open the page in. You did give each frame a name, right? :)
For example, say your frameset has two frames, called main and menu. Your menu frame has a src of menu.html. You have a link in your menu.html page to a page called services.html, that you want to appear in the main frame. This is how you do it:
<A href="services.html" TARGET="main">Our Services</A>
This link, when placed in the menu.html page, will cause the page services.html to be opened in the main frame.
There are some special values that you can use for TARGET. These are:
| _parent |
The page will be loaded into the frameset containing the current frame (for nested framesets) |
| _top |
The page will replace the topmost frameset, i.e. load into the whole browser window. Great for replacing one whole frameset with another. |
| _blank |
The page will be loaded into a brand new browser window, causing a new window to open. |
| _self |
The page will always load into the same frame as the link is in. This is the default target anyway, but the default can be overridden by specifying the line <BASE target="framename"> in the page's <HEAD> tag. |
Linking to other sites within frames
When linking to external sites from within your frameset, it's considered good netiquette to load the external page into the main browser window using target="_top", or opening the page in a new browser window with target="_blank".
Alternatively, you can specify a name which isn't a reserved name and isn't a name of one of your other frames. This will open the page in a new browser window, but any other sites opened from your site will also appear in the same window. (If you use _blank, a new window is opened for each site.) We use this trick on this site by launching a new window called showcase - the window will only be launched once, provided the user doesn't close it.
Coding for frameless browsers
It's a good idea when using framesets to provide an alternative page for early browsers that don't use frames, even if that page just says "get a newer browser!". If you don't do this, older browsers will just display a blank page, and people will think your site doesn't exist!
You provide an alternative page by using the <noframes> and </noframes> tags before your </frameset> tag. Frame-aware browsers will ignore everything between these tags, while older browsers will go ahead and display the content. For example:
<NOFRAMES>
<center><b>Spoil yourself - get a new browser!</b></center>
</NOFRAMES>
</FRAMESET>
Some frameset examples
Let's have a look at a couple of sample framesets, along with the HTML that makes them.
1. The "menu-on-the-left" frameset
This is a pretty common frameset, where the page is split into two columns. The narrow left hand column contains graphic or text links to pages which appear in the right hand column. This neat approach means that, for smallish sites, all of the site content can be accessed via the links in the left hand frame.
<html>
<head>
<title>"Menu on the left" example</title>
<frameset cols="140,*">
<frame name="menu" src="menu.html">
<frame name="main" src="welcome.html">
</frameset>
</html>
2. A 3-framed frameset
This example uses nested framesets to display two menu frames, one along the top and one down the right-hand side.
<html>
<head>
<title>"Three-frame" example</title>
<frameset cols="*,150">
<frameset rows="104,*">
<frame name="top" src="top.html" noresize scrolling=no
marginheight=5 marginwidth=5>
<frame name="main" src="welcome.html" noresize scrolling=auto
marginheight=5 marginwidth=5>
</frameset>
<frame name="right" src="right.html">
</frameset>
</html>