In Dreamweaver with CSS Training, web developer Jasbir Singh teaches the fundamentals of CSS while focusing on how to use Dreamweaver to efficiently create and manage styles. He shows how to use Dreamweaver to resolve style conflicts; how to use new CSS-related features such as Live View; and the best way to create lightweight, site-wide style sheets.

Topics include:

• Understanding XHTML and CSS fundamentals
• Understanding and implementing advances in typography
• Using the Code Navigator for faster CSS edits
• Styling form elements while maintaining accessibility
• Customizing the look and functionality of Spry widgets through CSS
• Controlling layout and positioning through styles
• Controlling CSS with the Properties Inspector

Course Content:

Introduction

1. CSS/XHTML Fundamentals

• Separating structure from presentation
• Adding meaning with ID and class attributes
• Understanding basic selectors
• Understanding complex selectors
• Examining the Cascade
• Understanding order of inheritance
• Understanding specificity
• Using Dreamweaver to resolve conflicts

2. Using Dreamweaver's Starter Pages

• Working with starter pages
• Defining fixed, elastic, liquid, and hybrid
• Understanding starter page structures
• Modifying CSS globally
• Moving CSS between files
• Preparing custom starter pages
• Creating custom starter pages

3. Planning Your CSS

• Designing with CSS in mind
• Using Fireworks to create site prototypes
• Defining page structure
• Creating the initial layout
• Page creation and asset sharing
• Using common libraries to create site prototypes
• Building interactive prototypes
• Optimizing images in Fireworks
• Exporting web graphics from Fireworks CS4
• Exporting interactive prototypes
• When to export XHTML and CSS from Fireworks CS4

4. Controlling Your CSS with Dreamweaver

• CSS workflows in Dreamweaver
• Using the CSS Styles panel
• Setting CSS preferences
• Understanding Dreamweaver's CSS visual aides
• The Code Navigator
• Controlling CSS with the Properties Inspector
• Using Related Files
• Working with Live view
• Working with the Reference panel

5. Online Typography

• Declaring font families
• Creating custom font family declarations in Dreamweaver
• Understanding units of measurement
• Controlling font sizing
• Controlling line spacing
• Controlling vertical margins
• Horizontally aligning text
• Vertically aligning text
• Vertically centering block-level elements
• Setting column width
• Using font shorthand notation

6. Working with Backgrounds

• Background properties
• Using background images
• Controlling background image tiling
• Positioning background images
• Using percentage values for positioning
• Creating custom list bullets
• CSS drop shadows
• Image replacement techniques
• Adding screen-only content
• Complex background graphics
• Using CSS Sprites

7. Styling Tables

• Reviewing table tag structure
• Using thead and tbody for styling
• Styling table captions
• Styling headers
• Styling table content
• Creating alternating row colors
• Using pseudo-class selectors for tables
• Creating custom table borders

8. Styling Forms

• Examining form structure
• Styling fieldset and legend elements
• Styling form elements globally
• Using classes to identify form elements
• Styling user feedback
• Adding user interaction
• Styling Spry form validation fields

9. Building Navigation

• Using lists for navigation
• Creating horizontal menus pt. 1: Stripping list styling
• Creating horizontal menus pt. 2: Displaying links horizontally
• Creating horizontal menus pt. 3: Styling links
• Creating horizontal menus pt. 4: Rollovers
• Creating horizontal menus pt. 5: Indicating current page
• Creating horizontal menus pt. 6: Modifying cursor usage
• Creating horizontal menus pt. 7: Positioning menus
• Styling vertical menus pt. 1: Vertical menu considerations
• Styling vertical menus pt. 2: Defining width for link elements
• Styling vertical menus pt. 3: Using background graphics with navigation

10. Layout

• Box model review
• Understanding margin collapse
• Reviewing normal document flow
• Understanding floating
• Containing and clearing floats
• Understanding relative positioning
• Understanding absolute positioning
• Understanding the AP Elements panel
• Understanding fixed positioning
• Using Dreamweaver to define document structure
• Creating a two-column layout
• Using Dreamweaver's Design-Time style sheets

11. Controlling Spry Objects with CSS

• Introducing Spry widgets
• Updating the Spry framework
• Examining the default Spry styles
• Modifying tabbed panels through CSS
• Styling Spry widgets
• Organizing Spry style sheets

12. Multiple Media Types and Alternate Style Sheets

• Creating print style sheets
• Assigning media types
• Styling type for print
• Suppressing element printing
• Controlling page breaks
• Using @media blocks
• Creating alternative style sheets

13. Testing and Deploying CSS

• Using Dreamweaver's Browser Compatibility Check
• Fixing code errors with Adobe's CSS Advisor
• Strategies for browser compatibility
• Implementing browser compatibility
• Formatting code for deployment
• Creating modular style sheets
• Assembling modular style sheets