DreamWeaver Certification Bootcamp

Dreamweaver CS4 Certification Bootcamp is a blended learning course that combines 5 days of instructor led classroom based training with additional online learning content covering a range of topics around HTML, CSS and DreamWeaver. This course is ideally suited to those who are looking to get to grips with developing HTML and CSS based content using DreamWeaver ideally with a view to becoming an Adobe Certified Expert on DreamWeaver CS4.

The classroom based modules can either be completed at our fully equipped London training centre or at your own facility, whilst the online modules combine high quality flash video presentations backed up with instructor led course discussion forums, exercises files, real world samples, and loads more.

Prerequisites

Delegates should be comfortable working with either the Windows or Mac operating systems, and should feel at ease performing tasks such as copy and paste, open and save files, switch between windows, and starting programs.

Course Outline

Stage 1 – Intro to HTML – 1 day

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 & 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 & Colors

Using Inline Images
GIF vs. JPEG
HSPACE & VSPACE
Backgrounds Colors

Introduction to Tables

What are Tables?
Table Tag Family
Table Tag Attributes
Colorizing Table Cells
Arranging Data in Cells
Creating and Formatting Page
Columns with Invisible Tables
Advanced Table Formatting
Cell Spanning

Nesting & Embedding Tables

Embedding Lists in Tables
Nesting Tables in Tables

Stage 2 – Cascading Style Sheets – 1 day

Introduction

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

Commons 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

References

CSS references
CSS Units
CSS Colours
CSS Colour values
CSS Colour names

Stage 3 – DreamWeaver CS4 Getting Started – 3 days

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

Explore 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
rows/columns - formatting
height/width
text/graphics inside tables

Views

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

CSS - formatting a page

Creating css rules
Formatting text - colour, font-size, etc
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 - borders, backgrounds, etc
Using css to format a form - buttons, backgrounds, borders, etc

CSS and Images

Using css to apply images as backgrounds - changing their position, etc
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

Lab - Create your own web site

Here you will create your own web site: You will start from scratch - creating a new site definition within dreamweaver.
You will create 24 pages using your own design, creating your own css to apply your own formatting.
Text can be downloaded or brought in.
Images can be downloaded or brought in from outside - buttons, backgrounds, pictures etc.
At the end of this lab you will successfully have created your own minisite using the techniques taught previously.
InContext Editing

Assets