The address for this web page is:   http://fishcaro.crosswinds.net/day_37_grids.htm
On to the next lesson!
Back to the COURSE SYLLABUS

37. GRIDS

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:
cell 1cell 2cell 3cell 4
cell 5cell 6cell 7cell 8
In contrast, the following would NOT be called a grid.
cell 1cell 2
cell 3cell 4
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: 
<FRAMESET ROWS="comma_separated_list_of_rows"
          COLS="comma_separated_list_of_columns">
  <FRAME SRC="frame_1.htm">
  <FRAME SRC="frame_2.htm">
  (and so on...)
</FRAMESET>
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.

The code

<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.

Click here to see the resulting frame.
Be sure to change the window size and see what happens!

WAYS TO SPECIFY SIZE: (37d)
PERCENTAGES

Another way to specify sizes of frames is using PERCENTAGES.
The code
<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%">

Click here to see the resulting frame.
Be sure to change the window size and see what happens!


WAYS TO SPECIFY SIZE: (37e)
RELATIVE ("*") VALUES

Another way to specify sizes of frames is using RELATIVE VALUES, indicated by the asterisk (*) character. (I'll call * a star; it's easier.)
The code
<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. You choose!

Click here to see the resulting frame.
Be sure to change the window size and see what happens!

MIXING SIZE SPECIFICATIONS (37f)

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.

Click here to see the resulting frame.
Be sure to change the window size and see what happens!

Printable version of Index Card 37a

Printable version of Index Card 37b

Printable version of Index Card 37c

Printable version of Index Card 37d

Printable version of Index Card 37e

Printable version of Index Card 37f

WORKSHEET #37:
Create each grid below. (Don't cheat by VIEWing the SOURCEcode until you've tried them yourself!)

ASSIGNMENT #37:

On to the next lesson!
Back to the COURSE SYLLABUS
© 2001 Carol J.V. Fisher    All Rights Reserved