Microsoft FrontPage Introduction
Computing Concepts, Fall 2002

The purpose of today's activity is to get acquainted with Microsoft FrontPage, the HTML editor that we will be using for the remainder of the semester.

  1. On your K drive, in the concepts/homework folder, make a folder called lesson6.
  2. Do a web search and locate two images of your favorite cartoon character (preferably one will be a small one). Once you find an image, right click the image and select Save Picture As to save the image to your lesson6 folder.
  3. For a nice, quick introduction to the basics of using FrontPage, read through the tutorial (look at the text, link, and image sections of the tutorial) at http://www.learningspace.org/tech/FrontPage/index.html. Make note of the links at the end of the tutorial to web sites with graphics, especially the animated GIFs links. You'll want some fancy GIF images later this term, so keep these links in mind.
  4. Using FrontPage, start a new file named images.html and save it to your lesson6 subfolder of your homework folder on your K drive. In images.html, use the text entering capabilities of FrontPage to center  the words My Favorite Cartoon at the top of the web page you are creating. Use a non-standard font and make this text large.
  5. Below your centered title, add a picture (the larger one) of your favorite cartoon character (also centered) using the Insert Picture button (it looks like a photo of a mountain) on the toolbar.
  6. Below the image of your favorite cartoon character, add several sentences (aim for one half a page, you may just do a web search and copy the text that someone else has written) about this cartoon character. These sentences should be left justified.
  7. In the middle of these sentences, add the other (smaller) image of your cartoon character. Right click on the smaller image and select Picture Properties from the context menu.
  8. Add the character's name (like UnderDog) to the text field, then click on the Appearance tab. Add some horizontal space around your image, and try to make it so that the text flows around your image (on both sides). You may need to add some more text. In FrontPage, click on the Preview tab to see the HTML file as a web page.
  9. Using the Link Tool (it looks like a globe with a link from a chain), add a well supported link to a web page about your favorite cartoon character, then add a link to your homework page.
  10. Click on the HTML tab to see the actual HTML that creates the web page. Look at the HTML for the two images. What tag is used to embed a picture in a web page? What are some of this tags attribues? Write your answers to this question at the bottom of your images.html file.
  11. From the File menu, select the Properties item and give your page a title. Save this image file to your lesson6 folder and then add it as the background image of your web page (via the File -> Properties menu again).
  12. View the HTML again and write a sentence or two at the bottom of your images.html file that describes how you add an image as the background of a web page (look in the <BODY> tag).