Using Frames

Web designers use frames to control what is displayed in various parts of a browser window. For instance, you might want to display a menu file at the top, bottom, or one side of a browser window, while displaying other content in the rest of the window. The menu would be a constant feature of your Web site – a reader could click on the menu to view various files. This would reduce the number of mouse clicks (and file loads) needed to view various parts of your site.

Frames have a poor reputation among some Web designers for three reasons:

Frames can make a site difficult to search
Frames can make pages difficult to add to a Bookmarks or Favorites list
Web users sometimes have problems printing framed pages
Some sites that use frames are designed poorly

Despite these problems, research done for the Center for Research on Writing and Communication Technologies suggests that well designed frames can actually enhance the usability of a Web site. The issue, it turns out, is not the use of frames themselves, but rather lack of thought (or, at any rate, poor decisions) about how best to use frames on a site. In addition, it appears likely that problems associated with searching, printing, and adding pages to a Bookmarks or Favorites list will be addressed in newer browsers.

In this guide, I'll lay out some sample framed pages and identify attributes that can be used to control the appearance of frames. To understand how to design Web sites using frames, you need to know about the frameset, frame, iframe, and noframes tags. I will also discuss the importance of – and illustrate procedures for – targeting your links in a framed page.

Note: Although relatively few users seem to be using early versions of browsers anymore, you should know that frames are supported by versions 2.x and above of Netscape Navigator and versions 3.x and above of Microsoft Internet Explorer. Internal frames are supported only by Internet Explorer 3.x and above and Netscape Navigator 6.x and above.

A Simple Frameset

<HTML>

<HEAD>

   <TITLE>A Simple Frameset</TITLE>

</HEAD>

<frameset  cols="110,*">
	
   <frame name="menu" src="menu.cfm" marginwidth="10"   
   marginheight="10" scrolling="auto" frameborder="yes">

   <frame name="main" src="main.cfm" marginwidth="10"
   marginheight="10" scrolling="auto" frameborder="no">

</frameset> 

</HTML>

Note that this frame layout divides the screen into two columns. The first frame (column) is 110 pixels wide, while the second occupies the rest of the screen. The first frame is named "menu" and displays the file "menu.cfm." The second frame is named "main" and displays the file "main.cfm". Additional parameters for the frames specify margin width and height, whether the frame displays a scroll bar, and whether it has a border.

A More Complicated Frameset

<HTML>

<HEAD>

   <TITLE>A More Complicated Frameset</TITLE>

</HEAD>

<frameset rows="50%,*" cols="50%,*">

   <frame name="welcome" src="howdy.cfm" marginwidth="10
   " marginheight="10" scrolling="auto" frameborder="yes">

   <frame name="credits" src="openingcredits.cfm"
   marginwidth="10" marginheight="10" scrolling="auto"
   frameborder="yes">
   
   <frame name="notes" src="firstnote.cfm" marginwidth="10"
   marginheight="10" scrolling="auto" frameborder="yes">

   <frame name="copyright" src="copyright.cfm" marginwidth="10"
   marginheight="10" scrolling="auto" frameborder="yes">

</frameset> 

</HTML>

This frame divides the screen into four equal regions, much like a checkerboard. Each frame has a name and an initial file identified, as well as specific attributes concerning margins, borders, and scrollbars.

Embedded Framesets and the NoFrames Tag

<HTML>

<HEAD>

   <TITLE>Embedded Framesets with the NoFrames Tag</TITLE>

</HEAD>

<frameset rows="*,38" bordercolor="#003399">

   <frameset  cols="50%,*">
   
      <frame name="list" src="list1.cfm" scrolling="auto"
	  frameborder="1">

      <frame name="pop" src="blank.cfm" scrolling="auto"
	  frameborder="1">

   </frameset>
   
   <frame name="menu" src="menu.cfm" scrolling="auto"
   frameborder="1"  marginheight="3" marginwidth="0">

</frameset>

<noframes> 

   <base target="main">

   <BODY BGCOLOR="#FFFFFF" TEXT="#000000" LINK="#3366FF"
   VLINK="#003399" ALINK="#0000FF">
   
   <FONT FACE="Times New Roman, Times, Roman" SIZE="+3" COLOR="#336600">

   <B>The Writing Center at Colorado State University</b></font>
   
   <p>The Writing Center offers support to students and teachers of writing. 
   We provide links to a range of online writing resources, interactive tutorials, 
   annotated example texts, and instructional materials addressing writing, writing 
   Instruction, composition, composition instruction, writing across the curriculum 
   – WAC, communication across the curriculum – CAC, online tutoring, speech 
   communication, technical communication, computers and writing, and computers and 
   composition. We also provide links to numerous online writing courses, speaking 
   courses, and courses across the curriculum.</p>

   <B>Important Note: </B>Most of the subsections on this site use frames. 
   If your browser does not support frames, please consider upgrading to a more recent 
   version of Netscape Navigator, Microsoft Internet Explorer, Opera, or another 
   frames-capable browser.
   
   </BODY>

