| | |
So far, we have only dealt in percentage values for defining our row and column structures in our FRAMESETs. When using percentage values, always make certain that ALL the values for a set of COLS or ROWS of a FRAMESET total 100% when added together, as in the examples from the previous section. Note: percentage values should probably NOT be used in combination with other types of values (especially absolute pixel values) when defining structure.
Percentage values defining FRAMESETs are rarely used. More common are a combination of absolute pixel values (represented by plain integers) and proportional values (represented by asterisk (*) characters).
Integer values allow me to set the width of columns or the height of rows in pixels. Here is an example of what I mean:
<html>
<head>
<title>FRAMESET and FRAME Example</title>
</head>
<frameset cols="100,400">
<frame src="./page1.html" />
<frame src="./page2.html" />
</frameset>
</html>
In the above example, I have set the leftmost column to be 100 pixels wide, and the rightmost column to be 400 pixels wide. This is all very well and good, but what if our browser window is not EXACTLY 500 pixels wide?
Play with this example, and you will see that the size of the frames varies according to the size of the browser window, that the frames distort proportionally as you resize the window.
To make frames with fixed, absolute dimensions within a browser window of unknown or variable size, you must create at least one frame which will stretch or contract to fill up the available space. A variable-sized frame must be created using a proportional value.
Proportional values are represented with asterisk (*) characters. One asterisk means "one unit of whatever is available" or "the remainder of the space, whatever that is".
In the following example, I have defined my FRAMESET with all proportional values:
<html>
<head>
<title>FRAMESET and FRAME Example</title>
</head>
<frameset cols="*,*">
<frame src="./page1.html" />
<frame src="./page2.html" />
</frameset>
</html>
Here is the example displayed. Notice how both columns are of equal proportions, which expand and contract to fill available space? I have two asterisks, which means that there are two parts to be made of whatever space is available; each column, therefore, will take up 1/2 of the available space.
In the following example, I have used proportional values again, but this time with numbers preceding some of the asterisks; these numbers denote how many parts of the available space that particular column or row is supposed to receive.
<html>
<head>
<title>FRAMESET and FRAME Example</title>
</head>
<frameset cols="*,2*,3*">
<frame src="./page1.html" />
<frame src="./page2.html" />
<frame src="./page3.html" />
</frameset>
</html>
Here is the above example displayed. To figure out the proportions, add all of the asterisk together. In this example, there are 1 + 2 + 3 asterisks, or 6 asterisks, which mean there are six parts of the available space to be divided up. The first column takes up 1/6 of the browser window, the second column takes up 2/6 or 1/3 of the browser window, and the third column takes up 3/6 or 1/2 of the browser window.
As mentioned earlier, FRAMESETs are usually defined using some combination of absolute/pixel/integer values and proportional/asterisk values. Most commonly, there are one or more absolute integer values, and ONE asterisk/proportional value to absorb the remaining space.
Example:
<html>
<head>
<title>FRAMESET and FRAME Example</title>
</head>
<frameset cols="100,*,175">
<frame src="./page1.html" />
<frame src="./page2.html" />
<frame src="./page3.html" />
</frameset>
</html>
View the above example. Note how the left and right columns stay the same size as you resize the browser window, while the middle column expands and contracts to fill the available space?
Whenever you create a FRAMESET, always define at least ONE of the rows and/or ONE of the columns using a proportional value; this is the only way you will be able to keep the other absolutely-sized frames from losing their shape.
Percentage values must add up to a total of 100%, and should not be used in combination with other types of values. Absolute/pixel values must always be used in combination with proportional/asterisk values.
 |
 |
Copyright © 2001 Michael Masumoto. All Rights Reserved.