HTML5 CSS3Web前端开发技术（任务式）（微课版）（于丽娜第2版）教案全套 1--12 搭建项目开发环境--- 使用CSS3媒体查询实现页面响应式.docx

《HTML5 CSS3Web前端开发技术（任务式）（微课版）（于丽娜第2版）教案全套 1--12 搭建项目开发环境--- 使用CSS3媒体查询实现页面响应式.docx》由会员分享，可在线阅读，更多相关《HTML5 CSS3Web前端开发技术（任务式）（微课版）（于丽娜第2版）教案全套 1--12 搭建项目开发环境--- 使用CSS3媒体查询实现页面响应式.docx（61页珍藏版）》请在课桌文档上搜索。

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

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

3、精神；2 .培养学生编码的规范意识、创新意识；3 .培养学生爱国精神,树立民族自信：4 .培养学生自主学习和解决实际问遨的能力。知识目标：1,了解Web相关概合2 .了解当前主流Ueb浏览器与浏览器分类依据3 .了解HTM1.5的优势能力目标：1.掌握HBUi1.derX、ChrCmP浏览器的安装与使用4 .掌握在HBUi1.derX中进行Web项目的搭建流程教学内容1 .WER概述2 .主流WEB浏览器3 .常用WEB开发工具I.WEB标准5.111M1.5的优势S点魔点教学里点：1. UEB体系2. UEB标准3. 开发环境的搭建教学雉点：1.浏览器的工作原理收学方法谈论法、讲授法.演示法

4、练习法索材贵0文本素材EI实勒展示回PPT幻灯片口音频索材回视频索材EI动i素材团图形，图像素材口网络资源口及他课后作业fE务一：总结提升任务二：能力进阶假学反思注：教案按授课次数地写，毋次授课均应填写份本衣。武红班授沃可不另填写教案,注解（应包含注意事项、课程思政点融入等）一、导入斫课1的6分*】教师；同学的，我是大家这学期WCb前湍开发这门课程的教师3很荣幸能和大家一起学习这门课程的知识.接下来我们来一起学习本课程的第一章节一一搭建顶F1.开发环境，本任务我们要学习HBuiIderX开发工具的安装和使用。安装HBUikkrX是款国产软件,是非常优秀的HTM1.5前端开发工具.HB1.nki

5、erX让我们看到了国产编辑器的用光,布里同学们努力学习学成知识.报效祖国.我们把HBui1.derX作为网页代码的编辑工具：安装Chrome浏览器作为网页效果测试工具：并在搭建好的开发环境中，端写一个输出“你好，中国”的简单网页项目，验证我们的开发环境毡否搭也成功.最后在开发_具中安装相应的插件，从而提高开发效率。二、新知识点、技能点济解【的X分花】新课讲解1：【约IO分钟】敦帆认识Wcb要先知道什么是Internet,Interna,中文音译名为因特网,正式名称为国际互联网，是所有由使用一定堤则的公用交互语言进行通信的计算机连接而成的巨大全球忖络.所有在互联网中的计算机设备即是网络中的节点，

6、可以和与该节点相连通的节点进行通信，西有附近的节点将信息发送到远推目标节点逐节点传递。从而实现了万物互联，万物互通的互联网，那同学的，你是怎么理解生活中的互联网呢？互联网是什么样子的呢？大家分组一起讨论，之后分享每一组的总结*学生：平时通过百度搜索资料、或者在线聊天、上网课都用到了互联网。互联网是一种网状结构的线.实现了信息通伯.互联网前要有类似路由器的硬件支持，并且得要很多.平时上网会用到域名，也就是网站地址的名字。教师；Web是Internet的一个应用，就是我们日常生活中访问得到各种网站的网贞的集合,他们之间遹过超院接来指引浏览的路径方向.我们在这些内容的指引下.通过各种各样的浏览潺工具

