Web Site Building · HTML Advanced Topics · Frames 2

What this is about:

Love 'em or hate 'em, frames are an integral construct in site building. Done right, frames can be an effective navigational tool. Done wrong, you'll incur the wrath of everyone who visits your site, once. Therefore, it's a good idea to also offer viewers the opportunity to select a non-frames version of your site.

Linking the Frames Together

Frames Link Targets Let's go back to the basic two-column navigation frameset highlighted on the first page of this tutorial. Remember it contained a window for the menu, and another for the general page content.

 <frameset cols="22%,*">
 <frame src="navigation.html" name="Navigation">
 <frame src="main.html" name="Content">

Notice the addition of the name attribute. That gives the browser's HTML interpreter a moniker for referring to the frame. In the navigation frame's HTML file, you can set up the link list of pages to be displayed in the main content area.

 <a href="main.html" target="Content">Home</a>
 <a href="whatsnew.html" target="Content">What's New</a>
 <a href="aboutus.html" target="Content">About Us</a>
 <a href="tips.html" target="Content">Tips and Tools</a>

The target attribute of the <a> tag tells the browser to load the file into a different frame, referenced by the value of the attribute. When your visitor clicks on any of the links in the navigation menu, they'll be loaded into frame "Content", just as you defined in the frameset. If you do not use the name attribute, the navigation frame itself would be overwritten by the new page, and the content frame wouldn't budge. There are other special target options you can use, the underscore ( _ ) is very important.

At the beginning of this tutorial we mentioned that many people simply don't like frames. You should allow for this if you choose to use frames on your site. Be polite to those of your visitors who may feel that way by putting the <noframes> tag at the start of the <body> section of your HTML files. Include a comment about the redirection, and provide a link to an alternate, non-frames based page. Close the tag set with </noframes>.

The Good, The Bad, and The Ugly

Count us among those who don't care for frames. That is why you won't find any on this site. You also notice we didn't even show you live examples in this tuorial. Having said that, we won't give you many good reasons to use frames, but we leave the decision to you.

Frames can be a very useful navigational tool if done right. They can save bandwidth, by dismissing the need to download repeat content on every page. Navigation methods such as menus, bars, remote controls, or even DHTML can remain static in a single frame that never changes. Then only the content frames need be downloaded as your visitor navigates through the site providing them with a nice feeling of consistency.

Roadblock to Search Engines Framed sites are notorious for foiling bookmark attempts and indexing schemes. Only the initial contents of a framed page can be bookmarked or linked to, effectively throwing up a roadblock to easy and direct access of specific content. Search engines are known to have problems with framed content, an important point to consider when you begin promoting your site.

Another problem with framed content is it often cannot be printed properly. Many browsers will only print a single frame, and it becomes impossible to print out pages that resemble what you actually see in your browser window.

There are issues surrounding the framing of someone else's website, as well. Protocol demands the owner of the site give permission for this type of presentation, and it is important to realize any link selected from the framed site will itself call up content that will continue to be framed. This can be a very frustrating experience for a visitor who gets "trapped" in a frameset, which can happen when links from within framed documents do not specify the proper TARGET attribute.

This concludes our tutorial about frames. As always, we recommend you immediately jump right in and try it on your own web pages to reinforce the learning. We would love to hear any comments or suggestions you may have for additional content in this topic area. Use the email link at the bottom of the page. Thanks for making Internet Brothers your home for Helpware.

Return to HTML Frames Page 1.

go to the next page