Dreamweaver CS5: The Missing Manual

Styling for Print

You may be surprised to see a section on print design in a book dedicated to creating beautiful on-screen presentations. However, it’s common to see people print out web pages: printed directions to get to a concert, a list of product names and ratings to review while you’re out shopping, or a longwinded web treatise that’s easier to read on paper while reclining in a favorite chair.

Unfortunately, some web pages just don’t print well. Sometimes the banner’s too big to fit on one sheet of paper, so it spans two printed pages; or the heavy use of ads wastes toner. And some CSS-based layouts simply print as jumbled messes. Fortunately, CSS has an answer: printer style sheets. The creators of CSS realized that people might use web pages in different ways, such as printing them out. In fact, they went so far as to define a large group of potential “media types” so web designers could customize pages for different output devices, including Teletype machines, Braille readers, and more.

Basically, by specifying a media type, you can attach an external style sheet that’s applied only when someone sends the page to a particular device. For instance, you could have a style sheet that works only when someone looks at a web page on a monitor, and another that applies only when they print the page. You can tweak a page’s styles so the page looks better when printed, without affecting the page’s appearance onscreen. Figure 8-13 shows the concept in action.

The basic process involves ...