| 订阅 | 在线投稿
分享
 
 
 

通过重定义CSS,实现网页内容完美打印输出

来源:互联网  宽屏版  评论
2008-08-15 05:13:23

原作者:Matthew Griffin

虽说已是互联网无所不能的时代,但还是会需要将网页内容打印出来阅读。对于网生的电子报、电子期刊这些更适合于在网络环境中阅读的内容,怎样通过打印输出生成适当的纸媒页面呢?长时间来,这一直是一个课题。为了写如下这篇博文,作者对相关问题进行了深入思考,并为Bits O' NewMedia网站编写了适于打印输出的样式表,现将相关经验分享给大家。

设定适于打印输出的样式表

这并不象想象中那么难,第一步要做的是复制原用的CSS文件,将其命名为print_style.css,接下来,就是要在其首行加入语句:

<link rel="stylesheet" type="text/css" media="print" href="print_style.css" />

我们看到,这一条语句惟一特别的地方在于,media参数被赋值为"print"。而如果在页面内加入了这样的一条语句,那么再执行file>>print(文件>>打印)指令时,print_style.css样式表就会替代原有的样式表被调用。

注意:如果是IE6或是Firefox用户,就一定要将网络链接标记样式中的media参数赋值为 "screen",否则,打印出来的页面内容会发生出血的问题,以及其他一些问题。IE7用户就不用担心了。

完善页面的主体部分

现在,我们来调整一下页面主体相关的参数。一般情况下,网页的主体部分都会有背景色或是背景图案。我们现在就要将背景去除,以确保打印出来的页面相对整洁。当然,多数浏览器默认支持在打印时自动去除背景,但还是要手动调整一下来得保险。

同时,还要考虑为将打印样式表中的color参数赋值为#000或"black"。彩色的文字在网页上看起来固然很眩,但要输出如此色彩眩丽的页面,就会耗费相当昂贵的墨水。

接下来,我们要调整的就是margin参数了,系统默认的页边距设置一般都会比较小,我们现在试着为左、右边距各增加3em,可以通过语句margin 0em 3em 0em 3em来实现。

调整分栏版式参数

我们都知道,并不是所有的网页内容都有必要打印出来的,比如说导航条,在网页上是必要信息,但打印出来就纯属浪费页面了。这时,我们就需要在打印样式表中对那些没有必要打印出来的选项,添加属性"display: none"。

同时,为了让所有的内容都完美地垂直排列在打印出的页面上,而不是一个接一个地堆在页面上,就需要对每一个必打项的float参数赋数为"none",或干脆直接将float参数项删去。

还要为每一个必打项的width参数赋值为"auto"。这样,对于利用div标记对页面进行了分栏的时候,就可以确保分栏的内容能够自动填满页面。以下为打印样式表的编写内容示例:

div.template_fill_wrapper_top{

display: none;

}

div.template_fill_wrapper_middle{

margin: 0;

width: auto;

text-align: center;

clear: both;

}

In the web stylesheet

div.template_fill_wrapper_top{

overflow:hidden;

text-align:center;

background-color: #313131;

height: 48px;

overflow: hidden;

}

div.template_fill_wrapper_middle{

margin: 0 auto;

text-align: left;

padding-top:10px;

clear:both;

}

PX参数下课,Em及PT上位

一般情况下,在为网页编写样式表时,针对间距、宽、高、页边距及字体大小等参数,我们习惯用pixel或em度量单位。这主要是由于数码显示器一般是采用像素及字符宽度为显示单位的。而对于打印机来说,像素单位就不好使了,需要将原来使用像素单位的间距、宽、高、页边距等值转换为em单位值;而字体大小则需被转换为磅值(建议将字体大小设置在9pt~11pt之间)。.

以下即为Bits O' NewMedia网站的打印样式表示例:

body {

margin: 0em 3em 0em 3em;

padding: 0;

border: 0;

color: black;

background: white;

font: normal 10pt "Bakersville Old Face", "Times New Roman", Times, serif;

text-align: left;

}

成果验收

要使每一位网站用户都有一个好的体验,作为力求完美的网站建设者,就要经历无数次的试验、失败、调整、再试验......我们坚信这样做的结果一定会为你带来无限成就感。

如下所示为Bits O' NewMedia网站中某一篇文章的打印效果预览截图,你也可以通过以上的打印样式表调整步骤,打印出理想的页面来。

Wish you every success!

