Section 11.3. Frame Layout


11.3. Frame Layout

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

11.3.1. The <frameset> Tag

Use the <frameset> tag to define a collection of frames and other framesets and to control their spacing and borders. You may also nest framesets, resulting in a richer set of layout capabilities.

<frameset>

Function

Defines a collection of frames

Attributes

border , bordercolor , class , cols , frameborder , framespacing , id , onLoad , onUnload , style , title

End tag

</frameset> ; never omitted

Contains

frameset_content

Used in

html_content



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

11.3.1.1. The rows and cols attributes

The <frameset> tag has one required attribute: either cols or rows your choice. They define the size and number of columns or rows of either frames or nested framesets for the document window. Both attributes accept a quote- enclosed , comma-separated list of values that specifies 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 displays in the document window.

As with tables, the browser matches the size you give a frameset as closely as possible. The browser does 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, browsers allocate space to a particular frame relative to all other frames in the row and column and resolutely fill the entire document window. (Did you notice that the main frame window does not have scroll bars?)

For example:

 <frameset rows="150,300,150"> 

creates three rows of frames, each extending across the entire document window. The first and last frames are set to 150 pixels tall, and the second is set 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 percentages of the window dimensions are more sensible . For instance, the following example is effectively identical to the preceding one:

 <frameset rows="25%,50%,25%"> 

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 <frameset> 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:

 <frameset cols="100,*"> 

it makes a fixed-size column 100 pixels wide and then creates another frame column that occupies all of the remaining space in the browser window.

Here's a fancier layout example:

 <frameset cols="10,*,10"> 

This one creates two very thin columns down the edges of the window 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:

 <frameset rows="*,100,*"> 

creates a 100-pixel-tall row in the middle of the browser display and equal-size 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:

 <frameset cols="10%,3*,*,*"> 

creates four columns: the first column occupies 10 percent of the overall width of the display. The browser then gives the second frame three-fifths of the remaining space, and the third and the fourth are each given one-fifth of the remaining space.

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

Be aware, too, that unless you explicitly tell it not to, the browser allows users to resize the individual frame document's columns and rows manually and, hence, change the relative proportions each frame occupies in the frame's display. To prevent this, use the noresize attribute for the <frame> tag, which we describe later. [<frame>, 11.4.1]

11.3.1.2. The border, frameborder, framespacing, and bordercolor attributes

The popular browsers provide attribute extensions that you may use to generally define and change the borders surrounding the frames in a frameset. The HTML 4 and XHTML standards prefer instead that you include these border- related display features via Cascading Style Sheet (CSS) styles.

By default, every frame in a frameset is surrounded by a thin 3D border (see Figure 11-1). Make these borders uniformly thicker or get rid of them altogether with the border attribute for the <frameset> tag. Set the value of border to to turn off borders (see Figure 11-2). The value 1 is the same as the default. To uniformly increase the width of all the frame borders in the frameset, set the border attribute value to an integer greater than 1.

Figure 11-2. The border and frameborder attributes let you remove the borders between frames

Use the frameborder attribute with the value 1 or yes to enable, or with a value or no to disable borders. Use the framespacing attribute with an integer value 1 or greater to thicken the border between frames. Why two separate attributes to achieve the same effect as the single border ? Historical reasons, mostly. Suffice it to say here that some confusion still exists. All the popular browsers accept border for <frameset> , so please use it rather than the individual alternatives.

All the popular browsers, except Opera for some reason, also let you control the color of the frame borders with the bordercolor attribute (Figure 11-3). Use a color name or hexadecimal triple as its value. For example, although you can't see the color in this black-and-white book, the borders in Figure 11-3 are light green, corresponding to the red, green, and blue (RGB) value of "00CC00." (For clarity, we also increase the size of the border with the border attribute.) You can find a complete list of color names and values in Appendix G.

Figure 11-3. Use the bordercolor and border attributes to control the color and spacing between frames

11.3.1.3. Frames and JavaScript

All the popular browsers support JavaScript-related event handlers that let your frame documents react when they are first loaded and when the frame window gets resized ( onLoad ); when the user unloads them from the browser ( onUnload ); when the window containing the frameset loses focus, such as when the user selects another window ( onBlur ); or when the frameset becomes the active window ( onFocus ). Included as <frameset> attributes, these event handlers take quote-enclosed lists of JavaScript commands and function calls as their values.

For example, you might notify the user when all the contents have been loaded into their respective frames of a lengthy frameset:

 <frameset onLoad="window.alert('Everything is loaded. You may now continue.')"> 

You also may use these four attributes with the <body> tag. We cover JavaScript event handlers in more detail in section 12.3.3.

11.3.1.4. Other <frameset> attributes

Like most of the other standard tags, the <frameset> tag honors four of the standard attributes: class , style , title , and id .

Use the class attribute to associate a predefined style class with this frame and, via style inheritance, its content. Alternatively, use the style attribute to define a style inline with the <frameset> tag. We cover styles more completely in Chapter 8.

The id attribute creates a unique identifier for the frame, and the title attribute creates a title for the frame that might be presented to the user or used by a nonvisual browser. [The id attribute, 4.1.1.4] [The title attribute, 4.1.1.5]

11.3.2. Nesting <frameset> Tags

You can create some elaborate browser displays with a single <frameset> , but the frame layout is unimaginative. Instead, create staggered frames and other, more complex, layouts with multiple <frameset> tags nested within a top-level <frameset> in the frame document.

For example, create a layout of two columns, the first with two rows and the second with three rows (as shown in Figure 11-4), by nesting two <frameset> tags with row specifications within a top-level <frameset> that specifies the columns:

 <frameset cols="50%,*">   <frameset rows="50%,*">     <frame src="frame1.html">     <frame src="frame2.html">   </frameset>   <frameset rows ="33%,33%,*">     <frame src="frame3.html">     <frame src="frame4.html">     <frame src="frame5.html">   </frameset> </frameset> 

Figure 11-4. Staggered frame layouts use nested <frameset> tags



HTML & XHTML(c) The definitive guide
Data Networks: Routing, Security, and Performance Optimization
ISBN: 596527322
EAN: 2147483647
Year: 2004
Pages: 189
Authors: Tony Kenyon

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net