Short Courses

Web Design

Course Outline

Intro to Web

Introductions
History of the Internet
Web technologies (terminologies, client/server, browsers, search engines)
Web standards

Intro to HTML:

Basic web design standards
What is HTML?
HTML basics (tags, HTML structure, DOM)
Simple HTML tags for text structuring

HTML basics

Tags and attributes
links
tables
 

Web colours and images

web colour
background colours using tag attributes
background colours using CSS
images
image formats for the web
resizing and exporting images for the web
creating a gradient

Introduction to CSS

Introduction to Stylesheets
CSS and HTML
Simple CSS rules
Tags, classes and ids
External stylesheets

HTML forms

Forms
How do forms work?
Form elements

HTML basics and tools

Header tags
Doctype
Useful tools for web design
Useful resources
Embedding generated html code

Introduction to Dreamweaver

Introduction to Dreamweaver
The Dreamweaver user interface
Views
Insert bar
Property inspector
Panels
Preferences

Dreamweaver basics

Web design principles (usability, dos and don’ts)
Creating a basic page
Defining the site
File and folder management
Understanding paths
File browser
Creating a document
Images
Lists
Creating a basic page (continued)
Modifying page and element properties
Observing changes in the source code
Selecting elements
Meta tags
More web design principles (usability)
Linking
External and internal links
Links for file downloads
Email links
Anchors
Image maps
More web design principles (fonts, colours, contrast and readability)
Text formatting
Inline elements for text formatting
CSS text formatting
Tables
Creating, sorting and modifying tables
Selecting table elements
Table attributes (border, width, etc)
CSS equivalents to some attributes
Tables as layout elements
Div elements
Divs as layout elements
Resizing and positioning divs
Overlapping elements
Limitations of div elements
Other layout elements
The attributes panel
Rollovers and visual effects
Examples
CSS rollovers
What is Javascript? (very basic, no coding)
The behaviour panel
Visual effects using the behaviour panel
Creating a web photo album
What is FTP?
Creating a free webspace account
FTP programs
Uploading the web photo album
Dreamweaver remote editing
Forms
Form elements
What are CGI and scripting languages (very basic)
Processing forms
Form elements as variables
Server responses
Examples
processing a form using a free web service
creating the form
uploading the form
using the form

Multimedia content

embedding multimedia content
Quicktime
Sounds
Flash content
Common multimedia file types
A note on bandwidth, file size and codecs
Embedding external content (YouTube, Google Maps, Google Docs forms, etc)

Introduction to Flash

Introduction to Flash
When and when not to use Flash
Examples
The Flash user interface
Creating simple shapes
Symbols and instances
The symbol library
Importing an image

Introduction to Flash animation

Introduction to Flash animation
How does animation work?
Key frames
Frame-by-frame
Previewing the animation
Tweening
colour tweening
motion guides
orient to path
text tweening
shape tween modifiers
more Flash animation
creating a movie clip symbol
adding sound
publishing the animation
embedding the flash file into a website
cleanup the site
upload
review and wrap up
feedback form