When to Use Frames
Last update on: 07-16-2008Before I show you what frames are capable of, I should mention that whether you use them is very much a matter of taste. A lot of beginners use frames in their sites, particularly creating one for navigation and the other for content. But then as they learn more about HTML and XHTML they tend to move toward using tables for layout and, increasingly, CSS.
Personally, there are very few circumstances in which I would suggest that you use frames in a page. The cases in which I think frames are useful include:
- When you want to create a (comparatively small) navigation bar, when the main content of the page must contain a lot of information and cannot be split into separate pages (so the user would have to scroll down a long way to see that section). In this case one frame acts like a table of contents to a very long document.
- When you have a lot of data in one part of the page that you do not want to reload, while another part of the page changes. Examples might include a photography site where you have lots of thumbnails in one frame, and the main picture in another. Rather than reloading the thumbnails each time a visitor wants to look at a new main picture, you can just reload the main picture.
For each frame you have in a layout, you need to have a file to be its content (each frame is essentially its ownWeb page), so the number of files in your site quickly grows. You therefore need to be particularly careful with your file structure so that you do not get lost in a sea of extra files.
A couple of other drawbacks you should be aware of with frames are as follows:
- Some browsers do not print well from framesets.
- Some smaller devices cannot cope with frames, often because their screen is not big enough to be divided up.
- If you design a page so that the content of a frame fits within the borders of a frame, users with a lower resolution monitor than you can end up seeing only a portion of what you intend them to see. Also, users with a higher resolution monitor than the designer may end up with large gaps around the edges of the frames.
- If you have a navigation frame loading different pages into a “main frame” it is hard to create a navigation bar that tells the user which page they are on (because the other frame loads the new page without telling the navigation bar).
- The browser’s Back button might not work as the user hopes.
First webpage using Frameset:
in this example we referred to call some websites in our 3 frames, but you can create deferent pages and browse them into these frames.
To create a frameset document, first you need the <frameset> element, which is used instead of the <body> element. The frameset defines the rows and columns your page is divided into, which in turn specify where each individual frame will go. Each frame is then represented by a <frame> element.
You also need to learn the <noframes> element, which provides a message for users whose browsers do not support frames.
You already know that there is no <body> element as it has been replaced with the <frameset> element; also, there should be no markup between the closing </head> tag and the opening <frameset> tag, other than a comment if you want to include one.
the <frameset> element must carry the two attributes rows and cols, which specify the number of rows and columns that make up the frameset. In our example there are just three rows, the first being 150 pixels high, the third just 100 pixels high, and the second taking up the rest of the page.
<frameset rows="150, *, 100">
Inside the <frameset> element are the empty <frames /> elements. The <frames /> elements indicate which page will be kept inside that frame using the src attribute. There is also a <noframes> element whose contents will be displayed if the user’s browser does not support frames.
Now that you have a good idea of how a frameset document appears, it’s time to look at the elements in a little more detail.
Working with Frames's lessons:
Introduction To FramesWhen To Use Frames
The Frameset Element
The Frame Element
The Noframes Element
Creating Links Between Frames

