Highlights

Tips

The New Stuff

Cross Browser CSS Rendering Issues
  • Browser compatibility checks: File > Check Page > Browser Compatibility
  • Reports give line number in code. Code View flagged with squiggly underline
  • Adobe CSS Advisor web site
  • Checks both CSS and HTML for cross browser rendering issues
CSS Layouts
  • Selection of 1, 2 or 3 column layouts
  • File > New
  • Save both the HTML and CSS files to your site root
  • Extensive commenting help
  • Built in layouts add a class to the body tag of each page. Each style rule uses a descendant selector that begins with the class name
  • To modify. Click text, choose tag selector, click Current button in styles panel, modify
  • To save file size, clean up comments when you've finished modifying a layout
Management of CSS Rules
  • Move CSS rules from document to document: Right Click > CSS Styles > Move CSS Rules
  • Move CSS from head to external stylesheet: Right Click > CSS Styles > Move CSS Rules. Clean up Code View.
  • Convert inline CSS to stylesheet rule: Right Click > CSS Styles > Convert inline CSS to rule
  • Drag in CSS panel to move from internal to external
  • Convert inline CSS to stylesheet rule: Right Click > CSS Styles > Convert inline CSS to Rule
  • Drag styles in CSS panel to reorder
  • Drag in styles panel to move styles from internal to external (clean up Code)
Device Central
  • For devices using Opera's Mini Browser, helps design pages for mobile CSS
  • File > Preview in Browser > Device Central
  • You have a full program on Device Central coming soon
Draw AP button
  • Layout mode is gone. Layers are dead
  • Use the Insert menu so the div will be inserted at the cursor location (Draw AP button inserts after the body tag) Insert > Layout Objects > AP Div
  • AP Div styles go in head
Clean up Formatting
  • Commands > Apply Source Formatting (or Preferences > Code Format > Advanced Formatting CSS)

Note for Teachers: This presentation was done live in Dreamweaver. If you'd like to download this zip file and use it in a classroom situation in Dreamweaver, I'm happy to grant copy rights for educational use. As each point is discussed in the presentation, use the document in Dreamweaver to demo the process.