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

教学课题 项目7 CSS 3图文混排—7.1项目描述、7.2知识准备 授课班级 授课时间 教学目标 知识目标 1.掌握CSS 3美化文本。 能力目标 1.培养学生自主学习、分析问题和解决问题的能力； 2.培养学生熟练运用所学知识的能力。 德育目标 1.鼓励学生主动学习，提高学习兴趣，提升学生的专业素质； 2.培养学生的团队合作精神。 学情分析 通过前面知识的学习，已经掌握了代码编辑工具的使用、HTML的基本结构、图文混排的方法、网页中表格的制作方法、如何创建超链接和制作音视频播放器、网页中的表单创建方法以及CSS 3的基本语法和引用方法、CSS 3的各类选择器的应用。 在制作HTML页面中，文本是必不可少的元素，它是用来传递信息的主要手段。设置文本样式是CSS样式的基本功能，本节课学习CSS 3美化文本的方法。 教学重点 1.设置文字字体、大小、粗细、颜色； 2.设置文本样式、阴影效果、溢出效果； 3.设置文本控制换行、在线字体、旋转特效。 教学难点 1.设置文本样式、阴影效果、溢出效果； 2.设置文本控制换行、在线字体、旋转特效。 教学方法 项目教学法、多媒体辅助教学法、讲练结合法 教学过程 教学环节 教学内容 师生活动 新课导入 给学生展示一个网页页面，通过网页效果和查看网页源代码中文本的CSS样式设置，导入本节课的内容。 教师提出问题，学生可分组讨论，协作探究。 技能学习 单元格列行单元格列行单元格列行一、设置文本字体 单元格 列 行 单元格 列 行 单元格 列 行 在CSS 3样式中，使用font-family属性定义文本的字体类型，格式如下： {font-family：字体1,字体2,字体3;} 二、设置文本大小 在CSS 3样式中，使用font-size属性定义文本的大小，格式如下： {font-size：像素值/关键字;} 三、设置文本粗细 在CSS 3样式中，使用font-weight属性定义文本的粗细程度，格式如下： {font-weight:粗细值/关键字;} 四、设置文本颜色 在CSS 3样式中，使用color属性定义文本的颜色，格式如下： { color:颜色值;} 五、设置文本样式 在CSS 3样式中，使用font-style属性定义文本的样式，格式如下： { font-style:属性值;} 六、设置文本阴影效果 使用CSS 3样式中的text-shadow属性定义文字的阴影效果，格式如下： { text-shadow:阴影水平偏移值（可取正负值） 阴影垂直偏移值（可取正负值） 阴影模糊值 阴影颜色;} 【例7-1】CSS3设置文本阴影效果实例，代码如下所示。 1 !DOCTYPE html 2 html lang=en 3 head 4 meta charset=UTF-8 5 title设置文本阴影/title 6 style 7 *{margin:0;padding:0;} 8 h1{ 9 font-family: Arial Black; 10 font-size: 60px; 11 text-shadow: 2px 3px 6px #333; 12 } 13 h2{ 14 font-family: Arial Black; 15 font-size: 60px; /*设置多重阴影效果使用逗号隔开*/ 16 text-shadow: 2px 2px 0px #333, 17 2px 5px 10px green, 18 2px -2px 5px red; 19 } 20 /style 21 /head 22 body 23 h1Text shadow/h1 24 h2Text shadow/h2 25 /body 26 /html 在浏览器中预览效果如图所示。 七、设置文本溢出效果 text-overflow属性定义当文本溢出时是否显示省略标记。要实现溢出文本时产生省略号的效果，还必须定义强制文本在一行显示（white-space:nowrap）及溢出内容为隐藏（overflow:hidden）。text-overflow属性格式如下： { text-overflow:clip | ellipsis | string;} 八、设置文本控制换行 当在一个指定区域显示的一行文本过长，一行内显示不完时，就需要进行换行设置。在CSS 3中使用word-wrap属性来控制文本换行。word-wrap属性格式如下： {word-wrap:normal | break-word;} 【例7-2】CSS3美化文本实例，