ITEC 745

1
ITEC 745

• Instructional Web Authoring I
• Instructor Ray Cole

Week 12
2
Recall from 3 Weeks Ago
Multiple Choice Page-Type Graphic
Hyperlinks,CSS Box Model
3
Multiple Choice Page-Type
Instructions in the left column
Questions in the right column
4
Multiple Choice Page-Type

• Checkboxes are graphics embedded into the page
  with the ltimggt tag
• checkbox_checked.gif
• checkbox.gif

Feedback is placed in a red box when the learner
chooses an incorrect answer. This box is
implemented purely with CSS .answer_box_no
padding 10px width 610px border 2px
solid ec3333
5
Multiple Choice Page-Type
Checkbox graphics are surrounded with anchor tags
(ltagt) to make them clickable. Each is a link to a
new page.
Feedback is placed in a green box when the
learner chooses a correct answer. This box is
implemented purely with CSS .answer_box_yes
width 610px border 2px solid
009933 padding 10px
6
Multiple Choice Page-Type
The Next button is a graphic, wrapped between lta
hrefq2.htmlgt and lt/agt tags.
7
Multiple Choice Page-Type
To prevent a blue outline from appearing around
the checkboxes and the next and back buttons, you
have to give the ltimggt tag an attribute of
border0. This can be done in the Dreamweaver
Properties panel for each image, which is also
where you can turn the graphic into a link.
8
Multiple Choice Page-Type
The answer block is indented because a CSS
indented class is applied to it .indented
margin-left 1em
9
Multiple Choice Page-Type
As before, the checkboxes are graphics (ltimggt
tags with border0 attributes), surrounded by
anchor tags to make them clickable. To give them
a little bit of visual breathing room, these
images also have an hspace3 attribute to
prevent the text from pressing right up against
them.
The back button, like each checkbox, is a gif
image. It is surrounded by lta hrefq1.htmlgt and
lt/agt tags to make it clickable.
10
This Week
Writing Style Guidelines,File and Folder
Management, URL Details
11
Writing for E-learning
12
Passive vs. Active Voice
Here are two versions of the same paragraph,
adapted from page 101 of Isaac Asimovs 1962
book, The Genetic Code
Passive Voice Active Voice
In 1952, a crucial experiment on bacteriophage (bak-tee-ree-oh-fayj), a variety of virus that infests bacterial cells, was performed by two biochemists, Alfred D. Hershey and M. Chase. A cell is entered by one, multiplication occurs so that the viruses become numerous, and finally the cell is killed by them. The cell membrane is burst and, where the cell had been entered by one virus, emergence is done by many. In 1952, two biochemists, Alfred D. Hershey and M. Chase, performed a crucial experiment on bacteriophage (bak-tee-ree-oh-fayj), a variety of virus that infests bacterial cells. They enter a cell, multiply and become numerous, and finally kill the cell. The cell membrane bursts and, where one virus had entered, many emerge.
Asimovs version of this paragraph is the one in
the Active Voice column. Why is it so much
easier to read and understand than the one in the
Passive Voice column?
Read http//www.winthrop.edu/wcenter/handoutsandl
inks/passive.htm to learn more
13
ITEC 715
Writing Handouts

• Available at the class web site
• ITEC 745 Point of View.doc
• ITEC 745 Describing Screen Elements.doc
• ITEC 745 Bulleted Lists.doc
• ITEC 745 ID Style and Writing Checklist
• See http//www.oldkingcole.com/itec745/

14
ITEC 715
Addressing the Learner/Avoiding Passive Voice

• Intro Portion of Text Spoken in a Botony Computer
  Game

Formal Version This program is about what type
of plants survive on different planets. For each
planet, a plant will be designed. The goal is to
learn what type of roots, stem, and leaves allow
the plant to survive in each environment. Some
hints are provided throughout the program.
Personalized Version You are about to start a
journey where you will be visiting different
planets. For each planet, you will need to design
a plant. Your mission is to learn what type of
roots, stem, and leaves will allow your plant to
survive in each environment. I will be guiding
you through by giving out some hints.
From Moreno, R., and Mayer, R.E. (2000).
Engaging Students in Active Learning The Case
for Personalized Multimedia Messages. Journal of
Educational Psychology, 93, 724-733 (as reported
in Ruth Clark and Richard Mayers book E-Learning
and the Science of Instruction, page 137)
15
ITEC 715
Addressing the Learner/Avoiding Passive Voice

