Ebook Creating web-based training: A step-by-step guide to designing effective e-learning – Part 1

Creating Web-Based Training


This Page Intentionally Left Blank


Creating Web-Based Training
A Step-by-Step Guide to Designing Effective E-Learning

Joseph T. Sinclair
Lani Wallin Sinclair, Ph.D.
Joseph G. Lansing

American Management Association
New York • Atlanta • Chicago • Kansas City • San Francisco • Washington, D.C.
Brussels • Mexico City • Tokyo • Toronto


Special discounts on bulk quantities of AMACOM books are
available to corporations, professional associations, and other
organizations. For details, contact Special Sales Department,
AMACOM, a division of American Management Association,
1601 Broadway, New York, NY 10019.
Tel.: 212-903-8316. Fax: 212-903-8083.
Web Site: www.amacombooks.org
This publication is designed to provide accurate and authoritative
information in regard to the subject matter covered. It is sold with the
understanding that the publisher is not engaged in rendering legal,
accounting, or other professional service. If legal advice or other expert
assistance is required, the services of a competent professional person

should be sought.
Library of Congress Cataloging-in-Publication Data
Sinclair, Joseph T.
Creating Web-based training: a step-by-step guide to designing effective
E-learning / Joseph T. Sinclair, Lani Wallin Sinclair, Joseph G. Lansing.
p. cm.
ISBN 0-8144-7107-2
1. Employees—Training of—Computer-assisted instruction. 2. Employees—
Training of—Computer network resources. 3. Web sites—Design. 4. World
Wide Web. I. Sinclair, Lani Wallin II. Lansing, Joseph G. III. Title.
HF5549.5.T7 S5577 2001
658.3Ј124Ј02854678—dc21
2001022798
᭧ 2002 Joseph T. Sinclair.
All rights reserved.
Printed in the United States of America.
This publication may not be reproduced,
stored in a retrieval system,
or transmitted in whole or in part,
in any form or by any means, electronic,
mechanical, photocopying, recording, or otherwise,
without the prior written permission of AMACOM,
a division of American Management Association,
1601 Broadway, New York, NY 10019.
Printing number
10 9 8 7 6 5 4 3 2 1


This Page Intentionally Left Blank

To my father, Joseph Treble Sinclair, Jr., a professor of geography
at Eastern Michigan University, who was a dedicated educator


Contents
Acknowledgments ...........................................xxix
Introduction ..................................................xxxiii

I Creating Web Pages .........................................1
1. Web Pages ...................................................... 3
Web Pages and WBT ................................................. 4
Technically Speaking .................................................. 4
Where Do Web Pages Go? ......................................... 6
How Does It All Work? .............................................. 7
Create and Test ................................................................... 7
Upload ................................................................................. 8
Host Computer ................................................................... 8
Naming ............................................................................... 8

VII


VIII

CONTENTS

Request ................................................................................ 9
Receives and Views ............................................................. 9

Web Pages Everywhere ............................................ 10
Distribution .............................................................. 10
Presentation .............................................................. 11

Summary .................................................................. 11

2. Creating a Web Page ................................... 13
Authoring Software .................................................. 14
Netscape Composer ................................................. 15
Microsoft FrontPage Express ................................... 16
From the Web to Your Computer ........................... 18

Time to Start ............................................................ 19
Text for Tutorials ..................................................... 19
Using Netscape Composer ....................................... 20
Using FrontPage Express ......................................... 22
Testing Your Work ................................................... 25

Getting the Right Look ............................................. 26
Making a Table in Composer .................................. 27
Adjusting the Table .......................................................... 29
Placing the Text in the Table .......................................... 29
Typeset the Headings ...................................................... 31
Changing the Type Size .................................................. 31

Making a Table in FrontPage Express ..................... 32
Adjusting the New Table ................................................ 34
Placing the Text in the New Table ................................ 35
Typeset the Headings ...................................................... 37
Changing the Font Size ................................................... 38

More Practice ........................................................... 39
Summary .................................................................. 40


CONTENTS

IX

3. Adding Images ..............................................41
Prepare Your Workplace .......................................... 43
Image Layout with Composer ................................. 44
Improving the Look .................................................. 47

Image Layout with FrontPage Express .................... 51
Improving the Look .................................................. 53

Summary .................................................................. 56

