The last two tutorials of Worksheet #36 introduced the ideas of creating frames
with a GRID structure (a simple arrangement of rows and columns), and NESTING FRAMESETS for more complicated arrangements.
This lesson explores the GRID structure.
INDEX CARD #37:
WHAT IS A GRID? (37a)
The word "grid" is used to refer to an arrangement of rows and columns
where each row goes all the way across, and each column goes all the way
up and down, something like this:
In contrast, the following would NOT be called a grid.
Grids are created by using the ROWS and
COLS attributes in the <FRAMESET> tag,
as discussed in card 37b. However, non-grid structures must use the
idea of NESTING FRAMESETS, which is discussed in Lesson 38.
CREATING A GRID (37b)
A grid is created by specifying the desired row and column structure
in the <FRAMESET> tag, like this:
You must have one <FRAME> tag for each cell.
If you have m rows and n columns, then you will
need mn<FRAME> tags. The order that you list the
frames inside the <FRAMESET>
container IS IMPORTANT! Frames are loaded top-to-bottom
and left-to-right. That is, left-to-right along the first row. Then,
left-to-right along the second row. And so on.
There is lots more information on specifying the comma-separated
lists of rows and columns on cards 37c, 37d, and 37e.
WAYS TO SPECIFY SIZE: (37c)
ABSOLUTE PIXELS VALUES
Frame size can be specified in three ways: absolute pixel values, percentages,
and relative values. This card discusses ABSOLUTE PIXEL VALUES.
<FRAMESET COLS="100,400" ROWS="150,50">
creates two columns and two rows. The first
column is set to 100 pixels; the second 400 pixels. The first row is set to 150 pixels;
the second 50 pixels.
If the browser window is larger (or smaller) than the total
specified pixels, each frame is "scaled" proportionally to fill the
entire window. So, you're not really guaranteeing a fixed pixel size
at all! Really, all this specification is guaranteeing is that the second
column is four times the width of the first column; the first row is three
times the width of the second row.
Another way to specify sizes of frames is using PERCENTAGES.
<FRAMESET COLS="20%,80%" ROWS="75%,25%">
creates two columns and two rows. The first
column is 20% of the total frameset width; the second is 80%. Thus, the second
column is four times as wide as the first column.
The first row is 75% of the total frameset height; the second row is 25%.
Thus, the first row is three times as high as the second.
Notice that these specifications give the same results as the example
on card 37c!
If your percentages don't add up to 100%, then the browser scales them
proportionally so they DO add to 100%. For example, the code <FRAMESET COLS="5%,20%">
only has percentages adding up to 25%. We need 100%. So, each percentage gets
multiplied by 4, and this code will be interpreted as <FRAMESET COLS="20%,80%">
Another way to specify sizes of frames is using RELATIVE VALUES, indicated
by the asterisk (*) character. (I'll call * a star; it's easier.)
<FRAMESET COLS="*,4*" ROWS="3*,*">
creates two columns and two rows.
Notice that there are five stars in the COLS specification: 1* + 4* = 5*.
So, think of the available width as being divided into five equal portions. The
first column gets one of these portions; the second column gets four portions.
Thus, the second column is four times as wide as the first column.
Notice that there are four stars in the ROWS specification: 3* + 1* = 4*.
So, think of the available height as being divided into four equal portions. The
first row gets three of these portions; the second row gets one portion.
Thus, the first row is three times as high as the second row.
Notice that these specifications give the same results as the examples
on cards 37c and 37d! So, you can achieve the same effect in different ways.
The three different ways to specify size can be mixed and matched,
as desired. For example,
<FRAMESET ROWS="25%,100,3*,*" COLS="*,30%,2*">
produces four rows and three columns.
The first row is 25% of the available height. The second row is 100 pixels
high. The remaining height is divided into four equal portions: the third row
gets three of these portions, and the fourth row gets only one.
The second column is 30% of the available width. The remaining width is
divided into three equal portions: the first column gets only one of these
portions; the last column gets two of these portions.
(A37.1) Please re-read pages 212213 (from "Establishing Rows and Columns" up to "Nesting Frames") in the Weasel Book.
(A37.2) On your HOMEPAGE, put a LINK to a framed document that uses a GRID structure. Put in
contents that are appropriate for you! For example, you might want to show, at the same
time, four different web sites that contain information relevant to your web page.
In your source code, put a comment:
<!-- HERE IS THE LINK TO THE GRID STRUCTURE.-->
so that I can easily find this when I grade your homepage.