7、进行M络信息的获取的行为.也就是我们常说的网上冲浪。新课讲解2：【约10分仲】教师：为我In提供.通俗地讲，我们上网的过程就是在不同HTM1.页面之间跳转浏览的过程.不同浏览那之间想要得到相同或近似的效果.就需要能膨对HTM1.文件的解析统一化标准化，居么对应的标准姑什么？Web标很，并不是一个单一的标准，是由一系列标准殂成的桀合，网页I嗓是由三部分组成一一HTM1.,即页面结构标准：CSS,即负面祥式标准：Javascript.即页面行为标准.这些标准的起草、制定与发布.通常由万维网联盟(W3C)或者类似的组织进行.HTM1.5标准是在HTMU蛆础上的扩展，其中新标准添加了大麻的语义化标签，

8、让代码含义更明确，便于搜索引倏解析识别，也便于开发者合理划分页面结构,提高代码可读性.HTM1.5的标准中，将大修需要配合javascript脚本实现的动态交互效果，数据处理和多燃体搔放功能，都包含到了HTM1.5标准之中,使得促使浏览揖厂商将这些功能在浏览潺中实现.降低了开发者的开发难度.还将之前一些繁琐的设定内容简化.HTM1.5的优势不仅仅体现在网页中,如今大房的嵌入式设备的开发框架中，或完全引入或借称改良HTM1.标准来行应用页面的设计与实现。例如火爆的微信小程序，网易云音乐，迅缶等等.新课讲斛5；【约15分钟】教师；演示操作上机仔务-安装Chn)me浏览器学生:跟做新课讲斛6：【约1

9、5分钟】数师：演示操作上机任务安装HBuiIderX开发IDE学生:跟做新课讲斛7：【约15分钟】教师：演示操作上机任务-使用HBui1.dcrX创建项目学生：跟做三、教学总结【的5分立】本单元主要概述了Web的概念，然后讲述了主流的浏览器，Wcb标准以及HTM1.5标准的优势.并且完成新云课堂项目开发环境的搭建,包括浏览器的安装和HBui1.dcrX的安装和使用.通过本单元的学习，读者应该了解主流浏览器和HBuiIdcrX的基本使用方法，能婚用IIBui1.derX创建Web项目，为后面章节的学习打下基础.四、课后作业【的5分花】1 .整理课程知识笔记2 .搜集H常使用的网页浏览器行哪些，并

10、进行浏览器分类，阐述分类依据及特点。教案20-20学年第学期课程名称：授课教师：职称：开课部门：教案授课帙师班t学时6授课日期教学任务匕制作课程基础页面授课方式Q讲授团实践授课地点团多媒体教室团实验/实训室口企业主要套考资科枚学PpT、做课、动画、思爰课程思政视频习题等导图教学目标索侦目标：1.培养学生诚实守信、团结友善的精神；2 .培养学生责任担当总:识和编码的规范意识.知识目标，1.掌握HTM1.基础谱法3 .掌握IIW1.明础标算4 .掌握语义化结构标签4,了解Hn1.1.5的特点能力目标：1.熟练使用HBUiidCr编写摘单HTM1.页面帙学内容6. Hn1.1.5基础语法7. III