4. Adding Links ..................................................57
Creating a Link with Composer ............................... 59
Creating a Link with FrontPage Express ................. 60
The HTML .............................................................. 62
Images and Links ..................................................... 63
Link an Image with Composer ................................. 63
Composer Image Link ..................................................... 63
Link Back Using an Anchor ............................................ 65

Link an Image with FrontPage Express .................... 67
FrontPage Express Link .................................................. 68

Link Back .......................................................................... 69

To an Image ............................................................. 71
URL Essentials ......................................................... 72
Absolute Reference ................................................... 72
Relative Reference .................................................... 73
Advance ............................................................................. 73
Retreat ................................................................................ 74
Retreat and Advance ......................................................... 74
Test All Links ................................................................... 74

Good Practice ........................................................... 75

Create an Email Link ............................................... 75
Summary .................................................................. 75


X

CONTENTS

II. Refining Web Pages ..................................... 77
5. Webtop Publishing ....................................... 79
The Critical Role of Text ......................................... 80
Fonts ......................................................................... 80
Layout ....................................................................... 81
A World of Examples ............................................... 82
Other Template Resources ...................................... 83

Typesetting ............................................................... 83

Follow the Traditional Guidelines ........................... 83
All Caps ............................................................................. 83
Bold .................................................................................... 84
Bold Italics ........................................................................ 84
Border ................................................................................ 84
Bullets ................................................................................ 84
Italics ................................................................................. 84
Numbers ............................................................................ 84
Rules .................................................................................. 85
Superscripts and Subscripts ............................................. 85
Type Size .......................................................................... 85
Underlines ......................................................................... 86
Headings ........................................................................... 86
Headlines .......................................................................... 86

Add an Image ........................................................... 86

Beyond Basic Typesetting ......................................... 87
Text for Tutorial ....................................................... 87
Using Composer ....................................................... 88
Add Another Table ........................................................... 88
Add an Image .................................................................... 89
Bold and Italic .................................................................. 90
Change Type Size ............................................................ 91
Change Typeface (Font) ................................................. 91


CONTENTS

XI

Headings ........................................................................... 92
Bulleted Lists .................................................................... 92
Centering ........................................................................... 93
Numbered Lists ................................................................ 93
Rules (Horizontal Lines) ................................................. 94
Tables for Organizing ...................................................... 94

Using FrontPage Express .......................................... 95
Add Another Table ........................................................... 96
Add an Image .................................................................... 96
Bold and Italic ................................................................... 97
Change Type Size ............................................................ 98
Change Typeface (Font) ................................................. 98
Headings ........................................................................... 99
Centering ........................................................................... 99
Bulleted Lists .................................................................... 99
Rules (Horizontal Lines) ............................................... 100
Numbered Lists .............................................................. 100
Tables for Organizing .................................................... 101

Summary ................................................................ 103

6. Color and Images .......................................105
Color ...................................................................... 106
Text and Background ............................................. 106
Consistency in Color Use ....................................... 107
Browser-Safe ........................................................... 108
RGB ........................................................................ 108
Hexadecimal ........................................................... 109

Colors in Composer ............................................... 111
Colors in FrontPage Express .................................. 113
Design Elements ..................................................... 116
Image Preparation .................................................. 116
Web Image Formats ............................................... 116


XII

CONTENTS

GIF .................................................................................. 117
JPEG ................................................................................ 117
PNG ................................................................................ 117

Image Editors ......................................................... 118
Edit an Image ......................................................... 119
Edit Smart ....................................................................... 119
Contrast ........................................................................... 120
Brightness ........................................................................ 121
Cropping ......................................................................... 122
Resizing ........................................................................... 123
Sharpen ........................................................................... 125

Making Text Images .............................................. 125
Icons and Design Elements .................................... 128

Summary ................................................................ 129

7. Navigation and Menus .............................. 131
Using Tables for Menus ......................................... 132
One Row, Multi-Column ....................................... 132
Composer ........................................................................ 132
FrontPage Express .......................................................... 137

Variations with Tables ........................................... 142

Imagemaps ............................................................. 143
Composer ............................................................... 145
Web Hotspots ......................................................... 147

Summary ................................................................ 151

III. Publishing Web Page ................................ 153
8. Web Hosting ............................................... 155
Intranet Host .......................................................... 156
Webmaster ............................................................. 157
Content Management Application ......................... 157


