UB Intermediate Web Design Class

Lab # 1: An Introduction to Creating Web Pages

Purpose: The purpose of this lab is to fix a bad web page and to generate two new web pages: a good web page, and, believe it or not a bad web page. To do this, you will use Microsoft Front Page to create an initial page, and then try customizing it by editing the html directly. In the process, you will learn about formatting text, page layout, and working with tables and links.

Part 1: Setting up a FrontPage Web

1. Open Microsoft Front Page. This will open a new blank web page.

2. What we really want to create, however, is a new web site. To do this, go to the "File" menu and choose "New". From the pop-up menu that appears, choose "Web". In the instructions that follow, this would be shown as : File/New/Web.

3. Make sure "One page Web" is highlighted and change the name of the web to "C:\My Documents\My Webs\{insert your name in all lower case with no symbols or spaces here}". Click "OK".

4. Front page will then create your Web. This may take awhile. When it is done your Web will appear very much like the one shown below. FrontPage has created a folder named "dave" with two empty folders and one file inside of it.

5. Delete the file named "index.htm" by right clicking on it, and choosing "Delete" from the pop-up menu. When it asks if you want to delete this page, click "Yes".

Part 2: Importing and fixing a bad web page

1. We will now import a page to work on that we've posted on the web. Choose: "File/Import".

2. Click on the button that says "From Web...". Make sure "From a World Wide Web Site" is checked. Type in the following address and click "Next".

3. Leave the import options checked and click "Next". Click "Finish".

4. When you get a message from the Import Wizard, click "Yes". At this point your Web should look like:

5. Double-click on "index.htm" to open it. This is not a good web page. It is bad by design. It is your job to fix it. See how may problems you can find, and try and fix them. Once everyone has had a shot at fixing the pages, we'll go over the repairs as a class, and you'll have a chance to fix them.

Part 3: Creating a good and a bad web page

1. Next we create a new page by choosing File/New/Page. Make sure "Normal Page" is selected, then click "OK".

2. Save this page by choosing File/Save. Near the Page Title is a button labeled "Change...". Click on this button to change the title of this page. The title is the name of the page and what will appear when people add this page to their Bookmarks or Favorites. For a title, type in "{Your name}'s Good Web Page". Change the file name to "good.htm" and click "Save".

3. Repeat the steps in number 2 except this time substituting "Bad" in the title and naming the file "bad.htm". At this point your web should very much like this:

4. We want you to start the lab by working on your "Good Web Page". To start work on this page, just go to the left side of the FrontPage screen and double click on "good.htm". Before you start work on this page, confirm that you're working in the correct page by verifying that it says "good.htm" on the right side of the screen.

5. You'll spend about half an hour working on your "Bad Page". At the end of the lab , we'll have a contest to see who can produce the worst web page.

6. Next you'll get the remaining time to work on your "Good Web Page". We wont't have a contest on these just yet.

7. ****** Toward the end of class, we'll have you transfer all your work to the server . Please follow our instructions exactly or you may lose everything! *******