专注于互联网--专注于架构

最新标签
网站地图
文章索引
Rss订阅

首页 »Html教程 » xhtmlcss:把XHTML/CSS页面转换成为打印机页面 »正文

xhtmlcss:把XHTML/CSS页面转换成为打印机页面

来源: 发布时间:星期四, 2009年2月12日 浏览:72次 评论:0


在以前为Web页面创建个打印机友好版本意味着要设计个布局和格式都经过修改单独页面这样才能够在打印时候获得令人满意效果现在通过使用结构化XHTML和CSS你可以实现同样效果而只用花费少得多精力
 
从屏幕显示到打印效果

大多数Web页面都是设计适用于在计算机屏幕上观看然而时候用户需要将某些页面打印出来也许就是为了保留个长期记录或者将其用作方便离线参考资料

现在麻烦是让Web页面在计算机彩色屏幕上看起来引人注目和 5彩缤纷很多特性都无法在打印版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=\"pr\" href=\"mysite-pr.css\" />

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

0

相关文章

读者评论

发表评论

  • 昵称:
  • 内容: