I'm not talking about just to mke print css or media=print
Questions:
disply:none in print css) we
should care to get good print from
website pages.There are a couple helpful articles on A List Apart on this topic: Going to Print and Printing a Book with CSS: Boom!
Background images are not printed. It is possible, but the default setting in your browser is; don't print background images.
I make sure the images have a resolution of 150dpi. Then they are not to big for the screen and acceptable for paper. The GIF format does not store the dpi information in the file, but you can give it an acceptable size with CSS.
Smaller font need less ink.
From the XHTML point of view there's not much to do besides making sure the code is valid and semantic.
Now about the print css. You could consider that some people might print your page in black and white, or they might have very little color ink (and thus get fainter colors). So if you have any light colors, pastels or places where there's not a lot of contrast between the text and the background, make sure you bump up the contrast in the print style. Try printing your page in black and white and see how it looks.
I'm not sure how plugins like flash and silverlight get printed, but you could add background images to them in your print.css so if they don't get printed at least you can get a snapshot of the flash instead of a white hole.
For images I'd suggest what Ton van Lankveld said. Make them 150dpi, and also make sure they look good on CMYK (you can do this in Photoshop by going to View > Proof Colors).
Check your fonts too. Some might need to be smaller, some bigger. If you have a lot of text you might want to consider using a more "print-based" font like Helvetica, or Times New Roman (Specially if you're using screen-based fonts like Verdana).
Finally to save ink I would remove anything that's not absolutely necessary (yup display:none). I'd stay away from background images in print.css for that same reason. I would set all hyperlinks to black (or the text color) with no underline, since there's no reason to have them in a printed page.
You could also save some ink by using #111 or #222 instead of #000 (but it might affect legibility).
While I admit that this is not likely to be the most practical answer you receive, you might want to consider ecofont, a font designed especially for saving printer ink.
See comment.
The following technique actually uses more ink but is relevant to making a print version of a page.
Let's say that there is a page where the hyperlinks actually are very important to the content -- say, it's a listing of useful websites for topic xyz. Not sure why someone would print this out, but if they do, a bunch of underlined sentences isn't going to help much.
You can actually use CSS to print out the urls.
For posterity, the code is
a:link:after, a:visited:after { content:" [" attr(href) "] "; }
I'd recommend only doing it for selected links by using a class, something like
a.printable:link:after, a.printable:visited:after { content:" [" attr(href) "] "; }
I've always liked angled brackets for this purpose, so I'd probably rewrite it
a.printable:link:after, a.printable:visited:after { content:" <" attr(href) "> "; }
It's important to keep in mind that entities aren't allowed in the "content:" value in css. Basically you just put in the raw text that you want.
Also, for print you should probably use pt rather than px or em for sizing. You can make the size smaller than the screen equivalent. The default size is often set at 12 point but you can easily make it 11 point and still maintain plenty of readability. That will save a fair amount of ink (and paper!) in the long run.
With the possible exception of content-graphics (in other words, graphics which make up the meaningful content of the page, as opposed to graphics used for layout, beautification or eye candy), almost no non-text should make it to the page. Borders and backgrounds should be eliminated except in rare occasions (such as when attention must be drawn to a section of text, although simply setting it in bold would probably be just as effective, and again save ink). If you are using css to make fancy looking <hr>s, get rid of the styling altogether when printing and just use the built in styling, or replace all <hr>s with a plain black or gray line (and, again, use pt, as in 2pt, rather than px, to change the height).
I can't think of many situations where you'd have content in an iframe that you'd want to be printed. If that's the case, it may very well be worthwhile to make a printable version of the page that takes the content out of the iframe and directly into the document, making it far better for printing.