The XHTML / css page has become a printer pages Author: Builder.com 
  2004-03-23 03:3 PM 

  This article translated from Builder.com, please do not reprint without permission 

  Previously, the creation of a Web page for the printer-friendly version of a means to design the layout and format changes have been separate pages, so that it can be in print when the results are satisfactory.    Now, through the use of the structure of XHTML and CSS, you can achieve the same effects only spend much less energy. 

  From the screen to print 

  Most of the Web pages are designed to be on the computer screen watching.    However, some users often need to print out some pages, perhaps in order to maintain a long-term record, or be used as a convenient reference offline. 

  Now the trouble is to let Web pages on a computer screen Color look striking and colorful many characteristics that can not be printed version of the Web page show the same effect - especially when the printer is black and white time.    Gray was downgraded to a print, color combinations will be lost (the original) contrast; graphics will appear distortion, and print time-consuming too long in the Web page navigation plays an important role in the button Print page also useless. 

  In order to overcome these problems, the creation of Web pages are often designed for a printer-friendly version, so visitors have the desire to print.    Printer friendly version usually include a Web page and the main content of the same, but it will omitted most of the graphics, backgrounds and navigation elements.    The color pages will be converted into a form that can be acceptable to people in order to generate the gray image. 

  CSS solution 

  Use of the structure marking and xhtml css content and format will be separated from that of an advantage is through changes CSS style, you can easily put content reformatting.    Therefore, to create a printer-friendly pages is to a different CSS file links to the same XHTML pages. 

  At the same time you can screen the style sheet and print style sheet with a link to XHTML document, so there is no need to create a separate printer-friendly pages, only need a printer friendly style sheet on the line.    When you have added the link code types of multimedia documents, and that is to tell the browser to output to the screen to be followed or ignored what CSS rules, and output to be used for printing What are the rules. 

  Below is a link to a CSS document examples: 

  <Link rel = "stylesheet" type = "text / css" media = "screen" href = "mysite-screen.css" 
/>
  <link Rel="stylesheet" type="text/css" media="print" href="mysite-print.css" /> 

  If the need to support the old version of the browser, then you must adhere to the use of the media descriptor CSS1 screen and print.    They are mutually exclusive, so for the generation and Display pages, the browser will overlooked print style sheet, and vice versa.    Therefore, the need for each style sheet contains the same style choices, but there are different Rules in a statement to different output devices were generated page style. 
  Simplified CSS 
  Click here to find out more! 

  If you are willing to give up care for the elderly version of the browser, and assuming that your users are using the browser support CSS2 (for example IE5 and above, or Netscape 6 and above), you can use the new website to all media described greatly css code simplification. 

  Below is the use of CSS2 media described at the link examples: 

  <link Rel="stylesheet" type="text/css" media="all" href="mysite-all.css" /> 
  <Link rel = "stylesheet" type = "text / css" media = "print" href = "mysite-print2.css" 
/>

  These links, and almost exactly the same as before; The difference is CSS document contains patterns for print media. 

  CSS file with the media = "all" linked to the pattern can be applied to screen display, print, as well as all other media, so you can create a style all have put this document.    With media = "print" separate linked to the CSS documents can be much smaller, because the media from all pages inherit all of the paper forms, which does not need to copy the print media these documents in the form of a. 

  Print media CSS file only those who are in need of patterns for print output changes or add a page style.    Generally speaking, it is only a show that includes some of the Prohibition of graphics and navigation content div styles, and the main div tags and the Width of the main gaps and set up replacement suitable for print output settings. 

  This technique can work is because all the media CSS file and print media CSS documents are the same combination of a Cascading style rules.    Therefore, the CSS document links these very important order.    All the media files on the links will have to print media before the document links. 

  Below are some on the use of print media CSS document tips: 

  * If a div prohibit the display, it is necessary to use display: none can not be visibility: hidden. 
  * Points (pt) and inches (in) is not used to display the correct units of measurement, but they print output is the correct units of measurement. 
  * Print media files, the use of the selector and you must document the use of all the media of choice for the same.    For example, if you use div # sidenav to select all media document id as sidenav the div, in the print media documents on the use of # sidenav may not be able to successfully achieve your objective. 
  * Do not forget the Clear alternative to compulsory from another document to a file will change the rules of the statement.    For example, if you document all the media elements for a set of padding, and that print output of the Padding removed, then the document in the print media into a pattern of neglect padding statement is not enough - you must clearly set padding: 0pt to replace the previous settings. 
  * If you are using Dreamweaver such as graphics editor, you can preview screen pages generated effects, rather than print output results.    Dreamweaver to design (Design) Show preview window, the print styles, we should print media CSS document to the link into media = "screen."    This allows you to preview documents in the print media CSS style.    Do not forget your pages in the publication before the media descriptor to return to the media = "print." 

  When you need to own a printer friendly visitors to the Web page, you no longer need for the original pages to create a separate version.    Add one pairs with media = "print" media descriptor css style sheet link, we will be able to any XHTML / CSS pages converted into a printer-friendly pages. 
  The author: Michael Meadhra in Web development in the initial stage of development in this area.    He published dozens of books have been accumulated, including the forthcoming listing from Osborne / McGraw-Hill on the "how to do everything Dreamweaver MX 2004 (How to Do Everything with Dreamweaver MX 2004)."