Here is my version of a good tutorial I found: http://www.chiefcrazyhair.com/SCC/PrintableStyles/PrintableStyles.htm
Please look at the code for the HTML, the screen CSS, and the print CSS.
Be sure that you include the tags in the head to tell the browser which stylesheet to use for the chose viewing method. Use <link rel=”stylesheet” href=”style_screen.css” type=”text/css” media=”screen”></link> for screen viewing and use <link rel=”stylesheet” href=”style_print.css” type=”text/css” media=”print”></link> for print view. Beware that if you choose media=”all” on your link to the screen stylesheet then you will never get the printable stylesheet.
Your best tool in this process is the display: none; CSS rule which will delete the object and the space it takes up. Using visibility: hidden; will erase the object but leave the space that it occupied.
While you are working on formatting your stylesheet-for-print, you have a few options to speed the process along:
- You can use the built in Dreamweaver style rendering tool. Activate the panel by going to View> Toolbars> Style Rendering, then choose an icon for the style that you are targeting (print in this case).
- You can view the page in a browser, then go to File> Print Preview. This is the BEST way to make sure it works and should be your last step.
- You can swap the media tags so that you see the print page as the webpage, this will save you having to use the print preview option constantly. See below:
<link href=”mystyles_screen.cssmedia=print
<link href=”mystyles_print.css” media=screen
**Please note: Flash Gallery pages do not need to be printable. If you want to allow the user to print a gallery of your work, it may be best (though you are not required) to create a PDF or Brochure so that you are credited appropriately.
From the above tutorial: Tips and tricks for printable HTML
There are a few things that should be kept in mind when creating a print stylesheet:
Don’t use a pixel font size
If you give a pixel font size, the pixels are translated to printer units, which is not always what you want.Don’t use a fixed size page
If you give the page a fixed size (for example 1000 pixels), then there is a chance that part of the content falls outside the printing range. This causes text and images to be cropped off, so its better to use percentage units.Keep the number of images down
People are usually more interested in the text when printing a page, so keep the number of images down. Its also a good idea to hide banners and ads.Hide the site navigation
Hyperlinks and buttons are useless on a printed sheet of paper, so try to hide as much navigation as possible.
Is your page migrating to print rather easily? You probably built it semantically, where the HTML presents the content and the CSS presents the design. Just like explained in this article: http://www.wise-women.org/tutorials/cssplanning/print.shtml
