1
??????? 204420 ??????????????????????????? ??????
?? 5 ??????????????????????????????????????????

2
5.1 ????????????????????????
5.2 Web - based Instruction (WBI)
3
5.1 ????????????????????????
Same Time / Same Place
Same Time / Different Place
Different Time / Same Place
Different Time / Different Place
(The 4-Square Map of Groupware Option-Johansen et
al.)
4
5.2 Web-based Instruction (WBI)
5.2.1 ????????????????????????? WBI 5.2.2
????????????? WBI 5.2.3 ??????????????????????
WBI
5
5.2.1 ????????????????????????? WBI
1) ??????????? WBI 2) ???????????? Web
??????????????????? ?????????? 3)
?????????????? WBI
6
?. ??????????? WBI
The instruction delivered via the Web to a
remote audience is called web-based instruction
(Relan Gillani, 1997).
7
????????????????????????????????????? ??????????
?????????? (hypermedia) ??????????????????????????
??? ? ??????????? Web ????????????????????????????
????????????????????????????????? (Khan,1997)
8
?. ???????????? Web ?????????????????????????????
1. The Web as Source of Information 2. The Web
as Electronic Book 3. The Web as Teacher 4. The
Web as a Communication Medium between
Teacher and Students
9
?. ?????????????? WBI
- Simply developing a Website with links to
other webpages does not constitute instruction
(Ritchie Hoffman, 1997).
10
3) ?????????????? WBI ???
- What is unique about WBI is not its rich mix
of media features such as text, graphics,
sound, animation, and video, nor its linkages
to information resources around the world, but
the pedagogical dimensions that WBI can be
designed to deliver (Reeves, 1997).
11

• ????????????????????????????????????? (Web-based
  Instruction-WBI) ?????????????????????????????????
  ?? ??????????????????? ???? ??????? ?????????
  ????? ???????????????????????? ???????????????????
  ?????????????????????????? ???????
  ??????????????????????????????????????????????????
  ???????????????????????????????????????

12
5.2.2 ????????????? WBI
1) Instructional Interaction -
???????????????????????????????????? 2) Social
Interaction - ?????????????????
???????????????????
13
WBI with Instruction-only Interaction Mode
--A WBI that provides features for
instructional interaction including hyperlinks,
FAQs, exercises, and email with instructor.
14
WBI with Social and Instructional Interaction Mode
--A WBI that provides features for social
interaction and instructional interaction
including email, email distribution lists,
chatgroups, bulletin boards, hyperlinks, FAQs,
and exercises.
15
5.2.3 ?????????????????????? WBI
1) Links 2) HCI
16
Links
??????????? Links Links ??????????????????????????
????????? page, field ????????? Links 1.
????????? (Directionality one - way links,
two-way links) 2. ??????????????? (Labeling
names, standard icons) 3. ??????????? 4.
????????????????? (grouped together) 5.
????????????? (Visibility)
17
???????????????? Links
1. ????????????-??? ??????-????
??????????????????????????? 2. ?????????????????-?
?? ?????????????????????????????????
????????????????????? ????????????????????????
??? ??????????????????? 3. ?????????????
Scrolling ????????????????????????????????
?????? ???? x of y Strategy 4. ???????????????????
??????????????????????????????????????
18
Human-Computer Interface (HCI) Design
??????????? HCI - The layer of the software that
communicates directly to and interacts with
users (Marra, 1996). ?????????????????? HCI - all
messages to users - interactions, flow, or
navigation between screens or other various
parts of the program - interrelationship between
messages within the program and screen
designs.
19
?????????????? HCI
1. ???????????????????????????????????????????????
HCI 2. ??????????? Interface ????????????????????
????? ??????????????????? 3. ?????? Interface
?????????????????????????????????????
???????????????????????? 4. ?????? Interface
????????????????????????????????
???????????????????????????
20
?????????????????????????????? WBI
- Choose a style and stick to it. - Avoid too
much text. - Only use graphics for a purpose. -
Dont have lots of hyperlinks scattered through
the text. - Use meaningful headings and
subheadings. - Complex graphics will take time to
load so put a simple text explanation. -
Avoiding using too many fonts (no more than
two). - Edit text thoroughly.