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

教学课题 项目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;} 3.设置文本修饰效果 在CSS 3中，使用text-decoration属性可以为文本设置多种修饰效果，如下划线、删除线等，格式如下： { text-decoration:属性值; } 【例7-4】CSS 3美化段落实例一，代码如下所示。 1 !DOCTYPE html 2 html lang=en 3 head 4 meta charset=UTF-8 5 titleCSS3美化段落例1/title 6 style 7 p{line-height: 10px;} 8 /style 9 /head 10 body 11 p style=text-decoration: underline;始信泥土有芬芳/p 12 p style=text-decoration: overline;转眼捏成这般模样/p 13 p style=text-decoration: line-through;你是女娲托生的精灵/p 14 p style=text-decoration: blink;你是夸父追日的梦想/p 15 p style=word-spacing: normal;Let me gently walk past you./p 16 p style=word-spacing: 15px;Bathed in your childlike eyes./p 17 p style=letter-spacing: normal;Let me walk through your eyes./p 18 p style=letter-spacing: -1pxSmall feet running in the field of hope./p 19 p style=letter-spacing: 5pxWell, China/p 20 p style=letter-spacing: 1emMy dream!/p 21 p style=letter-spacing: 1exThe dream is fragrant./p 22 /body 23 /html 在浏览器中预览效果如图所示。 4.设置文本的垂直对齐方式 在CSS 3中，使用vertical-align属性设置垂直对齐方式，此属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐，可设置为负长度值和百分比值。在表单元格中，此属性可设置单元格内容的对齐方式。格式如下： {vertical-align:属性值;} 5.设置文本的水平对齐方式 文本除了垂直对齐方式外，还有水平对齐方式，包括水平方向上的居中、左对齐、右对齐等。在CSS 3中，使用text-align属性可定义文本的水平对齐方式，格式如下： {text-align:属性值;} 6.设置文本大小写转