Graduate School Logo

2003

Summer Workshops on Teaching With Technology
pop up description layer
Overview
Day 1
Day 2
Day 3
Design
Prof. Dev.
Classroom
Contact
Home

If you need a more detailed, step-by-step tutorial for for some of the work covered in Days 1-3, please feel free to consult the archived pages for the 2002 and prior workshops here.

Credits
Help & Site Info

    
 
Workshop 2: Building Your Course Site


Pre-Workshop Assignment:
1) Review the site map you created in Workshop 1 for your course site. 2) Think more intently about what your course site might add to the traditional classroom experience. 3) Building from what you already started on the planning sheet you received in Workshop 1, expand on the draft of your course site. 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 3½" PC-formatted disk with any images and links that you have saved during Workshop 1, and your completed planning sheet.

Workshop Goals:
1. Construct an online draft of your course site as planned in Workshop 1.
2. Learn the basic Composer skills for web page construction, including inserting images, hypertext links, and mailto buttons. Instructors will be on hand to provide individualized attention to technical questions.

Workshop Outline:

I. Teaching and Technology: The Implications
        A. Achieving Course Goals
                1. The relationship between technology & teaching
                2. Learning to teach with (and without) technology
        B. Creating information literate students

II. Creating Your Site: Technical Skills
        A. Creating and Saving Text
        B. Editing Text
        C. Modifying Page Properties and Colors
                1. Page Title and Author
                2. Colors and Backgrounds
                3. Changing text color
        D. Tables
                1. Creating tables
                2. Formatting tables
                3. Entering text in tables
                4. Additional formatting
        E. Creating Links and Targets
                1. Building a Navigation Bar
                2. Creating a Mailto Link
                3. Creating a Hypertext Link
                4. Creating a Target/Anchor

III. Publishing Your Page

IV. Adding Graphics to Your Page
        A. Inserting Images from Disk
        B. Inserting Images Directly from the Web
        C. Publish your page

V. Homework



I. Teaching and Technology: The Implications

It's easy to overlook one of the key advantages of teaching with technology: it encourages teachers to reflect on the way they teach. After all, without first understanding why you organize specific course content the way you do, it will be impossible to begin to think about ways that technology may help you economize, enhance, or expand existing teaching methods.

If teachers are dedicated to enhancing learning through technology, it is important to use technology as a means to achieve pedagogical goals rather than as an end in itself. Technology generally and web-based resources specifically work best in the classroom when teachers marshal the impressive and powerful range of technological resources available to them in order to address particular problems or to compliment specific innovations.

A. Achieving Course Goals

The first step in developing strategies for maximizing learning through the use of technology is to reflect on your current teaching methods. When you created a draft of your course site, you considered how to translate your course goals into web elements in a coherent page and site. Now you will review and expand on that information, identifying potential difficulties in using these web elements in your course. From the ideas developed in the planning template you used in Workshop 1, synthesize your thoughts using this management handout. Some potential issues to consider (there may be others):

  • How much regular maintenance and attention will the site require from you?

  • Will your course site be primarily administrative and static (offering basic course information like a syllabus, contact information, and course policies that remain fixed throughout the semester) or will it be content-oriented and dynamic (including regular updates related to course content such as bibliographic references, lecture notes, discussion prompts, etc.)?

  • If you post primary course content (such as lecture notes, discussion questions, etc.) online, will access to content covered in class discourage class attendance?

  • Will students be required to visit the site regularly? If so, how will you track and score that requirement?

  • Will students be required to participate in online discussion forums? If so, how will they be moderated and evaluated, and will those contributions be used in class?

1. Understanding the relationship between technology and teaching

You have now identified a list of potential challenges that are involved in using the web to enhance your class, and some of the following questions may have came to mind:

  • How do I effectively integrate the web into the classroom so that students actually refer to it?

  • What happens if the server goes down?

  • How do I make sure that my students use communication forums effectively and don't just chat about issues unrelated to the course subject matter?

As this limited list suggests, teaching with technology demands not only basic computer literacy and fluency with technology but a clear vision of how a given technological resource can enhance learning and comprehension (and, equally important, how to teach without it if need be). Consequently, every use of technology in the classroom and as part of professional development should pass a basic credibility test: what benefit, enhancement, or (increased) functionality does this use of technology provide that couldn't be achieved in a low-tech setting? By answering this question, teachers can avoid complicating courses with useless and redundant layers of unnecessary requirements and instead focus on targeted areas where technology can noticeably enhance instruction.

