Thinkydink Overview of Frames

What Are Frames?
Pros of Using Frames in Your Website
Cons of Using Frames in Your Website
HTML Tags Used For Frames

 

What Are Frames?

Frames provide website developers with a means to control how the user navigates through a website. Frames are most often used by commercial websites that want to give the user a way to view content from another site without actually leaving the primary, commercial site.

Frames break the web page up into subsections, or frames. Each frame has its own navigation tools, so when the user scrolls down the page in one frame none of the other frames are affected. This can be very helpful in pages where one frame contains a lot of text but you don't want the user to lose sight of your site banner and main navigation buttons.

The MSDN Library Site* provides an excellent view of frames in action, so I'll use it as an example for the rest of this discussion. When you follow the link below, the MSDN site will open in a new window so you won't have trouble getting back to Thinkydink or switching between the MSDN site and Thinkydink as you read along. Click on the link, shrink the new window so you can still easily click back on the Thinkydink window. Look at the Library page, then switch back to Thinkydink but don't close the MSDN Library page window - you will need to click back and forth between it and the Thinkydink window as you read.

http://msdn.microsoft.com/library/default.asp

Notice how the left-hand frame serves as a table of contents, and no matter how much you expand or collapse the directory tree the content of the right-hand frame doesn't change. Also notice that using the scrollbars on the left hand frame has no affect on the right hand frame. Finally, see that the heading of the page is also enclosed in a frame so that the user of the page won't ever have to hunt around for the top-level navigation links.

Frames also allow the developer to specify the frame in which a new web page should be displayed when the user follows a link. In the MSDN library page, clicking a link in the left-hand frame opens the specified page in the right-hand frame. Switch to the MSDN Library site and try it now.

After you've brought up a page in the right-hand frame, try clicking on any link in that page. Depending on how the developer set up the link, the linked page may show up in the right hand frame, as a completely new site, or in a new window on top of the MSDN library site.

One more thing to note about frames is that they may or may not be obvious to the user. The frames in the MSDN library site are visible to the user because they have their own scrollbars, but in sites where the top and left hand frame contents are not scrollable, the user may have no idea he is in a frames page until he clicks on a link and notices that the target page is opened in a subsection of the current page. Go back to the MSDN page and notice the page address which appears in the URL address field. Now click on a link from the left hand frame and look at the URL address field again after the target page has loaded. The URL doesn't change, which tells you that you're not leaving the main page when the new target page is loaded. This is one way to check and see if you're in a page that uses frames.

If you're asking yourself why a site developer wouldn't want the user to know he's in a site with frames, the answer is this: the developer can essentially hold the user captive on his site by forcing all new pages to be loaded in one of the existing page's frames. Doing so ensures that the user is exposed to all of the advertising on the developer's site, no matter where the user navigates from within the site. The user can outwit the developer by manually typing a new address into the URL address field, but having to do so can be inconvenient for knowledgeable users and very difficult for the technologically-impaired.

At this point you can close your MSDN Library window, as it won't be needed for the remainder of the discussion.

Back to Top

 

The Pros of Using Frames in Your Website

Frames can be very useful to the developer and web surfer alike. The MSDN Library page demonstrates how frames can make it easy for the user to navigate through a great deal of content without getting lost in a sea of pages and then having no idea how to get back to where he started. I often wish more search engine pages would provide a frames option because by the time I've clicked through three or more levels of linked material, it can be a real pain to get back to my original search results.

Also, as discussed above, developers who want to hold web surfers captive on their sites can use frames to that end. Sometimes this is helpful to the user, but most often it's just an annoyance.

Back to Top

 

The Cons of Using Frames in Your Website

The two main cons to using frames are:

1. Some browsers don't support them.

2. Many users don't like them.

But a third con is that frames aren't very easy to to work with for beginning developers. For more information about developer tools, see How To Choose A Web Authoring Tool. Frames can be coded in HTML, but they require their own unique tags and are often structured much like nested tables. Even using a WYSIWYG web authoring tool, framesets can be confusing to deal with because it's easy to get the frameset, or parent, page and its various content frame pages confused. When I first started working with frames, I sometimes made the mistake of opening the parent page for editing when what I intended to do was make a change to one of the pages contained within one of its frames; I'd make the change, save the page, and find that I'd overwritten my parent page instead of just changing the page contained in one of its frames.

I'm pretty comfortable with frames now, but Thinkydink doesn't have frames content because of the first two reasons: lack of browser support and user objections. In general, I think it's a good idea not to put anything in your pages that won't work for, or will annoy, a significant chunk of your intended audience. The audience will just end up angry, having made a mental note never to visit your site again.

Back to Top

 

HTML Tags Used For Frames

HTML tags for frames are used in the "parent" page of a frameset, but not in the "child" pages. The "parent" page is the page which has frames defined in it and the child pages are the pages displayed within the frames. Frames pages aren't coded the same way as other pages in that you can't identify a child page of a frameset just by looking at its code - but more about that later.

The most basic tags used in the parent page are as follows:

<frameset cols="*,*"> </frameset> declares a frameset, used in place of the BODY tags; the "*,*" indicates two columns with variable width - see note below
<frameset rows="*,*> used to set number of rows in a frameset; the "*,*" indicates two rows with variable width - see note below
<frame src="[child URL]" name="[frame name]"> references a child page to be displayed in the frameset and names the frame
<noframes="[text/image/URL]"> </noframes> what to display to users whose browsers don't support frames

About that "*,*" - you can set the values for frameset columns and rows as absolute in number of pixels, as a percentage of screen height or width, or you can leave one or more of the values as an asterisk, which tells the browser to use or divide up the remaining available screen height or width evenly. If you use absolute values for any of the columns or rows, leave at least one of the values as an asterisk because you can't predict how large a screen display each user will have; leaving one value variable ensures you won't end up with blank spaces onscreen.

The tags given above really only scratch the surface. You can set margin values, scrollbar properties and frame sizing behavior and you can nest frames. Since I don't use frames here and don't generally recommend using them in World Wide Web pages I won't go into more depth on the subject, but you can get all the details of these features at www.webmonkey.com by searching on the word "frames".

Finally, a note about commenting frameset child pages. You can't tell that a given page is being used as a child page in a frameset just by looking at the HTML code unless the developer has added comments to the page that give the frameset details. Therefore, if you're going to develop frames pages, it's a good idea to add comments to the child pages so you'll have an easier time managing them later.

Your comments should probably include the name of the parent page along with its full URL, so if you go to edit or delete a page that's being referenced by a frameset you'll remember to take the frameset page requirements into account. For example, you don't want your content pages to be resized to a format that makes them hard to view in the parent frameset.

Back to Top

*MSDN, Microsoft and the Windows logo are the proprty of Microsoft, Inc.

Send comments and questions about this site to the Webmaster@Thinkydink.com All Thinkydink site content copyright April Hamilton, 2000-2002, All Rights Reserved.