Frames
Article ID: KB101368
Understanding Frames: A Home Decorating Analogy...
Let's say that I purchase a few photo frames and hang them on the wall.
They've come with "generic" pictures:
I fill the frames with my own photos of my dog:
Let's say that after a few months, I get a little tired of staring at the
same pictures and swap out the dog pictures with some pictures of family and
friends. I decide to keep one of the dog pictures, though, because I think it's
cute.
If you can switch photos in a photo frame, then you can understand web pages
and frames. If the wall of photo frames were a web page that used frames, each
frame would hold its own HTML page - in the diagram below, frame 1 holds "boys.html,"
frame 2 holds "girl.html," and frame 3 holds "dog.html."
 |
| Photos |
Web sites |
| The wall, divided into sections with photo
frames |
A web page, divided into independent
sections, called "frames" |
| Photo frames |
Frames |
| Photo inside of a frame |
Web page inside of a frame |
| Photo of dog |
dog.html |
| Changing a photo |
Changing the web page inside of a frame |
|
More About Frames
Frames are independent from each other.
Like a wall of picture frames, where each frame holds its own photo, the
frames of a web page are independent from the other frames. Each frame can have
its own scrollbar (if needed). When you click a normal link on a page that is in
a frame, the new page will load inside that frame.
Frames can be named and thus control each other.
Here is the major difference between our wall o' frames and a web page that
uses frames. A frame can be "named," which means that another frame on the page
can call it by name and tell it to load different pages. One example of this is
if one frame holds site navigation, and another frame is the "content area." In
the pictures below, clicking a navigation button in the left frame results in a
different page loaded into the right frame:
Frames can stretch to fit the window or have a fixed size.
Frames can be sized as percentages (50% of the browser window, for example),
or frames can have fixed sizes, or you can have a combination (for example,
where the right and left frames are fixed, but the middle one resizes).
Inline Frames (iframes) are a whole different animal.
Inline frames are discussed here.
Frames should be used carefully.
There are several problems with using frames for your entire site:
- Search engines don't crawl framed sites effectively
- People can't bookmark a specific page of your site
- Framed pages are hard to print
- Web sites with frames can be hard to navigate
But in some cases, using frames can be the best solution:
- Frames can be useful for dictionary/glossary/table-of-contents type
pages -- a smaller, thin column with the index, with all content loading on
the right.
- Frames are useful when you want to load in a whole different web site
while keeping a different area consistent. For example, we load our "see in
action" web sites into a framed page while maintaining the product name,
price, and links to other product information:
Behind the Scenes
A typical HTML page's code looks something like this:
 |
<html>
<head>
<title>A basic HTML page</title>
</head>
<body>
<p>Hello!</p>
</body>
</html>
Click to see example. |
In contrast, a basic frames page (with a left and right column) might look
like this:
 |
<html>
<head>
<title>A basic frames page</title>
</head>
<frameset cols="150,*">
<frame src="navigation.htm">
<frame src="content.htm">
</frameset>
</html>
Click to see example. |
Instead of using the <body> tags like a normal HTML page, the <frameset> tags tell the browser that
this page is a frames page. The cols="150,*" definition
tells the browser that there are two columns - the left one is 150 pixels wide,
and the right one should resize to the browser (that's what the "*" means).
Then, the two <frame> tags set the
initial pages for each frame -- navigation.htm and content.htm.
Here are a few more examples of code for basic frames pages:
Frames page with three columns - the right column and left column are
fixed, while the middle one resizes.
 |
<html>
<head>
<title>A basic frames page
with three columns</title>
</head>
<frameset cols="150,*,200">
<frame src="navigation.htm">
<frame src="content.htm">
<frame src="rightcolumn.htm">
</frameset>
</html>
Click to see example. |
Frames page with a header row and a content row. Note the use of the rows definition.
 |
<html>
<head>
<title>A basic frames page
with two rows</title>
</head>
<frameset rows="100,*">
<frame src="header.htm">
<frame src="content.htm">
</frameset>
</html>
Click to see example. |
A more complicated frames page with a header row, followed by three
columns. This is accomplished by using TWO framesets, where the
second frameset replaces the second frame for the
bottom row.
 |
<html>
<head>
<title>Using two framesets for
a more complex layout</title>
</head>
<frameset rows="100,*">
<frame src="header.htm">
<frameset cols="150,*,200">
<frame src="navigation.htm">
<frame src="content.htm">
<frame src="rightcolumn.htm">
</frameset>
</frameset>
</html>
Click to see example. |
Was this helpful?
Please rate this article:
Email address: (not required)
(Please provide your email address if you would like PixelMill support to follow-up with you about your comment. Your email address is NOT REQUIRED to submit a comment.)
Comments: (How can we improve this article?)
Clicking "Submit" will not clear this page.
link to this page:
http://www.pixelmill.com/support/al1021/kb101368.htm
permalink to this article:
http://www.pixelmill.com/support/kb101368.htm
Back to top