使用CSS样式美化网页2.pptVIP

Hunan Railway Professional Technology College 主讲人：湖南铁道职业技术学院　陈承欢 《网页设计与制作》教学课件 教学单元24：使用CSS美化网页 主要教学环节 五、知识讲解与操作示范 一、课程引导 二、明确知识技能目标 三、展示网页浏览效果 四、分析操作任务 六、课堂模仿实践 七、疑难解析 八、归纳总结 九、布置习题 （一）课程引导 本次课讲解使用CSS美化页面，重点介绍应用外部样式。 （二）明确知识技能目标 （1）掌握样式的编辑方法。 （2）掌握如何使用CSS样式表美化页面。 （3）掌握如何使用外部样式美化页面。 （三）展示网页浏览效果 本章制作的网页13.html的浏览效果如图所示。 1．预览网页 图12-1　　网页13.html的预览效果 （四）分析操作任务 （1）建立多种CSS样式，对13.html进行美化。 （2）建立CSS外部样式文件，应用外部样式对13.html进行美化。 （五）知识讲解与操作示范（1） 按以下要求定义CSS样式，且应用样式对网页进行美化。 （1）制作图文混排效果。 （2）制作特殊边框效果。 （3）建立自定义的链接样式。 建立实现图文混排效果的样式 （1）建立样式image_text1 12.2　使用CSS美化页面 （五）知识讲解与操作示范（2）  单击菜单【文本】→【CSS样式】→【新建】，弹出一个“新建CSS规则”对话框。 在“新建CSS规则”对话框中，“选择器类型”选项中选择“类”单选按钮，在“名称”文本框中输入这个自定义样式的名称：“.image_text1”。在“定义在”选项中选择“仅对该文档”单选按钮。 在“.image_text1的CSS样式定义”对话框中“分类”选择“方框”选项卡，在“方框”选项卡中，“浮动”下拉列表框中选择“左对齐”，取消“全部相同”复选框的选中状态，在“右”列表框中输入“10”，单位为“像素”，其余选项保持默认设置。 12.2　使用CSS美化页面 （五）知识讲解与操作示范（3） （2）应用样式 选中表格第三行中的左边的图像，单击菜单【文本】→【CSS样式】，在“CSS样式”菜单中选中“image_text1”样式，把样式套用到图片中。保存网页，浏览网页效果。 （3）建立样式image_text2 建立一个类似的样式image_text2，在“CSS的规则定义”对话框中，“浮动”列表框中选择“右对齐”，“左”列表框中输入“10”，其他的属性设置与image_text1相同。然后将该样式应用于另一幅图像。 12.2　使用CSS美化页面 （五）知识讲解与操作示范（4）  5．建立实现特殊表格边框效果的样式 （1）建立样式border 建立一个名为“.border”，在“.border的CSS样式定义”对话框中“分类”选择“边框”选项卡，在“边框”选项卡中，“上”对应的“样式”下拉列表框中选择“凸出”，“宽度“下拉列表框选择“中”，“颜色”选择“#CCCC33”，其余选项保持默认设置。 （2）应用样式 选中网页中整个表格，单击鼠标右键，在弹出的快捷菜单中选择【CSS样式】→【border】，如图12-14所示，把样式套用到表格。 12.2　使用CSS美化页面 （五）知识讲解与操作示范（5） 6．建立高级样式 将页面表格中最后一行的链接设置成以下样式：默认的链接是蓝色、宋体、9pt、没有下划线，访问过的链接为紫色、宋体、9pt、没有下划线，而鼠标经过时的链接变成橘黄色、宋体、9pt、出现下划线。 具体的操作过程如下： （1）在CSS样式面板中单击“新建CSS规则”按钮，弹出“新建CSS规则”对话框，在该对话框中“选择器类型”位置选择“高级”单选按钮。 12.2　使用CSS美化页面 （五）知识讲解与操作示范（6） （2）定义链接默认样式，在“选择器”列表框中输入“a.my.link”，其中my为自定义的链接样式。在“定义在”选