</noframes>

</HTML>

This frameset lays out some of the pages on Colorado State University's Writing Center Web site. The first frameset divides the page into two rows and specifies the bordercolor for the frames. The second frameset divides the first row into two columns. The noframes tag allows us to display the page within browsers that do not support frames.

An Internal Frame

An internal frame – also referred to as a floating frame – appears within a particular page. It is supported in the W3C 4.0 specification and is supported by Internet Explorer 3.x and higher, and by Netscape Navigator 6.x and higher.

<HTML>

<HEAD>

   <TITLE>Using an Internal Frame</TITLE>

</HEAD>

<BODY BGCOLOR="Yellow" TEXT="#000000" LINK="#3366FF"
   VLINK="#003399" ALINK="#0000FF">
   
   <h1>Using an Internal Frame</h1>

   <p><IFRAME SRC="example.cfm" NAME="my_iframe" Height="100" WIDTH="300" 
   FRAMEBORDER="1">I</IFRAME ALIGN="RIGHT">This page is designed to 
   illustrate how to use an internal frame. As you can see, it is located on the 
   right side of the page, using specific pixel widths and height.</p>
   
</BODY>

</HTML>

The internal frame is located at the same height as the paragraph tag in which it is placed, aligned right on the screen. The height and width of the internal frame are specified in the IFRAME tag. An internal frame can have scrollbars and can be made nonresizeable. You will find the specific attributes for the IFRAME tag below.

The FRAMESET Tag

The FRAMESET tag is the main tag for a frame. It is placed after the HEAD and before the BODY tags in an HTML document. Each frameset can contain the code for multiple frames. It can also contain the code for additional framesets. (Just as you can nest tables within other tables, you can nest framesets.)

The attributes for the frameset tag allow you to define the rows, columns, and border characteristics of a frameset. Examples of these attributes are found below:

Attribute	Definition and Values
ROWS	The rows in a frameset. The values can be in pixels, percentages, or relative scaling values, e.g., rows="110," or rows="20%,50%," or rows=",2" (The latter would be equivalent to"33%,67%".)
COLS	The columns in a frameset. As with rows, the values can be in pixels, percentages, or relative scalingvalues.
BORDER	The width in pixels of the borders in a frameset, e.g., border="3". This attribute is supported by Netscape 2.x and higher and by Internet Explorer 4.x and higher.
BORDERCOLOR	The color of borders in a frameset, e.g., border="black" or border="#CCFFCC". This value can also be set for individual frames within a frameset. This attribute is supported by Netscape 3.x and higher and by Internet Explorer 4.x and higher.
FRAMEBORDER	Specifies whether a border appears in a frameset. This attribute is supported by Netscape 3.x and higher and Internet Explorer 4.x and higher. The W3C specifies that 1 and 0 be used for this attribute. Internet Explorer uses these values, while Netscape uses yes and no.
FRAMESPACING	Specifies space, in pixels, between frames. Supported only by Internet Explorer 3.x and higher.

The FRAME Tag

This element defines a single frame in a frameset. The attributes for the frame tag allow you to define the source, name, margin, scrolling, resizing, and border characteristics of a frame. Examples of these attributes are found below:

Attribute	Definition and Values
SRC	The file displayed in a frame when the page is opened, e.g., SRC="menu.cfm"
NAME	The name of a frame, e.g., NAME="menu" or NAME="main". The name attribute is used so that an anchor can "target" a link (see discussion below). Names assigned to frames must begin with an alphanumeric character.
MARGINWIDTH	The width of the margins, in pixels, from the right and left side of the frame, e.g., MARGINWIDTH="5". If you do not set this value, the browser will assign one; the W3C specification for the margin width is 1 pixel.
MARGINHEIGHT	The height of the margins, in pixels, from the top and bottom of the frame, e.g., MARGINHEIGHT="7". If you do not set this value, the browser will assign one; the W3C specification for the margin height is 1 pixel.
SCROLLING	Determines whether the browser will display the scrollbar in a frame, e.g., SCROLLING="yes", SCROLLING="no", SCROLLING="auto". The latter value will display the scrollbar only if all the contents of a frame cannot be displayed.
NORESIZE	If this attribute is included in a frame tag, the reader cannot change the size of a frame, e.g., NORESIZE. If it is not included, the reader can change the size of a frame by clicking and dragging the frame border.
BORDERCOLOR	The color of borders in a frame, e.g., border="black" or border="#CCFFCC". This attribute works if the borders are turned on using the FRAMEBORDER attribute (in either the FRAMESET tag or in the FRAME tag). This attribute is supported by Netscape 3.x and higher and Internet Explorer 4.x and higher.
FRAMEBORDER	Specifies whether a border appears on a frame, e.g., frameborder="yes", frameborder="no", frameborder="0". This attribute is supported by Netscape 3.x and higher and Internet Explorer 4.x and higher. The W3C specifies that 1 and 0 be used for this attribute. Internet Explorer uses these values, while Netscape uses yes and no.
LONGDESC	Specifies the location of a long description of the frame, as a URL. The description can be used to describe the contents of the frame in nonvisual browsers.

