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

《》教案20-20学年第学期课程名称：授课教师：职称：开课部门：年月日

《》教案首页课程名称授课专业班级授课教师职称部门课程类型学位课□公共必修课□专业必修课□素质拓展必修课□公共选修课□专业选修课□素质拓展选修课非学位课□公共必修课专业必修课□素质拓展必修课□公共选修课□专业选修课□素质拓展选修课课程性质□理论□实践理论+实践考核方式考试□考查课程教学总学时数64学分3.5学情分析大*年级的学生首次正式接触WEB的相关概念，但是在之前的基础课程中学过***（操作系统、计算机原理、Python编程、C语言编程）等相关专业方面基础知识，具备有一定的计算机操作能力，与基础应用知识；并且在日常中大量使用电脑与手机等计算机设备，其中日常生活中也对于网页的使用更是颇多。但对于WEB方面的专业知识没有一个准确、完整的知识体系构建。教学方法谈论法、讲授法、演示法、练习法、抽象法教材名称《HTML5+CSS3Web前端开发技术》作者于丽娜出版社及出版时间人民邮电出版社2021.09参考书目作者出版社及出版时间教研室意见教研室主任签字：年月日注：表中□选项请打“√”。每门课程只需填写一次本表。

《》教案授课教师班级学时6授课日期教学任务《制作课程播放页面》授课方式讲授实践授课地点多媒体教室实验/实训室□企业主要参考资料教学PPT、微课、动画、思维导图课程思政视频习题等教学目标素质目标：1.培养学生创新精神；2.培养学生编码的规范意识。知识目标：1.掌握无序列表、有序列表和定义列表的定义与特点2.掌握表格元素与表格基础结构3.掌握HTML5媒体元素能力目标：1.熟练使用无序列表制作页面内容1.熟练使用表格元素制作页面内容2.熟练使用表格元素制作页面内容3.熟练HTML5媒体元素在页面中嵌入音视频内容教学内容HTML5列表HTML5表格HTML5媒体元素重点难点教学重点：HTML5列表HTML5表格HTML5媒体查询教学难点：1.HTML5表格合并教学方法谈论法、讲授法、演示法、练习法素材资源R文本素材R实物展示RPPT幻灯片□音频素材R视频素材R动画素材R图形/图像素材□网络资源□其他课后作业任务一：总结提升任务二：能力进阶教学反思注：教案按授课次数填写，每次授课均应填写一份本表。重复班授课可不另填写教案。 

教学过程及内容一、导入新课【约5分钟】教师：创新是引领发展的第一动力，创新让生活更简单。在HTML5之前的网页如果想要展示音乐，电影等音视频内容，就需要借助第三方的插件，如flash插件。但是它的缺点是比较繁琐，实现代码复杂冗长。HTML5新增了多媒体标签，让网页中插入多媒体元素变的非常简单。在网页中表现内容的方式不仅仅局限于文本、段落和图片，我们还用到列表、表格以及多媒体内容等。列表类似于word文档中的项目符号与编号，可以为文件添加各种项目符号或者编号，并且还可以与CSS相结合实现出各种常用效果。表格是数据表现形式中非常重要的一种，在网页中也是支持这种通过行与列的规律性组合，形成各种满足需求的表格。我们的云课堂的网站核心功能就是让用户可以随时随地，通过观看在线视频的方式进行学习，我们的项目播放页面需要用到列表元素来展示课程列表的安排，表格元素来展示课程资源，视频元素来提供视频播放的功能。二、新知识点、技能点讲解【约x分钟】新课讲解1：【约20分钟】教师：列表是html5中一个经典的数据形式，通过列表的形式来表现具有同优先级的内容。根据内容的特点不同，可以分为无顺序要求的无序列表；有顺序要求的有序列表；用来定义概念的定义列表。无序列表由<ul>标签和<li>标签组成，使用<ul>标签作为无序列表的声明，使用<li>标签作为每个列表项的。其结构语法如下：<ul>

<li>第1项</li>

<li>第2项</li>

<li>第3项</li></ul>效果如图。无序列表的特性如下：没有顺序，每个<li>标签独占一行（块元素）。默认<li>标签项前面有一个实心小圆点。一般用于无序类型的列表，如导航、侧边栏新闻、有规律的图文组合模块等。有序列表由<ol>标签和<li>标签组成，使用<ol>标签作为有序列表的声明，使用<li>标签作为每个列表项的。有序列表嵌套方式同无序列表一样，只能<ol>标签里嵌套<li>标签。其结构语法如下。<ol>

<li>第1项</li>

<li>第2项</li>