2. Learning to teach with (and without) technology

You have just identified a number of management challenges that arise when integrating web technologies into your course. Now consider some of the ways to solve these issues. Although you may not be able to think of solutions to all of these management challenges, it is important to keep them in mind when using the web in your course. Some ideas on how to deal with the above issues might include:

  • To get students to use your course site and the resources available online, incorporate information or discussion from the web into your class discussion. This will reassure the students that the web is a valued resource and raise the level of online discussion.

  • Servers are not perfect, and you should expect to be left without server access at some point during the semester. To avoid being left with nothing to do in class when a server is unavailable, always have a back-up plan.

  • Communication among students can be regulated in a few ways. If you are using a newsgroup as the discussion forum, you can contribute answers to your students messages to help stimulate a discussion and kept it going. Another way to raise the level of discussion is to incorporate students' online discussion contribution into class lectures and conversations. Students will realize that keeping up with the online discussion is important to following classroom discussion. (For more information about these resources, see Using Expanded Web Resources below)

For a detailed list of questions to ask about course management and for a more detailed description of various situations that arise when managing web technologies in your course, see Section II of Summer98 Workshop 4.

B. Creating information literate students

Although for most graduate students it is increasingly common to think about integrating technology into the classroom, and though it may seem self-evident to you as in instructor that technology in the classroom is only as useful as the critical thinking you put behind it, your students may not see either of these things as clearly or easily as you. In an increasingly visual culture, students need instruction in how to become discriminating consumers of information.

Determining the value or authenticity of information on the web is very similar to evaluating books and journals. At the same time, the web and other interactive technologies present their own set of unique challenges, demands, and opportunities. One of the most significant is the nontraditional relationship between content and form on the internet. As you may know from personal experience, some of the best content on the web is often presented in some of the least visually appealing and most poorly edited packages. Conversely, as you may know from your experience as an instructor, the well-designed and carefully crafted site whose content may be suspect or inadequate by scholarly or scientific standards may nevertheless be cited by a student as a credible source because it looks credible.

Many viewers, conditioned by multimedia advertising and the aesthetics by which our highly visual popular culture operates, often infer from certain subtle and implicit but very identifiable elements of web sites (color schemes, font choices, graphic interfaces, idiomatic language) a degree of credibility that may be inappropriate or misplaced.

Therefore, teaching with technology also demands that teachers focus on the unique critical skills students need. See Virtual Salt: Evaluating Internet Research Sources for a detailed guide to assessing credibility of information online. Olin Library offers a helpful checklist for evaluating information online.

A further ramification of the addition of web resources to a course site is the need for students to learn how to cite such material effectively. Teaching with technology, then, also means teaching students how to integrate material accessed via new technologies into their coursework. You may want to include information in your course site on how to cite web resources in written work. For sites that have such information, see the Resources Page more on citation.

{top}

II. Creating Your Site: Technical Skills

With these broader conceptual issues in mind, you are ready to begin building your course site in Composer. Before beginning, take a minute to familiarize yourself with the Composer interface.

1. START - PROGRAMS - NETSCAPE COMPOSER
2. Mouse over the buttons in the tool bar; point but DO NOT click on each icon for a brief description of the function it activates. Note: many of the functions that you can access through pull-down menus are more easily available through these toolbar buttons.
3. CLOSE Composer


A. Creating and Saving Text

Start with a blank page:

1. Open Netscape by double-clicking its icon on the desktop.
2. FILE - NEW - BLANK PAGE.
3. Type the title of your course, for example, Wine History . Underneath this, type your name, and underneath your name, type “Washington University.”
4. SAVE to floppy disk.
5. In the FILE NAME field, type “CourseSite.” (Note: remember this name and exactly how you entered it, as it will become part of the URL for your course site. URLs are case sensitive.)
6. SAVE. You will be prompted to enter a title for your page. For now, “CourseSite” is fine.

B. Editing Text

You can change fonts and text attributes (italics, bold, underline, etc.) in Composer just like you do in Word: with the toolbar buttons at the top of the screen or with keyboard shortcuts.

C. Modifying Page Properties and Colors

