Frames are individual, independently scrolling regions of a web page. This chapter explains how to implement frames.
The content that each frame displays is determined by a distinct URL. Links in a frame can cause a related frame to point to a different URL, and frames can be targeted by other URLs within the same window. Figure 3.1 shows a window that has three frames:
Window composed of three frames
Frames are a flexible way to create web pages. For example, you can use groups of frames to create effects such as the following:
The FRAMESET tag is used in an HTML document whose sole purpose is to define the layout of frames that make up a page. The document with a FRAMESET tag cannot contain a BODY tag. You define a group of frames with the FRAMESET tag. You specify the features of the group of frames by using the following tags nested within the FRAMESET tag:
The user goes to one HTML file (URL) that contains only the FRAMESET tag with frames (other HTML files) referenced in it. The Navigator uses the FRAMESET tag to load the individual frames. Figure 3.2 illustrates this,
The ROWS and COLS attributes specify the height or the width of each frame in a FRAMESET tag. All the frames in a FRAMESET are oriented either as columns or as rows; a single FRAMESET tag cannot contain both the ROWS and the COLS attributes. The values for ROWS and COLS are specified as a comma-separated list, with one entry for each frame in the FRAMESET. If one of the values is missing, the corresponding frame is sized to fit by the browser.
The browser might approximate some values to make the total height of the rows equal to the height of the window or the total width of the columns equal to the width of the window.
You can use any of the following measurements to specify values for ROWS and COLS:
You can use nested frame tags to create a web page with frames arranged both in columns and in rows. The window shown in Figure 3.1 on page 31 consists of a row of two frames followed by a row with a single frame.
You cannot create recursive frames.
MARGINHEIGHT and MARGINWIDTH specify a margin in pixels that separates the frame content. Margins must be one pixel or greater, and they must allow enough space to display the frame content properly. If you do not specify MARGINHEIGHT and MARGINWIDTH, the browser determines the appropriate margin size.
The SCROLLING attribute determines whether scroll bars are available on a frame:
Use the NOFRAMES tag to provide content for browsers that do not support frames. If you don't use the NOFRAMES tag, browsers that lack frame support ignore everything within a FRAMESET tag.
Browsers that support frames ignore all content within the NOFRAMES tag.
The frame set described in this example and shown in Figure 3.3 acts as a table of contents. The table of contents entries in the left frame are always available to the user. When users click a link in the left frame, the right frame navigates to the chosen topic. Each link in the left frame uses "contentFrame" as the value of its TARGET attribute, which forces the right frame to display the target text.
Two frames, one a table of contents 
The following example creates a set of two frames. The HTML text that defines this set f frames is kept in a document file called index.html. When users navigate to the index.html file, it is loaded, and the FRAMESET tag within index.html then loads the individual files into the frames.
<FRAMESET COLS="30%,70%"> <FRAME SRC="toc.html" NAME="listFrame"> <FRAME SRC="topic.html" NAME="contentFrame"> </FRAMESET>
The two frames appear as columns because COLS is specified within the FRAMESET tag. The left frame uses 30% of the available space, and the right frame uses the remaining 70% of the space. By default, the frames in this example have scroll bars and are resizable, because no values are specified for the SCROLLING and NORESIZE attributes.
The following example creates a frame set with two frames that contains the file welcome.html. The lower frame is 100 pixels in height. The upper frame uses the remaining space. When the specification for frame height or width is an asterisk (*), this signifies that the row or column is to occupy any remaining space in the window.
<FRAMESET ROWS = "*, 100"> <FRAME SRC="welcome.html"> <FRAME SRC="copyright.html"> </FRAMESET>
The lower frame remains at a fixed 100 pixel height and is always visible; the upper frame scrolls so users can display all the information within it.
The following example creates a set of three frames as columns. The first frame uses 20% of the total available space. The second frame uses 2/3 of the remaining space, and the third frame uses 1/3 of the remaining space:
<FRAMESET COLS = "20%, 2*, *"> <FRAME SRC="cell_1.html"> <FRAME SRC="cell_2.html"> <FRAME SRC="cell_3.html"> </FRAMESET>
The following example creates a frame set that contains a nested frame set (see Figure 3.4). The first set creates two rows, one containing the bottom frame and the top frame containing the embedded frameset, which is used to split the top frame into two columns (frames).
<FRAMESET ROWS="90%,10%"> <FRAMESET COLS="30%,70%"> <FRAME SRC=category.html NAME="listFrame"> <FRAME SRC=titles.html NAME="contentFrame"> </FRAMESET> <FRAME SRC=navigate.html NAME="navigateFrame"> </FRAMESET>
The code in this example creates two sets of frames similar to those in Figure 3.4.
The following example uses the NOFRAMES tag to include text for browsers that do not support frames. If a browser, such as Netscape Navigator, views this HTML file, it displays the frames. If a browser that doesn't support HTML frames views this HTML file, it displays only the HTML text that appears within the NOFRAMES tag.
<FRAMESET ROWS = "*, 100"> <FRAME SRC="welcome.html"> <FRAME SRC="copyright.html"> <NOFRAMES> <H1>Welcome to our web site!</H1> This page is designed to take advantage of the frame capabilities included in Netscape Navigator 2.0 and later releases.<P> Click here to download the latest version of Navigator:<P> <A HREF="http://home.netscape.com/comprod/mirror/index.html"> <IMG SRC="now20_bu.gif" ALIGN="texttop" ALT="Netscape Now"> </A> </NOFRAMES> </FRAMESET>
