Week 4, Lab 3: Building a Page Index with Frames

Step 1: Setup

1.1 Find the lab 4.3 folder on your machine (in Users/Lab User/Documents for Macintosh, on the Desktop for Windows).

1.2 With your Web browser, navigate to the page content.htm in that folder. Note the structure of this page. If you look at the markup, you'll see that the page contains a series of arrival points set with NAME attributes. They are as follows (spelled just so):

• ada
• dad
• eve
• fix
• funWithKids
• heritageOfWar
• justice
• metro
• modernObject
• outOnCampus
• sencha
• strata

Step 2: Create a Frameset Page

2.1 Bring up your text editor and open a new document. Save this document with the name index.htm within the folder lab 4.3. Be SURE you are saving in the correct folder!

2.2 Add the appropriate markup for a frames construction with two frames, each in its own column. Make the width of the first column 150 pixels and the width of the second column 450 pixels.

2.3 Name the first frame "left" and the second frame "right." The SRC for the first frame should be "toc.htm" and the SRC for the second should be "content.htm."

2.4 Save index.htm.

Step 3: Create a Table of Contents Page

3.1 Open a new file in your editor. Save this file as toc.htm in the lab 4.3 directory. Enter all the tags appropriate for a conventional (i.e., non-frameset) Web page. Set the page background to #666666 and set LINK, VLINK, and ALINK all to #FFFFFF.

3.2 Create twelve link containers, one for each of the arrival points within content.htm listed above. Make the cue for each link the name of the project. Set the TARGET attribute in each initial A tag to "left."

3.3 Save toc.htm.

Step 4: Test

Open the page index.htm in your browser. You should see the content page in the lefthand frame and your table of contents in the righthand frame. Test the links; all should work.