CONTENTS

XIII

Internet Host .......................................................... 158
Where to Go ........................................................... 159
Minimum Requirements ............................................... 159

Pricing ..................................................................... 161

Pick a Name ............................................................ 161

Uploading Your Web Pages ................................... 161
Using WS_FTP Pro ............................................... 162
Connecting ............................................................. 162
Uploading ............................................................... 165
Other Functions ...................................................... 166

Authoring Program Uploads .................................. 167
Composer ........................................................................ 167
FrontPage Express .......................................................... 167

Summary ................................................................ 168

IV. WBT Basics .................................................169
9. Defining WBT ..............................................171
Text ........................................................................ 172
So What? ................................................................ 172
The New Text ........................................................ 173

Images .................................................................... 174
Something More ..................................................... 174
Page Treatment .............................................................. 174
Graphic Information ...................................................... 175
Enhanced Book .............................................................. 175

Animation ............................................................... 176

Interactivity ............................................................ 177
Sound ..................................................................... 178

Ease of Production ......................................................... 178
Synthetic Voice ............................................................... 179


XIV

CONTENTS

Video ...................................................................... 180
Embedded Programs .............................................. 181
Online Software ...................................................... 182
Data ........................................................................ 183
Summary ................................................................ 183

10. Interactivity and Usability ....................... 185
Interactivity ............................................................ 186
Linear ..................................................................... 186
Branching ............................................................... 188
Deep ................................................................................ 188
Shallow ............................................................................ 189

Simulations ............................................................. 192

Usability .................................................................. 194
Links ....................................................................... 195
Navigational Links ......................................................... 195
Common Links .............................................................. 195
Convenience Links ......................................................... 195
Gratuitous Links ............................................................ 196
Link Tips ......................................................................... 196

Navigation .............................................................. 197
Hierarchical Navigation ................................................ 197
Nonhierarchical Navigation .......................................... 201

Metaphors .............................................................. 202
Other Factors ......................................................... 203
Graphic Design .............................................................. 203
Scrolling .......................................................................... 203
Download Time ............................................................. 204
Movement ....................................................................... 204
Bottom of the Page ......................................................... 204

Storage Structure .................................................... 205
Storage by Media ................................................... 205


CONTENTS

XV

Storage by Sections ................................................. 205
Storage by Sections and Media .............................. 206
Not Website Structure ............................................ 206

Testing .................................................................... 206
Summary ................................................................ 207

11. Supplementary Protocols .........................209
Email ...................................................................... 210

When ...................................................................... 211
What ....................................................................... 211
How ........................................................................ 212

Mailing List ............................................................ 212
Critical Mass ........................................................... 213
Bulletin Board ......................................................... 214
Variations ............................................................... 215
Archives .................................................................. 216

Chat ........................................................................ 216
Net Phone .............................................................. 217
Telephone .............................................................. 218
Teleconferencing .................................................... 218
Whiteboard ............................................................ 220
With the Web ......................................................... 221
Temporary Website ................................................ 222
Multiple Programs .................................................. 224

Collaboration Software .......................................... 225
Summary ................................................................ 226

12. Types of WBT .............................................227
Interactivity ............................................................ 228
Text ........................................................................ 229


XVI

CONTENTS

Questions & Answers .............................................. 229
Scope ................................................................................ 230
Frequency ....................................................................... 231
Sequence ......................................................................... 231
Interactive Use ................................................................ 232
Programmed Answers .................................................... 234

Sidebars and Footnotes .......................................... 236
Sidebars ........................................................................... 236
Footnotes ......................................................................... 237

Navigation .............................................................. 238
Normal Navigation ........................................................ 239
Navigation Menus Used As Quick References ............ 239

Branching ............................................................... 240
Help ........................................................................ 243

Voice ....................................................................... 244
Short Sound Bites ................................................... 245
Audio Introduction ........................................................ 245
On Demand .................................................................... 246
Authority ......................................................................... 246

Long Sound Bites ................................................... 246
On Demand .................................................................... 247
Dynamic Presentation ................................................... 247

Entire Sound Presentations .................................... 247

Sound in General ................................................... 247
Two or More ................................................................... 247
Archive ............................................................................. 248
Just an Alternative? ........................................................ 248
Help ................................................................................. 248

Sound Effects and Music ........................................ 249
Voices ..................................................................... 249

