Web Lab 3

CS 102

Feb. 25, 1998

The goal here is to ensure that you can take advantage of basic FrontPage editor formatting tools. You will accomplish this by taking an unformatted page and formatting it so that it looks, as much as possible, like my formatted version of the page. The unformatted page is at phoenix/~kelliher/cs102/lab3/page1.html and the formatted page is at
phoenix/~kelliher/cs102/lab3/page1d.html . Here's some of the things you'll learn:

• Using background images.

• Changing text colors.

• Applying formatting.

• Aligning images.

• Inserting horizontal and image rules.

• Adding a hyperlink to an image.

• Using a mailto: link.

Step-by-Step Guide

The important thing here is not merely to get through, but to understand what you're doing at each step and to learn the skills necessary for building effective Web pages.

1. Open Frontpage and create a new, empty Web. Use G:\kelliher\weblab3 (replace my name with yours) for the File Location and, as always, leave the Name empty.

2. Open the formatted page in Internet Explorer and look at it. Note these things:
   1. The page has a title, a background image, and the text color has been changed.

   2. There are some hyperlinks. The Goucher image is a hyperlink.

   3. There is a mailto link at the bottom.

   4. The images have text wrapped around them.

   Click the right mouse button on the background of this Web page. Save the background image into your weblab3 folder.

3. Open FrontPage Editor. From the editor, open the ``other'' location
   phoenix/~kelliher/cs102/lab3/page1.html and save it into your weblab3 folder. When prompted, save all the images.

4. Much of the overall look can be set by right clicking on the page and working from the dialog box that pops up after you click Page Properties. You can set the page title from the General tab. From the Background tab, you can select a background image and colors for the text and hyperlinks.

5. To change text formatting, select the text and then apply formatting from the formatting toolbar. For example, to change the formatting of the title line of the page, select it, change its style from normal to Heading 1 and center it. The Section headings all use Heading 3 style.

6. By right clicking on an image and choosing Image Properties, you can change the image's alignment (under the Appearance tab) or add a hyperlink (under the General tab).

7. Use the Insert menu to insert horizontal lines. You can right click on a line to change its properties.

8. You can browse the image archives listed in Feb. 23's notes to find image rules. Choose any rules you like.

9. Drag the Goucher image from the finished page into your lab page. Bring up image properties to link the image to the Goucher home page.

10. View the HTML source of the finished page to find out what sort of a hyperlink produces an e-mail response. Replace my name and e-mail address with your own name and e-mail address. (Hint: the URL is something like .)

11. When you have finished, call me over to have a look at your work.