Composer groups a number of basic options for pages (the page's title as it will appear in users' web browser, background and font color, borders, frames, etc) under the Page Properties.

1. Page Title and Author

a. FORMAT - PAGE PROPERTIES
This menu allows you to enter information about your site, making it possible for your audience to see what the site is and who composed it.
b. In the general tab, enter title and author.
c. OK
d. SAVE

2. Colors and Backgrounds

a. FORMAT - PAGE COLORS AND PROPERTIES
This menu allows you experiment with different page colors
b. In the Colors and Background tab, Click on the Background box and choose a color
c. OK
d. SAVE
e. Example Page

3. Changing text color
Before choosing a background and text color combination, be sure that the colors you use will not decrease readability.
a. FORMAT - PAGE COLORS AND PROPERTIES
This menu allows you to change the color of normal text and of text that indicates hyperlinks.
b. In the colors and Background tab CLICK in the respective boxes and choose the text color - OK.
c. SAVE.
d. Example Page
D. TABLES

1. Creating tables
A table is a useful way of presenting information in an organized fashion.

a. Place your cursor at the top of the page by putting it next to your course title and typing RETURN.
b. Select TABLE button in toolbar.
c. In the "New Table Properties" create a basic table (1 row by 2 columns): enter 1 in the ROWS and 2 COLUMNS. Note: you can change this later if you wish.
d. Do not select the box: "equal column widths" - OK.
e. SAVE.

2. Formatting. tables
You can adjust the tables properties (cell size, for instance) to help you organize information different ways.

a. Click once in left cell of table.
b. FORMAT - TABLE PROPERTIES (or right click mouse), a "Table Properties" window with three tabs pops-up
c. CELLS tab.
d. Make sure that next to the cell-size values you have selected % of page width (not pixels).
e. CELL WIDTH - 20.
f. VERTICAL ALIGNMENT - top.
g. OK. The left cell should now be smaller than the right cell
h. SAVE.

3. Entering text in tables
You'll notice that by manipulating table properties you have now created the basic structure of what is one of the most familiar web page formats and the format you'll use in the workshops to construct your course site: the body of the page occupies a dominant portion of the screen offset to the right, while the remainder of the page is devoted to a smaller column to the left where links to other pages in the site (homework assignments, class notes, discussion prompts, contact information, etc.) or to other resources related to your site (study aids, bibliographic references, etc.) are located. This left-hand column is often referred to as a navigation (or “nav”) bar, because it allows your audience to choose the way they wish to navigate through your site. Before placing links in the left cell, first place the body of the course site in the main cell on the right.
a. Highlight your title information.
b. CTRL + X.
c. Click once in the right-hand cell of the table.
d. CTRL + V. Your title information should now be in the cell.
e. Right-click and select TABLE PROPERTIES
f. CELLS.
h. VERTICAL ALIGNMENT - TOP - OK .
i. SAVE.
j. Example Page
4. Additional formatting
a. Highligh your title and select ALIGN CENTER button in toolbar.
b. Add color to your table: click once in left cell
c. Right-click, select TABLE PROPERTIES
d. CELLS - change color; use palette next to BACKGROUND COLOR
e. To remove or change the properties of table borders: Select the TABLE tab.
f
. Enter BORDER WIDTH: 0 pixels = no border.
g. CELL SPACE - 5: value determines distance between cells.
h. PADDING - 5: value determines proximity of text to table's edge.
i. OK.
j. SAVE.
E. Creating Links and Targets

Now you're ready to begin organizing content on your site's homepage. While a home page usually does contain a brief written description of the site and its contents, a home page's most important function is to show your audience the major navigation choices available to them. In order to this, you will create hyperlinks to pages within your site.

