HTML The Definitive Guide (122 page)

Another beneficial use of frame documents is to compare a returned HTML form with its original for verification of the content by the submitting user. By placing the form in one frame and its submitted result in another, you let the user quickly verify that the result corresponds to the data entered in the form. If the results are incorrect, the form is readily available to be filled out again.

12.1 An Overview of Frames

12.3 Frame Layout

Chapter 12

Frames

12.3 Frame Layout

Frame layout is similar to table layout. Using the tag, you can arrange frames into rows and columns while defining their relative or absolute sizes.

12.3.1 The Tag

The tag lets you define a collection of frames and control their spacing and borders. Use the tag to define a collection of frames and other framesets. Framesets also may be nested, allowing for a richer set of layout capabilities.

Function:

Define a collection of frames

Attributes:

BORDER

ONBLUR

BORDERCOLOR

ONFOCUS

CLASS ONLOAD

COLS ONUNLOAD

FRAMEBORDER

ROWS

FRAMESPACING

STYLE

ID TITLE

End tag:

; never omitted

Contains:

frameset_content

Used in:

html_content

Use the tag in lieu of a tag in the frame document. You may not include any other content except valid and content in a frame document. Combining frames with a conventional document containing a section may result in unpredictable browser behavior.

12.3.1.1 The rows and cols attributes

The tag has one required attribute: either cols or rows - your choice. They define the size and number of columns (cols) or rows of either frames or nested framesets for the document window. Both attributes accept a quote-enclosed, comma-separated list of values that specify either the absolute (pixels) or relative (percentage or remaining space) width (for columns) or height (for rows) for the frames. The number of attribute values determines how many rows or columns of frames the browser will display in the document window.

As with tables, the browser will match the size you give a frameset as closely as possible. The browser will not, however, extend the boundaries of the main document window to accommodate framesets that would otherwise exceed those boundaries or fill the window with empty space if the specified frames don't fill the window. Rather, the browsers allocate space to a particular frame relative to all other frames in the row and column and resolutely fills the entire document window. (Did you notice that a frame document window does not have scrollbars?) For example:

creates three rows of frames, each extending across the entire document window. The first and last frames are set to 150 pixels tall, the second to 300 pixels. In reality, unless the browser window is exactly 600 pixels tall, the browser automatically and proportionately stretches or compresses the first and last frames so that each occupies one quarter of the window space. The center row occupies the remaining half of the window space.

Frame row and column size values expressed as a percentage of the window dimensions are more sensible. For instance, the following example is effectively identical to the previous one: Of course, if the percentages don't add up to 100 percent, the browser automatically and proportionally resizes each row to make up the difference.

If you are like us, making things add up is not a strength. Perhaps some of the frame designers suffer the same difficulty, which would explain why they included the very nifty asterisk option for rows and cols values. It tells the browser to size the respective column or row to whatever space is left over after putting adjacent frames into the frameset.

For example, when the browser encounters the following frame tag:

it makes a fixed-sized column 100 pixels wide, and then creates another frame column that occupies all of the remaining space in the frameset.

Here's a fancier layout example:

This one creates two very thin columns down the edges of the frameset and gives the remaining center portion to the middle column.

You may also use the asterisk for more than one row-or column-attribute value. In that case, the corresponding rows or columns equally divide the available space. For example: creates a 100-pixel tall row in the middle of the frameset and equal-sized rows above and below it.

If you precede the asterisk with an integer value, the corresponding row or column gets proportionally more of the available space. For example: creates four columns: the first column occupies 10 percent of the overall width of the frameset. The browser then gives the second 3/5 of the remaining space, and the third and the fourth are each given 1/5 of the remaining space.

Using asterisks (especially with the numeric prefix) makes it easy to divide up the remaining space in a frameset.