《项目3八css美化网页.docVIP

项目3 主页制作（利用CSS美化网页） 学习目标： 会使用CSS层叠样式对页面中文本等网页元素进行样式控制 Cascading Style Sheets（层叠，级联样式表） 【任务1】利用CSS美化网页 【任务分析】 5.12汶川大地震时为了表示对遇难同胞的哀悼，全国的大小网站页面都变灰了。如何实现这一功能？对于网站中页面较少时，可以一个页面一个页面进行设置，哀悼期过了后再恢复原样，若网站由几十个页面组成，这样设置工作量很大，有一种省时省力的方法可以达到这一功能，那就是层叠样式表CSS（Cascading Style Sheet）。这个方法最方便管理整个网站的网页风貌，它让网页的文字内容与版面设计分开，只要在一个css文档中定义好网页的外观风格，所有链接到此css文档的网页，便会按照定义好的风格显示网页。 【任务背景】 回忆：纪念5.12，悼念四川地震死难者，整个网页变黑色(灰色)，这个特效持续一个月。 代码： 方法1：直接在html文档的head区域加上以下代码 代码： style html { filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); } /style 方法2：在css文档中加入以下代码 代码： html { filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); } 演示：将上面这段代码添加到newsview.asp文件，观察效果。 【子任务1.1】利用CSS美化register1.asp网页 【任务展示】 实际网页演示。 【操作步骤】 打开站点文件夹ClassWeb\login\register.asp文件，双击进入设计视图。 选中“用户注册”，在属性面板设置样式，如图所示： 进入代码视图，style1样式代码如图所示： 3. 思考： （1）此方法可设置的属性类型有限，如不能给文字加下划线等； （2）若对单元格的内容进行设置，需逐个应用样式，操作繁琐。 4．通过CSS面板新建样式，对单元格进行设置： （1）单击“样式”面板下方的“新建CSS样式”按钮，打开新建样式对话框，选择器类型选择“标签”，标签名称选择为“td”，定义在选择“仅对该文档”。单击“确定”按钮。 （2）在弹出的“td的CSS样式定义”对话框中，进行如图所示的样式定义： (3)为表格第一列的单元格设置样式为右对齐，操作如图所示： 注意：此处选择器类型为“类”，名称为“.txt”,定义在“仅对该文档”。 （4）选中第一列单元格（除最后一行），应用样式“.txt”。 （5）类似上面操作，为表格最后一行单元格设置样式为居中对齐；为“*”设置样式为字体颜色是红色。 【子任务1.2】利用CSS美化login.asp、newsview.asp、courseview.asp网页 【任务分析】 在上述制作的显示班级新闻标题（newsview.asp）、显示课件下载（courseview.asp）、管理员登录（login.asp）页面中，我们发现使用默认的字体显示效果不理想，需将页面进行美化：将页面中的字体大小设为12px，行间距设为14px，将管理员登录页面中的用户名、密码和验证码字体设为黑体，像这种多个页面文件中设置相同的效果使用CSS外部链接式的方法是较方便的做法。 【操作步骤】 在站点文件夹ClassWeb下新建css文件夹，并打开ClassWeb/news/newsview.asp文件。 单击CSS样式面板右下角【新建CSS规则】按钮。 在弹出的“新建CSS规则”对话框中，在“选择器类型”单选按钮中选取“标签（重新定义特定标签的外观）”，在“标签”下拉列表框中选取“table”标签，在“定义在”单选按钮中选取“新建样式表文件”项，如图所示。 图1“新建CSS规则”对话框 单击【确定】按钮，在弹出的“保存样式表文件为”对话框的“保存在”下拉列表框中选取步骤1中新建的css文件夹，在“文件名”文本框中输入文件名format，其它取默认设置，如图2所示。 图2 “保存样式表文件为”对话框 单击【保存】按钮，在弹出的“table的CSS规则定义（在format.css中）”对话框的“类型”分类中设置字体大小为12px，行高设置为14px，其它选项取默认设置，如图3所示。 图3 “table的CSS规则定义”对话框 单击【确定】按钮，仔细观察newsview.asp文件中出现语句“link href=../css/format.css rel=stylesheet type=text/css /”表示将format.css样式表外部链接入该文件中。同时出现打