Video ...................................................................... 250
Embedded Programming ....................................... 250


CONTENTS

XVII

Placement ............................................................... 251
Dedicated ................................................................ 251
Text Enhanced Calculators .................................... 252
Redundancy ............................................................ 252
Use .......................................................................... 252

Online Software ..................................................... 253
Data ........................................................................ 254
Intranet ................................................................... 254
Internet ................................................................... 254
Rare Materials ........................................................ 255

Dynamic Devices ................................................... 256

Dynamic HTML .................................................... 257
Animation ............................................................... 257

Summary ................................................................ 261

V. Advanced Web Techniques .........................263
13. Embedded Programming .........................265
What Can You Use? .............................................. 266
CGI ......................................................................... 266
Java ......................................................................... 267
JavaScript ............................................................... 267

Where? ................................................................... 267
What Can It Do? .................................................... 268
Real Estate Calculator ............................................ 268
Garden Planner ...................................................... 272
Web Page Devices .................................................. 274

Four Sources .......................................................... 274
ISPs ......................................................................... 274
Shareware and Freeware ........................................ 275


XVIII

CONTENTS

Programmers .......................................................... 275
Authoring Software ................................................ 276

Disadvantages ......................................................... 276
Case Study .............................................................. 277
Pop-Up Window ..................................................... 278
Summary ................................................................ 281

14. Forms ........................................................ 283
What For? ............................................................... 284
How They Work ..................................................... 285
The Form ............................................................... 286
One-Line Text ........................................................ 286
Text ........................................................................ 286
Checkbox ................................................................ 287
Radio ...................................................................... 287
Multiple Choice Menu ........................................... 287
Buttons ................................................................... 288

Composer ............................................................... 288
FrontPage Express .................................................. 288
CGI Script Form Resources ................................... 290
The Delivery ........................................................... 291
Mail To .................................................................. 291
Application ............................................................. 292

Summary ................................................................ 293

15. Readable Text ........................................... 295
General Guidelines ................................................. 296
Color and Background ........................................... 296
Type Size ................................................................ 297
Text Columns ......................................................... 298

XX

CONTENTS

Data Accumulation ................................................ 329

Summary ................................................................ 330

VI. Advanced WBT Techniques ....................... 331
17. Streaming Sound ...................................... 333
Production .............................................................. 334
The Goal ................................................................ 334
Equipment .............................................................. 335
Lines ................................................................................ 335
Connectors and Cables .................................................. 335
Microphones ................................................................... 337
Mixers .............................................................................. 338
Recorders ......................................................................... 338
Examples ......................................................................... 339
Radio Shack ............................................................ 339
Marantz .................................................................. 339
Your Computer ....................................................... 340

Other Recorders .............................................................. 341

Recording ............................................................... 341
Adjustments .................................................................... 341
Where? .................................................................... 343

How? ....................................................................... 344

Voice Techniques ........................................................... 344
The End of the Line ...................................................... 346

Information ............................................................ 347

Digitizing ................................................................ 347
Equipment .............................................................. 347
Software .................................................................. 348
Procedures .............................................................. 349
Analog to Digital ............................................................ 349
Sampling and Resolution .............................................. 350
Digital Transfer .............................................................. 350


CONTENTS

XIX

Typefaces ................................................................ 298
TrueDoc .......................................................................... 299
Font Embedding ............................................................ 300
eBooks ............................................................................. 300

Brief CSS Tutorial ................................................. 302
Where? .................................................................... 307
Cascading? .............................................................. 307

Readability ............................................................. 308

Summary ................................................................ 308

16. Complementary Technologies .................311
Training Templates ................................................ 312
Coursebuilder ......................................................... 312
Net Synergy ............................................................ 313

Multimedia-Based Software ................................... 314
Shockwave .............................................................. 314
Flash ........................................................................ 315
RealNetworks ......................................................... 317
QuickTime .............................................................. 319
Microsoft Media Player .......................................... 319

Text-Based Software .............................................. 320
Acrobat ................................................................... 320
eBooks ..................................................................... 322
Capabilities ..................................................................... 324
Development ................................................................... 325
Services ............................................................................ 325
Size .................................................................................. 326

Legacy Databases ................................................... 327
Web-Database Applications ................................... 327
Templates for Everything ....................................... 328
Where’s the Content? ............................................. 328


