CS 107: Pictures and Sounds: Programming with Multimedia

Spring 2008

Lab 1: Creating a Course Web Page

Introduction

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:

Your name.
A link¹ to the CS 107 web page. (Highlight the text you want to create the link for and then add the link address in the box on the bottom labeled link)
An organized structure where you will list work you do in this course, such as a list or a table. Your web page must be organized in such a way that it is easy for us to find work for the purpose of grading.
An image. This could be a picture of you, or a picture of anything else that is tasteful. The easiest way to add an image to your page is to first copy it directly into the CS107Web directory that you created. Be careful not to use copyrighted images. There are a number of fun images that can be found at http://www.cs.kzoo.edu/cs107/gifs.

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

Your nickname.
Your hobbies.
Your year.
Other courses you are taking.
Any other interesting web pages you know about.

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 k00ab01@kzoo.edu, 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 "Address:" box enter peopleftp.kzoo.edu . 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 web_page 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 http://kzoo.edu/k00ab01/CS107Web/coursePage.html (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: Sending Email

YOU MUST DO THIS PART AFTER YOU HAVE DONE PART 1.

Send an email to your instuctor with the following information:

The location of the web page you created in Part 1.
Your computer science autobiography

What is a computer science autobiography?

Your autobiography should answer the following questions:

What is your background with computers?
What is your math background?
What are your computer science goals: what do you hope to get out of this course, and do you think you may want to take more courses in computer science?

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

When you send your email, the subject should look like:

CS107: Lab 1: your name (include first and last name; no nicknames!) For example, Prof. Cutter would send her message with the subject line:

CS107: Lab 1: Pamela Cutter

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: http://www.cs.kzoo.edu/cs107 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.