[Macromedia]从屏幕到打印机: 用 Dreamweaver 制作打印CSS

从屏幕到打印机: 用 Dreamweaver 制作打印CSS Stephanie Sullivan

www.communitymx.com
www.violetsky.net

Adrian Senior

www.webade.co.uk
www.communitymx.com

Send feedback Get an e-mail update of new articles 目的

在新闻组中, 经常有问题问到如何能在打印情况下依然能组织良好。从前, 开发者需要通过为站点中的所有网页分别创建一个仅包含文本和相关图像的副本来达到这个目的。CSS 完全改变了这样的状况。 在 Community MX 中, 我们已经通过层叠样式表为打印单独指定样式表的特性而得益。由于 Community MX 有大量的教程, 这样做能大大地节省时间。跟上来看看决定背后的原因和方法。

本文将会分析我们的布局是如何在屏幕上显示一套元素, 而当打印时使用一套包含没有显示在屏幕上元素的布局。你将会学习媒体类型以及如何利用它们，还有就是使用层叠技巧来创建轻量级、实用的打印布局。由于Community MX 经常性更改它的站点, 如果你在本文发布几个月后阅读它，有些东西可能会有少许不同。

要求

要完成本教程，你需要安装下面的软件和文件:

Dreamweaver MX 2004Try Buy Media 属性: Screen, Print, 和 All

在 Community MX, 由于用户主要由网页开发者组成, 我们决定不在站点上支持Netscape 4 (NN4) 和 Internet Explorer 4 (IE 4) 浏览器。你将不会在本文中看到兼容老式浏览器的示例, 但你会知道假如你要提供NN4支持的话，媒体类型是如何影响它的。一共有九种媒体描述符来让你为不同的设备上自定义显示方式。如果你还对媒体类型以及它们的应用不太熟悉, 查看Stephanie Sullivan 在Community MX上的文章 media types。

我们的网站使用了三个不同的样式表来控制每个教程。每个XHTML文档都链接到媒体类型设置为all的主样式表(cmxlayout.css) 。这指明了所有的设备都会使用这个样式表。然后我们把主打印样式表(newprint.css) 的媒体类型设置为 print。这指示浏览器在打印预览和打印时应用它。除了 newprint.css中的内容以外，我们把cmxlayout.css 中的所有选择符用在了打印中，原因是层叠规则以及它的媒体类型—— all。 我们只需为那些需要在打印时被隐藏或更改的选择符使用 newprint.css 。

注: NN4 仅理解没有指定媒体类型或指定为screen 的媒体类型的CSS文档。它无法理解 all 媒体类型。 因此, 如果您希望 NN4 能看到样式, 你必须使用这里其中一个方法。 IE4 能够读取媒体类型为 all的css。如果一定要支持那么老的浏览器, 你可能需要用JavaScript的方法或通过包含的方式来隐藏媒体类型为 all 的 CSS。请记住当打印的时候，媒体类型为 screen 的样式表将不会参与打印的样式层叠。为此,你需要重写所有在 screen 样式表中出现的选择符，将其转移到 print 样式表中以便令它们能用于打印。

本文地址：http://com.8s8s.com/it/it30749.htm