日期:2013-07-13  浏览次数:21015 次

在以前,为Web页面创建一个打印机敌对的版本意味着要设计一个规划和格式都经过修正的单独页面,这样才能够在打印的时候获得令人满意的效果。如今,通过使用结构化的XHTML和CSS,你可以实现同样的效果而只用花费少得多的精力。
 
从屏幕显示到打印效果

大多数的Web页面都是设计适用于在计算机屏幕上观看的。然而,有的时候用户需求将某些页面打印出来,也许就是为了保留一个长期的记录,或者将其用作方便的离线参考材料。

如今的麻烦是,让Web页面在计算机彩色屏幕上看起来有目共睹和五彩绚丽的很多特性,都无法在打印版的Web页面上表现出相反的效果——尤其当打印机是黑白的时候。在被降级为灰度打印的时候,彩色的组合会得到(原有的)对比效果;图形会看起来失真,而且耗费太长的打印时间;在Web页面上起着重要作用的导航按钮在打印页面上也毫无用途。

为了克服这些问题,Web的创建者常常会为页面专门设计一个打印机敌对的版本,这样访问者就有打印的愿望。打印机敌对的版本通常都包括有和次要Web页面相反的内容,但是会省略掉大多数的图形、背景和导航元素。页面还会把彩色转换成某种方式,以便生成能够让人接受的灰度图像。

CSS的处理方案

使用结构化的XHTML标示和CSS格式将内容和表示分离开来的一个优势在于,通过更改CSS款式,你可以很轻易就把内容重新格式化。因此,创建一个打印机敌对的页面就是把一个不同的CSS文件链接到相反的XHTML页面上。

你可以同时把屏幕款式表和打印款式表链接到同一个XHTML文件里,所以就没有必要单独创建一个打印机敌对的页面,只需求一个打印机敌对的款式表就行了。当你在链接代码里加入多媒体类型的文件时,这就是在通知浏览器为了进行屏幕输出要遵照或者忽略哪些CSS的规则,而为了打印输出要使用哪些规则。

下面是链接到一对CSS文件的例子:

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

如果需求支持老版本的浏览器,那你就必须坚持使用CSS1的媒体描述符screen和print。它们是互相排斥的,因此在为屏幕显示而生成页面的时候,浏览器会忽略掉打印款式表,反之亦然。所以,每个款式表都需求包含相反的款式选择器,但是有不同的规则声明,以便为不同的输出设备分别生成页面款式。