Creating a Windowed Frame Layout

One of the problems with the previous example (the combination row-column frame page) is that you can't target the second frameset in a link, because a frameset can't be named. The way around that is to link to save the second frameset as a separate frameset page, and then link to it from within a FRAME element in the linking frameset page; this allows you to target the frameset, because you can name the frame that links to it. This kind of layout is called a windowed layout, because a frameset is windowed inside of a frame (instead of being directly nested inside of its parent frame-set, as in the combination row-column layout example).

For this example, you only need to create the linking frameset page and the top menu page. You will be reusing the two-column frameset page you created earlier as the windowed frameset. All of the other pages that are displayed in the frames have already been created for you.

Creating the Linking Frameset Page

You need to first create the frameset page that will link to the windowed frameset that will be displayed in one of the page's frames. Create the linking frameset page:

In your text editor, open fs_window_example.html from the frames folder in your MyHTML folder.
Save the example page as fs_window.html in the same folder.

Add a frameset to the example page that creates a two-row layout but that links to a second frameset page, fs_window1.html, in the bottom row:

</head>
<frameset rows="50, *">
   <frame src="topmenu.html" name="topmenu" scrolling="no"
noresize>
   <frame src="fs_twocols.html" name="window">
<noframes>
<p>A frames-capable browser is required to view this page.
Visit the <a href="front.html">non-frames</a> version of this
page.</p>
</noframes>
</frameset>
</html>

Notice that the second FRAME element links to the two-column frameset page, fs_twocols.html, that you created earlier when creating the two-column layout example. This is the windowed frameset that will be displayed in the bottom row of the linking frameset page.

Creating the Top Menu Page

Next, you need to create the top menu page that will be displayed in the top row of the linking frameset page. You will be adding a menu to this page that will target the frame in which the windowed frameset is displayed, switching in alternative windowed framesets, depending on which link is clicked.

Create the top menu page:

In your text editor, open topmenu_example.html from the frames folder in your MyHTML folder.
Save the example page as topmenu.html in the same folder.

Add links to the top menu page that target the frame within which the windowed framesets will be displayed:

<table align="center">
<tr><td width="150" valign="baseline">
   <h3><font face="Arial, Geneva, Helvetica, sans-
serif">English Poetry:</font></h3>
</td><td valign="baseline">
   <p>[<a href="fs_twocols.html" target="window">19th
Century</a>]&#160;
   [<a href="fs_twocols2.html" target="window">18th
Century</a>]&#160;
   [<a href="fs_twocols3.html" target="window">17th
Century</a>]&#160;
   [<a href="fs_twocols4.html" target="window">16th
Century</a>]&#160;
</td></tr>
</table>

Notice that the menu links target the "window" frame (target="window"), within which the nested frameset page is displayed, rather than the "main" frame, as was previously targeted.

Testing the Example

To check out the example, save any changes you made to fs_window.html, run your browser, and open fs_window.html from the frames folder in your MyHTML folder (see Figure 6.11).

Figure 6.11: A windowed frameset page is displayed within a frame (or window) in a linking frameset page.

Click on the "18th Century" link to switch in another nested frameset page (fs_twocols2.html). A new nested frameset page, this time featuring 18th century English poets, is displayed in the "window" frame (see Figure 6.12).

Figure 6.12: A windowed frameset page is displayed within a frame (or window) in a linking frameset page.

Click on the "William Blake" link in the sidebar menu. A page featuring a poem by William Blake (blake.html) is displayed in the "main" window (see Figure 6.13).

Figure 6.13: Clicking on the "Blake" link in the sidebar menu causes the William Blake page (blake.html) to be displayed in the "main" frame.

Scroll down in the William Blake page and click on the "front page" link to redisplay the front page (front2.html) in the "main" window. Only the first link ("William Blake") links to an actual page; the other linked pages have not been created.

Test out the other links in the top menu. The third link ("17th Century") switches in a third windowed frameset page (fs_twocols3.html). The fourth link ("16th Century") switches in a fourth windowed frameset page (fs_twocols4.html). In the sidebar menus for those pages, none of the sidebar menu links link to an actual page.

Note

The four variants of frame layouts (two-column, two-row, combination row-column, and windowed) are just some of the more typical kinds of layouts you can create using frames. To create a "checkerboard" layout, with the browser window split into four equally sized frames, you can combine both COLS and ROWS attributes in the same FRAMESET element, like this:<frameset cols="50%,50%" rows="50%,50%">

<frame src="topleft.html" name="topleft">
<frame src="topright.html" name="topright">
<frame src="bottomleft.html" name="bottomleft">
<frame src="bottomright.html" name="bottomright">
</frameset>