Web Lab 2

CS 102

Oct. 15, 1997

The goal here is to learn how to make use of basic FrontPage editor tools. We will accomplish this by taking an unformatted page and formatting it. The unformatted page is at phoenix/~kelliher/cs102/lab2/page1.html and the formatted page is at
phoenix/~kelliher/cs102/lab2/page1d.html .

Here's some of the things we'll learn:

• Using background images.

• Changing text colors.

• Applying formatting.

• Aligning images.

• Inserting horizontal rules.

• Adding a hyperlink to an image.

• Using a mailto: link.

Step-by-Step Guide

1. Open your Network folder. Start by opening My Computer. From there open G:, find your network folder and open it. Click the right mouse button in your network folder and choose New followed by Folder. Name the new folder Lab 2 .

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.

   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 Lab 2 folder.

3. Open FrontPage and open the editor. From the editor, open the location
   phoenix/~kelliher/cs102/lab2/page1.html and save it into your Lab 2 folder. When you save the page, you have to click the As File button. 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. Drag the Goucher image from the Goucher home page into your lab page. Bring up image properties to link the image to the Goucher home page.

9. 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.

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