Section 14.2. Basic Frameset Structure | Web Design in a Nutshell: A Desktop Quick Reference (In a Nutshell (OReilly))

14.2. Basic Frameset Structure

A web page that is divided into frames is held together by a top-level frameset document.

Frameset documents are fundamentally different from other HTML documents in that they use the frameset element instead of a body element. The frameset element may not contain any content, but instead defines and names some number of frames (or other framesets), arranged in rows and/or columns. Each frame is indicated with a frame element within the frameset. A frameset document contains a regular header portion (as indicated with the head element).

frameset

 <frameset>...</frameset>

Attributes

Core (id, class, style, title), onload, onunload

cols="list of lengths" (number, percentage, or *)

rows="list of lengths " (number, percentage, or *)

Nonstandard attributes

border="number"

bordercolor="#rrggbb" or "color name"

frameborder="1|0"; "yes|no" (NN 3)

This is an example of a minimal frameset document in XHTML. The resulting frameset, shown in Figure 14-1, has two frames occupying two columns of equal width.

     <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">     <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">     <head>     <title>Simple Framed Document</title>     </head>     <frameset cols="*,*">        <frame src="/books/4/439/1/html/2/left.html" />        <frame src="/books/4/439/1/html/2/right.html" />     </frameset>     <noframes>     <body>     <p>Your browser does not support frames.</p>     <p><a href="left.html">Go to the left</a></p>     <p><a href="right.html">Go to the right</a></p>     </body>     </noframes>     </html>

Figure 14-1. Basic frameset document

The frameset document is displaying two external HTML documents, each in its own frame. The job of the frameset document is simply to build a framework that holds them together. It also includes the noframes element for providing alternative content for browsers that don't support frames.

Take a look for a moment at the frameset source document. It begins with the DOCTYPE declaration that tells the browser to use the XHTML 1.0 Frameset DTD when rendering this file. Next is the html root element and an ordinary header containing the document's title.

A DOCTYPE declaration that points to a Frameset DTD will throw browsers that support DOCTYPE switching into Quirks mode. That means that most browsers will support nonstandard and deprecated elements and attributes. For more information on DOCTYPE switching, see Chapter 9.

This is the point at which a frameset document diverges from regular HTML documents. Instead of a body, it uses the frameset element that specifies that the document should display in two columns (cols) of equal width. The frameset is merely a container for two frame elements. The primary job of the frame element is to provide the URL of the document that should display in that frame. The example above has two frames. One pulls in a document called left.html and the other displays right.html.

It is important to note that left.html and right.html are ordinary (X)HTML documents, each consisting of a head and body element. In other words, documents that are displayed within a frame are not frameset documents and do not need to use the Frameset DTD. They may be authored according to the Strict or Transitional DTDs. It is possible to display another frameset document in a frame; however, there are more efficient methods for nesting frames as discussed in the "Nesting Frames" section later in this chapter.

frame

 <frame />

Attributes

Core (id, class, style, title)

frameborder="1|0" (IE 3+ and W3C Rec.); "yes|no" (NN 3+)

longdesc="URL"

marginwidth="number"

marginheight="number"

name="text"

noresize="noresize"

scrolling="yes|no|auto"

src="URL"

Nonstandard attributes

bordercolor="#rrggbb" or "color name" (Nonstandard)

14.2.1. Alternate Content

The sample frameset document contains one other element in addition to frameset. The noframes element contains content that will be displayed in browsers and devices that don't support frames; therefore, it is an important tool for ensuring the accessibility of framed documents.

noframes

 <noframes> ... </noframes>

Attributes

Core (id, class, style, title), Internationalization, Events

The noframes element should be placed after the frameset element. This is the noframes element provided in the example.

     <noframes>     <body>     <p>Your browser does not support frames.</p>     <p><a href="left.html">Go to the left</a></p>     <p><a href="right.html">Go to the right</a></p>     </body>     </noframes>

The content of the noframes element might be just a few lines or an entire page of information.

Ideally, the content of the noframes element is a complete alternative to the framed interface. It should include the entire content of the page within a body element. If the complete content is too large (in terms of byte size), opt for the list of descriptions and links instead.

At minimum, noframes content should provide a brief description of each frame with a link to access the individual (X)HTML documents. Without links, the frameset document is a dead end to users and search engines.

14.2.2. Establishing Rows and Columns

Rows (horizontal frames) and columns (vertical frames) are established with the frameset element, using the rows and cols attributes, respectively. These attributes divide the frameset in a grid-like manner. Frames are filled from left to right for columns and from top to bottom for rows.

The number of rows or columns in the frameset is determined by the number of size values provided. For example, to create a frameset with three columns, you write cols="25%,50%,25%" (or three other size values). In this case, the user agent creates a column for each of the provided measurements. Rows work in the same manner. Figure 14-2 shows a simple framed document divided into two equal-sized rows (on the left) and columns (right).

Figure 14-2. Simple horizontal and vertical frameset layouts

14.2.2.1. Specifying sizes

Frame size can be listed in one of three ways:

Absolute pixel values

The browser interprets an integer as an absolute pixel value. The frameset element <frameset cols="150,650"> creates two columns, one exactly 150 pixels wide and the other exactly 650 pixels wide. If the browser window is larger than the total specified pixels, it enlarges each frame proportionally to fill the window.

Percentages

Percentages are based on the total width of the frameset. The total should add up to 100%. The frameset element <frameset rows="25%,50%,25%"> creates three rows; the top and bottom frames each always occupy 25% of the height of the frameset, and the middle row makes up 50%, regardless of how the browser window is resized.

Relative values

Relative values, indicated by the asterisk (*) character, are used to divide up the remaining space in the frameset into equal portions (as shown in Figure 14-2). For instance, the frameset <frameset cols="100,*"> creates two columnsthe first is 100 pixels wide, and the second fills whatever portion is left of the window.

You can also specify relative values in multiples of equal portions and combine them with other measurement values. For example, the frameset defined by <frameset cols="25%,2*,*"> divides the window into three columns. The first column always occupies 25% of the window width. The remaining two divide up the remaining space; however, in this case, the middle column will always be two times as big as the third. (You may notice that this results in the same division as the percentages example.)

14.2.2.2. Combining rows and columns

You can specify both rows and columns within a single frameset, creating a grid of frames, as shown in Figure 14-3. When both cols and rows are specified for a frameset, frames are created left to right in each row, in order. Rows are created top to bottom. The order of appearance of frame elements within the frameset determines where their contents display. The order in which documents are displayed is demonstrated in Figure 14-3.

Figure 14-3. Frameset with rows and columns

14.2.3. Nesting Frames

It is possible to nest a frameset within another frameset, which means you can take one row and divide it into several columns (or, conversely, divide a column into several rows), as shown in Figure 14-4. Nesting gives you more page layout flexibility and complexity than simply dividing a frameset into a grid of rows and columns.

Figure 14-4. Document with nested framesets

In Figure 14-4, the top-level frameset specifies two columns. The first column is a frame 100 pixels wide. The second column (which occupies the remainder of the window) is filled with another frameset, this one with three rows.

There is no technical limit on the number of levels that frames can be nested, only practical ones. If you nest frames, be careful to close each successive frameset or the document will not display correctly.