Adobe® Dreamweaver® CS5 Classroom in a Book: Creating Style Sheets for Other Media Types
- Displaying the style rendering toolbar
- Converting an existing style sheet for print
- Hiding unwanted page areas
- Removing unneeded styles
Note: This excerpt is from a draft manuscript and may not be representative of the final published work.
Current best practices call for the separation of presentation (CSS) from content (the HTML tags, text, and other page elements). The reason is simple: by separating the formatting, which may only be relevant for one type of medium, one HTML document can be formatted instantly for multiple purposes. More than one style sheet can be linked to a page. By creating and attaching style sheets optimized for other media, the specific browsing application can select the appropriate style sheet and formatting for its own needs. For example, the style sheet created and applied in the previous exercises was designed for a typical computer screen display.
In this exercise, you’ll convert a CSS screen-media file to one optimized for print. This is a popular technique for many websites today. Designers frequently include a “Print” link on pages heavy with text so that users can send the information to the printer more effectively. Print style sheets often adjust colors to work better in print, hide unneeded page elements, or adjust sizes and layouts to be more suitable for printing.
When the print queue is activated, the printing application checks for a print-media style sheet. If one is present, the relevant CSS rules are taken into account. If not, the printer defers to the rules in the screen or all-media style sheets or the CSS defaults for print.
Displaying the style rendering toolbar
Dreamweaver’s default display medium is screen media. However, Dreamweaver has the capacity to switch how the media is rendered in Design view using the Style Rendering toolbar. With Design view’s rendering of the rules in a print style sheet, you can see the effect your style rules will have on a printed page.
- If necessary, open the mylayout.html file by double-clicking its filename in the Files panel.
- Choose View > Toolbars > Style Rendering.
The Style Rendering toolbar appears above the Document window. Leave it visible for the next exercise.