项目3(八css美化网页)

《项目3(八css美化网页)》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、项目3主页制作（利用CSS美化网页）学习目标：Ø会使用CSS层叠样式对页面中文本等网页元素进行样式控制CascadingStyleSheets（层叠，级联样式表）【任务1】利用CSS美化网页【任务分析】5.12汶川大地震时为了表示对遇难同胞的哀悼，全国的大小网站页面都变灰了。如何实现这一功能？对于网站中页面较少时，可以一个页面一个页面进行设置，哀悼期过了后再恢复原样，若网站由几十个页面组成，这样设置工作量很大，有一种省时省力的方法可以达到这一功能，那就是层叠样式表CSS（CascadingStyleSheet）。这个方法最

2、方便管理整个网站的网页风貌，它让网页的文字内容与版面设计分开，只要在一个css文档中定义好网页的外观风格，所有链接到此css文档的网页，便会按照定义好的风格显示网页。【任务背景】回忆：纪念5.12，悼念四川地震死难者，整个网页变黑色(灰色)，这个特效持续一个月。代码：方法1：直接在html文档的head区域加上以下代码代码：方法2：在css文档中加入以下

3、代码代码：html{filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);}演示：将上面这段代码添加到newsview.asp文件，观察效果。【子任务1.1】利用CSS美化register1.asp网页【任务展示】实际网页演示。【操作步骤】1.打开站点文件夹ClassWebloginregister.asp文件，双击进入设计视图。2.选中“用户注册”，在属性面板设置样式，如图所示：进入代码视图，style1样式代码如图所示：3.思考：（1）此方

4、法可设置的属性类型有限，如不能给文字加下划线等；（2）若对单元格的内容进行设置，需逐个应用样式，操作繁琐。4．通过CSS面板新建样式，对单元格进行设置：（1）单击“样式”面板下方的“新建CSS样式”按钮，打开新建样式对话框，选择器类型选择“标签”，标签名称选择为“td”，定义在选择“仅对该文档”。单击“确定”按钮。（2）在弹出的“td的CSS样式定义”对话框中，进行如图所示的样式定义：(3)为表格第一列的单元格设置样式为右对齐，操作如图所示：注意：此处选择器类型为“类”，名称为“.txt”,定义在“仅对该文档”。（4）选中

5、第一列单元格（除最后一行），应用样式“.txt”。（5）类似上面操作，为表格最后一行单元格设置样式为居中对齐；为“*”设置样式为字体颜色是红色。【子任务1.2】利用CSS美化login.asp、newsview.asp、courseview.asp网页【任务分析】在上述制作的显示班级新闻标题（newsview.asp）、显示课件下载（courseview.asp）、管理员登录（login.asp）页面中，我们发现使用默认的字体显示效果不理想，需将页面进行美化：将页面中的字体大小设为12px，行间距设为14px，将管理员登录

6、页面中的用户名、密码和验证码字体设为黑体，像这种多个页面文件中设置相同的效果使用CSS外部链接式的方法是较方便的做法。【操作步骤】1.在站点文件夹ClassWeb下新建css文件夹，并打开ClassWeb/news/newsview.asp文件。2.单击CSS样式面板右下角【新建CSS规则】按钮。3.在弹出的“新建CSS规则”对话框中，在“选择器类型”单选按钮中选取“标签（重新定义特定标签的外观）”，在“标签”下拉列表框中选取“table”标签，在“定义在”单选按钮中选取“新建样式表文件”项，如图所示。图1“新建CSS规则

7、”对话框4.单击【确定】按钮，在弹出的“保存样式表文件为”对话框的“保存在”下拉列表框中选取步骤1中新建的css文件夹，在“文件名”文本框中输入文件名format，其它取默认设置，如图2所示。图2“保存样式表文件为”对话框1.单击【保存】按钮，在弹出的“table的CSS规则定义（在format.css中）”对话框的“类型”分类中设置字体大小为12px，行高设置为14px，其它选项取默认设置，如图3所示。图3“table的CSS规则定义”对话框2.单击【确定】按钮，仔细观察newsview.asp文件中出现语句“

8、href="../css/format.css"rel="stylesheet"type="text/css"/>”表示将format.css样式表外部链接入该文件中。同时出现打开的format.css文件，观察其代码，体会其含义，将format.css文件和newsview.asp文件存盘，预览。3.