Workshop Resources Assignments Home Credits		Workshop 2:  Teaching and Technology:  Building Your Course Site Pre-Workshop Assignment: As you (1) fill out the planning sheet handout , think about the advantages and disadvantages of building a web site for your course.  (2) As you are sketching out your course site, what are your thoughts about how your course site might add to the what you could do in a traditional classroom? Post a message outlining your thoughts to the newsgroup. (3) Using the planning sheet handout you received in Workshop 1, create a draft of your course site on paper. (4) Copy two images and four site locations (URLs) onto your floppy disk to be used in creating an online course site. What You Should Bring: A PC-compatible disk with any images and links that you have saved during Workshop 1, and your completed template . Workshop Goals:  In this workshop participants will construct an online draft of their course site as planned in Workshop 1.  Participants will learn the basic elements of web page construction, including images, hypertext links, and mailto buttons.  Instructors will be on hand to provide individualized attention to technical and pedagogical questions.  You will create a draft of your own course site with a link to your online syllabus. Workshop Outline: I.  Creating Your Site:  Technical Skills      A.  Creating and Saving Text      B.  Editing Text      C.  Modifying Page Properties and Colors      D.  Creating Tables      E.  Creating Links and Targets II.  Publishing Your Page III. Communicating Through Design      A.  Inserting Images      B.  Creating an Interesting Background IV.  Review:  Publishing Your Page V. Adding a Resources Page VI.  Homework

NOTE ON LINKS AND IMAGES:
There are copyright issues involved with using images and links on the Web.  Information regarding copyright laws and fair use can be found at http://artsci.wustl.edu/GSAS/Webworkshops02/ws3/copyright.html
 

I.  Creating Your Site:  Technical Skills

A.  Creating and Saving Text

Start with a blank page:

1.  Open up Netscape by double-clicking its icon on the desktop.
2.  From the drop-down menu select "File," then "New," then "Blank Page."  You should now be looking at a blank "Page Composer" window.
3.  Let's begin by creating a title--a short list of information about your course.  Type the title of your course, for example, PoliSci 338 The World Cup as Politics.  Underneath this, type your name, and underneath your name, type Washington University.
4.  Before going any further, let's save this page:  To save the page, go to the drop-down menu, select "File," then "Save As."
5.  You will be saving this file onto your disk, so make sure that it says "3 1/2 Floppy (A:)" in the "Save in" field.
6.  In the "File name" field, type in CourseSite.
7.  Now click on "Save."  A window will ask you to enter a title for your page.  For now, CourseSite is fine.
8.  It is a good idea to periodically save your site while your work is in progress.  Just go to "File" and select "Save" every ten minutes or so.  At the end of the session, we will review how to publish your page.
9.  To see what this webpage looks like at this point, click here .

Now that we have a basic page saved, let's practice using Netscape Composer's toolbar by editing the page's title information (course title, your name, Washington University).  Since the title information is the first thing people will see, it is a good idea to make the text stand out.  We can do this by modifying the font size and style.

1.  Boldface your title information (course title, your name, Washington University):  Highlight the text and go up to the drop-down menu.  Click on "Format," "Style," and "Bold."
2.  Increase the font size of your course title:  Highlight the text, and from the drop-down menu click on "Format" and "Size."  Choose a font size.
3.  Center your title information:  Highlight the text, and from the drop-down menu click on "Format," "Align," and "Center."
4.  You can experiment with any combination of font sizes and styles.
5.  Save your work.
6.  To see what this webpage looks like at this point, click here .

Now let's fill in the basic page properties.  This screen allows you to enter in information about your site, making it possible for the reader to see what the site is and who composed it.

1.  From the drop-down menu select "Format," then "Page Colors and Properties."
2.  Click on the tab marked "General."
3.  Type in only the title and author.  In the "Title" box, type in the name of your course, and in the "Author" box, type in your name.
4.  When you are done, click on "OK."
5.  Save your work.

1.  From the drop-down menu select "Format," then "Page Colors and Properties."
2.  Click on the tab marked "Colors and Background."  This menu lets you change text and background colors.
3.  Change the background colors:  Click on the button marked "Background" and choose a color.
4.  When you are done, click on "OK."
5.  Save your work.
6.  To see what this webpage looks like at this point, click here .

1.  Click on "Format," then "Page Colors and Properties."
2.  Click on the "Colors and Background" tab.
3.  By clicking on the different blocks of color, you can change the color of both your normal text and of your linked text.
4.  When you are done, click on "OK."
5.  Save your work.
6. To see what this webpage looks like at this point, click here .

Before we add more text to our sites, we need to learn how to present information in an organized way.  A table is the most useful way to do this:

