（中职）Web前端设计基础 项目七-1电子教案

1、（中职）Web前端设计基础 项目七-1电子教案（中职）Web前端设计基础 项目七-1电子教案（中职）Web前端设计基础 项目七-1电子教案教学课题项目7 CSS 3图文混排7.1项目描述、7.2知识准备授课班级授课时间教学目标知识目标1.掌握CSS 3美化文本。能力目标1.培养学生自主学习、分析问题和解决问题的能力；2.培养学生熟练运用所学知识的能力。德育目标1.鼓励学生主动学习，提高学习兴趣，提升学生的专业素质；2.培养学生的团队合作精神。学情分析通过前面知识的学习，已经掌握了代码编辑工具的使用、HTML的基本结构、图文混排的方法、网页中表格的制作方法、如何创建超链接和制作音视频播放器、网页

2、中的表单创建方法以及CSS 3的基本语法和引用方法、CSS 3的各类选择器的应用。在制作HTML页面中，文本是必不可少的元素，它是用来传递信息的主要手段。设置文本样式是CSS样式的基本功能，本节课学习CSS 3美化文本的方法。教学重点1.设置文字字体、大小、粗细、颜色；2.设置文本样式、阴影效果、溢出效果；3.设置文本控制换行、在线字体、旋转特效。教学难点1.设置文本样式、阴影效果、溢出效果；2.设置文本控制换行、在线字体、旋转特效。教学方法项目教学法、多媒体辅助教学法、讲练结合法教学过程教学环节教学内容师生活动新课导入给学生展示一个网页页面，通过网页效果和查看网页源代码中文本的CSS样式设置

3、，导入本节课的内容。教师提出问题，学生可分组讨论，协作探究。技能学习单元格列行单元格列行单元格列行一、设置文本字体单元格列行单元格列行单元格列行在CSS 3样式中，使用font-family属性定义文本的字体类型，格式如下：font-family：字体1,字体2,字体3;二、设置文本大小在CSS 3样式中，使用font-size属性定义文本的大小，格式如下：font-size：像素值/关键字;三、设置文本粗细在CSS 3样式中，使用font-weight属性定义文本的粗细程度，格式如下：font-weight:粗细值/关键字;四、设置文本颜色在CSS 3样式中，使用color属性定义文本的颜色

4、，格式如下： color:颜色值;五、设置文本样式在CSS 3样式中，使用font-style属性定义文本的样式，格式如下： font-style:属性值;六、设置文本阴影效果使用CSS 3样式中的text-shadow属性定义文字的阴影效果，格式如下： text-shadow:阴影水平偏移值（可取正负值） 阴影垂直偏移值（可取正负值） 阴影模糊值 阴影颜色;【例7-1】CSS3设置文本阴影效果实例，代码如下所示。1 2 3 4 5 设置文本阴影6 7 *margin:0;padding:0;8 h19 font-family: Arial Black;10 font-size: 60px;1

5、1 text-shadow: 2px 3px 6px #333;12 13 h214 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 21 22 23 Text shadow24 Text shadow25 26 在浏览器中预览效果如图所示。七、设置文本溢出效果text-overflow属性定义当文本溢出时是否显示省略标记。要实现溢出文本时产生省略号的效果，

6、还必须定义强制文本在一行显示（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美化文本实例，代码如下所示。1 2 3 4 5 CSS3美化文本6 7 bodyfont-fami

7、ly: 微软雅黑;font-size: 14px;8 pcolor: rgb(200,60,0);9 10 11 12 中国梦13 始信泥土有芬芳(font-weight: : bold;)14 转眼捏成这般模样(font-weight: bolder;)15 你是女娲托生的精灵(font-weight: lighter;)16 你是夸父追日的梦想(font-weight: normal;)17 让我轻轻走过你的跟前(font-weight: 100;)18 沐浴着你童真的目光(font-weight: 400;)19 让我牵手与你同行(font-weight: 900;)20 小脚丫奔跑在希

8、望的田野上(font-size: 80%;)21 啊，中国(font-style: inherit;)22 我的梦(font-style: italic;)23 梦正香(font-style: oblique;)24 25 在浏览器中预览效果如图所示。九、设置在线字体在CSS 3之前，网页设计师在使用字体时，必须保证使用的字体在用户的计算机中也已安装好，才能正确还原设计者的字体设计意图。现在通过CSS3，网页设计师可以使用任意字体，可将该字体文件存放到 web 服务器上，字体会在需要时被自动下载到用户的计算机上。格式如下：font-face font-family: ; src: , *; f

9、ont-weight: ; font-style: ; 【例7-3】CSS3在线字体实例，代码如下所示。1 2 3 4 5 CSS 3在线字体6 7 font-face8 9 font-family: TestFont;10 src: url(fonts/Sansation_Light.ttf);11 12 div13 14 font-family:TestFont;15 font-size: 60px;16 color:#f00;17 18 19 20 21 CSS 3 Web Font22 23 在浏览器中预览效果如图所示。十、设置旋转特效transform属性能够设置元素的旋转,向元素应

10、用2D或3D转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。其属性值有很多，包括rotate( ) / skew( ) / scale( ) / translate( , ) ，分别还有x、y之分，比如：rotatex( ) 和 rotatey( ) ，以此类推。在此简单介绍一下ratate值。格式如下。transform:rotate(angle单位为deg); 教师操作演示，学生观看、实训。必要时要求一个具有典型特质的学生与老师互动，共同完成操作任务，借此查看教学效果。教师操作演示，学生观看、实训。必要时要求一个具有典型特质的学生与老师互动，共同完成操作任务，借此查看教学效果。教师操

11、作演示，学生观看、实训。必要时要求一个具有典型特质的学生与老师互动，共同完成操作任务，借此查看教学效果。知识归纳本节课学习了使用CSS3对文本的美化方法。知识点属性说明美化文本设置文本字体font-family定义文本的字体类型设置文本大小font-size定义文本的大小设置文本的粗细font-weight定义文本的粗细程度设置文本颜色color定义文本的颜色设置文本样式font-style定义文本的样式设置文本阴影效果text-shadow定义文字的阴影效果设置文本溢出效果text-overflow定义当文本溢出时是否显示省略标记设置文本控制换行word-wrap控制文本换行设置在线字体font-face font-family: ; src: ; font-weight: ; font-style: ; 通过CSS3可以使用任意字体，将该字体文件存放到 web 服务器上，字体会在需要时被自动下载到用户的计算机上。设置旋转特效transform对元素进行旋转、缩放、移动或倾斜教师讲授，学生归纳总结，并作适当的笔记。课后作业一、选择题1.下列_是CSS设置字体颜色的属性。A color B font-style C font-color D background-color2.下列_是设置文本阴影效果的属性。A font-fami