结构化的XHTML和CSS页面转换成为打印机页面

  次阅读 作者:智能小宝 来源:互联网 2016-03-25 16:38 我要评论(0)

在以前,为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。它们是相互排斥的,因此在为屏幕显示而生成页面的时候,浏览器会忽略掉打印样式表,反之亦然。所以,每个样式表都需要包含相同的样式选择器,但是有不同的规则声明,以便为不同的输出设备分别生成页面样式。

本站文章信息来源于网络以及网友投稿,本站只负责对文章进行整理、排版、编辑,是出于传递更多信息之目的,并不意味着赞同其观点或证实其内容的真实性。如果您有什么意见或建议,请联系QQ28-1688-302!

人工智能实验室
相关文章相关文章
  • 韩春雨称已能重复实验结果 近期将有消息公布

    韩春雨称已能重复实验结果 近期将有消息公布

  • 英国研发“杀生”机器人 通过生命体获取能量

    英国研发“杀生”机器人 通过生命体获取能量

  • 未来两年人工智能要怎么走?看这篇就够了

    未来两年人工智能要怎么走?看这篇就够了

  • 无人驾驶汽车如何改变城市生活?听听他们怎么说

    无人驾驶汽车如何改变城市生活?听听他们怎么说

网友点评网友点评
阅读推荐阅读推荐

据国外媒体报道,在过去两年内,聊天机器人(chatbot)、人工智能以及机器学习的研发和采用取得了巨大进展。许多初创公司正利用人工智能和...

霍金 视觉中国 图 英国著名物理学家霍金(Stephen Hawking)再次就人工智能(AI)发声,他认为:对于人类来说,强大AI的出现可能是最美妙的...

文|郑娟娟 今年,人工智能(AI) 60岁了。在AI60岁的时候,笔者想要介绍一下AI100,一个刚刚2岁的研究项目,但它的预设寿命是100年,甚至更长...

AlphaGo与李世石的人机大战,为大众迅速普及了人工智能的概念。 但对谷歌而言,除了下围棋,现在的人工智能进展到哪一步了?未来,人工智能...