优内建站网,专业建站,企业建站,免费建站,智能建站,个人建站!
主营企业建站,seo优化,手机网站,微信网站开发等业务!>> 繁体中文
用户名: 密 码: 验证码:    
企业建站,专业建站,模板建站,智能建站
 您现在的位置:首页 >> CSS+DIV教材 >> 详细内容>>        【字体:  】【颜色: 绿

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

在百度搜索关于“如何将XHTML+CSS页面转换为打印机页面 ”的内容

在谷歌搜索关于“如何将XHTML+CSS页面转换为打印机页面 ”的内容

买空间、服务器就上威客主机网(VK163.COM) 虚拟主机评测+IDC导航=威客主机之家 标志设计
[内容提要] 简介: 在以前,为Web页面创建一个打印机友好的版本意味着要设计一个布局和格式都经过修改的单独页面,这样才能够在打印的时候获得令人满意的效果。现在,通过使用结构化的XHTML和CSS,你可以实现同样的效果而只用花费少得多的精力。  从屏幕显示到打印效果  大多数的Web页...

作者: 优内科技  来源: 优内科技  驻站日期:2009/1/4 【 加入收藏 】 【 打印此页 】 【 关闭

简介: 在以前,为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=http://www.xker.com/page/e2007/1120/"mysite-screen.css"/>
<link rel="stylesheet" type="text/css" media="print" href=http://www.xker.com/page/e2007/1120/"mysite-print.css" />

  如果需要支持老版本的浏览器,那你就必须坚持使用CSS1的媒体描述符screen和print。它们是相互排斥的,因此在为屏幕显示而生成页面的时候,浏览器会忽略掉打印样式表,反之亦然。所以,每个样式表都需要包含相同的样式选择器,但是有不同的规则声明,以便为不同的输出设备分别生成页面样式。 

  简化CSS 

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

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

以下是引用片段:
<link rel="stylesheet" type="text/css" media="all" href=http://www.xker.com/page/e2007/1120/"mysite-all.css" />
<link rel="stylesheet" type="text/css" media="print" href=http://www.xker.com/page/e2007/1120/"mysite-print2.css"/>

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

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

  打印媒体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页面转换成为一个打印机友好的页面。
 在以前,为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=http://www.xker.com/page/e2007/1120/"mysite-screen.css"/>
<link rel="stylesheet" type="text/css" media="print" href=http://www.xker.com/page/e2007/1120/"mysite-print.css" />

  如果需要支持老版本的浏览器,那你就必须坚持使用CSS1的媒体描述符screen和print。它们是相互排斥的,因此在为屏幕显示而生成页面的时候,浏览器会忽略掉打印样式表,反之亦然。所以,每个样式表都需要包含相同的样式选择器,但是有不同的规则声明,以便为不同的输出设备分别生成页面样式。 

  简化CSS 

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

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

以下是引用片段:
<link rel="stylesheet" type="text/css" media="all" href=http://www.xker.com/page/e2007/1120/"mysite-all.css" />
<link rel="stylesheet" type="text/css" media="print" href=http://www.xker.com/page/e2007/1120/"mysite-print2.css"/>

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

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

  打印媒体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页面转换成为一个打印机友好的页面。

添加到QQ书签 百度收藏 订阅到抓虾 添加到鲜果  新浪ViVi  365Key网摘  天极网摘  我摘  和讯网摘  yahoo  收藏到收客网  Digbuzz我挖网  添加到饭否  挖客  添加到google  

   【回到顶部】 【返回文章列表】 编辑:优内科技
⊕ 上一篇:CSS 等比缩放缩略图 IE6 IE7 FF
⊕ 下一篇:用CSS的float属性创建三栏布局网页的方法
  相关新闻
返回首页 | 设为首页 | 添加收藏 | 关于我们 | 联系我们 | 企业文化 | 合作伙伴 | 诚聘英才 | 网站报价 | 企业资质 | 网站地图
邮箱登陆 E- mail:master@cck5.com 点击这里给我发消息 客服专员 QQ:310203268 点击这里给我发消息 技术咨询 QQ:22071287点击这里给我发消息 代理备案 QQ:529631515
丰富的网站建设经验,专业提供网站建设、网站制作、网页设计服务,专业设计,真诚服务,不满意不收费!
Copyright 2008 - 2025 cck5 Inc. All Rights Reserved 优内建站网络科技公司
本站部分资源来自网络,如有侵犯您的版权,请告之,我们将即刻删除!QQ:310203268
主要业务:网站建设企业建站专业建站智能建站SEO优化微信建站手机建站
本站ICP备案号:浙ICP备11019299号 中国电信增值ICP经营许可证
不良信息举报中心 江西网警 信息产业部门备案 企业法人营业执照
 
扫优内微信二维码
“码”上有惊喜