Week 3 Lab 1: Images in Web Pages

Step 1: Setup

1.1 Launch a text editor and Web browser. Tile your windows.

1.2 In your Documents folder (Macintosh) or at the top level of your C drive (Windows) there is a folder called Lab 3.1. In your browser, navigate to the page called index.htm within the Lab 3.1 folder.

1.3 Five pages are linked from the index page. Examine each one. Look closely at the fifth (wallet.htm).

Step 2: Link the Pages

2.1 Open the page called bookscapes.htm in your text editor. At some appropriate point on this page, insert an anchor container leading from this page to the page index.htm within the Lab 3.1 folder. The cue for this link should be "PREVIOUS."

2.2 Add a second link to bookscapes.htm. Make its destination the page dish.htm and its cue "NEXT."

2.3 Repeat this process with each of the 5 content pages that are contained within the Lab 3.1 folder. Give each page a "PREVIOUS" link to its predecessor in the sequence and a "NEXT" link to its sucessor. The order of pages is:

1. Bookscapes
2. Dish
3. eSenior
4. Fugue
5. Wallet

The "next" link for Wallet should go to the index page.

Step 3: Add Feature Images

3.1 In your browser, open the page imgIndex.htm within the Lab 3.1 folder. You should see five images, one of which belongs to each of the content pages. Write down the dimensions of these images, given as length X width. Also notice the solid-color strip that occurs on the left or right side of each image (four of these are white; the fifth is dark gray). You'll want to remember whether the strip is on the right, for an image in left orientation, or on the left, for one in right orientation.

3.2 In your text editor, return to the markup for the page bookscapes.htm. At some appropriate point, insert an IMG tag to include the bookscapes image. Note that all image files are stored in the images subdirectory, one level below the page you are editing. Remember that every IMG tag must have a properly constructed SRC attribute, WIDTH, HEIGHT, and ALT settings -- and since these graphics have built-in gutters, you should also include an ALIGN attribute of "right" or "left."

3.3 Test your work on the Bookscapes page. When you're happy with it, proceed to add feature images to each of the four other content pages.

Step 4: Susbtitute Graphics for Text Links

Open each of your content pages and where you have the text cues "PREVIOUS" and "NEXT," substitute IMG tags that call the graphics prev.jpg and next.jpg respectively. These files are in the images subdirectory within Lab 3.1. Each graphic is 90x24.

Step 5: Fix the Text Problem on the Wallet Page

There's something obviously wrong with the text on the page wallet.htm. Find a way to correct the problem without changing the background color.