《Web前端开发》教学讲义 Web前端设计基础 项目七-2.docx

教学课题

项目7 CSS 3图文混排—7.2知识准备

授课班级

授课时间

教学目标

知识目标

1.掌握CSS 3美化段落；

2.掌握CSS 3美化图片；

3.掌握CSS 3图文混排。

能力目标

1.培养学生自主学习、分析问题和解决问题的能力；

2.培养学生熟练运用所学知识的能力。

德育目标

1.鼓励学生主动学习，提高学习兴趣，提升学生的专业素质；

2.培养学生的团队合作精神。

学情分析

上节课学习了CSS 3美化文本的方法，包括设置文字字体、大小、粗细、颜色，设置文本样式、阴影效果、溢出效果，设置文本控制换行、在线字体、旋转特效。

本节课学习使用CSS 3美化段落、美化图片和图文混排的方法。

教学重点

1.CSS 3美化段落；

2.CSS 3美化图片；

3.CSS 3图文混排。

教学难点

1.设置文本修饰效果；

2.设置文本的对齐方式；

3.设置文本的空白处理；

4.设置图片的对齐方式；

5.设置图片和文字的间距。

教学方法

项目教学法、多媒体辅助教学法、讲练结合法

教学过程

教学环节

教学内容

师生活动

新课导入

给学生展示一个网页页面，通过网页效果和查看网页源代码中段落、图片的CSS样式设置，导入本节课的内容。

教师提出问题，学生可分组讨论，协作探究。

技能学习

单元格列行单元格列行单元格列行一、CSS 3美化段落

单元格

列

行

单元格

列

行

单元格

列

行

1.设置词间距

在网页设计中，如果单词之间的间隔设置合理，将给人赏心悦目的感觉。在CSS 3中使用word-spacing属性定义增加或者减少词与词之间的间隔。格式如下：

{word-spacing: normal | length;}

2.设置字间距

在CSS 3中使用letter-spacing来定义文本之间的距离，格式如下：

{letter-spacing: normal | length;}