FrontPage Lab I
Oct. 30, 2006
In this lab, you'll create a small Web page using FrontPage, adding
features as you go and observing the changes. This Web page will be quite
similar to the one you made earlier using NotePad. The purpose of this lab
is for you to compare NotePad and FrontPage and begin to gain some
familiarity with FrontPage.
- Create a new set of folders on your
G: for your FrontPage
work. I suggest naming the ``top'' folder
FrontPage and then create
a folder within that folder named
Lab1 for this lab.
- Start FrontPage. It's right on the Start menu, just look around for
FrontPage will open up a new Web page for you.
- Save the Web page into your Lab1 folder, using the name "index.htm". Use the Preview button in FrontPage to view your page in
Internet Explorer. Boring, just like last time, right?
- Let's give your new Web page a title, a heading, and change the
default color scheme.
Save the Web page and preview it again. It looks a little better
- Back in FrontPage, right click on the page background. Choose
Page properties from the pop-up menu.
- Choose General and type a Title for your Web page.
(Remember -- this is the title that appears in the title bar at the top
of IE.) Don't close this dialog box!!!
- Now, select the Formatting tab and select colors for the
background and text colors. You can also select different colors for
unvisited and visited hyperlinks. You may want to change these colors
if you select a blue background, for instance.
- Now you can close the dialog box.
- Back on the Web page, type a title for the top of the Web page.
Select (drag the mouse over and highlight) your title text.
Using the formatting bar, change the text type from Normal to Heading 1
and center the text.
This is a lot like using Word, isn't it?
- Now, we'll add a few more improvements.
Again, save the page and preview it so that you can see the changes.
- Type a short paragraph of text following the level 1 heading.
- Press the
Enter key and FrontPage will enter a paragraph
tag for you.
- Type a short second paragraph. Make sure this paragraph contains
the sentence I attend
Goucher College somewhere.
- Select some text and bold it. Italicize some text as well.
Make some text appear red.
- Change the font of the entire page body to Arial. Hint: Select
all the text in the page, then select the Arial font.
- Let's add a few multimedia effects:
Save the page and preview the results.
- Make Goucher College a link the the Goucher Web site.
- Using the Insert Image tool, insert an image following the
second paragraph of your Web page.
Insert paragraph tags before and after the image tag.
- Almost done. Just a couple more things:
Save the file and preview the page. You're done. How's it look?
- Add a horizontal rule tag following that last paragraph tag and
then add another paragraph tag. Hint: Look under the Insert
var modiDate = document.lastModified;
document.write("This page last updated on " + modiDate);
from Design view to Code view by selecting the Code tab below your Web page in FrontPage.
- Now that you're a ``Webmaster,'' feel free to experiment with the
page and see what happens.
Try creating a second page and linking to it from your first page.
Thomas P. Kelliher