Course concept and development, Summer 1997 by Liberman Fellows: Genevieve Cory, Michael Orlando, Stephanie Tucker; Liz Peterson, Associate Director of the Teaching Center; Elaine Berland, Associate Dean of the Graduate School of Arts and Sciences

Session Leader: Stephanie Tucker
Assisted by Genevieve Cory, Michael Orlando, Liz Peterson

Session 2: Using the Web as a Teaching Tool

What do you learn? - In this session, participants will create course homepages linked to course documents such as syllabi, homework sets, class notes, etc. In addition, workshop discussion will focus on generating ideas for making use of the Web as a teaching tool, both in and out of the classroom.

What do you need? - The prerequisite is Workshop session 1 or basic familiarity with HTML programming. Participants should bring a PC disk with a course syllabus or homework set that they would like to post on the Web.

Goals of this workshop:

1. Technical:
1. Participants will create a draft their own course page by manipulating and personalizing the template provided.
2. Participants will convert a word document (syllabus) to HTML using the Office '97 HTML editor. They will then FTP this document into their public_html directory.
2. Conceptual:
1. A short presentation will be given on uses of the web to facilitate communication outside of the classroom. Participants will learn how to set up an on-line discussion forum. E-mail will also be discussed.
2. A short presentation on teaching and research resourses on the web will be given with suggestions on incorporating e-texts and on-line journals into one's course(page).
3. A short Presentation of web-based exercises and projects will be followed by a group discussion and brainstorming session. If time allows, participants will begin outlining a web exercise for their own course.

I. Getting Started
A. The Plan
As with any project, it is important to plan your course page before starting to build it. You will want to set the perameters of your project by asking yourself a few questions like:

1. Who is my audience?
   • Am I primarily targeting the group of students with whom I meet weekly?
   • Do I want to reach distance learners?
   • Should my virtual classroom create a space where students from all over the world can meet and learn?
2. What advantages does this medium provide for my particular discipline?(What could be achieved more effectively through traditional methods?)
3. What skills do I want my students to develop by using this medium? Which do they already possess?
4. If I create web-based projects for my students, how much time do I want them to devote to them?
5. What skills will I need? Do I possess them already? Do I have the time and resources to develop them?

II. Learning from Others

Course Pages

Many of you may not know where to start when planning your course pages. In order to get your creative juices flowing you should take a look at some course pages others in your field have created. I have collected a list of course pages for you for this purpose. Click on the button to the right to access them.

Evaluation

I recommend evaluating some of these pages before beginning with your own. I have provided a few guidelines for such an evaluation at the beginning of the list of course pages. Choose one of the course pages in your discipline to evaluate now, note at least two things that you like about the page and two things that you would change. You can go directly to the evaluation guidelines by clicking on the button to the right.

Template 2

Template 1

III. Copying the Template
I have created two templates for a basic course page using many of the elements found in the collection of course pages provided. You can use these templates as a starting point for your own course page. Click on the buttons to the right to view them. I encourage you to personalize the templates by deleting want you do not want and changing the pertinent information. Before you can do this you will have to copy the source code into your own file. You should remember how to do this from Session 1: Putting a Page on the Web, but we will go through the steps together to refresh your memory.

1. Create a file for your course page
1. Minimize Netscape and open Telnet
2. Login as if checking your e-mail (type your login name and password)
3. Do not type Pine - Instead type cd public_html to change your directory
4. create a new file by typing: pico course.html
5. change the permissions so that you will have "permission" to view the new file from your browser (Netscape). Type chmod a+r course.html
2. Copy the template's source code (HTML)
1. Minimize Telnet and maximize Netscape. If you are not already viewing one of the templates, go to one now
2. Select View from the toolbar to view document source. The source will be opened on the Notepad
3. click on Edit to select all
4. click on Edit again and copy the source
5. Exit the source by exiting the Notepad
3. Insert the HTML code into your new file
1. Minimize Netscape, Maximize Telnet
2. Select Edit from the Terminal toolbar and paste what you have just copied into your new file
3. Make a few changes:
   • Change the Title
   • Change the Header
4. Save the changes by pressing Ctrl O
4. View your new Course Page
1. Minimize Telnet, Maximize Netscape
2. Enter the URL for your course page:
   http://artsci.wustl.edu/ ~YOUR_LOGINNAME/course.html

You have successfully created the first draft of your course page. A discussion of the basic elements of the course page you have chosen as your model follows:

return to index

A. General Information About Your Class
Most likely you will want to begin your course page by providing general information about your class. Here is an example of how you could prepare such information using a (hidden)table:

If you like this model, open the view window and copy (Ctrl C) the table from the document source. Then paste the HTML into your own file where you can edit it. This heading is also included in the template.

return to index

B. Creating an Index
Next you could provide an index to your page in the form of an unordered list with links to your syllabus, grading policy, assignments, on-line resources, etc.:

If you prefer, you could use an ordered list (numbered list):

