Adobe Dreamweaver is the leading web authoring tool, and CSS (cascading style sheets) is the recommended method for creating accessible, standards-compliant web pages. Yet it's a common misconception that a visual authoring tool like Dreamweaver cannot compliment a standards-oriented designer or developer's workflow. In Mastering CSS with Dreamweaver CS4, authors Stephanie Sullivan and Greg Rewis demonstrate the time-saving tips and techniques that make Dreamweaver and CSS such a powerful combination. In a series of step-by-step projects, the authors take designers by the hand to create five full-fledged websites. In the process, you learn:

• The core concepts of CSS
• How to use, customize, and extend the CSS layouts included in Dreamweaver
• Issues involved in creating accessible sites
• Techniques for overcoming common CSS rendering issues
• How to customize and extend the CSS layouts
• Real-world solutions for CSS challenges
• Implementing the newest Spry framework for Ajax to progressively enhance standards-based and accessible CSS layouts

The printed book is available through most major online and retail bookstores worldwide. For more information visit the W3Conversions site.

Mastering CSS with Dreamweaver CS4 © 2009 Stephanie Sullivan and Greg Rewis. Reproduced by permission of New Riders. All rights reserved.

Using the Liquid CSS Layouts

With the proliferation of large monitors, creating a layout that serves the same fixed width (typically either 800 x 600 or 1024 x 768) to all browsers may leave a good deal of empty space on some screens. Clients often question this unused space, since using more of the viewer's screen must give the client more bang for their buck, right? Liquid layouts, based on a percentage of the size of the browser's window (or viewport), are one way to create flexible sites that work for a variety of users.

In this chapter, we will look at the pros and cons of creating a liquid layout using our fictional client, the Pleasantville Regional Chamber of Commerce. Their in-house designer has sent us a Photoshop comp and has requested that the blue portion of the design fill the browser window. They want no space on the sides.

Download the complete chapter:

• Chapter 4: Using the Liquid CSS Layouts (PDF, 6.1 MB)

Download the sample files for this chapter:

• Download (requires registration)

About the author