|
pop up description layer
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.
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.
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.
|
| |
|