第8章 CSS与网页打印演示文稿.PPTVIP

第8章 CSS与网页打印 有的时候，当我们觉得一个网页提供的信息很有帮助时，就会想到把它打印下来以文档形式保存起来。打印网页很简单，只需选择浏览器文件菜单中的打印命令。但是，由于绝大多数网页都有一些和内容不很相关的信息，比如广告，导航条，其他网页的链接等等，也会同时被打印在纸张上，使得真正需要的内容并不醒目，影响效果，还在某种程度上浪费油墨，提高了公司运营成本。 在这样的情况下，传统的方法是将网页的内容拷贝到文字处理软件，然后再打印。这样做无形之中使打印网页的过程变得繁琐，效率不高。假如网页自身能够调整显示，以适应打印的要求，岂不是更好？ 8.1 CSS样式中的媒体 在CSS技术中，可以为呈现在不同媒体设备的文档指定不同的样式规则，比如有同一个网页，在电脑屏幕上是一个样子，而在电视屏幕上又是另外的风格。这样的设置极大地扩展了HTML的应用范围。 在CSS样式规则中应用媒体类型的方法就是在代码中设置media属性以及各媒体类型下不同的样式。如果没有特别指定，如截至本章为止所有示例文件所做的，media属性的默认值为all --- 当前网页适用于所有媒体类型。CSS支持的媒体类型如表所示。 8.1.1 如何按照媒体类型区分样式 一般情况下，我们浏览网页都是通过计算机显示器的屏幕来完成，因此表8-1中Screen代表了最常见的情况。在本章中要介绍的为打印设置样式，则需要特别指定printer媒体类型下单独应用的样式规则，写法有下面的几种方法： 外部样式表法。在链接外部样式表的声明中增加媒体类型属性，如： link rel=”stylesheet” type=”text/css” href=”media.css” media=”screen” 这句代码表示media.css是当前网页的外部样式表，在媒体类型为screen的时候起作用。 8.1.2 不同媒体类型下样式是否可以共享 前文提到过，如果样式表不指定媒体类型，默认值为All，适用于所有类型。不同媒体类型也可以共享样式，写法见下面这行代码： @import URI(media.css) screen, print , projection 这行代码表示，计算机显示器屏幕，打印机和投影仪下，网页应用相同的样式规则。 8.2 案例学习：制作适合打印的在线报名网页 本节我们通过模拟一个发生在环球驾驶学校的工作场景来学习制作适合打印的网页。同时，通过这个机会，大家可以了解到一般公司内网页制作的过程。 8.2.1 案例背景 小张是环球驾驶学校网站技术部的网页制作师。最近报名学车的人日益增多，报名处的电话迎接不暇，每次电话工作人员都要反复记录和确认学员的个人信息，比较繁琐而且耽误更多的电话。为了提高工作效率，校长决定让技术部在学校网站上发布一套在线报名的网页；同时，要求用户可以将该网页打印下来传真、快递或者邮寄到学校进行报名，以照顾对这几种方式习惯或者有偏好的潜在客户。 命令一下达，整个技术部包括小张就忙活开了。恰巧在之前的一周，小张刚刚学习了HTML中表单的制作方法，因此报名信息的提交他不在话下。但是如果要面向网上报名和网下传真报名两种方式，小张还是有点拿不准，不会要各做一套页面吧，时间恐怕来不及。如果都用一样的显示，恐怕经理那边也说不过去，因为他是一个很看重用户意见的人。经理告诉校长，对于偏好网下传真报名的这类客户，他们习惯了纸质报名表的一些特点，比如： 在网页中，文本的输入是一个方框；而显示世界中，纸质报名表要写个人信息的地方一道空白横线。 网页中，表单的单选框是圆形，单击后出现圆点表示选中；而纸质报名表则是一个方框，填写者在上面打勾。 网页中，报名表旁边会有学校的Logo，网站的导航条，促销信息，汽车用品的广告等等；在纸质报名表中，全部是黑底白字的内容，还要增加学校的练习方式，在页面上方保留学校的Logo。 8.2.2 网页总体设计 既然将要实现的网页支持在线提交报名，就必须将用户输入的资料传输到服务器中，因此，表单标签是少不了的，同时，在表单之中还要有一系列文本框、单选框等以方便报名者输入个人信息。为了提高宣传效果，在报名表的旁边还可以有促销课程、汽车商品的链接等等。 经过了半天的辛苦工作，小张大致完成了在线提交报名网页的基本结构，由于经理可能要修改，没有做任何的样式设置等工作，相当于绘画中的草图。页面在浏览器中的显示效果如图所示。 8.2.3 fieldset标签 首先实现网页分区的功能。要实现类似图8-2的分区，可以用fieldset标签。下面先简单介绍一下这个标签。 fieldset标签是一个块元素，也就是说浏览器在遇到它的时候会在页面另起一行，因此，它也具有盒模型的一些特点，比如可以通过样式表设置边框等等。除此之外，它有一个子标签legend，用于实现在