1.  Place your cursor at the top of the page by putting in next to your course title and hitting return.
2.  From the drop-down menu, select: "Insert," "Table," and "Table."  A "New Table Properties" menu should appear.
3.  To make a basic table (1 row and 2 columns) enter 1 in the field "Number of Rows" and 2 in the field "Number of Columns."  Note:  If you wish to change this later, you can adjust these specifications as you add and edit text.
4.  If the box next to "Equal Column Widths" is checked, click on the box to clear it.
5.  Now click "OK."  A table will appear.
6.  Save your work.
7.  To see what this webpage looks like at this point, click here .

1.  Place your cursor into the left cell of your table.
2.  From the drop-down menu, select "Format," then "Table Properties."
3.  Click on the tab marked "Cell."
4.  In the "Cell width" field, change the 100 to 20.
5. Under "Vertical Alignment" choose "top".
6.  Click on "OK."  The left cell should now be smaller than the right cell.
7.  Save your work.
8.  To see what this webpage looks like at this point, click here .

1.  Highlight your title information.
2.  From the drop-down menu, select "Edit," then "Cut."
3.  Place the cursor in the right-hand cell of the table. Note:  if the cursor doesn't want to go there, go back to the smaller left-hand cell, and press the "Tab" button.  This should move the cursor into the next cell.
4. Once you are in the right-hand cell, go to the drop-down menu, select "Edit," then "Paste."  This places your title information into the cell.
5. From the drop-down menu, select "Format", then "Table Properties."
6. Click on the tab marked "Cell."
7. Under "Vertical Alignment" choose "top". Click "OK."
8.  Save your work.
9.  To see what this webpage looks like at this point, click here .

1.  Center the text:  highlight the text and click "Format," then "Align," then "Center."
2.  Add color to your table:  place your cursor in the smaller left cell, then click "Format," and "Table Properties."
3.  Choose the tab marked "Cell," and change the color of this cell by clicking on the square next to "Use Color."  Click "OK."
4.  If you want, you may remove the table borders.  This will make your table boundaries invisible, or, if you use color, will make your table appear as a solid block of color.  Click "Format," and "Table Properties."
5.  Click on the tab marked "Table."
6.  Set the "Border Line Width" to 0.
7.  Set the "Cell Spacing" to 5.
8.  Set the "Cell Padding" to 5. Click "OK."
9.  Save your work.
10. To see what this webpage looks like at this point, click here .

In the course site we are making, the body of the text will be in the right-hand cell.  In addition to the title information, you may want to include a short paragraph about the course, the prerequisites, and your expectations.  However, you can use your site to provide your students with a rich array of sources, and to give them a way of contacting you, and discussing topics of interest arising from class discussion.  In the left-hand cell, you can provide a field of links to resources that will take your students beyond the classroom:

Let's first type in a list that we will want to link to other locations:

1.  Place your cursor in the left-hand cell.
2.  Type E-mail instructor.
3.  Below this, type Syllabus.
4.  Below this, type Resources.
5.  Below this, type Announcements.

A mailto link enables people to send you e-mail from your page simply by clicking on part of the text:

1.  Highlight E-mail instructor.
2.  Highlight this text, and from the drop-down menu, select "Insert," then "Link."
3.  In the box:  "Link to a page location or local file" type mailto:your_artsci_login@artsci.wustl.edu
4.  Click on "OK."  The link will have changed color.
5.  Save your work.
6.  To see what this webpage looks like at this point, click here .

A hypertext link enables people to access other Web pages from your page.  Let's make a link to the syllabus you published yesterday:

1.  Highlight Syllabus.
2.  From the drop-down menu, select "Insert," then "Link."
3.  In the box:  "Link to a page location or local file" type the URL for your syllabus page.
4.  Click on "OK."  Note:  If you do not have a syllabus on-line or cannot find the URL, make a link to your academic department.  Type in and highlight the name of your department, select "Insert" and "Link," and enter your department's URL.  If you do not know your department's URL, click here for a directory .
5.  Save your work.
6.  To see what this webpage looks like at this point, click here .

1.   Highlight Resources .
2.  From the drop-down menu, select "Insert," then "Link."
3.  In the box:  "Link to a page location or local file" type the URL for the resource page we will make later on in today's workshop.  For uniformity, link to this address: http://artsci.wustl.edu/ ~your_artsci_login /Resources.html.
4.  Click on "OK."
5.  Save your work.
6.  To see what this webpage looks like at this point, click here .

A target is a link to a location within the same page and enables your readers to find the information they want quickly and efficiently.  Let's practice by making a section of your front page a place for messages pertaining to class.

