Web Designer

Intro to HTML

What is HTML?
Hypertext & hypermedia
HyperText markup
Language (version 4.0)
URL addresses

HTML Documents

HTML document structure
HTML document
Characteristics

HTML Tags

Document section tags
Tag categories
Text formatting tags
Layout tags
Logical tags
Lists (Ordered/Unordered)

Tag Attributes and Character References

Tag attributes
Horizontal rule attributes
Font tag attributes
List tag attributes
Character references

Creating Hyperlinks

Hyperlinks defined
Four types of anchors
Standard HREF anchors
MAILTO anchors
File download anchors
NAME anchors

Inline Images and Colours

Using inline images
GIF vs. JPEG
HSPACE & VSPACE
Background colours

Introduction to Tables

What are tables?
Table tag family
Table tag attributes
Colourising table cells
Arranging data in cells
Creating and formatting a page
Columns with invisible tables
Advanced table formatting
Cell spanning

Nesting and Embedding Tables

Embedding lists in tables
Nesting tables in tables

Cascading Style Sheets

Syntax
Structuring your code
A brief history of markup
The power of meaning
IDs and class names
Naming your elements
IDs and classes
Divs and spans
Different versions of HTML and CSS
Document types
DOCTYPE switching, and browser modes
Validation

Basic CSS

Browser modes
Backgrounds
Text and Font
The Box Model
Borders
Outline
Margins and padding
Lists and tables

Styles

Common selectors
Pseudo-classes
The universal selector
Advanced selectors
Child and adjacent sibling selectors
Attribute selectors
Cascading and inheritance
Adding a class or an ID to the body tag
Planning, organising, and maintaining your style sheets
Applying styles to your document
Style guides

Effects

Background image basics
Rounded-corner boxes
Fixed-width rounded-corner boxes
Flexible rounded-corner box
Mountaintop corners
Multiple background images
Border-radius
Border-image
Shadows
PNG transparency
CSS parallax effect
Image replacement

Styling with Links

Link styles
Rollover effects
CSS tooltips
Lists
Navbars

Forms and Tables

Styling forms
Styling tables

Layout

Boxes
Columns
Liquid layouts
Alignments
Positioning
Floats

Common Problems

Common CSS problems
Finding the bug
Using Firefox with Firebug, and other add ons
Internet Explorer workarounds
How to set up your test machine

Summary Quiz

CSS references
CSS units
CSS colours
CSS colour values
CSS colour names

Dreamweaver CS4 Getting Started

General Interface
How the panels work
Docking
Panel groups
Document tabbing
Creating/saving workspaces
The Application bar
N-up display
Canvas rotation
Basic shortcuts

Exploring Dreamweaver

Exploring the Dreamweaver environment
Toolbars and panels
Using Dreamweaver workspaces
Dreamweaver preferences

Introduction to Website Development

What you need to know first

Site Setup

Setting up a site (with a view to standardisation)
Installing a web server - xamp, mamp, custom
Local vs remote directories
Home page setup - home/index/default
File naming conventions

Basic Page Markup

Marking up a page with text, headers, paragraphs, lists, hrs, etc
Special characters
Html

Links

Linking pages
Linking sections
Linking to outside pages
Linking to paragraphs

Images

Inserting an image into a page
In-line/flow text around
Backgrounds
As buttons
Rollovers
Editing a placed image
Image properties
Image maps
Using Photoshop smart objects

Simple tables

Simple layout
Formatting rows and columns
Height and width
Using text and graphics in tables

Views

Live View
Code View- JavaScript/AJAX code hinting
Related files
Code Navigator

CSS - Formatting a Page

Creating CSS rules
Formatting the colour, font and other properties of text
Formatting the background
Applying CSS rules to tags - body, em, strong, ul, etc
Applying CSS to several pages at once - external CSS files

CSS Layout

One box layout - creating a single box (div) and changing its position and formatting
2 box layout
3 box layout
1 box, 2 column layout
1 box, 2 column, centred layout

CSS with Tables and Forms

Using CSS to format a table
Using CSS to format a form
CSS and Images
Using CSS to apply images as backgrounds
2 picture example - how to use CSS to apply the same picture in two places, but make it look as one - each copy of the picture having a slightly different opacity

CSS and links

Hover
Blocks
Borders
Using a list as a navigation bar

Assets

Templates
Library items
Other assets
Favourites

Site Management

Uploading/downloading files
Search and replace
Spell checking
Accessibility reports
Other reports
Help
Reference material
Masking files
Subversion integration

Page extras

Meta tags
Head content
Scripts

Inserting video and flash content

Inserting Flash video
Inserting Flash content (swf)
Inserting QuickTime movies

CSS Techniques

Columns
Headers and footers
Boxes
Links
Misc

Exporting

Adobe AIR authoring
Creating a simple web site as an AIR application
AIR applications using persistent data from a database

Interactive elements - Spry

Spry menus
Spry tables
Spry tabs
Spry datasets