网页设计:用于打印的页面设计
1.对style标签的属性设置:
<style type=”text/css” media=”print”>
这里表示该style内引入或者定义的样式属性仅仅在打印的时候使用,这里提醒一下,如果没有设置media属性,那么定义的样式将在浏览器和打印时都起效,所以建议将类似这样的样式放在所有常规样式之后。比如我们希望在打印出来的页面上有一行“打印与雅虎口碑网”,但在浏览器中并不现实:
<p class=”printTitle”>打印与雅虎口碑网</p>
那么我们就可以在统一样式中设置.printTitle{display:none;},而在后面的media为”print”的样式中设置为.printTitle{display:block;}。在定义的打印样式并不是在打印时的优先级会高于常规定义的样式,所以再次建议将打印样式放在所有常规样式之后。
2.在页面打印的时候浏览器的设置会对打印的效果有影响,在IE中的“工具”–“Internet选项”–“高级”中有一个“打印背景颜色和图像”,类似的在Firefox中“文件”–“页面设置”中有一个“打印背景颜色和图像”,当这个选项被选中的时候,页面中的背景颜色和图片都可以打印出来(有些不标准的IE内核浏览器似乎有些问题,背景颜色可以打印出来,但是背景图片不行),如果没有选中则背景颜色和图片都无法打印出来,所以为了屏蔽用户不同的浏览器和浏览器设置,我建议两点,第一是在用背景色填充的区域作为分界的地方加上1px的边框,颜色和背景色一样,这样在浏览器中看不出来变化,而在打印的时候即使用户的设置导致背景色无法打印出来也可以有一个边框来作为分割,最大层的上保留了页面格局;第二是对所有必不可少的图片都使用<img/>标签,这样无论用户浏览器怎么设置都可以将这些图片打印出来,可能这样与平时一些页面设计方式不同,但为了统一打印的效果,也只要让步了。