Web based School

Creating Framesets

Frames are separate "panes" within the browser window inside of which different pages can be displayed at the same time. A common setup is to divide the window into two frames. The left frame contains a menu of links and the right frame displays pages accessed through those links.

A set of frames normally work like the generalized example shown below. Click the links in the left frame to view the linked documents in the right frame.

An advantage of using frames in this manner is that it is not necessary to code the menu on every content page. It is always viewable and accessible in its separate left frame and does not have to be downloaded with every page. Plus, changing the information content of the screen is only a matter of changing the document appearing in the right frame. By creating these frames, you can provide a consistent look to your pages, an ever-present menu in the left frame, and a common format for the content pages in the right frame.

The Frameset Document

A frameset document describes the overall structure of a window subdivided into frames. This is an XHTML document in which <frameset> tags replace the <body> section. A <frameset> tag describes the number, locations, and sizes of component frames. Enclosed within a frameset tag are two or more <frame> tags which identify and characterize the frames and specify the original documents that populate the frames.

The <frameset> Tag

The <frameset> container tag divides the browser window into separate frames. The general format for the <frameset> tag is shown below.

<frameset ...>
  cols="n1[%],n2[%]"
  rows="n1[%],n2[%]"
  frameborder="1|0"
  bordercolor="color"
  framespacing="n"
</frameset>

The cols and rows attributes specify the layout of frames within the browser window. cols is used to divide the window vertically into two or more frames; rows is used to divide the window horizontally into two or more frames. A <frameset> tag can specify either cols or rows, but not both for the same frameset.

The cols attribute specifies the number and widths of the frames as percentages of the width of the browser window or as a certain number of pixels in width. The rows attribute specifies the number and height of the frames as percentages of the height of the browser window or as a certain number of pixels in height. Normally, it is best to use percentages to express frame sizes so they remain proportional when the user resizes the browser window.

The following frameset document establishes a window with two vertical frames, the first of which is 20% and the second of which is 80% of the width of the browser window. The resulting frameset is displayed below as two frames divided by a border.

<html>
<head>
<title>Frameset Document</title>
</head>

<frameset cols="20%,80%">
...
</frameset>

</html>

20%

80%

When using the rows attribute the same rules apply except the frameset is created as horizontal rows with frames separated by borders.

20%

80%

You can use an asterisk (*) rather than a measurement to permit the browser to determine frame sizes. This notation indicates "any remaining space." For example, the previous frameset could have been coded as:

The browser calculates the second row as occupying the final 80% of the browser window.

Frameset Borders. By default, framesets have borders between the frames. You can include the frameborder="1|0" attribute in the <frameset> tag to show (1) or hide (0) borders.

The width of borders between frames can be set with the framespacing="n" attribute, specifying in pixels the width of borders.

If you have visible borders between your frames, you can assign them a color with the bordercolor="color" attribute. Colors are specified as color names or hexadecimal values.

The <frame> Tag

While the <frameset> tag subdivides the window into frames, those frames are populated with XHTML documents through <frame> tags. There is one <frame> tag for each of the frames specified in the frameset.

The <frame> tag contains attributes to indicate the original contents of the frame along with the frame's appearance and behavior. The <frame> tag is not a container tag, so it is not paired with a closing tag. Its general format is shown below.

<frame ... />
     src="URL"
     name="frame name"
     frameborder="1|n"
     bordercolor="color"
     scrolling="auto|yes|no"
     noresize

     Deprecated:
     marginwidth="n"
     marginheight="n"

Note that the <frame> tag uses the same frameborder and bordercolor attributes as does the <frameset> tag. These attributes are set for the frameset as a whole in the <frameset> tag; they can be overridden for particular frames in the <frame> tag. Two frames that border each other, however, cannot have conflicting attributes.

The src Attribute. A frame can be initially loaded with an HTML document by specifying its URL in the src="url" attribute. Coding this attribute ensures that the frame is not blank when the window is first displayed. The document that is preloaded in the frame can be local to the site, or the URL can point to an external document.

The following code shows a document named Menu.htm initially loaded into the left frame of a frameset, along with a document named Title.htm loaded into the right frame. The documents are in the same directory as the frameset page.

The name Attribute. Even though a frame is preloaded with a document through the src attribute, it can display other pages by targeting the frame in links to those documents. This linking technique is described later. Still, if you intend to load other documents into a frame, it needs to have a name through which it can be referenced in associated hyperlinks. Frames that will only contain the original document specified in the src attribute do not need to be named.

Frame names are assigned with the name attribute. In the following example, the names "Frame1" and "Frame2" are assigned to the two frames of a frameset. Again, we'll see later how to populate these frames with other linked documents.

The noresize Attribute. When frame borders are visible they are also movable. When the mouse cursor is moved on top of a border, its icon changes and the user can drag the border to resize the frame. Normally, you will want your frame setup to remain fixed so that your pages appear as intended. So, to prevent users from changing frame sizes, code the noresize attribute in the <frame> tag as shown below.

Setting noresize for the left frame has the effect of preventing resizing of the right frame since they share the same border.

The scrolling Attribute. The scrolling="auto|yes|no" attribute creates a frame with or without scroll bars. By default, frames permit scroll bars to appear if the document is too large to fit within the frame. The default value is scrolling="auto". You can change this setting to scrolling="yes" to always display horizontal and vertical scroll bars even if the document fits within the frame. You can also set scrolling="no" to suppress the display of scroll bars even if the document is too large to fit within the frame. As a general rule you should always permit document scrolling unless you have an overriding reason for not doing so. One case of scroll suppression may be a top frame containing a banner without additional content to scroll to.

The marginwidth Attribute. As is the case with full-size browser windows, information is displayed across the entire frame, running from the left border to the right border with only a tiny amount of white space separating the text from the borders. You can help improve document readability by introducing margins on either side of the text through use of the marginwidth="n" attribute. The attribute value is given as the number of pixels of space to leave between the document and the left and right borders of the frame.

The marginheight Attribute. In the same manner, margins can be introduced at the top and bottom of a document with the marginheight="n" attribute. The pixel value indicates the amount of space to leave between the document and the top and bottom of the frame.

An alternative to using marginwidth and marginheight is to use style sheets to set margins on the documents that occupy the frame.

Nested Frames

The above examples describe a single frameset containing two columns or two rows of frames. You can, by nesting framesets within framesets, define more complex arrangements of frames. A typical example is shown below. The top frame is available for displaying a banner logo identifying the site, the left frame for a menu of links, and the right frame for the documents linked from the menu frame.

Header
Menu	Content

This arrangement of frames is produced by coding one frameset inside another frameset. The "outer" frameset is composed of two rows. The top row contains the banner frame and the bottom row contains the "inner" frameset of two columnar frames, the left frame displaying a menu and the right frame containing a document. The coding to produce this frameset is shown below.

Of course, you can produce more complex arrangements of frames, but you need to be cautious about doing so. You should create only as many frames as you need to improve the functionality of your site, not to overload visitors with information or complicate navigation between pages.