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.