Frame Elements
Framed layouts are ones in which the browser window is broken into multiple regions called frames. Each frame can contain a distinct XHTML document, enabling you to display several documents at once rather than just one (see Figure 3.18).
){kind=link}
Figure 3.18 Frames enable you to keep key page elements (such as navigation) on the screen all the time, while other parts of the page change.
You need to know only a few elements to set up a framed page. These elements are covered in this section.
NOTE
When implementing framesets in XHTML, make sure you are using the XHTML Frameset Document Type Definition (DTD).
<frameset>
Type:
Container
Function:
Divides the browser window into frames.
Syntax:
<frameset rows="list_of_row_sizes" cols="list_of_column_sizes"> ... </frameset>
Attributes:
<frameset> can take the rows or cols attribute, but not both at the same time. rows specifies how the browser screen should be broken up into multiple rows. rows is set equal to a list of values that describe the size of each row. The number of items in the list determines how many rows there will be. The values in the list determine the size of each row. Sizes can be in pixels, percentages of screen depth, or relative to the amount of available space. cols works the same way, except it will divide the screen into columns.
NOTE
If you try to use rows and cols in the same <frameset> element, a browser typically uses the first attribute it finds and ignores the second.
Example:
<!-- Divide the screen into four rows: 125 pixels, 30% of screen, 88 pixels, and whatever is left over. --> <frameset rows="125,30%,88,*"> ... </frameset>
Related Elements:
<frameset> only breaks up the screen into multiple regions. You must use the <frame> element to populate each frame with content. Also, you can use the <noframes> element to specify alternative content for browsers that cannot process frames.
NOTE
<frameset> elements can be nested to further subdivide a frame. This enables you to create even more complex layouts.
<frame />
Type:
Standalone
Function:
Places content into a frame.
Syntax:
<frame src="url_of_document" name="frame_name" frameborder="0|1" marginwidth="width_in_pixels" marginheight="height_in_pixels" noresize="noresize" scrolling="yes|no|auto" longdesc="url_of_description" />
Attributes:
The <frame /> element can take several attributes:
frameborder—Setting frameborder to 1 turns on the frame's borders; setting it to 0 turns them off. The default value is 1.
longdesc—Set equal to the URL of a resource that contains a more detailed description of the frame's content.
marginheight—Specifies the size (in pixels) of the top margin of the frame.
marginwidth—Specifies the size (in pixels) of the left margin of the frame.
name—Gives the frame a unique name so it can be targeted by other elements (such as <a>, <form>, and <area/>).
noresize—Suppresses the user's ability to drag and drop a frame border in a new location.
scrolling—Controls the presence of scrollbars on the frame. Setting scrolling to yes makes the browser always put scrollbars on the frame, setting it to no suppresses the scrollbars, and setting it to the default of auto enables the browser to decide whether the scrollbars are needed. The default value is yes.
-
src—Tells the browser the URL of the XHTML file to load into the frame.
Example:
<frameset cols="25%,75%"> <!-- make 2 columnar frames --> <!-- Populate frame #1 --> <frame src="leftframe.html" noresize="noresize" name="left" frameborder="0" /> <!-- Populate frame #2 --> <frame src="rightframe.html" noresize="noresize" name="right" frameborder="0" /> ... </frameset>
Related Elements:
The <frame /> element is valid only within a <frameset> element.
<noframes>
Type:
Container
Function:
Provides an alternative layout for browsers that cannot process frames.
Syntax:
<noframes> ... non-frames content goes here ... </noframes>
Attributes:
None.
Example:
<frameset cols="25%,75%"> <!-- make 2 columnar frames --> <!-- Populate frame #1 --> <frame src="leftframe.html" noresize="noresize" name="left" frameborder="0"/> <!-- Populate frame #2 --> <frame src="rightframe.html" noresize="noresize" name="right" frameborder="0"/> <noframes> <p>Your browser cannot process frames. Please visit the <a href="/noframes/index.html">non-frames version</a> of our site.</p> </noframes> </frameset>
Related Elements:
<noframes> is valid only within a <frameset> element, and only one <noframes> element is permissible within the frameset. Your <noframes> content should be specified before any nested <frameset> elements.
<iframe>
Type:
Container
Function:
Places a floating frame on a page. Floating frames are best described as frames that you can place like images.
Syntax:
<iframe src="URL_of_document" name="frame_name" frameborder="0|1" width="frame_width_in_pixels_or_percentage" height="frame_height_in_pixels_or_percentage" marginwidth="margin_width_in_pixels" marginheight="margin_height_in_pixels" scrolling="yes|no|auto" align="top|middle|bottom|left|right" longdesc="URL_of_description"> ... text or image alternative to the floating frame ... </iframe>
Attributes:
The <iframe> element can take the following attributes:
align—Controls how the floating frame is aligned, and can be set to top, middle, bottom, left, or right. top, middle, and bottom alignments make text appear next to the frame, starting at the top, middle, or bottom of the frame. Setting align to left or right floats the frame in the left or right margin and enables text to wrap around it.
frameborder—Setting frameborder to 1 turns on the floating frame's borders; setting it to 0 turns them off.
height—Specifies the height of the floating frame in pixels.
longdesc—Set equal to the URL of a resource that contains more detail about the contents of the floating frame.
marginheight—Specifies the size (in pixels) of the top margin of the floating frame.
marginwidth—Specifies the size (in pixels) of the left margin of the floating frame.
name—Gives the floating frame a unique name so it can be targeted by other elements (such as <a>, <form>, and <area>).
scrolling—Controls the presence of scrollbars on the floating frame. Setting scrolling to yes makes the browser always put scrollbars on the floating frame, setting it to no suppresses the scrollbars, and setting it to the default of auto enables the browser to decide whether the scrollbars are needed.
src—Tells the browser the URL of the XHTML file to load into the floating frame.
width—Specifies the width of the floating frame in pixels.
Example:
<iframe src="float_content.html" width="50%" height="50%" align="right" scrolling="no" name="floater" frameborder="1"> <p>Your browser does not support floating frames. :(</p> </iframe>