Introduction to Adobe Dreamweaver CS4 Training

Delivery Options

• Customized Onsite Training (3 days): Request a Proposal

Class Description

Class Overview

Class Goals

• Understand how web pages work
• Learn to create and manage web sites with Dreamweaver
• Learn to add graphics and links to pages
• Learn how to design with Cascading Style Sheets (CSS) within Dreamweaver
• Learn to create tables
• Learn to layout pages with CSS in Dreamweaver
• Learn to use library Items in Dreamweaver
• Learn to use code snippets in Dreamweaver
• Learn to use Dreamweaver templates
• Learn to work with Flash and the Spry Framework
• Learn to edit pages in Dreamweaver's code view
• Learn to build forms
• Learn to create reports and manage workflow

Class Outline

1. Dreamweaver CS4 Jumpstart
   1. What is Dreamweaver?
   2. Design and layout tools
   3. Site management and File Transfer Protocol
   4. Coding environment and text editor
   5. Who uses Dreamweaver?
   6. What's new in Dreamweaver CS4?
   7. New user interface
   8. Live View
   9. Related files
   10. Code Navigator
   11. CSS improvements
   12. HTML data sets
   13. Photoshop smart objects
   14. Other new features
   15. Adobe AIR authoring support
   16. Subversion
   17. An overview of features
   18. How web sites work
   19. A simple flow chart
   20. Domain names and IP addresses
   21. Servers and web hosts
   22. The role of web browsers
   23. An introduction to HTML
   24. Tag structure and attributes
   25. The structure of an HTML document
   26. Placing images in HTML
   27. Colors in HTML
   28. Case sensitivity and whitespace rules
   29. Tag hierarchy
   30. XHTML 1.0 Transitional
   31. What's the difference?
   32. Explorations in code
   33. A look at the Welcome Screen
   34. Creating, opening, and saving documents
   35. Creating new documents
2. Setting Up a New Site
   1. Creating a new site
   2. Advanced site-creation options
   3. Adding pages
   4. Saving a page to your site
   5. Defining page properties
   6. Work views
   7. A look at the Files panel
   8. Viewing local files
   9. Selecting and editing files
   10. Files panel options
   11. Changing the Files panel view
3. Adding Text and Images
   1. Typography and images on the web
   2. Adding text
   3. An introduction to styles
   4. Previewing pages in a web browser
   5. Understanding hyperlinks
   6. Creating hyperlinks
   7. Relative versus absolute hyperlinks
   8. Linking to an e-mail address
   9. Creating lists
   10. Using the Text Insert panel
   11. Inserting images
   12. Image resolution
   13. Image formats
   14. Creating a simple gallery page
   15. Linking images
   16. Using image placeholders
   17. Editing images
   18. Adjusting brightness and contrast
   19. Resizing images
   20. Updating images
4. Styling Your Pages with CSS
   1. What are Cascading Style Sheets?
   2. A little bit of ancient history: when <font> tags roamed the Earth
   3. The dawn of CSS
   4. How do you create CSS rules in Dreamweaver?
   5. Understanding Style Sheets
   6. Understanding why they're called Cascading
   7. Creating and modifying styles
   8. Creating a class style with the Property Inspector
   9. Creating and modifying styles in the CSS Styles panel
   10. Advanced text formatting with CSS
   11. Fine-tuning page appearance with contextual and pseudo-class selectors
   12. Div tags and CSS IDs
   13. Internal versus external style sheets
   14. Attaching an external style sheet to your page
   15. Modifying attached style sheets
   16. Creating a new .css file (external style sheet)
   17. Adobe Device Central
5. Creating Page Layouts with CSS
   1. The CSS Box model
   2. The basics of CSS margins, padding, and borders
   3. Reviewing the <div> element
   4. Reviewing the ID selector
   5. Positioning content with AP Divs
   6. Creating your first boxes with Draw AP Div
   7. Centering your page with relative positioning
   8. Making layouts cross-browser compatible
   9. Adding columns and headers to a layout
   10. Absolute versus relative positioning
   11. Adding a global navigation
   12. Box overlap and z-index
   13. Reordering <div> elements
   14. Adding additional content and styles
   15. Setting margins, padding, and borders
   16. Overriding default margins in CSS
   17. Futureproofing your layout
   18. Moving the internal styles
6. Working with Tables
   1. Using tables in web design
   2. Importing table data
   3. Selecting table elements
   4. Modifying table size
   5. Modifying table structure
   6. Creating a table
   7. Formatting and styling tables in HTML
   8. Formatting and styling tables with CSS
   9. Advanced CSS styling of tables
   10. Controlling cell alignment, padding, and borders with CSS
   11. Creating alternate row styling with CSS
   12. Reusing CSS for other tables
   13. Data sorting tables
7. Fine-Tuning Your Workflow
   1. Customizing panels and panel groups
   2. Using the Favorites tab on the Insert bar
   3. Resizing the document window
   4. Using guides
   5. Using grids
   6. The tag selector
   7. Switching between tabs and cascading documents
   8. Zooming
