Tucson Adobe User Group

Mastering CSS with Dreamweaver CS is divided into six chapters, beginning with a 43 page overview of (X)HTML, CSS, the document flow, and some of the major issues confronting web designers today. The next chapter focuses on creating a fixed and centered layout. The projects in the book use a Dreamweaver template as a starting point and work from there on developing CSS skills using the Dreamweaver tools. This second chapter discusses modifying the Dreamweaver ‘out-of-the-box’ preferences for CSS, and continues with using CSS shorthand properties, using background images to create “Faux” columns, creating a header using absolute positioning (Dreamweaver APs), rounding columns, defining a bottom of the page, using PNG graphics, floating and clearing, manipulating the source order (code flow) to improve search engine results, anchors and links, drop caps, declaring media types, and the issues with IE5-Quirks mode, and more importantly, the IE hasLayout quandary. Wow, that’s a lot of information! And, each chapter is packed with vitals you can’t afford to miss if you are committed to learning how to create standards-compliant sites with impact. In addition to the information presented by the authors, there are frequent URLs offered up for further reading or more in-depth coverage of a topic.

Chapter 3 is titled “Migrating a Table-based Layout to CSS”. Now that most web travelers are using fairly current and mostly standards compliant browsers, more and more companies and individuals are interested in making the transition laid out in this chapter to update their sites. You’ll use Dreamweaver’s Find and Replace tool to begin the process of locating depreciated style attributes and other formatting code embedded in the HTML document. And then it’s on to organizing and consolidating the ‘keeper’ styles in a separate document. Find and Replace is put to use again to locate, strip and replace all the formatting table code from the document, replacing it with styled DIVs and unordered lists. This is not a small task and can require hours and hours of work.

Creating a Liquid CSS Layout is the subject of Chapter 4. The fictional client has asked for a site that completely fills the browser window on all monitor sizes and for all resolutions. They’ve also sent a mockup of what they want, created in Photoshop. No, the solution isn’t to just stretch the Photoshop image this way and that to accomplish the goal. This chapter steps you through the practice of creating a site based on Dreamweaver’s three-column liquid template with header and footer for the layout. Using CSS rules, a background image is inserted into the header. Then the logo is inserted with accessibility data hidden behind for screen readers and browsers with images turned off. Next, an unordered list is used to create a horizontal navigation bar. This navbar uses more than one image to create the requested effect while also accommodating browser text size changes by the site visitor. The concept and utilization of Design-Time Style Sheets (DTSS) is introduced next. This style sheet is used to correct Dreamweaver’s odd rendering of your page in the design view of the program without affecting viewing in the browser. This segment continues to use CSS to create the look and feel desired for the link/buttons including hover and current page states, targeting just the header navigation, then the styling the columns and main content area is addressed, with all their issues. The left-hand navigation is created and styled as well as the footer navigation, each with it’s own distinct characteristics and appearance.

I used Chapter 5 as the basis for moving an older frames-based site into the current standards mode, maintaining much of the look and feel of the original site (as required by the site owner). This chapter incorporates many of the skills developed in Chapter 4 and provides additional approaches to creating horizontal and vertical navigation, and hover and active states on the links. We are also introduced to creating an accessible form, applying CSS styles and using Adobe’s Spry Framework to add validation to some of the form fields to ensure data has been entered and that it is in the correct format. Adding a data table to the contact page for posting the company hours, rounds out this chapter.

The last chapter, Chapter 6, focuses on employing the Adobe Spry Framework for Ajax to display images for a fictitious art gallery. The proper starter layout is created as a hybrid of two of Dreamweaver’s templates. Learning how to effectively combine style sheets is a good skill to have. The beginning of the chapter goes through setting up the main content area, header and sidebar. The max-width and min-width properties are implemented to control the look of the text in the main content area. A fix for IE6( and earlier versions of the browser), which doesn’t support max-width and min-width , is implemented and explained using the IE-only expression property. Next the authors bring in the images of the artwork and float them into place. The requested navigation, fly-out menus and sub-menus, need to also accommodate visitors who have turned off JavaScript. This is facilitated with the Spry Framework. A brief explanation of this technology, as well ‘what is Ajax’ follows. You’ll also find instructions on downloading the latest version of the Spry Framework software for use in Dreamweaver CS3. There are quite a few pages devoted to creating and styling the Spry-based navigation. And then an equal amount of detail and explanation is devoted to developing the gallery. Finally we arrive at building the Spry Sliding Panels. This is a strip of thumbnails along the bottom of the page. Click an image to load a larger view in the main content area of the page. A few finishing styling touches and we are done with the project and have arrived at the end of the book!