1、第8章 CSS与网页打印,有的时候，当我们觉得一个网页提供的信息很有帮助时，就会想到把它打印下来以文档形式保存起来。打印网页很简单，只需选择浏览器文件菜单中的打印命令。但是，由于绝大多数网页都有一些和内容不很相关的信息，比如广告，导航条，其他网页的链接等等，也会同时被打印在纸张上，使得真正需要的内容并不醒目，影响效果，还在某种程度上浪费油墨，提高了公司运营成本。 在这样的情况下，传统的方法是将网页的内容拷贝到文字处理软件，然后再打印。这样做无形之中使打印网页的过程变得繁琐，效率不高。假如网页自身能够调整显示，以适应打印的要求，岂不是更好？,8.1 CSS样式中的媒体,在CSS技术中，可以为呈现
2、在不同媒体设备的文档指定不同的样式规则，比如有同一个网页，在电脑屏幕上是一个样子，而在电视屏幕上又是另外的风格。这样的设置极大地扩展了HTML的应用范围。 在CSS样式规则中应用媒体类型的方法就是在代码中设置media属性以及各媒体类型下不同的样式。如果没有特别指定，如截至本章为止所有示例文件所做的，media属性的默认值为all - 当前网页适用于所有媒体类型。CSS支持的媒体类型如表所示。,CSS样式中的媒体类型,8.1.1 如何按照媒体类型区分样式,一般情况下，我们浏览网页都是通过计算机显示器的屏幕来完成，因此表8-1中Screen代表了最常见的情况。在本章中要介绍的为打印设置样式，则需
3、要特别指定printer媒体类型下单独应用的样式规则，写法有下面的几种方法： 外部样式表法。在链接外部样式表的声明中增加媒体类型属性，如：这句代码表示media.css是当前网页的外部样式表，在媒体类型为screen的时候起作用。,8.1.2 不同媒体类型下样式是否可以共享,前文提到过，如果样式表不指定媒体类型，默认值为All，适用于所有类型。不同媒体类型也可以共享样式，写法见下面这行代码： import URI(media.css) screen, print , projection 这行代码表示，计算机显示器屏幕，打印机和投影仪下，网页应用相同的样式规则。,8.2 案例学习：制作适合打印
4、的在线报名网页,本节我们通过模拟一个发生在环球驾驶学校的工作场景来学习制作适合打印的网页。同时，通过这个机会，大家可以了解到一般公司内网页制作的过程。,8.2.1 案例背景,小张是环球驾驶学校网站技术部的网页制作师。最近报名学车的人日益增多，报名处的电话迎接不暇，每次电话工作人员都要反复记录和确认学员的个人信息，比较繁琐而且耽误更多的电话。为了提高工作效率，校长决定让技术部在学校网站上发布一套在线报名的网页；同时，要求用户可以将该网页打印下来传真、快递或者邮寄到学校进行报名，以照顾对这几种方式习惯或者有偏好的潜在客户。 命令一下达，整个技术部包括小张就忙活开了。恰巧在之前的一周，小张刚刚学习了
5、HTML中表单的制作方法，因此报名信息的提交他不在话下。但是如果要面向网上报名和网下传真报名两种方式，小张还是有点拿不准，不会要各做一套页面吧，时间恐怕来不及。如果都用一样的显示，恐怕经理那边也说不过去，因为他是一个很看重用户意见的人。经理告诉校长，对于偏好网下传真报名的这类客户，他们习惯了纸质报名表的一些特点，比如： 在网页中，文本的输入是一个方框；而显示世界中，纸质报名表要写个人信息的地方一道空白横线。 网页中，表单的单选框是圆形，单击后出现圆点表示选中；而纸质报名表则是一个方框，填写者在上面打勾。 网页中，报名表旁边会有学校的Logo，网站的导航条，促销信息，汽车用品的广告等等；在纸质报
6、名表中，全部是黑底白字的内容，还要增加学校的练习方式，在页面上方保留学校的Logo。,8.2.2 网页总体设计,既然将要实现的网页支持在线提交报名，就必须将用户输入的资料传输到服务器中，因此，表单标签是少不了的，同时，在表单之中还要有一系列文本框、单选框等以方便报名者输入个人信息。为了提高宣传效果，在报名表的旁边还可以有促销课程、汽车商品的链接等等。 经过了半天的辛苦工作，小张大致完成了在线提交报名网页的基本结构，由于经理可能要修改，没有做任何的样式设置等工作，相当于绘画中的草图。页面在浏览器中的显示效果如图所示。,在线报名网页的第一版,8.2.3 标签,首先实现网页分区的功能。要实现类似图8
7、-2的分区，可以用标签。下面先简单介绍一下这个标签。 标签是一个块元素，也就是说浏览器在遇到它的时候会在页面另起一行，因此，它也具有盒模型的一些特点，比如可以通过样式表设置边框等等。除此之外，它有一个子标签，用于实现在方框的左上方显示说明文字。,不同风格的标签,8.2.4 实现报名网页内容的分区,了解标签之后，就可以开始将网页内容分区的工作。经理的宗旨是联系方式放在一个分区中，报名信息放置在另外的分区中。因此，小张重新排列了一下网页中各标签的顺序，将它们放置于两个表格中间，外面再用和标签包围。修改之后就形成了报名网页的第一个版本register-1.html，网页主要标签的层次关系图（也可以称
8、为DOM图）如图8-5所示。,报名网页主要标签的层次关系图,8.2.5 实现平面按钮和文本框,其实，这样的效果制作起来很简单，只需要将边框的样式规则声明为如下的代码就可以： Style=”border:1px solid #FFCC00”; 对代码8-2进行类似上面的修改，为了节省时间，采取增加内部样式表规则的方法，创建两个关于背景和边框的类选择器，然后在标签中应用相应的类即可。小张比较喜爱春天，所以在样式中将文本框的背景设置为春天的浅绿色，而将其边框设置为橙黄色。对于按钮，为了突出功能，背景设置为深绿色。最后，将Div的颜色设置为更淡的绿色，以和前述的这些标签协调。,8.2.6 网页代码实现
9、-打印报名部分,在前面提到，网页的CSS样式规则支持打印是通过media属性来实现的，在media指定为screen时，网页显示如图8-7所示；当media被设置为print时，网页的效果应该适合纸张的输出，符合日常纸质文档的习惯。基于以上的原则，在图8-7中，小张找出了如下几个不适合打印后报名的地方： 申请驾照种类利用的是单选框，在纸质文档中，人们无法选择；需要修改成类似复选框似的小方格，学员可以在其中打勾表示选中。 预计参加课程时间利用的是列表框，在纸质文档中，人们也无法选择；需要修改成下划线供人们填写。 纸质文档中填写信息并不用文本框，而是一条下划线即可。 网页上的提交和重新填写按钮可以
10、去掉。,8.2.7 精简含有media设置的样式表,在小张所写的样式表中，打印时采用的样式表是通过拷贝屏幕显示时的样式表进行创建的，因此，两者相比较，重复的部分比较多。我们在实际应用中可以将两者共有的样式规则保留在任何一个media之外，而把它们之间的区别所在放入到各自的media样式定义之中，这样可以减少不少代码量，维护起来也很方便，不容易出错。 经过前述几个步骤的设置，最终圆满地实现了屏幕显示和打印时两种不同的网页外观，将register-3.html另存为register.html成为最终网页，其屏幕显示效果如图所示。,网页在浏览器中的显示（屏幕显示）,8.3 小结,本章通过一个实际的案例讲解了如何通过设置CSS样式实现专门的打印效果，它的主要步骤如下： 考虑在打印时，哪些标签元素和屏幕显示时不同。 为这些标签制定打印显示的规则：更改标签、隐藏标签还是只改变标签样式？ 在样式表中增加media print这一段代码，将打印时需要应用的样式规则放置于括号中。 仔细检查，确保屏幕显示和打印显示都符合要求。打印显示可以通过打印预览来观察。 以此类推，如果将网页应用到其他类型，通过上面几个步骤和基本方法，我们也能使得现有网页适应那些媒体的特点。技术在不断进步，说不定在不远的将来，我们都会用大屏幕液晶电视作为浏览网页的首选呢！,
