Dreamweaver CS6: 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—directions to a concert, a list of product names and ratings, or a long-winded 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 Dreamweaver applies 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 it looks good when you print it out without affecting its appearance on-screen. Figure 8-13 shows the concept in action.

The basic process involves creating an external style sheet that contains styles ...