| | |
A frame page defines the number and the dimensions of the frames which divide the web browser window. Frame pages themselves do not contain any visible content; all visible content is displayed on HTML pages appearing WITHIN the frames, one HTML page per frame. Because a frame page does not contain any visible content, a frame page does NOT contain a BODY tag; it is the only HTML page which does not. In place of the BODY tag, a frame page uses a FRAMESET tag.
Example:
<html> <head> <title>Example Frame Page</title> </head> <frameset> </frameset> </html>
Frames may be defined in rows, columns, or rows and columns simultaneously using the ROWS and COLS attributes of the FRAMESET tag.
Tag: FRAMESET
Attributes: ROWS, COLS
Value: integers (representing absolute pixel values), percentages (representing a percentage of the available browser window), or proportional units (*, 2*, 3*, etc) (described in more detail later). Each value represents one row or column; multiple values should be separated with commas to indicate multiple rows or columns.
Description: Use to divide the frameset into rows, columns, or rows and columns.
Example:
<frameset rows="50%,50%"> (defines two equal rows (two frames))
Example:
<frameset cols="25%,25%,25%,25%"> (defines four equal columns (four frames))
Example:
<frameset rows="50%,50%" cols="50%,50%"> (defines two rows and two columns of equal proportions (four frames))
Before we can dig into defining rows and columns of framesets more precisely, however, we need to introduce the FRAME tag. Whereas the FRAMESET tag defines the rows and columns of a frame page, including their proportions, the FRAME tag defines which HTML page will appear (by default) in the indicated frame. Each frame in a frame page MUST have a FRAME tag associated with it.
Tag: FRAME
Attribute: SRC
Value: a URL (absolute or relative)
Description: Defines the default HTML page for a given frame.
Example: <frame src="./myPage.html" />
Note: the FRAME tag, like the BR and IMG tags, does NOT close. Therefore, under XHTML syntax requirements, it should close within the opening tag using the indicated space-closing-slash before the closing-bracket, as in the example above.
Here is an example of FRAMESET and FRAME tags being used in combination:
<html>
<head>
<title>FRAMESET and FRAME Example</title>
</head>
<frameset cols="50%,50%">
<frame src="./page1.html" />
<frame src="./page2.html" />
</frameset>
</html>
Here is the above example displayed.
Note how page1.html displays in the first column, while page2.html displays in the second column (going from left to right).
Here is the same example, only this time made in rows instead of columns:
<html>
<head>
<title>FRAMESET and FRAME Example</title>
</head>
<frameset rows="50%,50%">
<frame src="./page1.html" />
<frame src="./page2.html" />
</frameset>
</html>
And here is the above example displayed.
Note how page1.html displays in the first/top row, while page2.html displays in the second/bottom row.
If we were to have THREE columns, this is what the code might look like:
<html>
<head>
<title>FRAMESET and FRAME Example</title>
</head>
<frameset cols="15%,50%,35%">
<frame src="./page1.html" />
<frame src="./page2.html" />
<frame src="./page3.html" />
</frameset>
</html>
And here is the above example displayed.
Again, FRAME tags are associated with their respective columns or rows going from LEFT to RIGHT, TOP to BOTTOM.
In the above three examples, you may have noticed how the FRAME tags have been indented. Because frame pages contain NO visible content, indented tags are permissible on frame pages ONLY. Always indent child elements one tab in from parent elements. Since all three FRAME tags in the above example are children of the FRAMESET tag, they have all been indented in one level from the parent.
As mentioned earlier, you may also combine ROWS and COLS attributes together in a single FRAMESET tag to define a grid structure of rows and columns. Although this is rarely, if ever, done, it is important to know how it is accomplished.
In the following example, I have combined both ROWS and COLS attributes to create four frames:
<html>
<head>
<title>FRAMESET and FRAME Example</title>
</head>
<frameset rows="50%,50%" cols="50%,50%">
<frame src="./page1.html" />
<frame src="./page2.html" />
<frame src="./page3.html" />
<frame src="./page4.html" />
</frameset>
</html>
Here is the above example displayed.
Note how the first two frames compose the first row, while the second two frames compose the second row. Again, FRAME tags (from top to bottom) are associated with frames going from LEFT to RIGHT, TOP to BOTTOM; remember this if you are unclear about the relationship of which FRAME tag goes with which row or column.
By now, you should be getting a clearer picture of how FRAMESET and FRAME tags work together. FRAMESET tags define row and column STRUCTURE; FRAME tags define the default CONTENT, the default HTML pages, which will appear in those rows and/or columns.
 |
 |
Copyright © 2001 Michael Masumoto. All Rights Reserved.