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

　　

目的

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

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

　　

需要

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

　　

Dreamweaver MX 2004

　　

　　
• vcenter_dw_try">Try
  
  　　
• vcenter_dw_buy">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 样式表中以便令他们能用于打印。

　　我们在 Community MX 上使用的第三个样式表(pdfprint.css) 用于从每篇文章或教程中动态创建 PDF 文档。由于 PDF 文档和文档打印时使用相同的样式表, 我们于是用ColdFusion 设计了一个动态的方法来指定我们所需的样式表。使用这三个样式表的长处在于我们能从一个集中位置统筹全局― 那些 XHTML 文档。假如我们需要更改一篇教程，我们只需简单快速地修改XHTML文档。然后，得益于 CSS 的力量, 我们能够立即创建一份PDF，CSS会自动照看屏幕和打印版本。

　　

顺序是很重要的

　　基于层叠的原因, 在X/HTML文档头部链接的样式表的顺序,会影响到在任何设备的处理效果。由于 cmxlayout.css 使用了 all 媒体类型, 他在继承顺序中处于最上层。 任何显示信息的设备都将访问这个文档。当有一天, 手持设备对CSS提供更多支持时, 我们将很可能添加一个使用handheld 媒体类型的样式表来在那些设备上重新格式化信息。假如用了 handheld 样式表的话, 他会跟随在主样式表后。下一步, 我们放置了newprint.css so 以便他也能够通过继承 cmxlayout.css 得到好处。最后,我们还配置了动态的 PDF样式表, 您在这里是看不到的。PDF 样式表将对PDF使用用一个和打印样式稍有不同的、包含更丰富色彩的外观。他看起来更像是屏幕和打印版本的混合体。下面是以正确顺序排列(XHTML格式) 的样式表:

　　这是由上面各样式表分别处理后的同一个页面.

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有