Accessibility

Table of Contents

  1. Introduction
  2. Style Rendering Toolbar
  3. What Does a Printed Page Need?
  4. Hiding Specific Elements

Applying CSS from Screen to Print to Handheld – Part 6: Simplified Design and Printability

Style Rendering Toolbar

Sometimes a new feature gets added to your favorite application that just makes your work so much easier. This is the case with Dreamweaver 8. Boy, do I love this addition to Dreamweaver 8! It is a tiny toolbar (see Figure 1) but it has so much power within it that it is already a feature I wonder how I got by without.

Style Rendering toolbar with accompanying media types
  1. Screen
  2. Print
  3. Handheld
  4. Projection
  5. TTY
  6. TV
  7. Disable styles

Figure 1. Style Rendering toolbar with accompanying media types

While these are not all the media types available, designers are likely to use them the most often. Other media types include the following:

  • Aural
  • Braille
  • Embossed

It is worth noting that media type names are not case-sensitive. For example, print will serve you just as well as Print.

You can find additional information about the various media types on the W3C website.

In earlier days you had to write your style sheet, preview it in the browser, and then access the browser's print preview option. While that's not a bad thing to do as a final check, it can become laborious when you are designing your layout and building a style sheet.

The Style Rendering toolbar does away with all that messing around with print preview. You can now design for print media directly within Design view in Dreamweaver 8—excellent. This is where you will pick up the next stage of this tutorial.

Open your health.html file in Design view and select the print icon from the Style Rendering toolbar. If you don't see the Style Rendering toolbar, you can access it by right-clicking (Control+clicking on Mac) the toolbar area and selecting the option from the context menu (see Figure 2).

Accessing the Style Rendering toolbar

Figure 2. Accessing the Style Rendering toolbar

It's time to create a new style sheet. You can do this using the same steps you learned in Part 5. Once you create your style sheet, save it in the CSSFiles folder as HealthPrint.css.

Once you do that, return to health.html and click the print icon on the Style Rendering toolbar. Your layout should look like Figure 3.

health.html displayed in print mode

Figure 3. health.html displayed in print mode

Not a pretty site! Pardon the pun...

Page 2 of 4
Previous Page
Next Page