Web Design Homepage
Frames

Frames are used to divide your webpage into sections. Although similar to tables, frames divide one webpage into two or more logically arranged webpages, all displayed in the same browser window. Like the panes of a window, each pane or frame contains its own webpage. Through the use of frames, you can display information from two HTML documents on the same page, and you can also interrelate that information through links. For instance, you could create an HTML frame document (called a frameset) which contains a menu in one frame and a page with information in the other frame. With frames, when you click on a link in the menu, the other frame can be automatically changed to a new document, while the menu remains the same.

Creating a Frameset

A frameset can be thought of as a window with individual panes. Each pane can display a different HTML document. In designing your frameset, you decide how many panes (frames) your window has and what is displayed in each pane. You can divide your webpage into rows or columns or both. A frameset HTML document is similar to a normal webpage, except you replace the <BODY> section of the HTML with the <FRAMESET> section. A frameset is still saved as an HTML document (.htm or .html). A frameset contains no <BODY> tags. To divide the frameset into rows, add the ROWS="a,b,etc." attribute to the <FRAMESET> tag, where a is the height of the first row frame, b is the height of the second row frame, and so on. The height is specified as either a percentage, a pixel value, or a * which is a variable. You can add as many ROWS as the browser window can physically contain by adding additional height values. To designate which webpage will be displayed in each row, enter a <FRAME> tag for each row you assigned in the frameset tag. Its attribute is SRC="page.html", where the HTML document is the one you wish to display in that row. You should also specify a name to each frame with the NAME attribute. The name should describe the frames purpose and will be used later for linking between frames

<HTML>
<HEAD>
</HEAD>
  <FRAMESET ROWS="40%,*">
    <FRAME NAME="a" SRC="a.html">
    <FRAME NAME="b" SRC="b.html">
  </FRAMESET>
</HTML>

would display a page with two row frames. The top frame would cover the top 40% of the screen and display the file a.html. The other frame, named 'b' would cover the remaining 60% of the screen and would display the b.html file. The asterisk is used the same as in tables, it specifies all remaining space. Frames really don't contain anything except for a reference to the page to display and where and how to display them. To change the contents of any individual frame, you would edit that frames HTML (i.e., a.html) document, not the frameset document. To see what the above page would look like,

HINT: In framesets, 100% of the window MUST be assigned to frames. For instance,
<FRAMESET ROWS="10%,10%,70%"> would be incorrect because the specified values only equal 90% of the browser window. To solve this, use the asterisk (*) for at least one of the values. The asterisk will become equal to the remaining area left after either percentage or pixel values have been set. IT IS BEST TO USE AT LEAST ONE * IN EVERY FRAMESET TAG.

To divide the frameset into columns, add the COLS attribute to the <FRAMESET> tag.

<HTML>
<HEAD>
</HEAD>
  <FRAMESET COLS="150,*">
    <FRAME NAME="a" SRC="a.html">
    <FRAME NAME="b" SRC="b.html">
  </FRAMESET>
</HTML>

would display a page divided into two columns, the left column would be 150 pixels wide and display a.html. The other frame will contain b.html and take the remaining window area. To see this frameset page,

You can also combine rows and columns. Like in tables, frames are assigned from left to right, top to bottom.

<FRAMESET ROWS="40%,*" COLS="150,*">
  <FRAME NAME="a" SRC="a.html">
  <FRAME NAME="b" SRC="b.html">
  <FRAME NAME="c" SRC="c.html">
  <FRAME NAME="d" SRC="d.html">
</FRAMESET>

The first <FRAME> tag (a) designates the first columg of row one, which is 40% high. The second tag (c) describes the second column of the first row. C is the first cell of the second row, and d the lower right hand cell. Again, any number of rows and columns can be specified, but each row or column in the <FRAMESET> must also have a <FRAME> tag. To see this page,

Using frames in the above manner only allows the same number of frames in each row and column. To have rows or columns with different numbers of frames, you must nest a <FRAMESET> tag.

Nesting Framesets

The most common use of frames is to have one small frame across the top of the window, displaying a banner, logo, or page title and to have a second row divided into two frame columns. The left, smaller column is used as a menu and the larger frame is used for displaying the content of the site. This can only be achieved by nesting or combining one <FRAMESET> tag within another. It may help to sketch out your frameset first, then write the HTML code.

