Web Lab 3
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
and the formatted page is at
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.
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.
- 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.
Open the formatted page in Internet Explorer and look at it. Note these
Click the right mouse button on the background of this Web page. Save the
background image into your weblab3 folder.
- The page has a title, a background image, and the text color has
- There are some hyperlinks. The Goucher image is a hyperlink.
- There is a mailto link at the bottom.
- The images have text wrapped around them.
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.
- 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
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.
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).
Use the Insert menu to insert horizontal lines. You can right
click on a line to change its properties.
You can browse the image archives listed in Feb. 23's notes to find image
rules. Choose any rules you like.
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.
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
When you have finished, call me over to have a look at your work.
Thomas P. Kelliher
Mon Feb 23 20:14:03 EST 1998