1.  Now place your cursor below your table and press "Enter" several times until the table is no longer visible.
2.  Type in today's date and a welcome message for the course, such as 6/1 Welcome to PoliSci 338.  This space will be used for class announcements.
3.  Highlight the date, and from the drop-down menu, select "Insert," then "Target."
4.  The window that appears should list the welcom message as the target of your link.
5.  Click on "OK."
6.  Now go back up to your left-hand cell, and highlight the word Announcements.
7.  From the drop-down menu, select "Insert," then "Link."
8.  In the box saying "Select a named target in current page," highlight the welcome message you typed.
9.  Click on "OK."
10.  Save your work.
11.  To see what this webpage looks like at this point, click here .

Let's publish your site so we can see if your links work.  We learned how to do this yesterday, but let's review:

1.  Save your work one last time.
2.  From the drop-down menu, select "File," then "Publish."
3.  In the "Page Title" field, enter the title Course Site, if it is not already there.
4.  In the box labeled "HTML Filename," the name CourseSite.html should appear.
5.  In the box labeled "HTTP or FTP Location to Publish To," enter your publishing path.  You should have
this written down or saved on disk from yesterday.
6.  To get your publishing path from your disk, make sure your disk is in the disk drive.  Click on "Start," then "Programs," Accesories," "Notepad."
7.  From the Notepad drop-down menu, select "File," then "Open."
8.  In the "Look in" window, make sure "3 1/2 Floppy (A:)" is selected.
9.  Choose the file "publishpath," then click on "Open."
10.  Your publishing path should now appear in Notepad.  Highlight it, then choose the drop-down menu "Edit," then "Copy."
11.  You can now close Notepad by clicking on the "X" in the upper right hand corner.
12.  In the box labeled "HTTP or FTP Location to Publish To," type ftp://artsci.wustl.edu
13.  Hit "Ctrl-V" to paste the rest of your publishing path into the box.
14. Insert your artsci username and password, select "Files associated with this page," click on "Select All," and click on "OK."
15.  The computer should return a prompt saying your files were uploaded successfully.  Click on "OK."
16.  Let's make sure we published our sites.  From the drop-down menu, choose "File," then "New," then "Navigator Window.".  A new browser window should appear.  Enter the URL for your site:  Remember, its http://artsci.wustl.edu/~your_artsci_login /CourseSite.html

A.  Inserting Images

Let's make your site a bit more attractive by inserting an image.  Yesterday you learned how to save images from the Web onto a floppy disk; now we will learn how to retrieve these images and put them on your site:

1.  Place the cursor where you want your image.  You can move the image around later, so don't worry if you're not sure about where to put your image.
2.  Make sure your floppy disk is inserted.  Click on "Insert," then "Image."
3.  Next to the blank box, click on "Choose File."
4.  Make sure you are looking in the field that says "3 1/2 Floppy (A:)."
5.  Click on the image file you want to insert, then click on "Open."  Another field will open.  Click on "OK."
6.  Your image should now appear on the page.
7.  You can enlarge or reduce the image by highlighting it, then clicking on "Format," then "Image."
8.  Save your work.
9.  To see what this webpage looks like at this point, click here .

1.  Open up a Navigator window.  From the drop-down menu, choose "File," then "New," then "Navigator Window."
2.  Under "Location" at the top of the screen, type http://www.wustl.edu/webstyleguide/
3.  Click on the link titled "University Logotype Website."
4.  Click on the link at the bottom titled "University and School Web Logotypes."
5.  Under the section "School Web Logotypes" click on the green link "Arts & Sciences."
6. This page has an Arts & Sciences Logo that you can use
7.  Using your mouse, right-click on the logo.  A drop-down menu will appear.
8.  Select "Copy Image Location."  The image is now copied to your clipboard.
9.  Close this Netscape window by clicking on the X in the upper right corner.
10.  Your "Page Composer" window should reappear.  Place the cursor where you would like to insert your image.
11.  From the drop-down menu, select, "Edit," then "Paste."  The image should appear on your page.
12.  Save your work.
13. To see what this webpage looks like at this point, click here .

You can also give your page a background instead of solid color:

1.  You can copy the backgrounds of sites you like in the same way you copy images.  Simply place the cursor over the background, and right-click your mouse.  A window will appear.  Click on "Save Background as," and save it to your floppy disk.

• The Web has catalogs of different backgrounds available for you to use.  A helpful site is aaa-backgrounds.com .  Here you will find dozens of backgrounds and images to put onto your site.

2.  After you have saved a background onto a floppy disk, you can add it to your page:  At the bottom of the "Colors and Background" tab, click on "Choose File."  Make sure your floppy disk is inserted, and that you are looking in the field marked "3 1/2 Floppy (A:)."
3.  Click on your desired file where you have saved your background image.  Then click on "Open," and then "Choose File."  This will turn your file into the background for your site.
4.  Aaa-backgrounds.com allows free use of their backgrounds, as long as you link to their page.  To do this, move the cursor below the question of the week you typed earlier.
5.  Type Background courtesy of http://www.aaa-backgrounds.com/
6.  Highlight "http://www.aaa-backgrounds.com/"
7.  From the Insert menu, choose "Link"
8.  In the link field type: http://www.aaa-backgrounds.com/ , then hit enter.
9.  To see what this webpage looks like at this point, click here .

