Exercise Two

Based on the following description, draw a picture on paper of the desired frame page layout. Once you have drawn out all the details on paper, you may begin coding the frame page. All three HTML pages mentioned in the description (displayPage.htm, leftPage.htm, and notePage.htm) have already been created and are downloadable from the links at the bottom of this page.

Note: In real world web design, frame pages are usually drafted on PAPER first. Once the frame layout and design has been drafted out, the coding can begin.

1. The frame page should be split into two columns. The left column is a fixed width, 175 pixels. The right column extends for the rest of the width of the browser window.
2. The right column contains a nested frameset with two rows. The bottom row is a fixed height, 150 pixels. The top row extends for the rest of the height of the browser window.
3. The left column should display "leftPage.htm" when the frame page is viewed in a browser window.
4. The top row of the right column should display "displayPage.htm" when the frame page is viewed in a browser window.
5. The bottom row of the right column should display "notePage.htm" when the frame page is viewed in a browser window.
6. Title your frame page "Advanced Widgets Corporation" (using the TITLE in the HEAD).
7. Name your completed document "frame.htm".
8. Display your frame page. Make corrections, as needed.

Note: Web browsers will not completely reload frame pages when you hit the "Reload" or "Refresh" buttons. To FORCE a browser to completely reload a frame page (or any page, for that matter), you must take the following steps:

Netscape Communicator: Hold down the "shift" key while pressing the "Reload" button to initiate a "force" reload.
Internet Explorer: Hold down the "option" key (Mac) or the "control" key (PC) while pressing the "Refresh" button to initiate a "force" reload.

Download Exercise Files:
Mac files (.sit -- 3K)
PC files (.zip -- 2K)

Main Menu

Copyright © 2001 Michael Masumoto. All Rights Reserved.