<FRAMESET ROWS="20%,*">
  <FRAME NAME="banner" SRC="a.html">
    <FRAMESET COLS="150,*">
    <FRAME NAME="menu" SRC="b.html">
    <FRAME NAME="body" SRC="c.html">
    </FRAMESET>
</FRAMESET>

This will display a.html in the first row that spans the entire window width and 20% of its height. Instead of defining a second row, another frameset is specified which defines two columns - one called 'menu' which contains b.html and one called 'body' containing c.html. To see this page,

Even though I defined the rows first, you could define the columns first. Sketching the frameset, then deciding which rows or columns need further dividing (by a nested <FRAMESET> tag) will help in the coding. You can nest as many <FRAMESET> tags as can be displayed in the browser window. The purpose of frames is to organize a site - too many frames will defeat that purpose.
HINT: DO NOT REFERENCE THE HTML DOCUMENT THAT CONTAINS THE FRAMESET AS ONE OF IT'S OWN DEFINED FRAMES. DOING SO WILL CAUSE YOUR COMPUTER TO ATTEMPT TO DIVIDE THAT FRAME TO DISPLAY IT'S CONTENT, WHICH CONTAINS A FRAMESET WHICH CONTAINS A FRAMESET WHICH CONTAINS A FRAMESET, AND SO ON FOREVER, DIVIDING THE FRAME INTO SMALLER AND SMALLER SLICES EACH TIME. THIS WILL ALMOST CERTAINLY CAUSE YOUR BROWSER TO CRASH.

In addition to nesting one frameset tag within another, you can also have one or more of the files specified in your frames also contain a frameset and get virtually the same results. Instead of inserting a frameset within a frameset directly, you insert a document that contains a frameset within the frameset. This is called indirect nesting. Here's how it works. 

<FRAMESET ROWS="20%,*">
  <FRAME NAME="banner" SRC="a.html">
  <FRAME NAME="main" SRC="bc.html">
</FRAMESET>

The frameset code from above is called the 'parent' frameset. It contains a file (bc.html) which contains another frameset with the following code. 

<FRAMESET COLS="150,*">
  <FRAME NAME="menu" SRC="b.html">
  <FRAME NAME="body" SRC="c.html">
</FRAMESET>

This frameset (bc.html) is called a 'child' frameset of the 'parent' frameset. Parents come first, right? See how the main frameset contains a file in the second row that also contains a frameset containing two columns, b and c. If you opened the first frameset in your browser, it would look exactly like the previous example. When you view the indirectly nested frameset above, you are actually reading 5 html documents - the one that contains the original frameset, a.html, bc.html, b.html, and c.html. Although that seems like a lot of work and downloading, indirectly nesting framesets can really aid in editing and keeps your HTML code looking great, however, your browser has to load one additional page for each indirectly nested frameset.

Formatting Frames

Below are attributes that can be added to the topmost <FRAMESET> tag to change the way all of the frames are displayed.
<FRAMESET
ATTRIBUTE
VALUES
>
BORDER= pixel value of width of border. Default is 5 pixels. NETSCAPE AND IE5 ONLY!!
FRAMEBORDER=

"yes" or "1" - display borders.
"no" or "0" - don't display borders.
Default is yes. HINT: To display no borders in both browsers, set BORDER=0 and FRAMEBORDER=0.

BORDERCOLOR= "color" or "#rrggbb" - changes the color of all of the frame's borders.
FRAMESPACING= pixel value of width of space to display between frame borders. IE ONLY!!!

 

Below are attributes that can be added to individual <FRAME> tags to change the way that frame is displayed. FRAME attributes will always override FRAMESET attributes.

 
<FRAME
ATTRIBUTE
VALUES
>
MARGINWIDTH= pixel value of space to display between left and right edges of the frame and the frame's contents. Left and right buffer. Default is 8.
MARGINHEIGHT= pixel value of space to display between the top and bottom edges of the frame and the frame's contents. Default is 8.
SCROLLING=

"yes" - scroll bars are always displayed
"no" - scroll bars are never displayed
"auto" - scroll bars appear if necessary. (auto is the default)
BORDERCOLOR= "color" or "#rrggbb" - color of that frame's borders. Overrides BORDERCOLOR in <FRAMESET>.
FRAMEBORDER= "yes" or "1" - display borders for that frame.
"no" or "0" - don't no display borders for that frame.
Overrides FRAMEBORDER in the <FRAMESET> tag. Default is yes. HINT: To display no borders in both browsers, set BORDER=0 and FRAMEBORDER=0. Remember that frame borders are shared between frames, so removing borders from one frame can have unexpected results.
NORESIZE HAS NO VALUES. Keeps visitors from resizing the frame by dragging the frame border.
FRAMESPACING= pixel value of width of space to display between that frame's borders and those of adjacent frames. IE ONLY!!!

