大多数的Web页面都显示在电脑屏幕上,人们通过屏幕观看,但是,有时候用户想要将一些网上的内容打印出来,这就需要与打印媒体连接起来。由于原来采用的是能让Web页面在屏幕上显示的效果很好的那种格式,但在打印时效果并不那么好,Web创建者们通常都会创建一些独立的页面,这些页面与打印机联系紧密,而用户也需要经常打印这些页面。但如果你使用了XHTML标记和CSS,你就没必要再创建一个独立的与打印机相连接的页面了,你仅仅只需要几种CSS样式来将需打印的页面的内容进行格式化,以便于打印输出就行了。
以良好的标记开头
XHTML和CSS有一种特殊的功能,即内容与表述是各自独立的;你可以随意将其格式改成另一种媒体形式,而不必改变它的内容,也不必改变它的基本标记。不过为了使这一想法能在实践中成为可能,你应该让你的结构标记好一点,干净整洁一点。因此,在你准备用CSS创建一个与打印机相连的页面之前,要仔细看看它的XHTML标记。
清除该标记中所有的内嵌样式以及其它固有的表述格式。为了让该打印媒体的CSS文件能发挥应有的作用,所有的样式和格式都必须由它自带的样式表来决定,而不是由它的标记中的格式来决定。同样,将页眉中所有的CSS样式移走,将它们存入一个外部样式表中,这个表是附在(连接在或被输入)该XHTML文档中的。
检查标记的时候,你要确定它的内容都是按逻辑分组的,分成了一个个的div,而且每一个div都是通过其ID或类别来鉴别。
第一步:添加一个打印样式表
用CSS创建一个与打印机密切联系的页面的第一步,是将打印媒体的CSS文件附加到你的XHTML文档中。与下面两个独立的CSS文件相比,我更倾向于使用XHTML页眉中的链接,这两个文件,一个是有关所有媒体的(或者屏幕媒体),另一个是有关打印媒体的。该链接看起来与下面这些有点相似:
<link rel="stylesheet" type="text/css" media="all" href="mysite-all.css" />
<link rel="stylesheet" type="text/css" media="print" href="mysite-print.css" />
第二步:设置颜色和字体
在屏幕上,那些有色文本,多彩的颜色,以及纹理清晰的背景看起来比较宜人,但是如果是在一张由一台黑白打印机打印出来的纸张上,可能就不那么好了。在这种情况下,通常是简单的黑底白字更好看一些。
通常设计师们会在主体标签选择器中设定默认背景和文本颜色。这个选择器还设置默认字体外形和大小,如下所示:
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
background-color: maroon;
color: silver;
}
为了使这种样式与打印机之间配合更好一些,你要将颜色改为白色背景黑色字体,还要设置基本的字体大小。主要的样式像下面这样:
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 12pt;
background-color: white;
color: black;
}
注意一下,在打印样式表中,字体大小是以点(pt)来计的。如果要指定屏幕显示度量单位的话,象素比点和英尺更合适,而在打印中,情况却恰好相反,人们采用的往往是前者。
另一方面,许多人建议使用一种有衬线的字体来取代人们在屏幕上广泛使用的无衬线字体,我个人觉得这是一种逐项设计,因此,我不会自动转换每个打印样式表中的字体。
第三步:链接的样式
对于打印输出中的链接的处理,存在着两种不同的看法,两者各成一派。一种看法是,链接在纸张上并不发挥作用,因此,应该对它们进行一番设计,就像设计文本中其它部份一样。另一种看法则认为,链接对于一个Web的结构来说至关重要,正由于它的重要性,在打印文本中,它应该清楚可见。
如果不考虑你的设计意图,不管你是想突出链接还是让它掺入到文本中,有一件事是无可置疑的,那就是你要改变普通的Web页面和打印版之间的链接的样式。由于普通链接与已访问链接之间并没有什么区别,这样你就可以将那两个选择器合并起来,就像这样:
a:link,a:visited {
color: #3333CC;
text-decoration: underline;
font-weight: bold;
}
这个盒子将链接设为深蓝色(在黑白打印机上则显示为深灰色),粗体,有下划线,这也是链接的一种最普通的无格式样式,即白色背景上的黑色文本。