结构化的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!

人工智能实验室
相关文章相关文章
  • 第一批国家重点研发计划公布,旷视科技开启“五年行动”

    第一批国家重点研发计划公布,旷视科技开启“五年行动”

  • 长虹新款智能语音空调,告诉你空调也能玩Siri

    长虹新款智能语音空调,告诉你空调也能玩Siri

  • 让AI触手可及  Qualcomm携手创通联达推出全新终端侧AI开发套件

    让AI触手可及 Qualcomm携手创通联达推出全新终端侧AI开发套件

  • 品友互动为Digital Travel APAC2018 唯一受邀中国AI企业

    品友互动为Digital Travel APAC2018 唯一受邀中国AI企业

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

据外媒报道,STEER打造了首款完全自动驾驶停车技术,旨在使常规车辆转变为无人驾驶车辆。STEER的首款技术应用是4级自动驾驶及网络安全停车...

近日,美国软性机器抓手制造商 Soft Robotics 宣布,获得 2000 万美元的融资,本轮投资者包括 Scale Venture Partners,Calibrate Ventures...

据外媒报道,加州车管局发布了《2017自动驾驶脱离报告(California Autonomous Vehicle Disengagement Reports)》,其中谈及了脱离的具体...

用人机语音交互,来解决智能家居适老的问题;通过家庭门禁与安防套件、空气净化套件、可燃气体与有害气体监控套件等相互联动,在不同生活情...