Mastering CSS with Dreamweaver CS4

Mastering CSS with Dreamweaver CS4

by Stephanie Sullivan, Greg Rewis
Released December 2008
Publisher(s): New Riders
ISBN: 9780321620736

Read it now on the O’Reilly learning platform with a 10-day free trial.

O’Reilly members get unlimited access to books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial

Book description

Millions of Web designers use Dreamweaver and most of them think creating CSS-based, standards-compliant sites is a challenge. In Mastering CSS with Dreamweaver CS4, authors Stephanie Sullivan and Greg Rewis bridge the gaps between the worlds of CSS design and Dreamweaver by demonstrating how to use Dreamweaver CS4 and CSS together to create individualized, standards-based layouts. Through hands-on projects with lots of visuals, the book enables every user of Dreamweaver to learn CSS effectively and easily.

Table of contents

  1. Mastering CSS with Dreamweaver CS4
    1. Praise for Mastering CSS with Dreamweaver CS3
    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. What’s New in Dreamweaver CS4?
        1. Work, Work, Work
        2. Live View—More Than a Pretty Picture
        3. It’s Really All Related
        4. Code Comes Alive
        5. Give Me Data or Give Me Death
        6. Ribbons and Bows
          1. Getting Flashy
          2. Getting Smart with Photoshop
          3. When All Is Said and Done
    5. 2. Laying the CSS Groundwork
        1. The (X)HTML Document
          1. The Doctype
          2. Character Encoding
          3. The Natural Flow of the Document
          4. Document Semantics
          5. Inline Versus Block Elements
          6. Building with Divs
        2. The CSS Document
          1. CSS Syntax
          2. CSS Selector Types
            1. Tag Selectors (Also Called Element or Type Selectors)
            2. Class Selectors
            3. ID Selectors
            4. Compound 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
            1. Ruler Tip
          7. Browser Anomalies
            1. Internet Explorer Conditional Comments
          8. The hasLayout Property
        3. Manipulating the Natural Flow
          1. Positioning Techniques
            1. Static Positioning
            2. Relative Positioning
            3. Absolute Positioning
            4. Fixed Positioning
          2. Floating Images
          3. Applying a Clearing Element
          4. Inserting a Div Tag
          5. Columns with Absolute Positioning
          6. Floating Columns
          7. Clearing a Floated Column
          8. Centering a Layout
          9. CSS Management
    6. 3. Using the Fixed, Centered CSS Layouts
        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
    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. Paragraphs, Headings, and Lists
          1. Resetting and Styling the Lists
            1. Creating a Background Image from Photoshop
            2. Adding the Graphic to the List
            3. Just a Quick Sweep!
        4. Creating the Horizontal Navigation Bar
          1. Styling the Menu Container
          2. Choosing Our Horizontal Method
            1. Inline
            2. Floated
          3. Styling the Anchors as Buttons
          4. Putting the Final Tweaks on the Horizontal Navigation
          5. Creating the Hover and Focus States
          6. Current Page Indicator (or You Are Here)
          7. Clean Up One More Time
          8. Using Design-time Style Sheets
        5. Laying Out the Main Content Area
          1. Modifying the Columns
          2. Dealing with Margins
          3. Planning the Background Placement
          4. The Illusion of a Column
            1. Creating the Div
            2. Creating the Graphic
            3. Creating the CSS
          5. The Right Column
          6. Tweaking the Right Column
          7. Styling the mainContent Area
          8. Creating the Left-hand Navigation
          9. Styling the Menu Links
          10. Placing the Page Indicator on the Vertical Menu
          11. Adding the Badge Image
        6. Getting to the Bottom of It—Styling the Footer
          1. Floating Left and Right
        7. Putting on the Final Touches
          1. The Plain Vanilla Links
          2. Limiting the Page Width
          3. If IE Ain’t Happy, Ain’t Nobody Happy
    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 Body
        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 the Horizontal Navigation
            1. Placing the Horizontal Navigation
          4. Flattening the List to a Line
          5. Styling the Horizontal Links
          6. Time to Tidy Up
        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. Styling the Blockquote and Cite
          5. And Then a Step to the Right, uh... Sidebar
            1. Add a Little Style
          6. Last but Not Least, the Footer
          7. Quick IECC Tweaks
        6. Creating and Styling an Em-Based Form
          1. Coding the Form
          2. Creating Accessible Required Fields
          3. Styling the Form
          4. 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. Hey, Code! Wake Up!
          5. Putting the Final Touches on the Menu Bar
          6. 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. Fixing a Dreamweaver Limitation, er, Bug
          3. A Quick Sanity Check
          4. The Spry Sliding Panels Widget
          5. Creating the Structure for the Spry Sliding Panels
          6. Navigating Through a Sliding Panel
          7. 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 CS4
  • Author(s): Stephanie Sullivan, Greg Rewis
  • Release date: December 2008
  • Publisher(s): New Riders
  • ISBN: 9780321620736