<li>第3项</li></ol>效果如图所示。有序列表的特性如下。有顺序，每个<li>标签独占一行（块元素）。默认<li>标签项前面有顺序标记。一般用于排序类型的列表，如试卷、问卷选项等。定义列表是一种特殊的列表形式，它是标题及列表项的结合。定义列表的语法相对于无序列表和有序列表不太一样，它使用<dl>标签作为列表的开始，使用<dt>标签作为每个列表项的起始，而对于每个列表项的定义则使用<dd>标签来完成。其结构语法如下。<dl><dt>标题一</dt><dd>第1项</dd><dd>第2项</dd><dt>标题二</dt><dd>第1项</dd></dl> 效果如图所示。定义列表的特性如下：没有顺序，每个<dt>标签、<dd>标签独占一行（块元素）。默认没有标记。一般用于一个标题下有一个或多个列表项的情况。学生：那有没有横向排列的列表呢？教师：在实际开发中，页面中的商品列表或页面导航栏等，无论是横向排列的还是纵向排列的，通常是使用无序列表通过浮动等方式进行布局实现的，我们会在后面的单元中详细学习。新课讲解2：【约20分钟】教师：表格是块状元素，设计该标签的初衷是用于显示表格数据。例如，学校中常见的考试成绩单、选修课课表、企业中常见的工资账单等。由于表格行列的简单结构，以及在生活中的广泛使用，因此对它的理解和编写都很方便。如下图所示。表格通常每行的总宽度一致，同行单元格上沿水平对齐，同列单元格左沿垂直对齐。这种严格的约束形成了一个不易变形的长方形盒子结构，堆叠排列起来结构很稳定。但是表格的缺点，没有华丽的样式，不能进行个性化的设计，如果要实现一些有特点的表格样式，通常是使用无序列表结构加css样式去实现。表格的结构上来划分，有以下区域与概念：表格标题：表格的标题，通常出现在表格上方并居中，文字默认加粗。表格头部：用来区分表格结构，通常为表格的最上方，包含了对应下方的列的列标题。表格主体：用来区分表格结构，表示数据内容区域。表格尾部：用来区分表格结构，通常为表格的最下方，包含表格的备注信息等单元格：单元格是表格的最小单位，一个或多个单元格纵横排列组成了表格。行：一个或多个单元格横向堆叠形成行。列：一个或多个单元格纵向堆叠形成列。HTML5的表格中使用table定义表格，caption定义表格标题，thead定义表格头部，tbody定义表格主体，tfoot定义表格尾部，tr定义行，th定义标题单元格，td定义数据单元格。新课讲解3：【约30分钟】教师：表格的构成有标题、表格头部、表格主体三部分构成。先完成table标签，根据是否需要边框来设定table标签的border属性值，然后在table标签中完成caption、thead、tbody的结构。设定标题内容，在thead和tfoot中使用tr划分行。在thead的tr中使用th设定标题单元格内容，在其他tr中使用td设定普通单元格内容。经过这样的步骤，一个表格就完成了。同学们，我们一起来思考下，现在能不能制作上图的表格呢?学生：表格的大部分是可以制作的，但是对于左下角的单元格，还不知道如何实现，一个由两个单元格大小构成的单个单元格。这种单元格算不算是一种组合？教师：上面介绍了简单表格的创建，而现实中往往需要较复杂的表格，有时就需要把多个单元格合并为一个单元格，也就是要用到表格的跨列与跨行功能。跨行是指单元格的纵向合并，rowspan属性设定跨行，对应值为数值，指定合并的单元格个数。为table增加border属性设定边框宽度。示例如下。跨列是指单元格的横向合并，colspan属性设定跨列，对应值为数值，指定合并的单元格个数。为table增加border属性设定边框宽度。当表格行列增多，内容相对复杂之后，我们很难一次性写对相应的单元格个数、行列个数与合并关系。如何解决呢？一种简单的思路，操作起来会比较繁琐：开始做表格的时候不要考虑最终的效果，把表格看成没有进行合并的状态，由一个个标准的单元格组成样子。这样先按照表格的n行M列的方式，使用n个tr标签包裹m个td或th，实现一个n行m列的空表格，再根据最终效果最合并单元并删除多余的单元格即可。另一种思路：根据表格的最终效果，从上向下逐行书写，在每一行中从左向右书写单元格并根据实际效果，直接设定跨列单元格的colspan属性值。这里每行中的单元格指的是单元格的上沿与该行上沿重合的单元格。这样在行内从左向右书写时，跳过了被跨行合并的单元格，并且在书写一行的过程中也解决的了跨列的问题。对表格结构与合并熟练掌握之后，这种方式效率更高。新课讲解4：【约15分钟】教师：在HTML5问世之前，要在网页上展示视频、音频、动画等，主要是通过使用第三方或者自主开发的播放器，使用最多的工具应该算是Flash了。但是用户运行Flash需要在浏览器上安装Flash插件才能使用，有时候速度也会非常慢，而且Flash的安全漏洞较多，官方也停止了维护。HTML5媒体元素的出现改变了这一状况，在网页中使用HTML5来播放音频、视频再也不需要安装插件，只需要一个支持HTML5的浏览器就可以了。本节就会介绍HTML5中的两个媒体元素——视频元素和音频元素。HTML5中的video元素是用来播放视频文件的，支持Ogg（OggVorbis的简写）、MPEG4、WebM等视频格式，其用法如下。<videosrc="视频路径"controls="controls"></video>video元素不仅支持单资源形式的创建，也支持同时设定多个资源的多资源形式写法。使用source元素来链接到不同的视频文件，浏览器会自动选择第一个可以识别的格式。如下。<video

controls>

<source

src="video/video.webm"

type="video/webm"/>

<source

src="video/video.mp4"

type="video/mp4"/>

你的浏览器不支持video元素</video>HTML5中的audio元素时用来播放音频文件的，支持Ogg、MP3、WAV等音频格式，其语法如下所示:<audiosrc="音频路径"controls="controls"></audio>其中src属性用于指定要播放的音频文件的路径，controls属性用于提供播放、暂停和音量控件，此外，还可以用width和height设置音频的宽度和高度。audio元素不仅支持单资源形式的创建，也支持同时设定多个资源的多资源形式写法。使用source元素来链接到不同的音频文件，浏览器会自动选择第一个可用资源的进行播放。如下。<audiocontrols><sourcesrc="music/music.mp3"type="audio/mpeg"/><sourcesrc="music/music.ogg"type="audio/ogg"/>你的浏览器不支持audio元素</audio>新课讲解5：【约30分钟】教师：演示操作上机任务-制作课程视频列表学生：跟做新课讲解6：【约30分钟】教师：演示操作上机任务-制作课程推荐列表学生：跟做新课讲解7：【约30分钟】教师：演示操作上机任务-制作课程资源表格学生