Web Design and Authoring

 In this workshop, you will learn how to:

 plan a web development project
 draft a design document
 convert text to HTML
 use DreamWeaver to create web pages
 incorporate images to web pages
 use DreamWeaver to maintain web pages
 evaluate a web site
Design Process

Analysis

Design

Production

Evaluation
 Design Production Evaluation
Analysis

 Ask these questions when planning your

web site
 What is your goal?
 Who is the audience?
 What is the content?
 What is the timeline?
 Design Production Evaluation
Analysis

 What is your goal?

 Expand classroom boundaries
 More information
 Higher accessibility
 Enhanced interactivity and interaction
 New teaching paradigm
 Student-centred approach
 Constructivist approach
 Active, authentic cooperative learning
 Design Production Evaluation
Analysis

 Who is the audience?

 Age, gender
 prior knowledge of the subject
 learning styles
 Learning styles and strategies
• Active v.s. Reflective
• Sensing v.s Intuitive
• Visual v.s. Verbal
• Sequential v.s. Global
 Index of Learning styles questionnaire
 Design Production Evaluation
Analysis

 What’s the content?

 Course materials, media assets (e.g. image, sound,
video, simulation, etc)
 Communication (e.g. instructor-student, student-
student)
 Assessment (e.g. assignments, quiz, exams, project
work)
 Examples
 Philosophy 101
 Finance 499
Analysis Production Evaluation
Design

 Design Document
 Consolidate your planning
 Storyboard for the web site: site structure,
content, navigation, page layout, etc.
 communication among team members
Analysis Production Evaluation
Design

 Usability: Jacob Neilson’s “Top 10

mistakes in Web design”
 Using frames
 Gratuitous use of Bleeding-edge technology
 Scrolling text, constantly running animation
 Complex URLs
 Orphan pages
 Long scrolling pages
 Lack of navigation support
 Non-standard link colors
 Outdated information
 Long loading time
Analysis Design Evaluation
Production

 Use Web authoring tool (DreamWeaver) to

create the web pages
 other tools
 FrontPage
 PageMill
 Netscape Composer
 Use WebCT or other technologies if the
interactivity and interaction is more complex
Analysis Design Production Evaluation

 Test the web pages locally

 Upload the files to a Web server: publish
your web site
 Get user feedback
 Replan, redesign and revise the site
Publish your web site
Arts server CNS
GPU or WebCT

Upload

download

You create a Web

site on a computer.

Students access the site

Your Projects

 A course web site (Your current or future

courses)