Fun with Frames

As previously discussed, it is not a good idea to use frames in your site design. However, as with tables, frames can be used in a creative fashion.

The Frameset

It is not difficult to use frames. Instead of a <body> tag (and </body> tag) one uses the <frameset> and </frameset> tags. Within the frameset tag, one lists whether one is dividing the browser window into columns or rows, and how many columns or rows are used. Each column or row is then indicated by a <frame> element (no closing tag), or by another frameset (for nesting frames; discussed more later). For each frame, one gives a source file, indicated by src="<file>"; this syntax should remind you of how images are embedded in HTML documents.

A Example

The following two examples are nearly identical; the only difference is that one uses letters, and the other uses numbers. The main frameset divides the screen into three columns; the middle one is 500 pixels wide, and the outer two take up the rest of the space evenly. Into the left and right frames we load pages titled left.htm and right.htm respectively.

In the middle we place another frameset. This one has three rows. The middle one is 500 pixels high, and the upper (top.htm) and lower (bottom.htm) ones take up the remainer evenely.

The middle frame is another frameset--this may sound a bit complicated, but when looking at the page source, one notices the strategic use of Tabs to make the source readable--containing five rows. Each row is a frameset with five columns, and each column loads a different page.

The content each each page is related: in the first example, a letter is used as a link to the next letter in the alphabet (A-Y only); in the second, a number is used as a link to the next number (1-25 only, with 25 going to 1).

A Puzzle

Based on the examples above, it is easy to see how frames can be used to create a simple "puzzle." The puzzle is an m by n matrix, represented as a series of framesets. Each final frame loads a picture--a puzzle piece--and each frame contains a link. The links help to "cycle through" the pieces; one cycles through them all until the puzzle is solved and the proper picture is displayed.

The following examples do just that. The frameset structure is very similar to that used in the earlier examples, except that the frames for the pictures have been made smaller. There is also a link to show you the "completed puzzle." The second puzzle is much like the first, but extra attributes were added to each frame (MARGINWIDTH="0" for example) to eliminate the spaces between frames in order to give the puzzle a smooth look.

Contents	Chapter 4	Previous	Next