Course Content Adobe Dreamweaver CS4

Course Contents Adobe Dreamweaver CS4

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 standardization)
• 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.
• In Context Editing

Assets

• Templates
• Library items
• Other assets
• Favorites’

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

Using Dreamweaver with Subversion

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

<<Back