As you'll recall, last week's example--the Thumper home page--was a simple three-frame affair, with each frame running all the way across the window. Let's say, however, that I think Thumper's tour dates are quite important, and I want them to stay on the screen along with the header and options while the "main" frame's contents change.
What I'll need to do is create a fourth frame. The easiest thing to do,
codewise, would be to add another row to my current frameset of
<frameset rows="70,*,35">, giving something like
<frameset rows="70,*,50,35">. But designwise, this just
doesn't work. It would be difficult to put the tour information in any
format that would be understandable in a long, thin frame, and the
tour dates would compete visually with the information in the main frame.
There's nothing for it, then; we'll have to use a nested frameset. (I really shouldn't sound quite so gloomy--this first example won't be too difficult. But start memorizing the lay of the chessboard now for examples two and three!) What this means from a visual perspective is that there will be three rows and two columns arranged so as to produce four frames:
Figure 1. Three rows, with the middle row divided into two columns to produce a total of four frames. The left column is 130 pixels wide.
OK, so if you think of this pattern as the caption to Figure 1 suggests--three rows with the middle row divided into two columns--the code, or at least where the nested frameset will go, should suggest itself. To test your assumptions, jot down on a piece of paper how you expect the framesets to be arranged before you scroll down to see how I actually arranged them. To see the results of the coding, have a look at the Thumper home page, version 2 (this should open in a separate window).
<frameset rows="70,*,35">
<frame src="header.html" marginwidth=0 marginheight=1 noresize
scrolling="no" name="header">
<frameset cols="130,*" frameborder=0 framespacing=0>
<frame marginwidth=10 marginheight=5
src="tourdates.html" noresize name="tourdates">
<frame marginwidth=10 marginheight=10
src="info.html" name="main">
</frameset>
<frame marginwidth=2 marginheight=5 src="options.html"
marginwidth=0 marginheight=3 noresize scrolling="no"
name="options">
</frameset>
Let's say that the band's manager is busily booking shows for July, August, and September, and a new, longer list of tour dates will be arriving in the Web Designer's e-mailbox any day now. The Web Designer may then consider a slightly different arrangement to the frames--one that allots more space to the tour dates while taking away some of the unused space from the header and options. Can you guess what the code would be for the following arrangement?
Figure 2. Two columns, with the second column divided into three rows.
Again, the caption to Figure 2 provides a clue to the arrangement of the framesets. Have a look at the Thumper home page, version 3, and View Source to get the answer.
Here's another scenario to challenge your new frames skills: The band is delighted with the Web Designer's efforts so far, and they like the fact that more of their tour dates are visible at first glance, but they're willing to sacrifice a little space to get their press photo into one of the nonchanging frames. Where would you put it? I personally decided on the upper left-hand corner, so that the frames would be arranged like this:
Figure 3. Two columns--the first divided into two rows and the second divided into three rows.
Have a look at the results, also known as the Thumper home page, version 4, and View Source to make sure you understand how the frames were constructed. If you want to keep your brain limber for the coming discussions of NOFRAMES, SHTML (we pronounce it "shteml") files, server-side includes, and JavaScript, think about how you would code the Thumper page so that there was a frame for an ad below the tour dates, or so that the options ran the full length of the window.
Until next week, when we'll discuss using frames while still catering to the masses who use frames-impaired browsers . . .