11、M1.5谙义化结构标签8. HRI1.5常用标签9. Hn1.i.5实体字符10. HTM1.5超链接、框架标签11. HTM1.5标笠分类.点点教学重点：4. HTM1.5基础语法5. IMI,5超钺接教学难点:1.HTM1.S标签分类教学方法谈论法、讲授法、演示法、练习法素材资*团文本素材0实物展示EPPT幻灯片口音频素材回觇频素材回动向素材0图形/图像索材口网络资源口其他课后作业任务一：总结提升任务二：能力进阶帙学反思注：教案按授课次数填写,每次按课均应填写一份本表.重红班校课可不另填写教案.注解(应包含注意事%课程思政点融入等一、导入斫课1的6分*】教师；实物标签是用于标明物品的品名、

12、重诉、体积、用途等信息的简要标牌。我们堤个人要树立“标签意识”,把诚实守信当标签,把团结友善当标签.把贲任担当当标签.今天我们学习HTM1.标签，HTM1.标签是HTM1.语言中最基本的单位。HTM1.,全歆HyPeiTeX1.MarkUP1.angUage,即超文本标记语i；,它的主要用途是描述页面，也就是我们认识的页面就是HTM1.我们在浏览器中所看到的页面是通过浏览湍内部的.解析/对HTM1.文件内容的识别与演染的结果.HTM1.也是一种收到广泛认可的网页规范标准，不仅在网页的开发中重要，在嵌入式开发，移动第开发，PC湘开发等场景下，也有广泛的应用。所以鸵握当前最新的HTM1.5标准已成

13、为广大开发者的必品基础技能积土成山,聚沙成塔,我们的网页使用HTM1.作为内容构建而成,通过一个个标签来展示页面内容，通过,个个独立的标锭的嵌套配合.祖成,个内容丰富的网页。做网页的过程就像是搭枳木，HTM1.部分就是需要先搭建的基础枳木,待板架搭建完毕后，再通过CSS为枳木们上色美化，从而完成网页制作.二、新知识点、技能点讲解【的X分龄】新课讲解1：【约20分抻】教师：页面代码中除广文档头剜下的是很多行尖括号包史的内容.这些内容就是HTM1.的核心一一元素标卷).HTM1.标签的诵法是这样的：标记标签内容/标记标记属性=值”标签内容U标记并不是所有的标签的都是通过开始与结束双标记构成的这种元

