For this exercise, we'll create framed Web pages that match visual layouts with written descriptions. For explanations of how to create frame layouts, see module W25c.

To make the creation of these framesets efficient and colorful, there is a set of Web pages for you to use as "fillers" for the different pages. Save each of the linked color files to your own disk:

We'll start with layouts that only require one frameset group.

Create a framed page like this layout.

• The left-hand frame contains almond.htm; its size is unspecified;
• The right-hand frame is 1/5 of the available width and contains firebrick.htm;
• Include an appropriate <noframes></noframes> section allowing users to link to both visible HTML files.

Your page won't look exactly like this one unless you adjust the size of the window to be the same. Do readjust the size of the window both horizontally and vertically and observe how the browser readjusts the frame sizes. Notice particularly how the browser adds scrollbars as needed.

For this page, the frames are three horizontal rows.

• The top row contains goldenrod.htm and is 80 pixels high;
• The middle row contains gainsboro.htm and is of unspecified height;
• The lowest row contains orchid.htm and is also 80 pixels high;
• Include an appropriate <noframes></noframes> section allowing users to link to all visible HTML files.

As before, change the browser window size and observe how the frames are readjusted.

This layout consists of four vertical bars:

• The leftmost contains firebrick.htm and is 50 pixels wide;
• The second from the left contains seagreen.htm and occupies 25% of the available space;
• The third contains almond.htm and shares the remaining space equally with the rightmost column;
• The far-right column contains royalblue.htm;
• Include an appropriate <noframes></noframes> section allowing users to link to all visible HTML files.

Here we have a layout with three rows and two columns:

• Left column width is unspecified; the right column is 150 pixels wide.
• The top row is 100 pixels high, the middle is 75 pixels, and the lower row is unspecified.
• The upper left corner frame contains firebrick.htm;
• The upper right contains seagreen.htm;
• The center left has almond.htm;
• The center right has royalblue.htm;
• The lower left has orchid.htm;
• The lower right has gainsboro.htm;
• Include an appropriate <noframes></noframes> section allowing users to link to all visible HTML files.

This layout has only two rows, but three columns.

• The top row is 210 pixels high, and the lower one is unspecified.
• The left and right columns are each 150 pixels wide, and the center column occupies the remaining space.
• Cells in the top row, from left to right, contain:
  • firebrick.htm
  • seagreen.htm
  • almond.htm
• The lower row, from left to right, contains:
  • royalblue.htm
  • orchid.htm
  • gainsboro.htm
• Include an appropriate <noframes></noframes> section allowing users to link to all visible HTML files.

Single-frame layouts are limited: there must be the same number of cells in each row and column. In a way, they are like tables without the ability to span rows or columns.

To get the equivalent of "spanning" in frames, we need to nest one frame inside another. This gives the flexibility needed to vary the number of rows and columns.

We'll continue using the color files above as we create nested framesets in this section.

Create this page:

• The primary frameset consists of two rows:
  • The first row is 210 pixels high and contains firebrick.htm;
  • The second row occupies all the remaining space and refers to the secondary frameset, for which you will need to create your own HTML file.
• The secondary frameset has two columns:
  • The first column is 150 pixels wide and has royalblue.htm in it;
  • The second column uses the rest of the space and contains almond.htm.

As always, create a <noframes></noframes> section. Secondary framesets can be accessed separately from the primary ones, so they need <noframes></noframes> sections as well. Try accessing your secondary frameset directly and observe how it is laid out.

It's easy to get confused about what's where when you nest framesets. Try these techniques when the page isn't coming out right:

• In the primary frameset: In the <frame> tag that refers to the secondary frameset, substitute a simple HTML file instead of the secondary frameset. If the page appears correctly, the problem is in the secondary frameset.
• View the secondary frameset by itself. Once problems in the secondary frameset are resolved, you can put it into the primary frameset with confidence.

Use nested framesets to create this layout:

• The primary frameset has two columns:
  • The left column contains seagreen.htm and is 120 pixels wide;
  • The right column width is unspecified, and it contains the secondary frameset.
• The secondary frameset has two rows:
  • Top: 100 pixels high, containing orchid.htm;
  • Bottom: fills the remaining space; contains gainsboro.htm.
• Create a <noframes> section for each of the framesets.

Here is a more complicated layout for you to code:

• Primary frameset: two rows and two columns
  • Top row: height 180 pixels
  • Bottom row: height unspecified
  • Left column: width 120 pixels
  • Right column: width unspecified
  • Frames:
    • Upper left gainsboro.htm
    • Upper right royalblue.htm
    • Lower left orchid.htm
    • Lower right: Secondary frameset (your file)
• Secondary frameset: two columns and two rows
  • Left column: unspecified width
  • Right column: 35% of available space
  • Top row: 100 pixels
  • Bottom row: unspecified height
  • Frames:
    • Upper left gainsboro.htm
    • Upper right seagreen.htm
    • Lower left firebrick.htm
    • Lower right: royalblue.htm
• Include an appropriate <noframes> section for each frameset.

One of the big advantages of using frames is that you can provide the user with a navigation bar that's always in view. They can click links in the navbar and have different files appear in the main frame of the window.

In order to make this work, you'll need to use the "target" attribute in the link tag. Here's a layout for practice with that technique. This will also give you practice coding a page from purely written specifications.

Create a Web page with three frames, using two framesets. Here are the specifications:

• The page will have two rows. The top row will serve as a page heading 60 pixels high. The bottom row, filling the rest of the browser window, will hold the content frame and the navbar.
• In the top row, put a heading with a greeting saying, "Welcome to Color Town!".
• In the lower row, have the main content window on the left and the navbar on the right.
  • The main content frame should fill all the window space available except for the navbar. The initial window content should be almond.htm, but the content is to be changed by the user via navigation links.
  • The navigation bar is to be on the right, 120 pixels wide. It should have brief instructions at the top, something like, "Click to visit our color selection". There should then be an unordered list of links to each of the six color files listed above, targeted to appear in the main content frame.

• If this is assigned as an in-class exercise, the instructor will need to see each of your layouts in class.
• If this is assigned as homework, create a frames subdirectory in your assigned Web server space for this class. Put all the associated files in the subdirectory, and check to make sure each of the files works correctly on the server. Email the URL of the subdirectory to the instructor.