标记语言——打印样式(5)

预览打印节省墨水

另一个节省墨水的技巧,是以浏览器的预览打印功能试着显示页面的打印效果,而不是真的把整份页面印到纸上.

在大多数浏览器里,文件 - 打印 对话框对有个预览选项,让你查看页面的打印效果,你能在这里好好观察一下打印样式表的效果.

看起来如何

在我的个人网站上使用打印样式表与先前我们一同制作的示例十分类似,你能比较一下图11-1和11-2,看看我是怎么设计打印样式的,去掉导航,侧边栏,同时揭露链接内容,调整字体和字体大小让本文更容易阅读.

图11-1 SimpleBits 以浏览器查看,使用屏幕样式表

图11-2 SimpleBits打印版

从图11-1和11-2可以清楚的发现,只要一个小小的CSS文档,就能为任何页面提供专门用来打印的特殊版本.这是个任何项目都很容易加入的功能,同时能在使用者尝试打印你的页面时增加体验.

下次如果你的老板说:"我们需要为网站建立一份打印友好的新模板,而且还要完全一样的目录结构",你就能从后口袋中(或其他放得下这本书的地方)抽出这个小技巧了.

如果你想知道更多打印样式的设计技巧,一定要阅读CSS大师 Eric Meyer的文章 " CSS Design: Going to Print " (http://www.alistapart.com/articles/goingtoprint) 以及 " Print Different " ( http://www.meyerweb.com/eric/articles/webrev/200001.html ).

归纳

我们稍微讨论了打印样式表里面能包含的规则.由于可以指定媒体类型,将打印,屏幕显示所有的样式分开,因此为每种媒体调整细节变得十分简单,容易维护与管理.不再需要为整个网站建立一份打印友好的副本,因为你可以使用相同的标记源代码,配上一份打印专用的CSS文档完成相同的功能.

未来我希望其他设备也能支持更多媒体类型,如果为特定设备设计CSS样式就能让PDA,手提电话与屏幕阅读器正常读取同一份XHTML的话,我们的工作便可以轻松不少.