《网页设计与制作》 教学课件 主讲人：湖南铁道职业技术学院陈承欢 HUNAN RAILWAY PROFESSIONAL TECHNOLOGY COLLEGE
Hunan Railway Professional Technology College 主讲人：湖南铁道职业技术学院 陈承欢 《网页设计与制作》 教学课件
教学单元24：使用CSS美化网页 一、 课程引导 二、 明确知识技能目标 湖南城道营政饰学院 三、展示网页浏览效果 主要教学环节 四、分析操作任务 五、知识讲解与操作示范 六、课堂模仿实践 七、疑难解析 八、归纳总结 九、布置习题 网页设计与制作
教学单元24：使用CSS美化网页 主 要 教 学 环 节 五、知识讲解与操作示范 一、课程引导 二、明确知识技能目标 三、展示网页浏览效果 四、分析操作任务 六、课堂模仿实践 七、疑难解析 八、归纳总结 九、布置习题
(一)课程引导 本次课讲解使用CSS美化页面，重点介绍应用 湖南城道营欢似学院 外部样式。 网页设计与制作
（一）课程引导 本次课讲解使用CSS美化页面，重点介绍应用 外部样式
(二) 明确知识技能目标 (1)掌握样式的编辑方法。 湖南绒道营政饰学院 (2)掌握如何使用CSS样式表美化页面。 (3)掌握如何使用外部样式美化页面。 网页设计与制作
（二）明确知识技能目标 （1）掌握样式的编辑方法。 （2）掌握如何使用CSS样式表美化页面。 （3）掌握如何使用外部样式美化页面
(三) 展示网页浏览效果 预览网页 本章制作的网页13.html的浏览效果如图所示。 湖南城道质营政術学院 己时情参为五rosof Interset Esplore同 五洲风情，魅力四射 号流、海长，黑装帝乐专家小 长沙世举南次些你 图12-1网页13.html的预览效果 网页设计与制作
（三）展示网页浏览效果 本章制作的网页13.html的浏览效果如图所示。 1．预览网页 图12-1 网页13.html的预览效果
(四) 分析操作任务 (1)建立多种CSS样式，对13.html进行美化。 湖南城道属营欢饰学院 (2)建立CSS外部样式文件，应用外部样式对 13.html进行美化。 网页设计与制作
（四）分析操作任务 （1）建立多种CSS样式，对13.html进行美化。 （2）建立CSS外部样式文件，应用外部样式对 13.html进行美化
(五)知识讲解与操作示范（1) 湖南城 12.2 使用CSS美化页面 按以下要求定义CSS样式，且应用样式对网页进行美化。 (1)制作图文混排效果。 (2)制作特殊边框效果。 薰 (3)建立自定义的链接样式。 建立实现图文混排效果的样式 琴 (1)建立样式image_text1 网页设计与制作
（五）知识讲解与操作示范（1） 按以下要求定义CSS样式，且应用样式对网页进行美化。 （1）制作图文混排效果。 （2）制作特殊边框效果。 （3）建立自定义的链接样式。 建立实现图文混排效果的样式 （1）建立样式image_text1 12.2 使用CSS美化页面
(五)知识讲解与操作示范 （2) 湖南 12.2 使用cSS美化页面 单击菜单【文本】→【CSS样式】→【新建】，弹出一个“新建 CSS规则”对话框。 道 在“新建CSS规则”对话框中，“选择器类型”选项中选择“类” 单选按钮，在“名称”文本框中输入这个自定义样式的名称： “.image_.text1”。在“定义在”选项中选择“仅对该文档”单选按 或 钮。 在“.image_text1的CSS样式定义”对话框中“分类”选择“方 琴 框”选项卡，在“方框”选项卡中，“浮动”下拉列表框中选择“左 对齐”，取消“全部相同”复选框的选中状态，在“右”列表框中输 “10”,单位为“像素”，其余选项保持默认设置 网设计与制作
（五）知识讲解与操作示范（2） 单击菜单【文本】→【CSS样式】→【新建】，弹出一个“新建 CSS规则”对话框。 在“新建CSS规则”对话框中，“选择器类型”选项中选择“类” 单选按钮，在“名称”文本框中输入这个自定义样式的名称： “.image_text1”。在“定义在”选项中选择“仅对该文档”单选按 钮。 在“.image_text1的CSS样式定义”对话框中“分类”选择“方 框”选项卡，在“方框”选项卡中，“浮动”下拉列表框中选择“左 对齐”，取消“全部相同”复选框的选中状态，在“右”列表框中输 入“10”，单位为“像素”，其余选项保持默认设置。 12.2 使用CSS美化页面
(五) 知识讲解与操作示范（3) 12.2 使用CSS美化页面 湖南鐵道 (2)应用样式 选中表格第三行中的左边的图像，单击菜单【文本】→【CSS样 式】，在“cSs样式”菜单中选中“image_.text1"样式，把样式套 用到图片中。保存网页，浏览网页效果。 (3)建立样式image_.text2 建立一个类似的样式image_text2,在“cSs的规则定义”对话 等 框中，“浮动”列表框中选择“右对齐”，“左”列表框中输入 “10”,其他的属性设置与image._text1相同。然后将该样式应用于 另一幅图像。 网顶设计与制作
（五）知识讲解与操作示范（3） （2）应用样式 选中表格第三行中的左边的图像，单击菜单【文本】→【CSS样 式】，在“CSS样式”菜单中选中“image_text1”样式，把样式套 用到图片中。保存网页，浏览网页效果。 （3）建立样式image_text2 建立一个类似的样式image_text2，在“CSS的规则定义”对话 框中，“浮动”列表框中选择“右对齐”，“左”列表框中输入 “10”，其他的属性设置与image_text1相同。然后将该样式应用于 另一幅图像。 12.2 使用CSS美化页面
(五)知识讲解与操作示范（4) 湖南绒道 12.2 使用CSS美化页面 5.建立实现特殊表格边框效果的样式 (1)建立样式border 建立一个名为“.border”,在“.border的CSS样式定义”对话 框中“分类”选择“边框”选项卡，在“边框”选项卡中，“上” 薰 对应的“样式”下拉列表框中选择“凸出”，“宽度“下拉列表框 选择“中”，“颜色”选择“#CCCC33”,其余选项保持默认设置。 (2)应用样式 御 选中网页中整个表格，单击鼠标右键，在弹出的快捷菜单中选 择【cSs样式】→【border】,如图12-14所示，把样式套用到表格。 网页设计与制作
（五）知识讲解与操作示范（4） 5．建立实现特殊表格边框效果的样式 （1）建立样式border 建立一个名为“.border”，在“.border的CSS样式定义”对话 框中“分类”选择“边框”选项卡，在“边框”选项卡中，“上” 对应的“样式”下拉列表框中选择“凸出”，“宽度“下拉列表框 选择“中”，“颜色”选择“#CCCC33”，其余选项保持默认设置。 （2）应用样式 选中网页中整个表格，单击鼠标右键，在弹出的快捷菜单中选 择【CSS样式】→【border】，如图12-14所示，把样式套用到表格。 12.2 使用CSS美化页面