Author: Builder.com
Tuesday, March 23 2004 3:03 PM
Creating a printer-friendly version for the web page means that you want to design a layout and format to be modified separate pages, so you can get a satisfactory effect when printing. Now, by using structured XHTML and CSS, you can realize the same effect and use less energy. From the screen display to the printing effect, most web pages are designed to be available on the computer screen. However, sometimes the user needs to print some pages, perhaps to retain a long-term record, or use it as a convenient offline reference. The current trouble is to make the web page look at the computers and colorful features, can't show the same effect on the print version of the Web page - especially when the printer is black and white. When being downgraded to grayscale printing, the color combination will lose (original) contrast effect; the graphic will look distortion, and it costs too long print time; play an important role in the web page, the navigation button is printed There is also useless on the page. In order to overcome these problems, the founders of the Web often designed a printer-friendly version to be specifically designed so that visitors have a desire to print. The friendly version of the printer usually includes the same content as the main web page, but it will omit most of the graphics, background, and navigation elements. The page will also convert color into some form to generate a grayscale image that can be accepted. CSS solution Use a structured XHTML flag and CSS format a advantage that separates the content and explicit openings is that by changing the CSS style, you can referralize the content easily. Therefore, creating a printer-friendly page is to link a different CSS file to the same XHTML page. You can connect screen styles and print style tablets to the same XHTML file at the same time, so there is no need to create a printer-friendly page, just a printer friendly style sheet. When you add a multimedia type file in the link code, this is what rules for printing the output in order to follow or ignore the rules to follow or ignore the rules to follow or ignore the screen output. The following is an example of linking to a pair of CSS files: If you need to support the old version of the browser, you must adhere to the media descriptor Screen and Print using CSS1. They are mutually exclusive, so when the page is generated for the screen display, the browser ignores the print style sheet and vice versa. Therefore, each style sheet requires the same style selector, but there are different rule declarations to generate a page style for different output devices.
Simplified CSS
If you are willing to give up your old version of the browser and assume that your users are using browsers that support CSS2 (for example, IE5 and above or Netscape 6 or above), you can use the new all media descriptor to greatly Simplify the CSS code.
Below is an example of linking using a CSS2 media descriptor:
These links are almost exactly the same; differences in the CSS file contains a style for printing media.
The style of contact with Media = "all" can be applied to screen display, print, and all other media, so you can put all the created patterns in this file. The CSS files that have been linked together with Media = "Print" can be much smaller, because the page inherits all the styles from all media files, which is not necessary to copy these patterns in the print media file.
The only style required in the print media CSS file is those that are changed or adding a page style for printouts. In general, this is only some style that disables the display of DIVs containing graphics and navigation content, and replacing the main tag and the width and blank settings of the main DIV to fit the printout settings.
This technique can work because all media CSS files and print media CSS files are combined into the same stacked style rules. Therefore, the link sequence of these CSS files is quite important. All media file links must be placed before printing media file links.
Here are some tips about using print media CSS files:
If you do not display a DIV display, use Display: None without using Visibility: Hidden. Points (PT) and inches (IN) are not used for the correct metric unit displayed, but they are the correct metric unit of the printout. The selector used in the print media file is exactly the same as the selector you use in all media files. For example, if you use Div # SideNav to select all media files for the Sidenav's DIV, then use #SIDenav in print media files, you may not succeed in achieving your purpose. Don't forget to explicitly enforce rules declarations that change from a file to another file. For example, if you set up Padding for an element in all media files, I hope to remove this Padding in the printout, then add a style that ignores the Padding declaration in the print media file - you must be explicitly set Padding: 0pt to replace the front settings. If you are using a graphic editor such as Dreamweaver, you can preview the screen effect of the generated page instead of printing the output. To preview the print style in Dreamweaver's Design (Design), you must change the link to the print media CSS file to Media = "Screen". This allows you to preview the CSS style in the print media file. Don't forget to change the media description back to Media = "Print" before publish your page.
When you need to provide a printer-friendly web page for your visitors, you no longer have a separate version for the original page. Add a link to a CSS style sheet with a Media = "Print" media descriptor, you can convert any XHTML / CSS page to a printer-friendly page.