原作者:Matthew Griffin 虽说已是互联网无所不能的时代,但还是会需要将网页内容打印出来阅读。对于网生的电子报、电子期刊这些更适合于在网络环境中阅读的内容,怎样通过打印输出生成适当的纸媒页面呢?长时间来,这一直是一个课题。为了写如下这篇博文,作者对相关问题进行了深入思考,并为Bits O' NewMedia网站编写了适于打印输出的样式表,现将相关经验分享给大家。 设定适于打印输出的样式表 这并不象想象中那么难,第一步要做的是复制原用的CSS文件,将其命名为print_style.css,接下来,就是要在其首行加入语句: <link rel="stylesheet" type="text/css" media="print" href="print_style.css" /> 我们看到,这一条语句惟一特别的地方在于,media参数被赋值为"print"。而如果在页面内加入了这样的一条语句,那么再执行file>>print(文件>>打印)指令时,print_style.css样式表就会替代原有的样式表被调用。 注意:如果是IE6或是Firefox用户,就一定要将网络链接标记样式中的media参数赋值为 "screen",否则,打印出来的页面内容会发生出血的问题,以及其他一些问题。IE7用户就不用担心了。 完善页面的主体部分 现在,我们来调整一下页面主体相关的参数。一般情况下,网页的主体部分都会有背景色或是背景图案。我们现在就要将背景去除,以确保打印出来的页面相对整洁。当然,多数浏览器默认支持在打印时自动去除背景,但还是要手动调整一下来得保险。 同时,还要考虑为将打印样式表中的color参数赋值为#000或"black"。彩色的文字在网页上看起来固然很眩,但要输出如此色彩眩丽的页面,就会耗费相当昂贵的墨水。 接下来,我们要调整的就是margin参数了,系统默认的页边距设置一般都会比较小,我们现在试着为左、右边距各增加3em,可以通过语句margin 0em 3em 0em 3em来实现。 调整分栏版式参数 我们都知道,并不是所有的网页内容都有必要打印出来的,比如说导航条,在网页上是必要信息,但打印出来就纯属浪费页面了。这时,我们就需要在打印样式表中对那些没有必要打印出来的选项,添加属性"display: none"。 同时,为了让所有的内容都完美地垂直排列在打印出的页面上,而不是一个接一个地堆在页面上,就需要对每一个必打项的float参数赋数为"none",或干脆直接将float参数项删去。 还要为每一个必打项的width参数赋值为"auto"。这样,对于利用div标记对页面进行了分栏的时候,就可以确保分栏的内容能够自动填满页面。以下为打印样式表的编写内容示例: div.template_fill_wrapper_top{ display: none; } div.template_fill_wrapper_middle{ margin: 0; width: auto; text-align: center; clear: both; } In the web stylesheet div.template_fill_wrapper_top{ overflow:hidden; text-align:center; background-color: #313131; height: 48px; overflow: hidden; } div.template_fill_wrapper_middle{ margin: 0 auto; text-align: left; padding-top:10px; clear:both; } PX参数下课,Em及PT上位 一般情况下,在为网页编写样式表时,针对间距、宽、高、页边距及字体大小等参数,我们习惯用pixel或em度量单位。这主要是由于数码显示器一般是采用像素及字符宽度为显示单位的。而对于打印机来说,像素单位就不好使了,需要将原来使用像素单位的间距、宽、高、页边距等值转换为em单位值;而字体大小则需被转换为磅值(建议将字体大小设置在9pt~11pt之间)。. 以下即为Bits O' NewMedia网站的打印样式表示例: body { margin: 0em 3em 0em 3em; padding: 0; border: 0; color: black; background: white; font: normal 10pt "Bakersville Old Face", "Times New Roman", Times, serif; text-align: left; } 成果验收 要使每一位网站用户都有一个好的体验,作为力求完美的网站建设者,就要经历无数次的试验、失败、调整、再试验......我们坚信这样做的结果一定会为你带来无限成就感。 如下所示为Bits O' NewMedia网站中某一篇文章的打印效果预览截图,你也可以通过以上的打印样式表调整步骤,打印出理想的页面来。 Wish you every success!
󰈣󰈤
 
 
 
>>返回首页<<
 
 热帖排行
 
 
王朝网络微信公众号
微信扫码关注本站公众号wangchaonetcn
 
 
静静地坐在废墟上,四周的荒凉一望无际,忽然觉得,凄凉也很美
©2005- 王朝网络 版权所有