文档介绍：《网页设计与制作》教学课件
第12章:使用CSS美化网页
主要教学环节
五、知识讲解与操作示范
一、课程引导
二、明确知识技能目标
三、展示网页浏览效果
四、分析操作任务
六、课堂模仿实践
七、疑难解析
八、归纳总结
九、布置习题
(一)课程引导
本次课讲解使用CSS美化页面,重点介绍应用外部样式。
(二)明确知识技能目标
(1)掌握样式的编辑方法。
(2)掌握如何使用CSS样式表美化页面。
(3)掌握如何使用外部样式美化页面。
(三)展示网页浏览效果
。

图12-1
(四)分析操作任务
(1)建立多种CSS样式,。
(2)建立CSS外部样式文件,。
(五)知识讲解与操作示范(1)
使用CSS美化页面
按以下要求定义CSS样式,且应用样式对网页进行美化。
(1)制作图文混排效果。
(2)制作特殊边框效果。
(3)建立自定义的链接样式。
(五)知识讲解与操作示范(2)
4、建立实现图文混排效果的样式
(1)建立样式image_text1 单击菜单【文本】→【CSS样式】→【新建】,弹出一个
“新建CSS规则”对话框。
在“新建CSS规则”对话框中,“选择器类型”选项中选择“类”
单选按钮,在“名称”文本框中输入这个自定义样式的名称:
“.image_text1”。在“定义在”选项中选择“仅对该文档”按钮。
在“.image_text1的CSS样式定义”对话框中“分类”选择“方
框”选项卡,在“方框”选项卡中,“浮动”下拉列表框中选择“左
对齐”,取消“全部相同”复选框的选中状态,在“右”列表框中
输入“10”,单位为“像素”,其余选项保持默认设置。
(五)知识讲解与操作示范(3)
(2)应用样式
选中表格第三行中的左边的图像,单击菜单【文本】→【CSS样式】,在“CSS样式”菜单中选中“image_text1”样式,把样式套用到图片中。保存网页,浏览网页效果。
(3)建立样式image_text2
建立一个类似的样式image_text2,在“CSS的规则定义”对话框中,“浮动”列表框中选择“右对齐”,“左”列表框中输入“10”,其他的属性设置与image_text1相同。然后将该样式应用于另一幅图像。
(五)知识讲解与操作示范(4)

(1)建立样式border
建立一个名为“.border”,在“.border的CSS样式定义”对话框中“分类”选择“边框”选项卡,在“边框”选项卡中,“上”对应的“样式”下拉列表框中选择“凸出”,“宽度“下拉列表框选择“中”,“颜色”选择“#33”,其余选项保持默认设置。
(2)应用样式
选中网页中整个表格,单击鼠标右键,在弹出的快捷菜单中选择【CSS样式】→【border】,如图12-14所示,把样式套用到表格。