Mastering CSS with Dreamweaver CS3

The book provides a set of tutorials for using Cascading Style Sheets (CSS) with Dreamweaver CS3. The book focus on three areas: learn what CSS is, how to create CSS layouts using both Dreamweaver's graphical design and coding modules and learn how to convert an existing table-based layout to a CSS-based layout.

The first part of the book introduces the reader to CSS. This covers what CSS is, character encoding, doctypes and the CSS syntax. There's a good bit of information on some of the finder points of CSS such as the difference between "p .classname {...}" and "p.classname {...}", creating stylesheets that only Internet Explorer sees (this book was written when IE6 was the main browser) and how to determine what style rules take precedence. It wraps up with a tutorial for creating a floating two-column layout. Once the reader is up to speed on what it is and how CSS works, the reader is ready to go.

The rest of the book takes the reader though creating various layouts, usually based on a built-in Dreamweaver templates. Chapter two shows how to add garphics to a Dreamweaver layout, configuring and using the Code View to change how CSS code is formatted. Screen and print styles are introduced. Chapters four through six show how to create liquid and elastic layouts, pure-CSS menu bars and using code snippets to save re-typing frequently used styles. As well, you learn how to use Adobe's Spry Javascript framework for validation and a dynamic menu. More IE extensions such "expression" (Javascript in CSS) is introduced.

Chapter three takes the reader through converting a table-based layout to CSS using Dreamwaever and Fireworks. The is one of the common challenges for designers, especially those inheriting projects from other designers who have moved on or just disappeared-- not as uncommon as some might think! It shows how to first understand and then clean-up the existing layout using the find/replace tags features, then creating and moving the styling information into an external stylesheet. Firework's reconstitute table feature is demonstrated as a way to re-slice images into a new design when the original (un-sliced) graphic has been lost.

So by the end of the book the reader will be familiar with what CSS is and how to use it both in Dreamweaver's code and design modes, modify Dreamweaver's built-in layouts to their needs and how to take apart and re-build a table-based layout into a CSS-based layout.

Published: 23rd October, 2008