14、素的语法结构是这样的：嘛记标记属性=值/这种没有标签内容的标记标签.我们称之为单标记标签,是从双标记标型演化而来.因为有些标签功能作用相对简单，并没存标箍内容嵌套，如果按照双标记标签的写法就显野相对繁顼.所以总标记标签可以看作是开始标记与结束标记的组合体：标记X标记/简化出标记f实际开发过程中,也常常用如下方式书写：小记标记属性=4*(r学生：为什么要有两种不同的写法？应该选择那种写法？教师：HTM1.是参考XM1.设计而来,XM1.是一种严格的标记语言.所以严格按照标记语吉i;5法书写，本身就是了让代码更健壮，减少后期因代码风格不统一带来的问超.但实际开发过程中，由于浏览器中对HTM1.代码

15、有一定的纠错能力，单标记标签的司在HTM1.5中，超琏接有3种类型：件通超链接，用来实现页面间跳转:锚点超能接,用来实现页面内跳转：功能超能接.用来实现外部应用谢用或其它功能.链接文本或图像在超钺接中的两个我要国性：属性作用href设定超链接触发之后，浏览器要跳转访问的目标地址.可以是完整H地址或者本地的相时或葩时路径地址。1UR1.target设定超链接触发之后，新的窗11的展示方式._SeIf:在原窗口展示新页面-b1.ank:在新窗口新标签中展示新页面_Parem:在父框架集中打开被桂接文档JoP:在整个窗口中打开被链接文档framename:指定的框架中打开被边接文档M页浏览的实质就是

16、在不同的页面之间跳转，这种跳转就是出超链接标签实现的，超琏接的第一种用途一一实现页面间的跳转：Vahrcf=t接地址“target=,目标窗口位置“集接文本或图像va一个文本超法接，使犯普通的文字具有了类似按钮一般的效果，把下面代码写入到灾面中并保存，然后在浏览器打开，点击一下看看效果是什么样子的,百度一下va超故接除了在页面间实现跳转之外也能实现贞而内部的跳转,也叫作锚点跳转.先i殳定要跳转到位徨添加跳转目标位跣,这个位跣标记叫做锚点，类似于轮船的船锚的道理，即在此处产生一个定位。为了让这个定位能修被识别，就需要为其添加name属性，这样使UJ以根据name强性的值，来碉定目标位置了。然后在

17、进行跳转触发的位置添加一个超罐接标签，或者使用超鞋接标签包我一些元素，和之前的普通超链接大致用法相同，唯一不【可的是这个用来触发跳转到指定锚点的超链接的hr”属性需要由#开头与之前设定好的锚点名构成：Vahrcf=martx1.跳转va这样在页面内容点击“跳转”超健接，就能使页面的蹊部与猫点位捏对齐功能性链接比较特殊，当单击该链接时不是打开某个网页，而是启动本机自带的某个应用程序，如网上常见的电子邰件、QQ、MSN等琏接.以鼓常用的电子邮件琏接为例,当单击“联系我们”邮件链接时将打开用户的电子邮件程序,并自动填写“收件人”文本框中的电子邮件地址.联系我们浏览器调用本地帆件软件向指定邮箱发送数据

18、Vahrci,tck1.234XW(M)拨打热线va浏览器调用本地电话通讯状件进行指定号码拨号手机谓较为常见联系客服浏览器调用本地TIM或QQ软件向指定QQH1.户发送数据frame框架标签iran标签会创建包含另外一个文档的内联框架(即行内框架).iframc的强大功能是不容忽视的，网站有了iframe会变得更加美观、大气，现有的主流浏览器都支持Viframc标签.iframe标签是框架的一种形式.在HTM1.5标准之曲使用frame标器来实现框架,但教师：演示操作上机任务-制作页面通用头部学生：跟做新课讲解9：【约35分仲】我师：演示操作上机任务制作课程说明页面学生:跟做四、教学总结【的5

19、分花】本单元主要讲述了HTM1.文档基本结构、谙法，然后讲解了HTM1.基本标签，包括tit1.e标签、meta标签HTM1.基础标卷、超链接标签等标签及相关属性，并且制作了新云课堂项目网页通用头部、尾部和课程说明页面的搭建。通过本单元的学习，读者应该掌握HTM1.文档的基本结构,健幡熟练运用HTM1.基础标签、段落标签、图片标签、超链接标签等的使用方法，为后面章节的学习打下基础.五、课后作业r的5分花】3 .整理课程知识笔记4 .要试完成扩展实践,参考效果图制作图书详情页面.教案首页课程名称授课专业班级授课教师职称部门课程类型学位课公共必修保口公共选修课口专业必修课素质拓展必修课口专业选修课

20、口素质拓展选修课非学位课口公共必修课口公共选修课专业必修课口素版拓展必修课口专业选修课口素质拓展选修课课程性质口理论口实践。理论+实践考核方式回考试口考查课程教学总学时数64学分35学情分析大年纪的学生首次正式接触WEB的相关概念，但是在之前的基础课程中学过，*(操作系统、计算机原理、Ifhon编程、,语言编程等相关专业方面基础知识，具备有一定的计算机操作能力，与基础应用知识：并且在日常中大量使用电脑与手机等计算机设备，其中日常生活中也对于网页的使用更是颇多。但对于WEB方面的专业知识没有一个准确、完整的知识体系构建。教学方法谈论法、讲授法、演示法、练习法、抽取法教材名称(H1.K1.5KSS

21、3b前端开发技术作者于丽娜出版社及出版时间人民邮电出版社2021.09弁考书目作者出版社及出版时间教研室意见教研室主任签字：年_一月一日注：表中口选项请打“J”每门课程只需填写一次本表.v1.i笫1项O1.iv1.i第2项v1.i第3项效果如图所示.1 .第1项2 .第2项3 .第3项有序列表的特性如下.有顺序，府个VA标签独占一行（块元索）。默认V1.i标签项用面有顺序标记.一般用于排序类型的列表，如试卷、向卷选项等.定义列表是一种特殊的列表形式.它是标遨及列表项的结合.定义列表的语法相对于无序列表和有序列我不太一样,它使用标签作为列入的开始，使用标签作为每个列去项的起始，而对于每个列表4的

22、定义则使用vdd标签来完成,其结构语法如下。SS第I项第2项vdt标题二Vdo第I效果如图所示.第1项第2项二第1项定义列表的特性如K：没有照序,每个标签、标签独占一行（块元素）.战认没有标记.一般用于一个标题下有一个或多个列表项的情况.学生：那有没仃横向持列的列表呢？教师：在实际开发中，页面中的商品列衣或页面导航栏等，无论是横向排列的还是纵向排列的,通常是使用无序列表通过浮动等方式进行布局实现的.我f门会在后面的IR元中详细学习.新课讲解2：【约20分钟】表格标题1行1列婀S1行2列的标题1行冽惭|1行1列的单元格1行2列的单元格!行3列的单元格2行2列的单元格2行3列的单元格同学们，我们一

23、起来思考下，现在能不能制作上图的去格呢？学生：表格的大部分是可以制作的，但是对于左下角的单元格，还不知道如何实现，一个由两个单元格大小构成的单个单元格。这种单元格律不算是-种组合？教师:上面介绍了简单表格的创建，而现突中往往需要较双杂的衣格，有时就需要把多个单元格合并为一个单元格，也就是要用到表格的特列与跨行功能.跨行是指单元格的飒向合并，mwspan底性设定跨行，射应侑为数伯，指定合并的单元格个数。为tab1.e熠加border属性设定边框宽度。示例如下,跨列是指单元格的横向合并，CNspan属性设定跻列，对应值为数值，指定合并的单元格个数.为tab1.eJfijJIIborderM性设定边

24、框宽度.当表格行列增多，内容相对狂杂之后，我们很玳次性写对相应的单元格个数、行列个数与合并关系。如何解决呢？一种简单的思路.操作起来会比较繁琐：开始做衣格的时候不要考虑最终的效果，把役格看成没有进行合并的状态，由一个个标准的维元格组成样子。这样先按照表格的n行M列的方式，使用n个tr标签包裹m个td或小，实现一个n行m列的空表格，再根据最终效果最合并单元并剧除多余的单元格即可.先一种思路：根据我格的最终效果，从上向下逐行书写，在每一行中从左向右书笃单元格并根据实际效果，直接设定跨列单元格的COkPan底性值。这里SJ行中的单元格指的是单元格的上沿与该行上沿重合的单元格，这样在行内从左向右书写时

25、跳过/被聆行合并的单元格.并且在书写一行的过程中也解决的了瞪列的问飕.对衣格结构与合并熟练掌握.之后，这种方式效率更高.新课讲解4：【约15分钟】教师：在HTM1.5问世之前,要在网页上展示视频、音频、动Ai等.主婆是通过使用第三方或者1*1主开发的播放器使用最多的工具应该算是F1.ash了。但是用户运行FIaSh需要在浏览器上安装FIaSh插件才能使用，有时候速度也会非常慢，而且Hash的安全漏洞较多,官方也停止了维护。HTM1.5媒体元求的出现改变这一状况,在擀页中使用HM1.5来播放教师：演示操作上机任务-制作课程资源表格学生：跟做新课讲解8：【约30分仲】我师：演示操作上机任务M作课程

26、播放区域学生:跟做五、效学总结1的5分侨本单元主要讲述了列表、表格、多媒体标签等相关标签的基本语法、相关屉性和使用方法.并且制作了新云课堂项目课程播放页面和页面侧边栏课程列衣、页面资源表格的搭建。通过本单元的学习，读者应该掌握在网页中添加龙格、列在的方法,能钙熟练运用HTM1.衣格、列表标签、多媒体标卷等的使用方法，为后面聿节的学习打下翦础.大、课后作业【妁5分侨】5.整理课程知识笔记6,装试完成扩展实践，参考效果图制作梢助琏接导航俄分.教学过程及内容所以在处理用户业务之前进行表单基础格式或内容的脸证就非常重要，Ur以有效地减轻服务擀的汽力：保证数据的可行性和安全性.新课讲解5：【约30分钟】

27、我师：在HTM1.5中如何进行验证？这里主要了解以下几种方式.PIaCehoWer属性用于为inp类型的文本框提供一种提示(hint),这种提示可以描述文本册期待用户输入何种内容。在输入为空时显示，当在文本框中写入内容时消失.P1.aCehOkiCr跟性适合于input标签：text,search.uri、Cmai1.和password等类型。required属性用于规定文本框地写内容不能为空，否则不允许用户提交表单。该属性适合input标签：text、search、ur1.emai1.password.number,checkbox.radio,fi1.e等类型.PaUCm随性用于验证表维输

28、入的内容，通常情况下emai1.、number等，已经自带了简单的验证，加上Pauern就会更加高效，pauern的周性伯力正则表达式。注意，该属性在具有nova1.ida1.e属性的Vtbnn元素内不生效。nova1.idate限性规定，当提交农IR时不进行验证.如果使用该属性，则表单不会验证表单的输入，以上几种特殊属性中,paucrn用来设定正则脸证规则，是最灵活也是较难理斛的.正则表达式是对字符串操作的一种逻辑公式,就是用事先定义好的一些特定字符、及这些特定字符的组合，殂成一个“规则字符中”。起初是科学家研究出了一种用数学方式来描述神经网络的新方法，他们创造性地将神经系统中的神经元描述成

29、了小而简胞的自动控制元从而作出了一项伟大的工作革新.本质上正则表达式是使用特殊符号发示一定匹配规则的字符串.刖来进行内容比对。HTM1.5标准中提供了一种不借助js进行表单验证的新方式：文本类输入框中的pattern属性中存放开发者预先设定的内容格式的正则表达式用户输入的内容必须符合正则衣达式所指的现则，否则就不能提交表单，在提交表单时做出错误信息的反馈，关于正则表达式这里不怕深入讲解，我们举几个例子，让大家在头胶中有初步的概念即可.示例：/Aa-z0-9_-6,18)W分析：两侧厂衣示正则表达式的开始与结束，开始位置与A相邻构成了八，表示正则表达式的匹配要求从目标内容的头部开始匹配：结束位置

30、的,与相邻的S构成了SA表示正则友达式的匹也要持续到目标内容的最后.再看后面az9r表示在英文大小写字母、数字、.、一符号中，匹配任意一个，然后与前面的八相匏表示，能够正确对配的内内容要求，必须是以英文大小目字母、数字、-、一中的一种开头.维续向右若，6,18用来修饰做出相邻的内容的数St龙示左侧内容匹配6到18个，在然后与最后的S/相邻，表示目标内容要以英文大小写字母、数字、_符号中的一种结尾才能完整风配.所育最后推导出,该表示能匹配的是，由英文大小写字母、数字、-、一中任意教案20-20学年第学期课程名称：授课教师：职称：开课部门：教学过程及内容注解（应包含注意事项、课程思政点融入等）一、

31、导入斫课1的6分*】教师；在经过施面几个单元的学习中，掌握了HTM1.进行页面内容框架的开发,那我们能开发出例如,学习强国、人民网.京东商城.脚易新闻.QQ空间等，具有独特效果的网站了么？答案自然是不能，我们使J1.JHTM1.仅能开发出以内容为主,有少盘文本样式效果的页面，早己不能满足现在的产品设计需求.而页面中华网的、个性的、炫酷的效果.需要借助CSS提供的能力.CSS正是网页三剑客中,负贪页面展示效果的重要部分.在新云课堂项目中，我们已羟完成部分内容，仅有HTM1.5蚊认的显示效果,还不够吸引用户。我的将在本明元开始,通过CSS的引入,来美化项目.二、新知识点、技能点讲解【的X分花】新课

32、讲解1：【约20分钟】教师；的着HTM1.的成长.为了满足页而设计者的要求.HTM1.添加了很多显示功能,但是随昔这些功能的增加,HTM1.变的越来越杂乱,而且HTM1.页面也越来越膨肿.于是CSS便诞生了，CSS,英文全称是CascadingSty1.eSheeIS,中文名为层无杆式单或级联样式单.这里的级联或层费的含义为.可以对同一元素做多次的表现样式进行谀定，这些样式之间存在一定的权曳等级逻辑关系,权重或级别最高的会对G线的去现样式进行由写泣染.在由HTM1.、CSS.JavaScript组成的网页三剑客中,CSS主要负货网页的表现标准，包括页面风格、字体样式、排列方式、持版布同和少部分

33、简单的动画与切换效果.学生：那如何使用CSS呢？教师：那我们先从CSS的基础语法来学习-CSS由选择器和样式上两部分组成.其中使用成对的/*”与*/”符号作为注杼符：选择零（广这里是注称说明/样式属性I:样式值I：样式属性2:样式值2:花括号外为选和器部分，用来决定相邻的样式表对页面中的哪些HTM1.元素内容产生效果.花括号内为样式表部分田至少一组雄值对组成键名与犍住使用日号隔开：每条样式属性的结尾使用分号结束.样式展性就是用来设定表现方式的。I入S先*何*+CQ127.1.884aNOCnewfi1.e.明立义：北京欢迎你歌手：刘欢.（演示过程）你是否能看出其中的过规律呢？调整内部外部样式，

34、都不影响h1.标签的颜色为愤色，则可以推出行内样式的优先级最高：调整内部外部样式，h2的颜色会受到影响，该元素没有行内样式只受到内外样式引用位置的先后影响.其实质是外部引用相当于将外部文件复制到引用的1.ink标签位置，从而变为一个内部样式,而对h2使用了相同的选择器方式设定样式，则后设定的样式眼盖之前的样式,其引用优先级如下：行内样式内部样式表外部样式表.需要引起足够注意的是.这里的优先级仅仅是表示在选择湍相同而引用方式不同的情况下，因引用方式不同而带来的权史优先区别.实际中影响样式优先级的还有选择器权JR的影响，嫉终结果由两者共同决定，我们会在梢后的部分，再讨论媒合情况卜的优先级权重问题,

35、为了便于记忆基础选择器优先级的特点，我们总结了一个简单的判断方法.“就近原则，如果同一个选择器中样式声明层扑，距离被修饰元素最近的样式会双终生效。新课讲斛3：【约15分钟】教师：CSS语法中的垂要的两个剖分之一,选择器地川来决定相邻的样式友对页面中的哪生HTM1.元素内容产生效果，CSS中我们讲选择零分为了堪咄选持器和高级选择器。权础选样器是构成高级选择满的基础成员.基础选择湍行标签选择渊、c1.ass选择零、K1.选择密.这里我们再补充一个通配符选择器.元素选择器：也叫做标程选和器，摊种HTM1.标签的名称都可以作为相应的标签选择器的名麻，该选择据会兀配页面中所有该类型的标签元素.元次选择隔

36、也叫做标签选择器.何由HTM1.标线的名称都可以作为相应的标签选择器的名称.该选择涔会匹配页面中所仃该类型的标签元素.id选择潺：通过与HTM1.元素中的id属性值进行匹配,从而指定对应的样式进行演架.使用符号配合id届性位进行去示,在一个页面中id的属性值不能产生重复。c1.ass选择器：通过与HTM1.元素中的c1.ass属性值进行匹配,从而指定教案20-20学年第学期课程名称：授课教师：职称：开课部门：课程名称授课专业班级授课教师职称部门课程类型学位课公共必修保口公共选修课口专业必修课素质拓展必修课口专业选修课口素质拓展选修课非学位课口公共必修课口公共选修课专业必修课口素版拓展必修课口专

37、业选修课口素质拓展选修课课程性质口理论口实践。理论+实践考核方式回考试口考查课程教学总学时数64学分35学情分析大年纪的学生首次正式接触WEB的相关概念，但是在之前的基础课程中学过，*(操作系统、计算机原理、Ifhon编程、,语言编程等相关专业方面基础知识，具备有一定的计算机操作能力，与基础应用知识：并且在日常中大量使用电脑与手机等计算机设备，其中日常生活中也对于网页的使用更是颇多。但对于WEB方面的专业知识没有一个准确、完整的知识体系构建。教学方法谈论法、讲授法、演示法、练习法、抽取法教材名称(H1.K1.5KSS3b前端开发技术作者于丽娜出版社及出版时间人民邮电出版社2021.09弁考书目

38、作者出版社及出版时间教研室意见教研室主任签字：年_一月一日注：表中口选项请打“J”每门课程只需填写一次本表.授课帙师班t学时6授课日期教学任务使用CSS3美化页面授课方式Q讲授团实践授课地点团多媒体教室团实验/实训室口企业主要套考资科枚学PpT、做课、动画、思爰课程思政视频习题等导图教学目标索质目标：1,培养学生主动学习的能力,分析问题、解决何港的能力：2 .培弊学生职业索笄和职业道愧。知设目标，1.了解常用文字样式:3 .掌握图文混排的对齐样式；4 .掌握超鞋接的不同状态样式I5 .挈握背景、背景图.渐变背景的样式设定.能力目标：1.使用CSS3样式进行常见页面祥祥的美化.帙学内容26. C

39、SS3文字样式27. CSS3文本样式28. CSS3超魅接样式29. CSS3列表样式30. CSS3背景样式31. CSS3背景渐变样式.点点教学重点：14. CSS3掌握图文混柞的垂直对齐问题15. CSS3精灵图原理与应用16. CSS3背景渐变样式教学难点:CSS3掌握图文湿拉的垂克对齐问题教学方法谈论法、讲授法、演示法、练习法素材资*团文本素材0实物展示SPPT幻灯片口者翔素材回觇频素材回动向素材0图形/图像索材口网络资源口其他课后作业任务一：总结提升任务二：能力进阶帙学反思注：教案按授课次数填写,每次按课均应填写一份本表.重红班投课可不另填写教案.教师：Micky是CSS3新增的

40、属性：可以说是默认static定位和固定定位fixed的结合：当元素可以正常完整的显示在页面可视区域中的，和标准文档流中的普通元素相同：但是一旦由于页面潦动或其他原因导致不能在页而可视区域内显示时.便会显示H；同固定定位一样的特性.固定于页面固定位置.不的滚动而改变位置.拈性定位的出现是为了好决，之前如果想实现负面内容不在可视区域时，可以动态进行定位方式的变更，必沏要借助j$进行更杂繁殖的页面滚动状态的判断弊端，作为CSS3的新特性,当前主流浏览潺版本均能正常的支持该样式蟠性.新课讲解6：【约20分钟】教师：在上面的例子中我W发现定位的元素.岐终的显示都是悬浮于标准文档流之上，那么如果两个定位

41、元素的定位出现了重叠.那么其堆登后的效果应该是如何?学生：（思考讨论）.后面的在上。我师：（案例演示）根据以上结果可以推出，如果定位元素出现了堆段现象时，后出现在htm1.代码的定位元南的权重更高,会很盅在之前的定位元素之上显示。般么我们是否可以自定义这个权重.从而灵活掖制定位元素的堆登结果？答案是肯定的，这里我门是通过zindex属性来定义材个定位元素的堆我权正，Z-index瞩性在立体空间中表示直于负面方向的Z轴.z-ixkxM性的Ift为整数,可以是正数也可以是负数.Z-indexM件默认他为0.z-index限性值大的层位于其值小的层上方.如果出现权重相同的情况,则根据元素出现破序.后

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

43、但对于WEB方面的专业知识没有一个准确、完整的知识体系构建。教学方法谈论法、讲授法、演示法、练习法、抽取法教材名称(H1.K1.5KSS3b前端开发技术作者于丽娜出版社及出版时间人民邮电出版社2021.09弁考书目作者出版社及出版时间教研室意见教研室主任签字：年_一月一日注：表中口选项请打“J”每门课程只需填写一次本表.教学过程及内容注解(应包含注意事昊课程思政点融入等一、导入斫课1的6分*】教师；购过前向如识的学习,可以制作出一个静态的更面，可是我们会在网贞上看到忏很多图片或按钮会作照仃动诃的效果.在以往.这些效果都是设计仲依核动态图片、F1.ashJaVasCria完成的,而CSS3将解决这问题,借助CSS3可以轻松帧器、缩放、移动及翻转元素，本单元我们使用2D变形里的位移、放转、纲放，CSS3过渡.以及CSS3如何实现动画效果.使用动画来为已完成的页而提1.的视觉体验.应用动曲样式将首页的龄态大图改造成个具行自动交替变换背盘图片轮播区域,为页面中的静态内容增加双标互动效果，提升页面的友好度，希R通过反史优化修改页面的过程，提升精拄求精的工匠精神.二、新知识点