Lab 1: Creating a Course Web Page



This lab has two parts. The purpose of the first part is to create a course web page that will link to your projects. In the second part you will send your instructor an email to let her/him know where your page is, and to give them some information on your computer science background. If you get stuck, ask for help from the instructor or a TA.

These parts must be done in order! (Part 1 first, then Part 2.)

Part 1: Creating a Course Web Page

Create folders named CS107Web and CS107Labs (or something similar) in your directory on the M: drive. When you save your new web page, you will be saving it into the CS107Web folder. When you are saving labs from within JES, save them to the CS107Labs folder.

Creating Your Web Page

For this course, you will create a web page that represents a portfolio of your projects. The course staff will use this page to track your progress throughout the course, so it is important that you keep it up-to-date. Whether or not you already have a personal home page, you should create a separate page for this course.

To create the content for your web page, you will use a web page editing program called Dreamweaver. Dreamweaver is a WYSIWYG (What You See Is What You Get) web page editor. It allows you to lay out a web page in much the same way you would lay out a text document using Microsoft Word. One major difference between Dreamweaver and Word is that Dreamweaver generates HTML files that can be edited directly. We'll talk more about HTML throughout the course, but one thing that you should be aware of now is that different web-browsers may render the same HTML file in slightly different ways.

In order to get started with Dreamweaver, first launch the program from the start menu; it is located under the heading "Macromedia". Then, from Dreamweaver's file menu, create a new file. For "Category:" you should choose "Basic page", and the type of page should be "HTML". You should now be confronted with a large empty window. Creating your web page is as easy as typing content into this window. You can change the formatting and add links using the "Properties" toolbar at the bottom of the screen. If you are unsure what a particular button does, try hovering the mouse over it; a brief description should appear.

Your course page must contain at least the following information:

You are also welcome to include any additional information that you choose:

Your Email Address on a Web Page

You can decide whether or not you want to put your email address on your web page. There are web crawlers that look for email addresses on web pages and then send spam to them. If you do put your email address on a web page, then you might want to disguise it in some way.

If your user id is k00ab01 then you don't want to list it as, but rather as k00ab01{at}kzoo{.}edu, or in some other format that is easy for a human to read, but doesn't look like an e-mail address to a crawler. You can also disguise it by including it as an image.

Publishing Your Web Page

Connect to the FTP server using the FileZilla program available from the Windows Start menu. In the "Host:" box enter . You should use the same user name and password that you use to access your email account. Click QuickConnect.

In the left side of the window, find the CS107Web directory that you created earlier in the lab. On the right hand side select your web directory. For example if your email address is k04zz04 the appropriate directory will be k04zz04 (if your email address starts with k06 or k07, if not then it will be ~k04zz04). You can copy the contents of your web_page directory to the web server simply by dragging them into your web directory.

Check to see that your page is in the proper place by typing (where k00ab01 is your email address if you added the ~ above you must also add it here, and coursePage.html is whatever you named your course page in Dreamweaver) in the location window of your web browser. Be sure to test all of your links to see if they still work.

Part 2: Submitting via Moodle


Create a Word document with the following information:

What is a computer science autobiography?

Your autobiography should answer the following questions:

The autobiography doesn't need to be very long. A couple of short paragraphs will be fine.

Before submitting this document via Moodle, if you are not already a participant in the COMP107 course, you must join this class on Moodle (ask your instructor or a TA if you're not sure how to do this). To submit your document, click on the Link to Lab 1 and then browse to find the Word file you just made. Then click to upload the file. If you have any difficulties or questions with these, speak to your instructor or a TA.

1. A note on links: You can add two different types of link to your web page. One possibility is to spell out the complete location of the link target, for example: is the complete address of the course web page. You need to use links of this sort to link to information outside of your CS107Web directory. Another possibility is to specify link targets using relative locations. For example if you wanted to create a link to a second web page that is located in the same directory as your course web page, all you need to enter into the link window is the name of the second web page: e.g. secondPage.html. A common mistake is to create a relative link in your page, and then forget to copy the target file over to the web server. If your links don't work after you move your web page to the server, this might be the problem.