• Four other similar studies surveyed
• Results? Clark Mayer report
• In five out of five studies, students who
  learned with personalized text performed better
  on subsequent transfer tests than students who
  learned with formal text p. 136-7
• Overall, participants in the personalized group
  produced between 20 and 46 per cent more
  solutions to transfer problems than the formal
  group. p. 137

16
ITEC 715
More on Writing Style

• Other things you should standardize
• Use of fonts
• Introduction of new terms
• Introduction of new acronyms

17
ITEC 715
More on Writing Style

• Other things you should standardize
• Use of fonts
• Introduction of new terms
• Introduction of new acronyms

18
ITEC 715
Final Project Examples

• Last year, student topics included
• A beginners guide to painting

19
ITEC 715
Final Project Examples

• Last year, student topics included
• Creating a digital portfolio
• Earthquake safety

20
ITEC 715
Final Project Examples

• Navigation 2 Styles
• Permanently on-screen in left column or
• On-screen only when learner clicks Main Menu
  button

21
Dreamweaver File and Folder Maintenance, URLs
22
Folder Management and URLs
Your web root folder public_html URL to your web
root folder http//userwww.sfsu.edu/your
account/ Segregate your ITEC 745 pages into a
subfolder called itec745 located directly under
your web root. If you take other SFSU classes
that require you to place web pages on your SFSU
server space, then place them in another
subfolder (e.g., itec845).
23
Folder Management and URLs
Your web root folder public_html URL to your web
root folder http//userwww.sfsu.edu/your
account/ URL to your itec745 subfolder
http//userwww.sfsu.edu/your account/itec745 URL
to a different class subfolder (e.g., itec845)
http//userwww.sfsu.edu/your
account/itec845 In either case, your web root and
site definition remain the same!
24
Folder Management and URLs
Creating subfolders
Right-click on your site
25
Folder Management and URLs
Creating subfolders
Click New Folder
26
Folder Management and URLs
Creating subfolders
Name your new folder itec745
27
Folder Management and URLs
Creating subfolders
Right-click on your new itec745 folder and choose
New Folder from the pop-up menu
28
Folder Management and URLs
Creating subfolders
Name your new subfolder final_project. Place all
your final project files (including your XHTML,
CSS, and image files) in this folder or in
subfolders under it. To do this, simply use Save
As from the Dreamweaver menu when you are ready
to save your file for the first time, and then
browse to this final_project folder before
clicking OK.
29
ITEC 715
URLs and Subfolders

• Each subfolder you create gets added to your URL.
  To reach web pages located in public_html/itec745/
  final_project http//userwww.sfsu.edu/your
  account/itec745/final_project/
• E.g., to reach a page called module2.html
  located in the final_project subfolder, use the
  URL http//userwww.sfsu.edu/your
  account/itec745/final_project/module2.html

30
ITEC 715
URLs and Subfolders

• Sometimes people like to keep all of their image
  files in a separate folder, so their folder
  hierarchies look like this
• Web root
• itec745
• final_project
• web_page.html
• CSS_page.css
• Images
• photo1.jpg
• next.gif
• back.gif

31
ITEC 715
URLs, Subfolders, and dot-dot

• If web_page.html needs to display photo1.jpg,
  then the image tag must give either an absolute
  URL (ltimg srchttp//userwww.sfsu.edu/your
  account/itec745/images/photo1.jpg altmy photo
  /gt) or must use .. in a relative URL to move
  up in the file tree structure (ltimg
  src../images/photo1.jpg altmy photo.jpg /gt)
• web root
• itec745
• images
• photo1.jpg
• next.gif
• back.gif

Web_page.html is in this folder. To name the path
to photo1.jpg relative to the current folder, you
have to first go up one folder level, to
itec745, then down a different branch to
images. Two dots (..) in a URL mean go up one
folder level. So inside web_page.html, you have
to use the relative URL ../images/photo1.jpg
final_project web_page.html css_file.css
32
ITEC 715
Special meaning of index.html

• The SFSU web server is configured to let you
  browse the contents of any folder in your web
  space

33
ITEC 715
Special meaning of index.html

• However, if you place a file with the special
  name index.html in a folder, the web server will
  send index.html whenever it receives a request to
  view a the folder that contains it.
• The first page of your course should be named
  index.html for this very reason.

34
For Next Week

• Download the Final Project Guidelines from the
  class web site http//www.oldkingcole.com/itec745
  /final_project_guidelines/ITEC_745_Final_Project_G
  rading_Guide.doc
• Begin working on your final project!