Mastering CSS with Dreamweaver CS3

Book description

In Mastering CSS with Dreamweaver CS3, authors Stephanie Sullivan and Greg Rewis demonstrate how to use Dreamweaver CS3 and CSS together to create highly individualized, standards-based layouts. Through hands-on projects with visuals, the book gives readers an in-depth understanding of Dreamweaver's 32 CSS-based layouts (new in Dreamweaver CS3) and their application, enabling every user of Dreamweaver to learn CSS effectively and easily.

Table of contents

  1. Copyright
    1. Dedication
  2. Acknowledgments
  3. Introduction
    1. Who Should Read this Book?
    2. How is the Book Structured?
    3. Files and Reference Material
    4. About the Authors
      1. About Stephanie Sullivan
      2. About Greg Rewis
  4. 1. Laying the CSS Groundwork
    1. The (X)HTML Document
      1. The Doctype
      2. Character Encoding
      3. The Natural Flow of the Document
      4. Inline Versus Block Elements
      5. Building with Divs
    2. The CSS Document
      1. CSS Syntax
      2. CSS Selector Types
        1. Tag Selectors (Also Called Type or Element Selectors)
        2. Class Selectors
        3. Advanced Selectors
          1. Identifiers
          2. Pseudo Selectors
          3. Descendant Selectors
      3. The Cascade
        1. The Browser Style Sheet
        2. The User Style Sheet
        3. The Author Style Sheet
        4. Conflict Resolution
      4. And Now for Something Really Confusing...Specificity!
      5. Inheritance
      6. Understanding the Box Model
      7. Browser Anomalies
        1. Internet Explorer Conditional Comments
      8. The hasLayout Property
      9. Positioning Techniques
        1. Static Positioning
        2. Relative Positioning
        3. Absolute Positioning
        4. Fixed Positioning
    3. Manipulating the Natural Flow
      1. Floating Images
      2. Applying a Clearing Element
      3. Inserting a Div Tag
      4. Columns with Absolute Positioning
        1. Floating Columns
      5. Clearing a Floated Column
      6. Centering a Layout
  5. 2. Using the Fixed, Centered Starter Pages
    1. Beginning to Build
      1. Preparing the HTML Document
      2. Preparing the Comp
      3. Styling the Body Element
    2. Using Shorthand Properties in CSS
      1. Dreamweaver CSS Preferences
    3. Using Background Images
      1. Creating the “Faux” Right Column
      2. Creating the Outer Glow
    4. Creating the Header
      1. Absolute Positioning—Not Always Evil
      2. Adding the Logo
    5. Rounding the Side Column
      1. Let’s Start at the Top
      2. Creating a Faux Bottom
    6. Adding the Bottom of the Page
      1. Adding an Outer Page Wrapper
      2. Positioning the Bottom Flower Graphic
      3. To png or Not to png—That is the question
    7. A Bit About Floating and Clearing
      1. Creating a Pod in the Page
      2. Avoiding Float Creep—or how to force a div to contain its floats
      3. Space, the Final Frontier
    8. The Issue of Source Order
    9. Fonts and Final Styling
      1. Anchors and Links
      2. Styling the Headings
      3. Evening the Side Column
    10. Drop Caps—Simple Page Interest
    11. Completing the Footer
    12. Bust the Bugs
      1. Adjusting Values for IE5—Quirks mode
      2. hasLayout Issues Abound
      3. Using Check Browser Compatibility
    13. Declaring Media Types
      1. Rules for Creating a Simple Print Style Sheet
    14. Wrapping It Up
  6. 3. Migrating a Table-based Layout to CSS
    1. The CSS Issues
      1. Using Find and Replace to Determine Existing Rules
      2. Organizing the CSS Rules
      3. Establishing Order
      4. Consolidating Attributes
      5. Wrapping Up the Consolidation
    2. Cleaning Up the <table> Mess
      1. Using Find and Replace to Eliminate Table Code
      2. Styling Lists with CSS
      3. Pulling Tables Out of Their Nest
      4. Modifying Graphics with Adobe Fireworks CS3
      5. Wrapping Things Up with Divs
      6. Fine-tuning the List
      7. Picking Up Speed
      8. Practicing What You’ve Learned
    3. Rebuilding the Page Header
      1. Adding the Background Graphic in the Header
      2. Positioning the Navigation
    4. Continuing the Cleanup Process
      1. Organizing the Footer
    5. Removing the Final Table Markup
    6. A Final Review
  7. 4. Using the Liquid CSS Layouts
    1. Simplifying the CSS Selectors
    2. Creating the Header
      1. Inserting the Background Image
      2. Inserting the Logo
    3. Creating the Horizontal Navigation Bar
      1. Creating the CSS for the Horizontal Navigation
      2. Styling the Anchors as Buttons
      3. Using Design-Time Style Sheets
      4. Putting the Final Tweaks on the Horizontal Navigation
      5. Fixing the Horizontal Scroll
      6. Creating the Hover and Current Page Indicator State
    4. Laying Out the Main Content Area
      1. Modifying the Columns
      2. Dealing with Margins
      3. The Illusion of Columns
      4. Positioning the Backgrounds
      5. Tweaking the Columns
      6. Adding the Badge Image
      7. Creating the Left-hand Navigation
      8. Styling the Menu Links
      9. Placing the Page Indicator on the Vertical Menu
      10. Styling the mainContent Area
    5. Getting to the Bottom of it—Styling the Footer
      1. Floating Left and Right
      2. Putting on the Final Touches
  8. 5. Creating a More Complex Design with Elastic Layouts
    1. The New Document
      1. Resetting the CSS defaults
      2. Creating a Reset Snippet
      3. It’s Just a Jump to the Left
      4. Tweaking the Reset
    2. The Significance of the Em Unit
      1. The em is Relative
        1. Text Sizing
        2. Div Sizing
      2. Some Overall Type Adjustments
        1. Defining Our Major Type Elements
        2. Styling the Headings
    3. The Visual Transformation
      1. Styling the Header
      2. The Header Illusion
      3. Adding Inline navigation
        1. Styling the Inline Navigation
      4. Making Dreamweaver Play Nice
    4. The Main Content
      1. Formatting Images
      2. Belly up to the Sidebars
    5. The Main Site Navigation
      1. Adding a Background to the List Items
      2. Styling the Links Themselves
      3. Using the <cite> Element
      4. And Then a Step to the Right, uh... Sidebar
        1. Add a Little Style
      5. Last But Not Least, the Footer
      6. Quick IECC Tweaks
    6. Creating and Styling an Em-Based Form
      1. Coding the form
      2. Styling the Form
        1. Indicating Required Fields
      3. Adding Form Validation
    7. Creating and Styling Accessible Data Tables
      1. Let Dreamweaver Do the Heavy Lifting
      2. Giving the Table Dimensions
      3. Providing Additional Feedback For Accessibility
      4. Styling the Data Table
      5. Do You Feel Accomplished?
  9. 6. Building a Gallery Site with CSS and Spry
    1. Selecting the Proper Starter Layout
    2. Building the Initial Framework
    3. Lights, Camera, Content...
      1. Using max-width and min-width
      2. Getting IE’s Attention—min/max width Enforcement
      3. Not Too Far... Constraining the Content Area for IE
      4. Spread Out the Pictures
    4. Directions, Please...
      1. What is the Spry framework?
      2. Creating a Spry-based Navigation
      3. Styling the Spry Menu Bar with CSS
      4. Putting the Final Touches on the Menu Bar
      5. Where Am I? Giving Feedback Via the Menu Bar
    5. Combining Two CSS Layouts for Use in a Single Site
      1. Common Page Elements in a Flash!
      2. Styling Sidebar2
    6. Building the Gallery—Part One
    7. Progressive Enhancement—Making the Gallery “Cool”
      1. Creating an HTML Data Set
      2. A Quick Sanity Check
      3. The Spry Sliding Panels widget
      4. Creating the Structure for the Spry Sliding Panels
      5. Navigating Through a Sliding Panel
      6. Adding a Detail Image
    8. Getting the Validation Gold Star
      1. Creating an Unobtrusive JavaScript
      2. Crossing the “T’s” and Dotting the “I’s”
      3. A Final Bit of Polish

Product information

  • Title: Mastering CSS with Dreamweaver CS3
  • Author(s): Stephanie Sullivan, Greg Rewis
  • Release date: April 2008
  • Publisher(s): New Riders
  • ISBN: 9780321562593