If you are feeling creative you might try creating a table like to one below as an index. This adds a more professional edge to your page:

You can create individual pages for each of the links in your index or you might prefer making anchors in one larger syllabus page which includes your required texts, grading policy, etc. When you click on a link made to an anchor it takes you to a different part of the same page, whereas a regular link takes you to a new page.

1. First create a link to the anchor in the index by typing:
   <a href=#NAMEOFANCHOR> anchored text </a>
2. Then create the anchor at the appropriate place - where you want the link to jump to - by typing:
   <a name=NAMEOFANCHOR> anchored text</a>

Syllabus

I have choosen to create one large syllabus file with anchors for course objectives, requirements, and texts. Click on the button to the right to see what I mean.

return to index

C. Putting Your Syllabus On-line
If you have already written a syllabus for your class and do not wish to rewrite it in HTML, I suggest converting the document with an HTML editor. We will be using Office '97 to convert the syllabus you brought with you today. Once you have converted your syllabus you will simply FTP it into your public_html directory and make a link to it on your course page. Since you have already converted a document in session 1: Putting a Page on the Web, this exercise will be no problem, right? I've included a few instructions below in case you need a little help.

1. Insert your disk into the A drive (the little slot)
2. Open Word by clicking on the icon on the desktop
3. Click on file in the tool bar and select open to open your document. Note: it will be on the A drive
4. Click on file again and select SAVE AS HTML
5. You have converted your file, now you just have to FTP it into your public_html file. You remember how to do this right?
1. Close Word, Open FTP
2. Enter your login name and password
3. Open the A drive to select syllabus.html on the left
4. Click on your public_html file on the right to open it
5. click on the arrow pointing right
6. Link to the syllabus on your course page by typing:
   <a href="http://artsci.wustl.edu/~YOUR_ LOGINNAME/syllabus.html"> what you want to appear as clickable text</a>

Syllabus

Once your syllabus is on-line you can manipulate it by adding links which make it more interactive. Take a look at the sample syllabus I have linked to this page by clicking on the button to the right.

return to index

D. Using a Table
Rather than linking to your syllabus, you might prefer putting it directly on the course page. However, since syllabi are usually quite extensive, it is probably better to offer a condensed version with links. Professor Zapalac in the History department has created an interesting way to provide an overview of her syllabus for her students in the format of a calendar.

You can make your own calendar fairly easily by using the TABLE MAKER Sam Choukri from the U of Missouri-Columbia offers at: http://www.missouri.edu/~wwwtools/tablemaker/. D.J. Quad provides a very useful TABLE TUTORIAL on his web site if you are interested in writing the HTML yourself. Check it out at: http://www.quadzilla.com/tabletutor/tabletutor.htm

I created the months you'll need for fall semester 1997. This calendar is inlcuded on the template you copied. Be sure to add links to your syllabus on the appropriate dates as I've done for August 27th:

E. Adding Images
Finally, you might want to beautify your page with some images.

Here is how to insert an image:

Here is how to make an image a link:

Here the link is indicated by a colored border <a href="URL"><img src="NAMEOFIMAGE"></a>	To erase the border add the border=0 command <a href="URL"><img src="NAMEOFIMAGE" border=0 ></a>

Although the pictures of my cat and dog are certainly adorable, they may not be the right images for the look you wish to create on your course page.

There are a variety of ways to find images more appropriate for your page:

1. There are many free graphics on the web. You can find these graphics by doing a search on a search engine like HotBot for " free gifs," "free graphics," "free animation," whatever. Usually pages offering free graphics ask only that you link to them in your page. Here are a few links to some pages offering nice free graphics:
• http://www.solarflare.com/freeart/index. html (very tasteful themes)
• http://www.microsoft.com/workshop/ design/mmgallry/(The Internet Explorer Multimedia Gallery offers multimedia material under a variety of themes including gothic, nature, sports, and classical art - check out individual gifs from Microsoft's Sitebuilder at:http://www. microsoft.com/gallery/files/images/default.htm
• http://nzwwa.com/mirror/clipart/ (The ClipArt Universe has backgrounds, icons, and dividers)
• http://www.users.interport.net/~traff/ graphics/ (if you need balls, this is the place)
• http://www. zeldman.com/toc.html (Jeffery Zeldman has amazing pop-arty graphics which he encourages you to steal)
2. You can also use your own images, photographs, drawings, etc. by scanning them. This is the method I used with the above pictures of Marco and Brno.
3. If you are artistic you can design original graphics with software like Adobe Photoshop.

• In person: Arts and Sciences Computing can help with many questions and can help you scan pictures and manipulate images as well as help you with basic html.
• Online: start with http://artsci.wustl.edu/ASCC/Help/HowToHomePage. html. It will lead you to many more guides. One especially good on-line guide is The Beginner's Guide to HTML.
• Session I: Putting a Page on the Web
• Workshop III: Using the Web for Professional Development

[an error occurred while processing this directive]