The IFRAME Tag

The IFRAME tag specifies an internal – or floating – frame. It is supported in the W3C HTML 4.0 specification, but is implemented only in Internet Explorer 3.x and higher and in Netscape Navigator 6.x and higher.

The attributes for the IFRAME tag allow you to define its source, name, height, width, scrollbars, resizing, and border characteristics. These attributes are described below:

Attribute	Definition and Values
SRC	The file displayed in the internal frame when the page is opened, e.g., SRC="example.cfm"
NAME	The name of the internal frame, e.g., NAME="example" or NAME="info". The name attribute is used so that an anchor can "target" a link (see discussion below).
WIDTH	The width of the internal frame, in pixels or percentages, e.g., rows="110," or rows="20%,50%,".
HEIGHT	The height of the internal frame. As with width, the values can be in pixels or percentages.
ALIGN	Specifies the alignment of a frame on the page. Values include left, right, top, bottom, and middle.
FRAMEBORDER	Specifies whether a border appears on an internal frame. The W3C specifies that 1 and 0 be used for this attribute. 1 displays the border; this is the default.
MARGINWIDTH	The width of the margins, in pixels, from the right and left side of the internal frame, e.g., MARGINWIDTH="5". If you do not set this value, the browser will assign one; the W3C specification for the margin width is 1 pixel.
MARGINHEIGHT	The height of the margins, in pixels, from the top and bottom of the internal frame, e.g., MARGINHEIGHT="7". If you do not set this value, the browser will assign one; the W3C specification for the margin height is 1 pixel.
SCROLLING	Determines whether the browser will display the scrollbar in an internal frame, e.g., SCROLLING="yes", SCROLLING="no", SCROLLING="auto". The latter value will display the scrollbar only if all the contents of a frame cannot be displayed.
NORESIZE	If this attribute is included in an IFRAME tag, the reader cannot change the size of a frame, e.g., NORESIZE. If it is not included, the reader can change the size of an internal frame by clicking and dragging the border.
HSPACE	Sets the amount of white space, in pixels, to the left and right of the internal frame.
VSPACE	Sets the amount of white space, in pixels, above and below the internal frame.

The NOFRAMES Tag

The NOFRAMES tag allows you to display content in browsers that do not support frames. The tag itself is not actually recognized by browsers that don't support frames. However, the default for tags that are not recognized by a browser is to ignore the tag. It turns out, then, that a browser that doesn't recognize frames will ignore all your frameset and frame tags, ignore the NOFRAMES tag, and instead display the HTML tags that it does recognize. In contrast, browsers that do support frames will display the frames and ignore the information within the <NOFRAMES> and </NOFRAMES> tags. You can find an example of the use of the NOFRAMES tag earlier in this document, in Embedded Framesets and the NoFrames Tag.

It's usually a good idea to display a warning using the NOFRAMES tag on the index page of a site that uses frames. You can let your readers know that you've used frames, rather than simply leaving them with a blank page.

Targeting Links

To support navigation in a framed site, you need to "target" your links. This is accomplished using the TARGET attribute in the Anchor tag. For instance, if you have set up a frameset with a left column named "menu" and a right column named "main", you could target the links in the file menu.cfm (which you could display in the "menu" frame) so that clicking on them would cause the files to display in the "main" frame. A link using the target attribute might appear as:

Failing to Use the TARGET Attribute: Failing to use the TARGET attribute will cause a file to open in the current frame. In the case of a site using a menu frame, failing to target your links would certainly defeat your purposes.

Failing to Name a Target Properly: Failing to use the right name for a target will cause the file to open in a new browser window. For instance, if you typed <A HREF="background.cfm" TARGET="mane">, the file would open in a new browser window called "mane."

Using Alphanumeric Characters: As I noted above, frames must be named so that the first character is an alphanumeric character. The designers of HTML have specified several default names that you can use when targeting links. These include:

_blank	Targeting a file to open in _blank will load the file into a new, unnamed window
_self	Targeting a file to open in _self will cause the file to open in the current frame, replacing the current document.
_parent	Targeting a file to open in _parent will cause the file to open in the parent window, if one has been defined. If a parent window hasn't been defined, this tag acts in the same way as _self.
_top	Targeting a file to open in _top will cause the file to open at the top level of the current browser window. You can use _top to make sure that a file opens in its own window, rather than in a particular frame.

Links Page: Learn more about designing Web pages -- with or without frames -- on the Web Design links page.

Writing Guides

Writing for the Web