HTML5 CSS3Web前端开发技术（任务式）（微课版）（第2版） 教案03 《制作课程播放页面》.docx

《HTML5 CSS3Web前端开发技术（任务式）（微课版）（第2版） 教案03 《制作课程播放页面》.docx》由会员分享，可在线阅读，更多相关《HTML5 CSS3Web前端开发技术（任务式）（微课版）（第2版） 教案03 《制作课程播放页面》.docx（10页珍藏版）》请在优知文库上搜索。

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

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

3、码的规范意识。知识目标：1.掌握无序列表、有序列表和定义列表的定义与特点3 .掌握表格元素与表格基础结构4 .掌握1.111.5媒体元泰能力目标：1,熟练使用无序列表制作页面内容1 .熟练使用表格元素制作页面内容2 .熟练使用表格元素制作页面内容3 .熟练HTM1.5媒体元案在页面中嵌入音视频内容教学内容1. H1M1.5列表2. 1ITM1.5表格3. Hn1.1.5媒体元素S点魔点教学里点：1. IM1.5列表2. HTM1.5表格3. IITM1.5媒体查询教学雉点：I.HTM1.S衣格合并收学方法谈论法、讲授法.演示法练习法索材贵0文本素材EI实勒展示回PPT幻灯片口音频索材回视频索材

4、EI动i素材团图形，图像素材口网络资源口及他课后作业fE务一：总结提升任务二：能力进阶假学反思注：教案按授课次数地写，毋次授课均应填写份本衣。武红班授沃可不另填写教案,教学过程及内容注解（应包含注意事项、课程思政点融入等）一、导入斫课1的6分*】教师；创新是引领发展的第一动力,创新让生活更简单.在HTM1.5之前的网灾如果想要展示音乐电影等音视频内容就需要借助第三方的插件.如f1.ash插件，但是它的缺点是比较繁顶，实现代码复杂冗长,HTM1.S新埴了多媒体标签，让网页中插入多媒体元素变的非常简单。在脚页中表现内容的方式不仅仅局限于文本、段落和图片,我们还用到列表、表格以及多媒体内容等,列表类

5、似于word文档中的项目符号与第号，可以为文件添加各种项目符号或者编号，并且还可以与CSS相结合实现出各种常刖效果。表格是数据表现形式中非常应要的种，在网页中也是支持这种通过行与列的规律性组合，形成各种满足需求的表格。我们的云课堂的网站核心功能就是让用户可以随时随地.通过观看在线视频的方式进行学习，我们的用j目播放页面需要用到列表元素来展示课程列表的安排，表格元素来展示课程资源，视频兀素来提供视顿播放的功能。二、新知识点、技能点讲解【的X分龄】新课讲解1：【约20分钟】教师：列表是htm1.5中一个经典的数据形武,通过列表的形式来表现具有同优先级的内容,根据内容的特点不同，可以分为无顺序要求的

6、无序列很：有顺序要求的有序列表；用来定义概念的定义列去，无序列表出u1.标签和1.i标签组成，使用vu1.标签作为无序列表的声明，使用1.i标笠作为短个列表项的,其结构语法如卜：u1.Vg第1项1.iv1.i第2项O1.iv1.i第3项1.iu1.效果如图. W1.M M2 第3项无序列表的特性如下：没有顺序,每个i标签独占一行块元素.默认vi标签项前面有一个实心小网点.一般用于无序类型的列表.如导航、IW边栏新闻、有规律的图文组合模块等.有序列去住1.d标签和V1.A标签组成，使用1标签作为有序列表的声明,使用vi标签作为每个列表项的.有序列表嵌套方式同无序列表一样.只能。1标签里嵌套1.i

7、标签.其结构语法如下.o1.v1.i笫1项O1.iv1.i第2项v1.i第3项效果如图所示.1 .第1项2 .第2项3 .第3项有序列表的特性如下.有顺序，府个VA标签独占一行（块元索）。默认V1.i标签项用面有顺序标记.一般用于排序类型的列表，如试卷、向卷选项等.定义列表是一种特殊的列表形式.它是标遨及列表项的结合.定义列表的语法相对于无序列表和有序列我不太一样,它使用标签作为列入的开始，使用标签作为每个列去项的起始，而对于每个列表4的定义则使用vdd标签来完成,其结构语法如下。SS第I项第2项vdt标题二Vdo第I效果如图所示.第1项第2项二第1项定义列表的特性如K：没有照序,每个标签、标

8、签独占一行（块元素）.战认没有标记.一般用于一个标题下有一个或多个列表项的情况.学生：那有没仃横向持列的列表呢？教师：在实际开发中，页面中的商品列衣或页面导航栏等，无论是横向排列的还是纵向排列的,通常是使用无序列表通过浮动等方式进行布局实现的.我f门会在后面的IR元中详细学习.教师：表格是块状元素.设计该标签的初衰是用于显示表格数据.例如,学校中常见的考试成缄单、选强课课表、企业中常见的，资账单等.由于表格行列的端单结构，以及在生活中的广泛使用，因此对它的理解和编写都很方便.如下图所示.课程裳W-声二W=WQWJS上午海文外语体H历史数学IS文V-体育历史下午源文Wat体H历史ft*SXJfi