Some very old browsers don't recognize frames or some visitors choose not to view them. When they view a frameset page, they will see nothing at all. You can create alternate text that is viewable in browsers not able to view frames. Include any text you want them to view between a <NOFRAMES> and a </NOFRAMES> tag. These tags should be located after the final </FRAMESET> tag and before the final </HTML> tag. You can also include <BODY> and any text formatting tags in the NOFRAMES section. Usually, you would just politely let them know that they can't view your page because they are using a totally ancient browser or have turned frame viewing off in their browser preferences.

Targeting Frames

When a frameset is first displayed, the contents of its frames is specified in the SRC attributes. However, once the frameset is displayed, individual frames can be changed to display different HTML documents by clicking on links. You can even click on links in one frame to open a page in a different frame. To do this, you must specify a target in the link's <A> tag. A target tells the browser to display this link in frame y, or whatever frame name you specify.

Remember how we added the NAME= attribute to the FRAME tag earlier. To target a particular frame, you just call it by name. If you had a frame named 'menu' that contains links that you want to display in a frame named 'body', write the link in the 'menu' HTML document like this:

<A HREF="page.html" TARGET="body">

This would open page.html in the frame named 'body' without changing the 'menu' frame, or any other frames that are in the frameset. If you don't specify a target, or the specified target does not exist, then the link will display in the frame that contains that link, without affecting any other frames. 

<FRAMESET ROWS="20%,*">
  <FRAME NAME="banner" SRC="a.html">
    <FRAMESET COLS="150,*">
    <FRAME NAME="menu" SRC="menu.html">
    <FRAME NAME="body" SRC="c.html">
    </FRAMESET>
</FRAMESET>
The menu.html document contains this line <A HREF="http://smithplanet.com/batc/" TARGET="body">
 and then click on the link to see how the 'body' frame is updated with the page specified in the link. As long as you specify names for your frames, you can change any frame from any other frame by listing its target in the link.

There are a few target names that are reserved for more general targeting. They are -
_blank - This opens the link in a new browser window. You may remember this from our links discussion.
_self - This opens the link in the frame containing the link. This is the default.
_top - This target opens the link in the current browser window, replacing all of the frames with the new page.
_parent - This target will open the link in the parent frameset of the current frameset when using nested framesets. This will be the same as _top unless the link is in a child frameset, then the link will replace the parent frameset and leave the child frameset alone. Doesn't make sense? Just remember that the parent frameset is the one that contains the nested child frameset and it is the one that is being replaced. Because the parent frameset can contain more than one frame (excluding the child), this is great for updating two frames at the same time.

You can also set a default target for all links with the <BASE TARGET="name"> tag. The "name" value can be a specified name of a frame, or one of the four listed above. This tag is inserted between the <HEAD> and the </HEAD> tags of the first frameset HTML document. This will make all links within a page open in the same frame (or window when _top or _blank are used). If you know that you want all or most of the links on a page to open in the same frame, you can set a default base target to eliminate having to include a target in every anchor tag. Any target specified in an anchor tag will override the base target.

Some VERY important rules regarding frames

  1. Never nest a frameset inside a frame that is in that same frameset. This will make your browser and visitors very unhappy!
  2. If you are linking to a page that is not part of your site from a frameset, set the target to _blank or _top to put the page in an entire browser window. This way your visitors are not stuck viewing that page from within a frame on your site. This is quite annoying. When people click away from your site, let them go without taking a part of your site with them.
  3. Check all of your links and make sure that the targets, if used, are correct. Few things are worse than clicking on a link to return to a homepage and having two menus or two banners displayed because a frameset was opened within another frameset.
  4. Even if a page on your site is not part of a frameset, it may be viewed within a frameset, so still use correct targeting. If it is not in a frameset, then the link will work normally. See number three.
  5. Even though a frameset can display many documents, the browser gets the page title from the frameset document. If you want a title, add a <TITLE> tag to the <HEAD> section of the frameset.
  6. Although frames are cool, use tables whenever possible.
  7. Remember that frames have been deemed by many to be the whore of the Internet and a tool of the devil. They have this reputation because of poor programming. Don't add to this reputation!

Return to the BATC Homepage