When you are finished with your site, publish it again.  Once more, for review, here are the publishing instructions:

1.  Save your work one last time.  Make sure the "Save in" field says "3 1/2 Floppy (A:).
2.  From the drop-down menu, select "File," then "Publish."
3.  In the "Page Title" field, enter the title "Course Site," if it is not already there.
4.  In the box labeled "HTML Filename," the name "CourseSite.html" should appear.
5.  In the box labeled "HTTP or FTP Location to Publish To," enter your publishing path.  You should have this written down or saved on disk from yesterday.
6. Insert your artsci username and password, select "Files associated with this page, click on "Select All," and click on "OK."
7.  The computer should return a prompt saying your files were uploaded successfully.  Click on "OK."

You can now continue to add text, links, and images to your course site...

V. Adding a Resources Page
You've already added links to other pages of yours on the main course page you've just created.  It is often also helpful to have a separate page of resources, usually links to outside sites, for your students.  To create this page, follow the instructions below:

1. Open you main course page in Netscape Navigator.  This page can be found at http://artsci.wustl.edu/ ~your_artsci_login/CourseSite.html
2. Now, open this page in Netscape Composer by going to the File menu and selecting "Edit Page."
3. You can now edit this page.  There is an advantage in editing the main page and making a resources page: you don't need to insert a background or configure the page colors to match.  They already do.
4. First, we want to rename this page.  Go to "Page Colors and Properties" from the Format menu.  Make sure the "General" tag is selected.  In the Title field, add a add the following after the title ": Resources. "  Then, click on OK.
5. Let's make sure to save the page at this point.  From the File menu, select "Save as."  In the file name field, type Resources.html and then click okay.
6. Now, underneath the course information, type Resources.  You can then edit the size of this text by highlighting it and then going to the Format menu and selecting Size
7. Since this is the resource page, you no longer need a link to it.  Highlight the "Resources" link in the left table cell and then press the delete key.  You also no longer need the messages link on the resource page, either, so highlight that link and press the delete key.
8. You have now eliminated the messages link, but not the actual messages.  Scroll down the page until you see the messages.  Highlight it/them, and the target located right before it, then press delete.
9. It is a good idea to have a link back to your main course page on the resources page.  Underneath the syllabus link in the left cell of the table, type Home.  Then, highlight it, choose Link from the Insert menu.
10. In the "Link to" field, type the address of your main course page (probably http://artsci.wustl.edu/ ~your_artsci_login/CourseSite.html)
11. Now that we have done all the formatting work, we can now add the links.  You should have saved the URLs of appropriate links to your disk as part of yesterday's homework.  Open Notepad by clicking on "Start," then "Programs," "Accessories," "Notepad."
12. From the Notepad drop-down menu, select "File," then "Open.  "In the "Look in" window, make sure "3 1/2 Floppy (A:)" is selected.
13. Choose the file "resources," then click on "Open."
14. The resources you saved last night should now appear in Notepad.  Highlight the first URL, then choose the drop-down menu "Edit," then "Copy."
15. Click on the Composer tab at the bottom of the screen so that you are once again looking at your resource page.
16. Underneath the table, type the name of your first link (for example, FIFA Website).  Then, highlight the text and select Link from the Insert menu.  In the Link to field, hit Ctrl-V to paste the address of the URL you just copied from Notepad (in this case, http://www.fifa.com).  Click on "OK."  You should now have a link on your resources pages.
17. Hit enter one or two times, and then type the name of the next link, for example, US Soccer.  Click on the Notepad tab at the bottom of the screen.
18. Highlight the address of your second saved link, then choose the drop-down menu "Edit," then "Copy."
19. Click on the Composer tab at the bottom of the screen so that you are once again looking at your resource page.
20. Highlight the name of the second link and then choose "Link" from the drop-down "Insert" menu.
21. In the Link to field, hit Ctrl-V to paste the address of the URL you just copied from Notepad.  Click on "OK.  Your second resource should now be linked.
22. Be sure to save your work!
23. You can continue to add as many links a s you wish by following the steps above.
24. Now, publish the work.  If you need help on publishing, see the review section here .

VI.  Homework

You have now created a basic course site with links to a syllabus and a resource page.  In this workshop we will consider different ways to expand the use of our course site. To learn more about new elements used in course sites (1) complete our web activity and contemplate the pedagogical advantages and disadvantages to instructor-created web activities as well as commercially produced web exercises. After completeing the web exercise. (2)  Consider some of the challenges and solutions for managing a course site, and contribute to the newsgroup one potential challenge - and its respective solution(s) - in incorporating web technology into your course.