Site hosted by Angelfire.com: Build your free website today!

HTML Basics: Name Your Target

Once you've set up your frames, you need to figure out how to use them. One of the best way to use frames is to make a link in one frame open a page in another frame. You accomplish this by using the NAME attribute of the <FRAME> tag and the TARGET attribute of the <A> tag.

The NAME attribute gives each grame an identity as whatever name you choose. Thus, if you have two frames--one for the navigational toolbar and the other for general content--you might name them like this:
<FRAMESET COLS="20%,80%">
<FRAME NAME="Toolbar"SRC="toolbar.html">
<FRAME NAME="Content" SRC="index.html">
</FRAMESET>

Within the toolbar.html document, the toolbar's links would look somthing like this:
<A HREF="index.html"
TARGET="Content">Home</A>
<A HREF="products.html"
TARGET-"Content">Products</A>
<A HREF="info.html"
TARGET="Content">About Us</A>
<A HREF="feedback.html"
TARGET="Content">Feedback</A>

This way, no matter which link the viewer clicks, the document called up by the link will open in the second frame, the "Content" frame.

If you want a link to jump out of the setup entirely(for instance, if you're linking to someone else's site and don't want to force it into your frames), just give the TARGET attribute a value of_top--like so:
<A HREF="http://www.othersite.com/"
TARGET="_top">Check out this other site for more cool info.</A>

Control the borders

Frames aren't always the best way to lay out a page: they take a lot of memory to load and can be confusing to viewers. But recent innovations, such as the ability to control borders between frames or to eliminate them entirely, make frames a more flexible layout tool.

If you want to place borders around all the frames in a frameset, add FRAMEBORDER="1" to the <FRAMESET> tag. To make them disappear, give the FRAMEBORDER attribute a value of 0 (the default). If you'd like to control the frame borders individually, use the FRAMEBORDER attribute with the <FRAME> tag. For instance, the following code yields a frameset in which the frame on the left has a border of 3 pixels, but the middle and right frames merge seamlessly.

<FRAMESET COL="20%, 60%%20%>
<FRAME SRC="toolbar.html" FRAMEBORDER="3">
<FRAME SRC="index.html" FRAMEBORDER="0">
<FRAME SRC="other.html" FRAMEBORDER="0">
</FRAMESET>

This seamless look is all the vogue these days, but be warned:
Large, borderless frames look best when viewed on large monitors. People with smaller monitors will see scrollbars interrupting the seamless look--which is why it's a good design idea to keep frames small scale your content to fit within them.

Fine-tune frames

In addition to making frames borderless, there are numerous other ways to tweak your frames. Take a look at the follwing code:
<FRAMESET COLS="20%, 60%, 20%"
FRAMESPACING="4">
<FRAME SRC="toolbar.html" MARGINWIDTH="10"
MARGINHEIGHT="10" SCROLLING="no"
<FRAME SRC="index.html" MARGINWIDTH="10"
MARGINHEIGHT="10" SCROLLING="auto"
<FRAME SRC"other.html" MARGINWIDTH="10"
MARGINHEIGHT="10" SCROLLING="auto"
NORESIZE>
</FRAMESET>

The FRAMESPACING attribute of the <FRAMESET> tag defines the space (in pixels) between frames, much like the CELLS PACING attribute of the <TABLE> tag.

The MARGINWIDTH and MARGINHEIGHT attribute of the <FRAME> tag define the space (in pixels) between the frame contents and the frame borders(much like the CELLPADDING attribute of the <TABLE> tag) to ensure that the pages inside a frame don't smack into the sides.

The SCROLLING attribute lets you decide whether a frame should have scrollbars: SCROLLING="yes" makes them appear all the time, SCROLLING="no" turns scrollbars off no matter what happens, and SCROLLING="auto"(the default) lets the browser decide based on the space it has for a frame and the size of the content within that frame. In the example above, the first frame will never show scrollbars, while the second and third frames will scroll only if their content is larger than the frames.

Normally, a user can click a frame's border and more it to resize the frame. The NORESIZE attribute does just what you'd expect