全国统一热线:
028-86758058
18980748058
购买流程
付款方式
常见问题
在线提问
续租服务
购物车(
0
件)
用户名:
密 码:
记住
首 页
HOME
域名注册
DOMAIN
虚拟主机
WEB HOST
成品网站超市
AUTO Site
VPS主机
VPS SERVER
云 主 机
CLOUD HOST
租用托管
SERVER
海外主机
HK HOST
代理专区
AGENT
客服中心
SERVICE
站长教程
SERVICE
欢迎光临西部数据云计算中心,我们将竭诚为您提供最优质的服务!
中文域名
域名转入
域名转出
DNS管理
动态域名
获取域名证书
域名停放
域名过户
集群主机
双线主机
基本主机
港台主机
论坛主机
Linux主机
Vip合租主机
超G型主机
ASP.net主机
Java主机
智能建站主机
网店主机
美国主机
数据库
成品网站超市
智能建站主机
集群VPS主机
国内VPS主机
香港VPS主机
美国VPS主机
云主机介绍
云主机购买
服务器租用
主机托管
常见问题
香港主机
港台主机
美国主机
国内免备案
步骤流程
代理级别
代理合同
代理模式
代理优势
在线申请
产品列表
常见问题
代理商分布图
常见问题
有问必答
跟踪提问
购买流程
产品价格
付款方式
常用软件
网站备案
续租服务
汇款确认
相关文档
联系我们
域名资讯
主机资讯
行业动态
网页制作
php教程
mysql教程
域名资讯
云计算资讯
网络编程
您当前的位置:
首页
>
网络编程
>
网站制作
将XHTML CSS页面转换为打印机页面
时间:1970-01-01 来源:互联网 作者:佚名
在以前,为Web页面创建一个打印机友好的版本意味着要设计一个布局和格式都经过修改的单独页面,这样才能够在打印的时候获得令人满意的效果。现在,通过使用结构化的XHTML和CSS,你可以实现同样的效果而只用花费少得多的精力。 从屏幕显示到打印效果 大多数的Web页面都
在以前,为Web页面创建一个打印机友好的版本意味着要设计一个布局和格式都经过修改的单独页面,这样才能够在打印的时候获得令人满意的效果。现在,通过使用结构化的XHTML和CSS,你可以实现同样的效果而只用花费少得多的精力。
从屏幕显示到打印效果
大多数的Web页面都是设计适用于在计算机屏幕上观看的。然而,有的时候用户需要将某些页面打印出来,也许就是为了保留一个长期的记录,或者将其用作方便的离线参考资料。
现在的麻烦是,让Web页面在计算机彩色屏幕上看起来引人注目和五彩缤纷的很多特性,都无法在打印版的Web页面上表现出相同的效果——尤其当打印机是黑白的时候。在被降级为灰度打印的时候,彩色的组合会失去(原有的)对比效果;图形会看起来失真,而且耗费太长的打印时间;在Web页面上起着重要作用的导航按钮在打印页面上也毫无用处。
为了克服这些问题,Web的创建者常常会为页面专门设计一个打印机友好的版本,这样访问者就有打印的欲望。打印机友好的版本通常都包括有和主要Web页面相同的内容,但是会省略掉大多数的图形、背景和导航元素。页面还会把彩色转换成某种形式,以便生成能够让人接受的灰度图像。
CSS的解决方案
使用结构化的XHTML标示和CSS格式将内容和表示分离开来的一个优势在于,通过更改CSS样式,你可以很轻易就把内容重新格式化。因此,创建一个打印机友好的页面就是把一个不同的CSS文件链接到相同的XHTML页面上。
你可以同时把屏幕样式表和打印样式表链接到同一个XHTML文件里,所以就没有必要单独创建一个打印机友好的页面,只需要一个打印机友好的样式表就行了。当你在链接代码里加入多媒体类型的文件时,这就是在告诉浏览器为了进行屏幕输出要遵循或者忽略哪些CSS的规则,而为了打印输出要使用哪些规则。
下面是链接到一对CSS文件的例子:
以下为引用的内容:
<linkrel="stylesheet"type="text/css"media="screen"href="mysite-screen.css"/>
<linkrel="stylesheet"type="text/css"media="print"href="mysite-print.css"/>
如果需要支持老版本的浏览器,那你就必须坚持使用CSS1的媒体描述符screen和print。它们是相互排斥的,因此在为屏幕显示而生成页面的时候,浏览器会忽略掉打印样式表,反之亦然。所以,每个样式表都需要包含相同的样式选择器,但是有不同的规则声明,以便为不同的输出设备分别生成页面样式。
简化CSS
如果你愿意放弃照顾老版本的浏览器,并假设你的用户正在使用支持CSS2的浏览器(比如说IE5及以上版本或者Netscape6及以上版本),你可以使用新的all媒体描述符来极大地简化CSS代码。
下面就是使用CSS2媒体描述符的链接的例子:
以下为引用的内容:
<linkrel="stylesheet"type="text/css"media="all"href="mysite-all.css"/>
<linkrel="stylesheet"type="text/css"media="print"href="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页面转换成为一个打印机友好的页面。
来顶一下
返回首页
推荐资讯
从零开始学ASP.NET-基础篇第1/7页
第一天 学习目的: 掌握最基本的Label、TextBox、Button控件
ASP.NET入门数据篇
对于网站编程的初学者来说,总是会上网找些源码来看,但久而
相关文章
ASP.NET数据库编程之处理文件访问许可
认识ASP.NET配置文件Web.config
asp.net WebForm页面间传值方法
用ASP.Net实现文件的在线压缩和解压缩
一个经典的ADO.NET入门例子
ASP.NET中文件上传下载方法集合
asp.net网络数据库开发实例精解 源文件
ASP.NET通过Remoting service上传文件
页面包含的处理
利用ASP.NET技术动态生成HTML页面
栏目更新
栏目热门
返回首页
关于我们
联系我们
付款方式
价格总览
资讯中心
友情链接
媒体关注
有问必答
投诉建议
网站备案
《中华人民共和国增值电信业务经营许可证》编号:川B2-20080058号
官方网址:
xibushuju.com
西部数据
Copyright © 2002~2015
天府快车
版权所有
电话总机:
028-86758058
(50线) 传真:
028-86758058