CONTENTS

XXI

Direct Digital .......................................................... 350
Windows Volume Control ...................................... 352
Storage .................................................................... 353

Editing .................................................................... 354
DC Offset ............................................................... 354
Equalization ............................................................ 355
Noise Reduction ..................................................... 356
Compression ........................................................... 356
Normalization ......................................................... 356

Encoding ................................................................ 357
Embedding ............................................................. 358
<embed> ................................................................. 358
RPM ....................................................................... 360

Streaming Media .................................................... 360
Using for WBT ....................................................... 361
Summary ................................................................ 361

18. Streaming Video .......................................363
Equipment .............................................................. 365
Cables and Connections ......................................... 365
Audio and Video ..................................................... 366
Microphones ........................................................... 366
Camcorders ............................................................ 367
Analog .............................................................................. 368
VHS ........................................................................ 368

VHS-C .................................................................... 369
8mm ........................................................................ 369
S-VHS-C ................................................................. 369
Hi8 .......................................................................... 369

Digital .............................................................................. 369
MiniDV ................................................................... 370


XXII

CONTENTS
Digital 8 .................................................................. 370

Ancillary Equipment .............................................. 370
Tripod .............................................................................. 370
Lights ............................................................................... 370
Sound .............................................................................. 370

Professional Equipment .......................................... 371

Production .............................................................. 371
Production Techniques .......................................... 371
Lights ............................................................................... 371
Second Camcorder ......................................................... 372
Microphones ................................................................... 372
White Balance ................................................................. 372
Viewfinder ....................................................................... 373
Contrast ........................................................................... 373
Movement ....................................................................... 373

Height ............................................................................. 374
Angle ................................................................................ 374
Silence ............................................................................. 374

Repurposing ........................................................... 374

Digitizing ................................................................ 375
Equipment .............................................................. 375
Procedures .............................................................. 376

Editing .................................................................... 376
Storage .................................................................... 376
Software .................................................................. 377
Editing Video Clips ................................................ 378

Encoding ................................................................. 378
Embedding ............................................................. 379
Distributing ............................................................. 379
Summary ................................................................ 380

19. SMIL .......................................................... 381


CONTENTS

XXIII

The WBT Project ................................................... 382
Production .............................................................. 382
Storyboard .............................................................. 382

Asset List ................................................................. 386
SMIL Coding ......................................................... 387
Modules .................................................................. 390
Creation .................................................................. 391
Test ......................................................................... 391

Attaching ................................................................ 392
Entire Presentation? ............................................... 393
Summary ................................................................ 394

20. Advanced Software ..................................395
Learning Management Systems ............................. 396
Website Management Software ............................. 397
FrontPage 2000 ...................................................... 397
Dreamweaver ......................................................... 399
Adobe GoLive ........................................................ 400

Specialty Streaming ............................................... 401
The Heavyweights .................................................. 403
Director ................................................................... 404
Authorware ............................................................. 405
Quest ....................................................................... 406
ToolBook II ............................................................ 407
Assistant ........................................................................... 407
Instructor ......................................................................... 408

Summary ................................................................ 408

21. Designing WBT .........................................411
The Creation .......................................................... 412

XXIV

CONTENTS

Process .................................................................... 412
Needs Assessment .......................................................... 412
Instructional Design ....................................................... 412
Development ................................................................... 413
Delivery ........................................................................... 413
Evaluation ....................................................................... 413

Cycle ....................................................................... 413

Influences on WBT Design .................................... 414
Technical Constraints ............................................ 414
Computer Access ............................................................ 415
Computer Hardware ...................................................... 415
The Network .................................................................. 415
Internet ................................................................... 416
Intranet ................................................................... 417

Operating Systems and Software .................................. 417

People Constraints ................................................. 419
Management ................................................................... 419
Instructional Designers .................................................. 420
Developers ....................................................................... 420
Students ........................................................................... 420

Control and Sequence ............................................ 421
Synchronous and Asynchronous WBT .................. 423
Asynchronous ......................................................... 424
Synchronous ........................................................... 424

The Team ............................................................... 427
The Teamwork ....................................................... 427
Assessment .............................................................. 428
Design Devices ....................................................... 428
Storyboard ....................................................................... 429
Design Document .......................................................... 432

Development and Delivery .................................... 433
Development ................................................................... 434