1. Building a Navigation Bar
Any audience familiar with web browsing will immediately look for some kind of list that tells them what the major organizational units of a site are. In the page structure you've adopted for your course site, the navigation bar (the cell on the left) is the most logical place to put this information. Most course sites include four major divisions: contact information, course schedule, list of resources, and announcements.
a. Click once in the left-hand cell.
b. Type “E-mail instructor.”
c. Below this, type “Syllabus.”
d. Below this, type “Resources.”
e. Below this, type “Announcements.”
f. Repeat steps above to create links to existing web resources.
g. Example Page
2. Creating a Mailto Link
A mailto link enables people to send you e-mail from your page by clicking on part of the text:
a. Highlight “E-mail instructor.”
b. Select LINK button from toolbar.
c. In LINK LOCATION, type mailto:your_artsci_login@artsci.wustl.edu (or appropriate email address).
d. OK. The text you selected should have changed color; it is now a link
e. SAVE.
f. Example Page
3. Creating a Hypertext Link
A hypertext link enables your audience to access other web pages from your page (either pages you have created or other existing web pages to which you wish to connect). To link to the syllabus that you published yesterday:
a. Highlight “Syllabus.”
b. Select LINK button from toolbar.
c. In LINK LOCATION, type the URL for your syllabus page.
d. SAVE.
e. Repeat this process to create links to existing web resources.
4. Creating an Anchor/Target
Hypertext links take your audience to the top of the page linked to. An anchor (or “target” in this version of Netscape Composer) is a hypertext link that allows you to take readers to a specific location on a page. Insert an anchor on your home page that will direct your audience to a spot where you will post course updates and announcements (this is meant to give you practice creating anchors; you can always change this and other elements later).

a. Below the table, press ENTER until the table is no longer visible.
b. Type today's date and a welcome message for the course
c. Highlight the date
d. Click TARGET icon.
e. Name the anchor “Announcements.”
f. OK.
g. Highlight “Announcements” in the navigation bar.
h. Select LINK button from toolbar.
i. Click the down arrow to the right of the NAME field and select the anchor you just created. Notice that in the link htere is a # before the name
j. OK.
k. SAVE.
l. Example Page.

{top}

III. Publishing Your Page

If you need help publishing your page, see directions from Workshop 1.

{top}

IV. Adding Graphics to Your Page


NOTE ON LINKS AND IMAGES:
There are copyright issues involved with using images and links on the web. In Workshop 3, you'll learn more about these issues. In the meantime, more information regarding copyright laws and fair use can be found here.

A. Inserting Images from Disk

Yesterday you learned how to save images from the web to a floppy disk; now you will retrieve these images and place them on your site:

1. Place the cursor where you want to insert an image. Note: You can move the image around later, so don't worry if you're not sure about where to put it now.
2. Insert disk.
3. Select IMAGE button from toolbar.
4. CHOOSE FILE
5. Select the image you want from the floppy drive - OPEN
6. Click the button at the bottom of this menu that says “Alt. Text/Low Res.” In the top box enter a description of the image so that text browsers and viewers with slower connection speeds will know what the image is while it's loading.
7. OK.
8. Alter image size by highlighting image, then selecting IMAGE button from toolbar.
9. SAVE.
10. Example Page.

B. Inserting Images Directly from the Web

You can also insert images from the Web without having saved them onto your floppy disk.

1. Open Navigator.
2. FILE - NEW -NAVIGATOR WINDOW.
3. Copy and paste this URL into LOCATION field http://www.wustl.edu/webstyleguide/
4. Select UNIVERSITY LOGOTYPE WEBSITE.
5. UNIVERSITY AND SCHOOL WEB LOGOTYPES.
6. Under SCHOOL WEB LOGOTYPES, select green link “Arts & Sciences.”
7. Right-click on the logo you wish to use.
8. COPY IMAGE LOCATION.
9. CLOSE Netscape
10.Click on the Image icon, place the cursor on "image location", CTRL + V.
11. SAVE.
12. Example Page.

Note:You can copy the backgrounds of sites you like in the same way you copy images, selecting SAVE BACKGROUND AS where above you selected COPY IMAGE LOCATION.

An alternative way of saving your Homepage is to call it index.html. Naming a page index.html will make it the default page for your artsci account. People will see this page when they type in http://artsci.wustl.edu/~your_artsci_login /index.html, or when they simply type http://artsci.wustl.edu/~your_artsci_login/

C. Publish your page
When you are finished with your site, publish it again. See Workshop 1 for directions on publishing pages to the web. Once you have published your page, check to see that all of your links work and are correct.

{top}

V. Homework
To learn more about broadening the functionality of a course site (1) look at some web activities and think about the pedagogical advantages and disadvantages to course-specific web activities as well as commercially produced web exercises. After completing the web exercise (2) consider some of the challenges and solutions for managing a course site.

 

{top}

 
 

 

 

    

 

 

 

    

 

 

 

    

 

    

 

 
   

5/22/03 5:45 PM