I. Planning Your Project

A. Web Pages and Sites - What's The Difference?

Before discussing the specifics of a course site, it's useful to know the general distinction between a web page and a web site. A web page is a single file that could contain any kind of text, an image, sound files or any combination of three. A web site is a collection of web pages that users navigate through hyperlinks, which are connections from one page or file to other pages or files related to one another.

A course site is a related collection of internet files consisting of information and links for and about your course. There are no universal guidelines for creating a course site; it can be as simple as an online syllabus or as complex as a series of interconnecting pages and links that include tutorials, study aids, and interactive resources. Before you make your own site, it will be helpful for you to familiarize yourself with different models for course sites. The following sample of sites will give some idea of the range of course sites:

• Africa: Peoples and Cultures
• Chemistry 252
• Philosophy 326: Theories and Concepts
• French 312

B. A Closer Look at Course Sites

1. Evaluating Sites

Spend a few minutes browsing this list of course sites. Pick a site to evaluate. Note at least two things you like about the site and two things that you would do differently. You may want to use this evaluation form to help you decide what questions are most important to ask about course sites.

2. Discussing Site Features

Looking beyond your discipline may help give you new ideas and insights into planning your own course site; therefore, spend a few minutes sharing the site you evaluated with other workshop participants. In your group, share your observations about what you like and do not like about a particular site and list the five best features of a course site.

{top}

II. Mapping a Site

In order to design an effective web site, you'll need to understand the structure and logic of well-designed pages and sites. Mapping a web site - that is, charting the way information is organized - will help you discover the design strategies that other people have used (successfully, or, you may discover, not so successfully) to determine how users will navigate the site's content. By mapping a site, you can begin to discover what assumptions that site's designers made about how users would move through the site and access its information. Choose one of the web sites you just looked at and recreate its structure on paper. Answer the following questions (you may find it most helpful to plot the structure graphically):

Sample sitemap from http://www.virtualparks.org/html/sitemap.html

• How is the home page arranged?
• What are the various elements that make up the home page and the site?
• What links are provided from the homepage?
• How many levels of depth are there in the site?
• Is there a link back to the home page from all of levels?
• Does the content on one page lead logically to the next?
• Is the site organized intuitively (that is, do you have to spend a lot of time searching for the information or links you want)?

{top}

III. Creating a Draft of Your Own Course Site

Now that you have seen several course sites and thought about how they are structured, you are better prepared to start planning your own site. In order to determine your site map, you first need to establish clear objectives and limits for what your site will do. This planning template will help you set the parameters of your project by asking you to consider the priorities of your course.

• What are the goals of my course?
• In what ways can technology help me achieve these goals?
• How much time will the web elements of my course demand from me and my students?
• Will I include room for student input on my course site?
• Will I be the only user of this site, or will other instructors take over next semester?

A. Mapping Your Own Course Site

With the answers to these questions in mind, sketch on paper what you envision your site looking like. Try to think like someone coming to the site for the first time and organize elements on the page intuitively. Your goals in creating a site map should be: first, to create a clear and logical hierarchy of information (most important content should be featured most prominently and so on down the least important); second, to anticipate what choices your audience will want to make given the site's information and the way it is presented. Some things to keep in mind:

Identify clusters of content and information (course policies, course schedule, contact information and availability, related resources, homework assignments, etc.) as a way of organizing your site; your audience will be able to determine more quickly where they need to look for the information they want if your site's content clusters are clear and logical (don't put office hours under course schedule, for instance).

Always provide your audience with a navigation path back to the pages through which they will successively be passing (the web version of a trail of bread crumbs out of the forest); don't rely on the BACK button to do your work for you.

Organize the elements on a given page in a way that is both logical and visually appealing; if all content and information runs together in a big, undifferentiated chunk, your audience won't know where to start looking.

B. Collecting Materials to Link to from Your Course Site

Keep in mind that all kinds of helpful information related to your course as well as vital resources for your students may already exist in a useable form online (bibliographies, citation guides, study aids, and so on). By locating and linking to those sites, you can save yourself the time you might have otherwise spent creating original pages. Remember, though, to credit fully all the sources you use.

1. Finding resources

Spend a few minutes searching for existing web sites that you might want to link to from your course site. When you find a site that you would like to use, save the address on your disk in order to access and link to it in later workshops:

1. Search for web sites related to an aspect of your course. (Note: If you do not know how to search for sites and images, follow these directions on simple and advanced web searches.)
2. Once you locate a site you like, highlight the URL (Uniform Resource Locator, or, more simply, the address of the site) with your mouse.
3. EDIT - COPY (or use the shortcut: CTRL + C; for more shortcuts click here.
4. Open Microsoft Word: FILE - NEW.
5. EDIT - PASTE (CTRL + V).
6. In order to help you identify the site you have just saved, type in a keyword or phrase above the URL.
7. Collect as many sites as you find useful. (Remember that unless they are carefully chosen, too many links may distract and disorient your audience.)
8. SAVE: name the file “resources.” You will use these links tomorrow when you begin building your web page(s).

2. Saving Images

One basic image that is useful for your course site is the Washington University logo (including the logo on all course pages helps establish visual consistency with other university web pages and signals visually to your audience that this site is an integrated part of the university). Save the logo to your floppy disk from the Style Guide for Web Publishing.

1. Go to http://logo.wustl.edu.
2. Under WEB LOGO TYPES, select WASHINGTON UNIVERSITY IN ST. LOUIS.
3. Place your cursor over the version of the logo you want to use.
4. Right-click, select SAVE IMAGE AS.
5. SAVE.

{top}

IV. Creating and Publishing a Web Page

Popular browsers like Netscape Navigator and Microsoft Internet Explorer are often sold with companion software applications that allow you to create and edit web pages. These applications are called HTML editors because they help you create web pages without requiring you to know how to write HTML code (HTML stands for “HyperText Markup Language”). There are different kinds of HTML editors, from simpler applications like Netscape Composer that allow you to create web pages with basic functionality, to more complex programs like Dreamweaver and Flash that allow you to create more elaborate and technically sophisticated pages with special effects and other advanced features. In these workshops, you will use Netscape Composer. Though its limitations (and the time constraints of the course) may not allow you to recreate all the dazzling effects and designs you have encountered online, it will allow you to create and maintain a valuable site with all the functionality commonly associated with web pages.

A. Creating a Web Page of Your Syllabus

The simplest way to create one of the most important components of your course site is to COPY your syllabus from a Word document and PASTE it into a new Composer page.

1. CLOSE all programs except “Microsoft Word.”
2. OPEN your syllabus in Word.
3. SELECT ALL (Ctrl + A)
4. EDIT - COPY.
5. CLOSE Word.
6. OPEN Composer (a new, blank page should appear). From Navigator (what opens when you click on the desktop icon), either select “Composer” from the “Communicator” drop-down menu or simply press Ctrl + 4.
7. EDIT - PASTE (Note: some strange line breaks or other formatting irregularities may appear; this is typical when pasting text from Word to Composer. You will have time later to clean up the html version of your syllabus.)
8. FILE - SAVE.
9. In SAVE-IN field, select "3½ FLOPPY (A)."
10. Name the file “syllabus.html.”
11. SAVE.

B. Publishing an HTML Document on the Web

Though the HTML document you just saved is technically a web page, it is not yet accessible online because it has not been uploaded to a server that is part of the world wide web. That is, it has not been published to the web yet. To publish your page, you will place a copy of it onto the university server space that has been allotted to you as a university student in a folder that will upload files you place in it to the web (there is also a folder in the space where your email is stored). The simplest way to publish your page is via WSFTP, a program that can be downloaded to your home computer if you don't already have access to it (usually for free from sites like www.download.com or www.hotfiles.com). WSFTP is available on all university computers. (WSFTP is also a valuable way to transfer files between locations - home to school, from computer to computer, etc. - without a floppy disk or without having to email attachments.)

1. START - PROGRAMS - WSFTP.
2. In the Session Properties dialog box, enter the following information:
ProfileName = artsci or appropriate server you use for email.
User ID = your telnet login name.
Password = the password for your email. Make sure that the box for “Save Password and Login” is NOT checked, otherwise the next WSFTP user may be able to access your account.
3. OK.

The next screen that appears will divided into two sections: on the left, you have access to the files in the computer from which you logged on to WSFTP (including the floppy disk inserted in the computer); this will change depending on what computer you use to access WSFTP. On the right are the various folders that comprise your space on the university server; when you log on to WSFTP with your Washington University username and password, the right side of the WSFTP screen will always appear the same no matter where you log on. You will now be able to pass files from your personal server space to any computer with access to WSFTP. The folder in your university account (on the right) that uploads files to the web is "public_html." Anything you want to publish to the web, including any images or sound files, must be saved in this folder.

1. On the right, DOUBLE CLICK on “public_html.”
2. On the left, locate “syllabus.html” and CLICK ONCE on it.
3. Click on the arrow key that points to the right. (Transfer files from your university account to a local computer disk by using the other arrow. Your university account can hold files of all types, including Word documents.) Note: If you use any images or icons, be sure to place them into public_html by selecting and transferring all of them. Remember: An image will NOT appear on your web page unless it is saved in your public_html folder.
4. EXIT.
5. Examine the results by accessing your page through Netscape Navigator: http://artsci.wustl.edu/~your_artsci_login/your_document_name_here.html. Your web page should appear. If it doesn't, examine the URL to be sure you used this formula precisely.

{top}

V. Homework

You will need to bring the following to Workshop 2:

• The map you drew of your course site.
• Two images and four site locations on your PC formatted floppy disk; these images and sites should be ones that will be useful to you as you build your site.
• Be sure to save the URL of the site from which you save images so that you can properly credit their sources.