将XHTML+CSS页面转换为打印机页面

2016-02-19 18:51 9 1 收藏

有一种朋友不在生活里,却在生命力;有一种陪伴不在身边,却在心间。图老师即在大家的生活中又在身边。这么贴心的服务你感受到了吗?话不多说下面就和大家分享将XHTML+CSS页面转换为打印机页面吧。

【 tulaoshi.com - Web开发 】

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

  简化CSS

  如果你愿意放弃照顾老版本的浏览器,并假设你的用户正在使用支持CSS2的浏览器(比如说IE5及以上版本或者Netscape 6及以上版本),你可以使用新的all媒体描述符来极大地简化CSS代码。

  下面就是使用CSS2媒体描述符的链接的例子: 

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

以下为引用的内容:
link rel="stylesheet" type="text/css" media="all" href="mysite-all.css" /
link rel="stylesheet" type="text/css" media="print" href="mysite-print2.css"/

  这些链接几乎和前面的完全一样;不同之处在于CSS文件里包含有用于打印媒体的样式。

  CSS文件里同media="all"联系在一起的样式可以应用于屏幕显示、打印,以及其他所有的媒体,所以你可以把所有创建的样式都放到这个文件里。同media="print"单独联系在一起的CSS文件可以小得多,因为页面从所有的媒体文件继承了所有的样式,这就没有必要再复制打印媒体文件里的这些样式了。

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

  打印媒体CSS文件里唯一需要的样式是那些为打印输出而更改或者添加页面样式。一般来说,这只不过是一些禁止显示包含有图形和导航内容的div的样式,和把主体标签以及主要div的宽度和空白设置替换成适合打印输出的设置。

  这个技巧能够起作用是因为所有的媒体CSS文件和打印媒体CSS文件都组合成了相同的层叠样式规则。因此,对这些CSS文件的链接顺序相当重要。所有的媒体文件链接都必须要放在打印媒体文件链接之前。

  下面是一些关于使用打印媒体CSS文件的提示:

  如果禁止某个div的显示,就要使用display: none而不能用visibility: hidden。

  点(pt)和英寸(in)都不是用于屏幕显示的正确度量单位,但是它们是打印输出的正确度量单位。 

  在打印媒体文件里使用的选择器要和你在所有媒体文件里使用的选择器完全相同。例如,如果你使用div #sidenav来选择所有媒体文件里id为sidenav的div,那么在打印媒体文件里使用#sidenav就可能无法成功地达到你的目的。

  不要忘记明确地强制替代从一个文件到另一个文件都会发生改变的规则声明。例如,如果你在所有的媒体文件里为一个元素设置了padding,并希望在打印输出里去掉这个padding,那么在打印媒体文件里加入一个忽略padding声明的样式是不够的——你必须明确地设置padding: 0pt,以取代前面的设置。

  如果你正在使用诸如Dreamweaver这样的图形编辑器,你就可以预览生成页面的屏幕效果,而不是打印输出的效果。要在Dreamweaver的设计(Design)查看窗里预览打印样式,就要把到打印媒体CSS文件的链接改成media="screen"。这就让你可以预览打印媒体文件里的CSS样式。不要忘了在发布你的页面之前把媒体描述符改回到media="print"。

  当你需要为自己的访问者提供一个打印机友好的Web页面,你不再需要为原有的页面创建一个单独的版本。添加一个对带有media="print"媒体描述符的CSS样式表的链接,就能够把任何XHTML/CSS页面转换成为一个打印机友好的页面。

来源:http://www.tulaoshi.com/n/20160219/1619254.html

延伸阅读
标签: 电脑入门
我们在编写完文档后经常会想预览一下排版效果,但是如果你没有安装打印机就无法使用,那一定要买一台打印机吗?其实是不需要的,我们只要安装一下虚拟打印机就可以了,本教程为大家介绍一下虚拟打印机的安装方法。 那么如何安装虚拟打印机呢,下面介绍操作步骤。 步骤一: 单击开始设置打印机和传真添加打印机,弹出添加打印机向导对话框,单...
标签: Web开发
     Blog的全名应该是Web log,中文意思是“网络日志”,后来缩写为Blog,而博客(Blogger)就是写Blog的人。从理解上讲,博客是“一种表达个人思想、网络链接、内容,按照时间顺序排列,并且不断更新的出版方式”。简单的说博客是一类人,这类人习惯于在网上写日记。 如何应用HTML和CSS写出漂亮正规的BLOG:   ...
打印机的安装一般分为两个部分,一个是打印机跟电脑的连接,另一个就是在操作系统里面安装打印机的驱动程序。 如果是安装USB接口的打印机,安装时在不关闭电脑主机和打印机的情况下,直接把打印机的USB连线一头接打印机,另一头连接到电脑的USB接口就可以了。 按照上面的步骤把打印机跟电脑连接好之后,先打开打印机电源,再打开电脑开关。 &...
安装打印机,一个对于会电脑的人是一个很简单的操作,但如果对一个不熟悉的人,有时候遇到的问题会成百上千。下面给大家说说我安装打印机的经验。以下以HP  LaserJet 1020为例。 本地打印机安装方法 1、首先把随机配送光盘放进光驱,如果要安装打印机的电脑没有光驱的话,也可以直接把文件拷到U盘,再放到该电脑上即可。 2、如果由光盘...
标签: 打印机
打印机和传真  在主电脑(需要将打印机设置为共享的电脑)上,点击屏幕左下角的“开始”菜单,选择“打印机和传真”; 选择打印机共享   打开“打印机和传真”文件夹,右击需要共享的打印机,从弹出菜单中选择“共享”命令,如图; 输入名称确定   打开“属性”对话框,并已定位到“共享”选项卡:我们选择“...

经验教程

269

收藏

81
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部