9、S体育历史每节涕时长：1.M*?表格通常每行的总宽度一致,同行单元格上沿水平对齐，同列单元格左沿乖I1.对齐。这种严格的约束形成了一个不易变形的长方形盒子站构，堆叠排列起来结构很稳定。但.是表格的缺点，没有华神的样式,不能进行个性化的设计，如果要实现一炖有特点的表格样式，通常是使用无序列表结构加CSii样式去实现.表格的结构上来划分，有以下区域与概念：衣格标题：表格的标即，通常出现在表格上方并居中，文字默认加租。表格头部：用来区分表格结构.通常为表格的最上方包含了对应下方的列的列标咫.衣格主体：用来区分表格结构，表示数据内容区域，衣格尾部：用来区分衣格结构，通常为衣格的以下方，包含表格的备注侑

10、息等单元格：单元格地表格的最小单位，一个或多个单元格纵横排列组成了表格。行：一个或多个单元格横向堆段形成行.列：一个或多个单元格纵向堆登形成列.HM1.5的表格中使用tabic定义表格,caption定义表格标题thead定义发格头部，tbody定义表格主体，Ubot定义表格尾部，Ir定义行，Ih定义标题单元格，Id定义数据单元格。新课讲解3；【约30分钟】教师：表格的构成行标越、表格头部、表格主体三部分构成。先完成Iabk标熊.极现是否需要边框来设定U1.b1.e标签的border属性依，然后在tab1.e标签中完成CaPIion、Ihea1.J、IbOdy的结构。设定标题内容，在Ihead

11、和IfoO1.中使用Ir划分行.在Ihead的Ir中使用th设定标题单元格内容,在其他“中使用td设定普通单元格内容.经过这样的步骤,一个表格就完成九表格标题1行1列婀S1行2列的标题1行冽惭|1行1列的单元格1行2列的单元格!行3列的单元格2行2列的单元格2行3列的单元格同学们，我们一起来思考下，现在能不能制作上图的去格呢？学生：表格的大部分是可以制作的，但是对于左下角的单元格，还不知道如何实现，一个由两个单元格大小构成的单个单元格。这种单元格律不算是-种组合？教师:上面介绍了简单表格的创建，而现突中往往需要较双杂的衣格，有时就需要把多个单元格合并为一个单元格，也就是要用到表格的特列与跨行功

12、能.跨行是指单元格的飒向合并，mwspan底性设定跨行，射应侑为数伯，指定合并的单元格个数。为tab1.e熠加border属性设定边框宽度。示例如下,跨列是指单元格的横向合并，CNspan属性设定跻列，对应值为数值，指定合并的单元格个数.为tab1.eJfijJIIborderM性设定边框宽度.当表格行列增多，内容相对狂杂之后，我们很玳次性写对相应的单元格个数、行列个数与合并关系。如何解决呢？一种简单的思路.操作起来会比较繁琐：开始做衣格的时候不要考虑最终的效果，把役格看成没有进行合并的状态，由一个个标准的维元格组成样子。这样先按照表格的n行M列的方式，使用n个tr标签包裹m个td或小，实现一

13、个n行m列的空表格，再根据最终效果最合并单元并剧除多余的单元格即可.先一种思路：根据我格的最终效果，从上向下逐行书写，在每一行中从左向右书笃单元格并根据实际效果，直接设定跨列单元格的COkPan底性值。这里SJ行中的单元格指的是单元格的上沿与该行上沿重合的单元格，这样在行内从左向右书写时跳过/被聆行合并的单元格.并且在书写一行的过程中也解决的了瞪列的问飕.对衣格结构与合并熟练掌握.之后，这种方式效率更高.新课讲解4：【约15分钟】教师：在HTM1.5问世之前,要在网页上展示视频、音频、动Ai等.主婆是通过使用第三方或者1*1主开发的播放器使用最多的工具应该算是F1.ash了。但是用户运行FIa

14、Sh需要在浏览器上安装FIaSh插件才能使用，有时候速度也会非常慢，而且Hash的安全漏洞较多,官方也停止了维护。HTM1.5媒体元求的出现改变这一状况,在擀页中使用HM1.5来播放音频、觇频再也不需要安装插件，只需要一个支持HTM1.5的浏览器就可以了.本节就会介绍HTM1.5中的两个媒体元索觇版元素和音频元素.HrM1.5中的VidCO元素是用来播放视顿文件的.支持OgS（OggVorbis的简写）、MPEG4,WCbM等视猱格式，其用法如下.video元素不仅支持单资源形式的创建，也支持同时设定多个资源的多资源形式写法.使用SoUreC元素来链接到不同的税领文件，浏览器会自动选择第一个可以识别的格式.如下。viVSoUrCes=vid,pe=vide,webm