FrontPage Lab I

CS 102

Mar. 27, 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.

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

2. Start FrontPage. It's right on the Start menu, just look around for it.

   FrontPage will open up a new Web page for you.

3. 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?

4. Let's give your new Web page a title, a heading, and change the default color scheme.
   1. Back in FrontPage, right click on the page background. Choose Page properties from the pop-up menu.

   2. 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!!!

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

   4. Now you can close the dialog box.

   5. 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?

   Save the Web page and preview it again. It looks a little better now, right?

5. Now, we'll add a few more improvements.
   1. Type a short paragraph of text following the level 1 heading.

   2. Press the Enter key and FrontPage will enter a paragraph tag for you.

   3. Type a short second paragraph. Make sure this paragraph contains the sentence I attend Goucher College somewhere.

   4. Select some text and bold it. Italicize some text as well. Make some text appear red.

   5. Change the font of the entire page body to Arial. Hint: Select all the text in the page, then select the Arial font.

   Again, save the page and preview it so that you can see the changes.

6. Let's add a few multimedia effects:
   1. Make Goucher College a link the the Goucher Web site.

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

   Save the page and preview the results.

7. Almost done. Just a couple more things:
   1. Add a horizontal rule tag following that last paragraph tag and then add another paragraph tag. Hint: Look under the Insert menu.

   2. Following that paragraph tag, adding the following JavaScript code:

         <script><!--
            var modiDate = document.lastModified;
            document.write("This page last updated on " + modiDate);
         // --></script>
      

      Hint: Probably the best way to add this bit of JavaScript is to switch from Design view to Code view by selecting the Code tab below your Web page in FrontPage.

   Save the file and preview the page. You're done. How's it look?

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

Tom Kelliher