CS4 Web Bootcamp

CS4 Web Bootcamp is a blended learning course that combines 5 days of instructor led classroom based training with a wide range of online training modules made up of video based presentations done by our instructors, sample and exercise files, instructor led support forums, and real world examples.

The course primarily focuses on DreamWeaver and Flash as these are the 2 core products in the CS4 Web Suite however it also touches on other aspects of the suite such as Bridge, Fireworks and Photoshop

The classroom based modules can either be completed at our fully equipped London training centre or at your own facility, whilst the online modules can be completed from anywhere with a suitable computer and internet connection.

Audience

This course is for people new to web design and development and want to use CS4's website development tools to build intuitive, attractive and accessible websites. You've bought the CS4 Web bundle why only learn a small piece of it.

Prerequisites

Basic PC skills are necessary to complete this course, together with a basic knowledge of web terminology. These skills include: a basic understanding of a computer's operating system, launching an application, creating and saving files, and copying files from CDs and other media.

Course Overview

DreamWeaver CS4 Classroom Modules

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, centered 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

• 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

Flash CS4 Classroom Modules

Flash Interface

• Panels and panel layouts
• Custom workspaces
• Colour and Kuler
• The tools
  
  • Drawing
  • Selecting
  • Painting
  • Editing
  • Spraying

 Working in Flash

• Setting Stage dimensions
• Setting preferences
• Flash Player version
• Actionscript version
• Import preferences
• Publishing a file

Creating and Importing Graphic Assets

• Working with different graphic formats
• Importing bitmap graphics
• Importing vector graphics
• Working with layers and layer folders
• Using the drawing tools
• Using object and merge drawing
• Working with the Colour panels
• Creating and using symbols
• Using the Library panel
• Filters and Blend modes

Using Text Effectively

• Using the Text tool
• Adding and formatting static text
• Changing font rendering methods
• Adding input text fields
• Embedding fonts in input text fields

Creating Animations

• Object based animation
• Creating motion tweens
• Motion Editor
• Motion Presets
• Editing Animations
• Copying/pasting animations

3D transformations

• Creating 3D effects
• Editing 3D effects
• 3D Translation
• 3D Rotate
• Vanishing point

Inverse Kinematics

• Bones tool
• Armatures
• Constraining objects
• Examples

Modeling

• Deco tool
• Patterns
• Effects
• Spray Brush tool
• Custom shapes

Adding ActionScript

• Using Script Assist
• Adding actions to a frame
• Creating and using Button symbols
• Adding behaviors to a button
• Loading external SWFs

Using Moving Clips

• Creating and using Movie Clip symbols
• Organizing a Movie Clip Timeline
• Using actions to control a Timeline
• Using frame labels
• Responding to user interactions

Adding Sound and Video

• Importing sound
• Changing sound properties
• Adding sound to a Timeline
• Embedding video in a Timeline
• Converting Video
• H264
• On2VP6
• Adobe Media Encoder
• Using the FLVPlayback component
• Masking video
• Controlling video

Publishing Flash Documents

• Using different publishing formats
• Using publishing profiles
• Adding Flash Player detection
• Publishing for deployment

DreamWeaver CS4 Online Modules

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

Using Dreamweaver with Subversion

• Setting up up a Subversion system
• Getting Dreamweaver to work with Subversion
• Check-in/Check-out files
• Rollback
• Resolving conflicts

Flash CS4 Online Modules

 Creating Animations- Old School

• Working with the Timeline
• Using keyframes, blank keyframes, and frames
• Creating motion tweens
• Creating shape tweens
• Creating transition effects
• Easing

Adobe AIR

• What is AIR
• Publishing for AIR
• Using flash with html to create an AIR application
• Flash, database work and AIR applications
• Accessing local files
• Examples

Flash and Other Applications

• InDesign to Flash (XFL)
• Photoshop to Flash
• Illustrator to Flash
• Placing SWF's into Acrobat 9 Pro

 Using Flash to Draw

• The Pen tool
• Creating more complex shapes from primitive shapes
• Drawing landscapes
• Drawing figures
• Creating a library of useful shapes

A simple design

• Drawing a landscape with flash
• Animating the various parts of the landscape
• Publishing the final result

 A simple application - case study

• What are components
• Using components
• Creating a simple interface with components
• Publishing the result