8. Adding Flash, Video, and Sound Content
   1. Making web content interesting
   2. Inserting Flash movies
   3. Adding video
   4. Flash Video
   5. QuickTime video and Windows Media
   6. Inserting sound
9. Maximizing Site Design
   1. Creating modular page elements
   2. Introducing snippets
   3. The Snippets panel
   4. Creating new snippets
   5. Introducing library items
   6. Modifying and updating library items
   7. Introducing templates
   8. Creating a new template
   9. Working with editable regions
   10. Creating new pages from templates
   11. Modifying templates
   12. Repeating regions
   13. Putting repeating regions into action
   14. Detach from Template command
10. Under the Hood: Editing in the Code View
    1. Getting to your code
    2. Accessing code with the tag selector
    3. Editing an HTML tag with the Quick Tag Editor
    4. Inserting tags with the Tag Chooser
    5. Inserting and editing comments
    6. Working in the Code view
    7. The Coding toolbar
    8. Collapsing and expanding tags and code blocks
    9. Validating your code
    10. Highlighting and correcting invalid code
    11. Using the Check Page menu
    12. The Validate Markup option
    13. Formatting code
    14. Indenting
11. Building Web Forms
    1. Forms in everyday (web) life
    2. How forms work
    3. Building a contact form
    4. Inserting the <form> tag
    5. Setting form properties
    6. Adding form elements
    7. Adding text fields
    8. Adding checkboxes
    9. Adding radio buttons
    10. Adding radio groups
    11. Adding lists and menus
    12. Adding a text area
    13. Adding a File Upload field
    14. Creating Submit and Reset buttons
    15. Styling forms with CSS
    16. Attaching external styles
    17. Setting a background color
    18. Styling form elements
    19. Applying the .label style
    20. Form processing and validation
    21. Adding form validation
    22. A look at the Behaviors panel
    23. Setting an event or trigger
    24. Previewing the button behavior
    25. Validating form fields
    26. Changing a form field's behavior order
    27. Verifying field contents
12. Working with the Spry Framework
    1. Introducing the Spry Widgets
    2. The Spry framework for AJAX
    3. What is AJAX?
    4. A look at the project
    5. The Spry Menu bar
    6. Customizing Spry Widgets with CSS
    7. The Spry Tabbed panel
    8. The Spry Accordion panel
    9. The Spry Collapsible panel
    10. Working with Spry Data Widgets
    11. What is XML?
    12. Creating a Spry XML data set
    13. Adding a Spry Data Widget: The Spry Repeat List
    14. Styling and fine-tuning data widgets
13. Managing Your Web Site: Reports, Optimization, and Maintenance
    1. Working with the Files panel
    2. Creating a remote connection
    3. Viewing files on a remote web server
    4. Transferring files to and from a remote server with Get and Put
    5. Using Check In/Check Out and Design Notes
    6. Check In and Check Out
    7. Using Design Notes
    8. Sharing Design Notes
    9. Displaying Design Notes in the Files panel
    10. Testing site integrity
    11. Using Check Links
    12. Checking links sitewide
    13. Generating site reports
    14. Understanding report results
    15. Addressing a listed item
    16. Saving reports
    17. The Browser Compatibility Check
    18. The CSS Advisor
    19. Optimizing pages for launch
    20. Search engine visibility and Search Engine Optimization
    21. Titling your documents with the <title> tag
    22. Adding meta keywords and descriptions
    23. Describing images with alternate text
    24. Launching your site
    25. Site Launch Checklist
    26. Uploading your site
    27. Getting help and using the reference guides
    28. The Reference panel
    29. Suggested next steps
14. Using Legacy Tools: Frames and Tables
    1. Legacy sites
    2. How frames work
    3. Advantages and disadvantages of frames
    4. Common frame usage
    5. Creating framesets
    6. Selecting frames
    7. Selecting framesets
    8. The Frames panel
    9. Setting frameset properties
    10. Setting frame properties
    11. Splitting a frame
    12. Dragging a frame border
    13. Specifying frame content
    14. Targeting frames
    15. Linking to outside web pages
    16. Using _top to replace a frameset
    17. Adding <noframes> content
    18. Using tables for layout
    19. Tables versus CSS
    20. Inserting a table
    21. Selecting tables
    22. Modifying tables
    23. Setting table borders
    24. Merging cells
    25. Nesting a table inside a row
    26. Specifying column widths
    27. Adding content to tables
    28. Adding another table
    29. Formatting tables
    30. Other ways to work with tables
    31. Deleting rows and columns Importing table data

Class Materials

All students receive a course manual or book and all the class examples.

Students in private onsite classes will also receive:

• Dreamweaver CS4 Digital Classroom

Class Prerequisites

Experience in the following areas is required:

• Experience with basic software programs such as Microsoft Word
• Experience browsing the Web

Experience in the following areas would be beneficial:

• HTML

Technical Requirements

Our computer technical requirements and setup process is easy, with support just a click away.

• Onsite and Instructor-led Online course technical requirements and setup instructions.
• WebEx system requirements for Instructor-led Online delivery option.

Potential Follow-on Classes

• Advanced Adobe Dreamweaver CS4 Training