HTML5 CSS3Web前端开发技术（任务式）（微课版）（第2版） 教案06 《使用CSS3美化页面》.docx

《HTML5 CSS3Web前端开发技术（任务式）（微课版）（第2版） 教案06 《使用CSS3美化页面》.docx》由会员分享，可在线阅读，更多相关《HTML5 CSS3Web前端开发技术（任务式）（微课版）（第2版） 教案06 《使用CSS3美化页面》.docx（9页珍藏版）》请在课桌文档上搜索。

1、教案20-20学年第学期课程名称：授课教师：职称：开课部门：年月曰教案首页课程名称授课专业班级授课教师职称部门课程类型学位课公共必修保口公共选修课口专业必修课素质拓展必修课口专业选修课口素质拓展选修课非学位课公共必修课口公共选修课专业必修课口素版拓展必修课专业选修课口素质拓展选修课课程性质口理论口实践。理论+实践考核方式回考试口考查课程教学总学时数64学分35学情分析大年纪的学生首次正式接触WEB的相关概念，但是在之前的基础课程中学过，*(操作系统、计算机原理、Ifhon编程、,语言编程等相关专业方面基础知识，具备有一定的计算机操作能力，与基础应用知识：并且在日常中大量使用电脑与手机等计算机设

2、备，其中日常生活中也对于网页的使用更是颇多。但对于WEB方面的专业知识没有一个准确、完整的知识体系构建。教学方法谈论法、讲授法、演示法、练习法、抽取法教材名称(H1.K1.5KSS3b前端开发技术作者于丽娜出版社及出版时间人民邮电出版社2021.09弁考书目作者出版社及出版时间教研室意见教研室主任签字：年_一月一日注：表中口选项请打“J”每门课程只需填写一次本表.教案授课帙师班t学时6授课日期教学任务使用CSS3美化页面授课方式Q讲授团实践授课地点团多媒体教室团实验/实训室口企业主要套考资科枚学PpT、做课、动画、思爰课程思政视频习题等导图教学目标索质目标：1,培养学生主动学习的能力,分析问题

3、、解决何港的能力：2 .培弊学生职业索笄和职业道愧。知设目标，1.了解常用文字样式:3 .掌握图文混排的对齐样式；4 .掌握超鞋接的不同状态样式I5 .挈握背景、背景图.渐变背景的样式设定.能力目标：1.使用CSS3样式进行常见页面祥祥的美化.帙学内容1. CSS3文字样式2. CSS3文本样式3. CSS3超链接样式1.CSS3列表样式5. CSS3背责样式6. CSS3背景渐变样式.点点教学重点：1. CSS3掌握图文混排的垂直对齐问遨2. CSS3就以图原理与应用3. CSS3背景渐变样式教学难点:CSS3掌握图文湿拉的垂克对齐问题教学方法谈论法、讲授法、演示法、练习法素材资*团文本素材

4、0实物展示SPPT幻灯片口者翔素材回觇频素材回动向素材0图形/图像索材口网络资源口其他课后作业任务一：总结提升任务二：能力进阶帙学反思注：教案按授课次数填写,每次按课均应填写一份本表.重红班投课可不另填写教案.教学过程及内容注解（应包含注意事项、课程思政点融入等）一、导入斫课1的6分*】教师；职业素养是人类在社会活动中常要遵守的行为规范职业道德、职业思把、职业行为习惯是职业索养中最根基的部分.同学们学习HTM1.和CSS语法，要注意:书写格式、合理添加注择、合理规划项目文件，这些都是合格的前端开发从业人员的茶木素般，在理解CSS基本语法，使用选择器灵活的对整修饰的内卷进行选定之后.我们的【：作

5、重心就要转向如何去修饰渲染我们的内容了.二、新知飒点、技能点讲解【的X分野】新课讲解h【约20分钟】教师；本单元将日常开发中常用的样式进行分类学习。从基础的文字样式设置开始,详细讲解使川CSS样式设理文字的各种效果.文字与图片的混持效果，使用CSS样式设置出链接的各种方式，以后讲解网页中背景酸色、背景图片的各种设置方法、列表样式的设置方法和渐变效果的设置方法.掌握了各种各样的样式美化方式之后.我们将在对新云课堂中的文本内容较为集中的几个页面部分,配合最常用的CIaSS选择；进行样式的美化.学生：我想先对网页中的文字内容进行关化，黑色白底的网站太没有新意了，我应该如何进行？教师：HTM1.J,.

6、VsPan标签是用来组合HTM1.文档中的行内元素的，它没有固定的格式发示，只有对它应用CSS样式时，才会产生视觉上的变化.案例演示）在CSS中，使用font-sty1.e属性设置字体的风格,使用font-%vcigh1.进行字体字重的设定,使用font-fami1.yM性设置字体的类型.使用font-size谀定字体大小.Iont方式可以同时完成上述多个样式的设定，font方式的简写形式，必须按照fonbsty1.e、font-weightIiOnIsize1.ineheighbfoni-fami1.y的顺序书写.否则浏览器无法正确识别内容当；”要同时设置英体和中文字体时，一定要将英文字体设

7、跟在中文字体之附，如果中文字体设徨于英文字体之前，英文字体设词将不起作用。在实际网页开发中，网页中的文本如果没有特殊要求,通常设置为宋体；宋体是Windows系统中默认的字体,如果需要其他比较炫的字体则使用图片来替代.（案例演示）新课讲解2：【约20分钟】教师：我如果要使用CSS把网页中的文本设置得非常美观和漂壳，该如何设置呢?这就需要卜面的知识使用CSS排版网页文本.在网页中,用于排版网页文本的样式有文本颜色.水平对齐方式、首行缩进、行高、文本装饰垂直对齐方式.常用的文本属性、含义及用法.学生：.(各种猜想)教师：co1.or样式设定文字颜色,颜色的表示方式有如下几种：英文单词方式,如red

8、.b1.ue.green等,这种方式可以快速描述一纥常用到的预设定颜色，I六进制方式，如#fOO、WOrth*0Of等,这种方式依照颜色的现实的三基色方式,使用d255的数字表示纣绿蓝.三种i色的数值.#后而依次跟施的数字为十六进制表示的红绿蓝.通常后面所跟的数字为6位，红色则衣示为利顺)00,这里的ff表示最大红色数值255.00发示绿色蓝色为最小数伯0,当表示的颜色好一祖的前后数值相同时，如#000000、#333333、Wfff1.ff时、可以荷写为其中一位:#000、#333、f1.rgb()方式，同时也是依据:基色的数值方式进行颜色的龙示,这里使用的10进制数进行表示,每种颜色的取值

9、范用在O255之间，如1b(255.0.0)表示红色。rgba()方式，在rgb的基础上增加了透明效果，表示带有透明度值的RBG颜色表示方式.如rtga(255.0.0.0.5),表示红色且具有50%透明矍a代表透明度，取俏范用0，I之间，伯为。时表示全透明状态，伯为1时表示完全显示不透明状态。(演示过程在书写颜色值的时候，注意以下几点；1.通常在实际业务中不会使用英文颜色名的方式进行颜色定义，会使用十六进制数的方式进行指定.并且使用小写方式：加果书写的颜色假满足#XXYYZZ(6位十六进制数满足从左向右依次每两各位一组,组内两数相同)形式条件时，使用简写方式#XYZ,如红色：#0000通常写

10、作f00:门色：#If1.YIT通常写作#幅2.在一个项目中不论使用哪一种方式进行颜色值的设定,通常在项目中要求统一书写方式,在项目开发前沟通商定.文本水平对齐：在CSS中，文本的水平对齐是通过ga1.i即属性来控制的，通过它可以设置文本左对齐、居中对齐、右对齐和两端对齐.IinC-height的M性色与fomizc的属性伯一样，也是以数字来发示的，堆位也是px除了使用像素表示行海外，也可以不加任何单位，按倍数表示,这时行曲是字体大小的倍数.例如，p标签中的字体大小设置为2px它的行高设置为“Iine-height：；:.那么它的行高换算为像素则是8px.这种不加任何单位的方法在实际网页制作中

11、并不常用，通常使用像案的方法去示行高，Icxkdeoni1.ion属性来设置文本装饰。超疑接标签数认就存下划线,但大多数情况下我们并不布里显示下划线.所以就要通过设置tcxt-dccoration属性把它刷除，一般情况卜none和UrKkrIinC是最常用的两个世。在网页实际应用中通常使用VEiCaI-a1.ign属性设置文本与图片的居中对齐，此时它的值为midd1.e.设置图片与文本居中对齐.在IeXt-ShadoW出现之前，网页中要出现阴影效果主要采用Photoshop等绘图工具将其制作成图片引入页面的方式.不过,这样的方式非常麻烦现在CSS3版本可以使用text-shadow属性为文本设

12、置阴影效果，这个属性有两个作用,即产生阴影和模糊主体.这样无须使用图片就能给文本增加历感.新课讲解3：【约15分钟】教师；超琏接单击前和单击后的不同颜色，其实是超琏接的默认伪类样式。所谓伪类,就是不根据名称、属性、内容而根据标签处于某种行为或状态时的特征来修饰样式也就是说.超鞋接将根据用户单击访问前鼠标悬浮在超链接上、单击未择放、单击访问后的四个状态显示不同的超排接样式。伪类样式的她本语法为“标签名:伪类名（声明:伪类名称含义示例a:Iink胞击访问的的超健接样式a:1.ink|co1.or:#9EF5F9;)a:visited刺击访问后的同陵接样式a:visited!co1.or:#333;

13、a:hover鼠标整浮其上的超链接样式a:hovcrco1.or:#FF73(X);a:active胞击未糕放的总链接样式a:accivc|co1.or:#999;|新课讲解4：【约5分钟】教师：在浏览网页时.使用列表SI织网页内容是无处不在的.例如.横向导航菜雎、翌向菜单、新闻列表、商品分类列衣等，基本都是使用UUi结构列表实现的，传统网页中的菜单、商品分类使H1.中的列表均没有前面的Ia点符号，该如何去掉这个默认的IB点符号呢？-1.ist-sty1.e：none；在网页制作中，1.ist-sty1.e和IiStKy1.EyPe两个蟠性是大家经常用到的.而另两个属性则不太常用,因此在这里大

14、家牢记IiM-StyIc和IistTty1.sypc的用法即可.新课讲解5：【约30分钟】教师:大家在上网时悭看到各种各样的页面背景（background），有页面整体的图像背景、窿色背景，也有部分的图像背景、颜色竹器等。在学习背母属性之前,先认识一个网页布局中的湘.用标签一一Vdi、,标笠.div标签可以把HTM1.文档分割成独立的、不同的部分，因此div标签用来进行网页布局。div标签与p标签一样，也是成对出现的，它的语法如下,使用background-image属性设置背亮图像的方式是hackground-imagc:uri（图片路径）：“如果仅设置了background-image,那

15、么背景图像炊i自动向水平和垂直两个方向重红平蛹.如果不布里图像平铺.或者只布里图像沿着一个方向平铺,则使用backgmundmpeat属性来控制，该属性有四个值为实现不同的平铺方式，(Drcpeat:沿水平和垂直两个方向平铺.(2)no-rcpeat:不平铺.即背绘图像只显示一次.repeat-x:只沿水平方向平铺.(4)repeat-y:只沿垂直方向平铺，在CSS中I使用background-position来设置图像在背景中的位置,背景图像默认从被修饰的网页元素的左上角开始求示图像,但也可以使用backgroundposition双性设置背盘图像出现的位置，即背景出现一定的偏格量。可以使用

16、具体数值、百分比、关键词三种方式表示水平和垂直方向的偏移量.景是CSS中使用版率很高的一个胧性.可以帮助Wcb设计师实现一些特殊的效果.但是有时候CSS中提供的background功能无法满足设计师的需求。例如，设计师出II接对背景图片的大小进行控制呢?接下就详细介绍在CSS3中新添加的background-size的使用.学生；跟做新课讲解6：【约30分钟】教师：线性渐变是窿色沿着一条直线过渡:从左到右、从右到左、从上到下等。CSS3制作渐变效果其实和制作蚊件中的渐变没什么区别.首先指定一个渐变的方向、起始颜色、结束颜色，具有这三个参数就可以制作一个简单的、普通的渐变效果.IE浏览器是Tri

17、dem内核，在写样式就容的时候要加前缀:msChromc浏览器是Wcbkit内核,在写样式兼容的时候要加前缀:-WCbki-Safari浏览器是Wcbkit内核，在写样式兼容的时候要加曲级:ZChkitrFirefox浏览器是Mozi1.1.a内核，在写样式兼容的时候要加前缀:moz,后面还会学到其他CSS属性也需要在属性前面加浏览器前假才能获得相应的支持,这些主流浏览满的前缀内核后块用到符不再详细说明.常规语法如下.1.incar-gradicnt(position.co1.or1.co1.or2,.)如果兼容写法：-webkit-1.incar-gradicnt(position.1.or

18、1.co1.or2.)羟验分享：对于CSS3样式的兼容性并不是不变的，CSS3是个永远在更新的版本号，所以部分CSS3样式是否使用慈容性写法就好的方式是去www.caniusc.conT网站查询当前的兼容恨学生:跟做新课讲斛7：【约30分钟】放舶演示操作上机任务关化页面通用尾部学生：跟做新课讲解8：【约30分钟】教师：演示操作上机任务-美化页面通用头部学生;跟做新邯讲解9：【约30分钟】教师；演示操作上机任务-美化课程资源表格学生；跟做新课讲解10：【约30分钟】教师：演示操作上机仔务-制作课程推荐部分学生：跟做三、铁学总结【的6分*】本单元主要讲述CSS文本园性、文字属性、样式、衡色和阴影属性的设置方法，并且完成了新云课堂项目首页通用文字部分、通用头部、尾部和播放页面的文字美化.通过本垠元的学习,读者应该熟练掌握CSS常用文字样式的属性设双放法，能够使用CSS对页面文字元素进行美化.四、课后作业【的6分/】1 .整理课程知识宅记2 .尝试完成扩展实践，参考效果图制作新店电商平台Ei页通用页尾.