《网站前端技术》教案第6课HTML与HTML5（五）.docx
Mii3出嗤三一；卢课题第6课HTML与HTML5（五）课时2课时(90min)教学目标知识技能目标：掌握HTML的框架标签、表格标签以及多媒体标签的使用素质目标：掌握HTML的相关知识，加强学生的理论基础,提升学生的专业技能教学重难点教学重点：HTML框架标签、HTML表格标签教学睚点：HTML多媒体标签教学方法问答法、讨论法、讲授法、实践练习法教学用具电脑、投影仪、多媒体课件、教材、APP教学设计第1节课：课前任务一考勤（2min）一问题导入（5min）一传授新知（28min）一头脑风暴（10min）第2节课：问题导入（5min）一传授新知（25min）一上机操作（IOmin）一课堂小结（3min）一作业布置（2min）教学过程主要教学内容及步骤设计意图第一节课课前任务【教师】布置课前任务，和学生负责人取得联系，让其提醒同学通过APP或其他学习软件，完成课前任务请大家了解HTML框架标签、HTML表格标签、HTML多媒体标签的相关概念。【学生】完成课前任务通过课前任务，使学生了解本次课的主要内容，增加学生的学习兴趣考勤(2min)【教师】使用APP进行签到【学生】按照老师要求签到培养学生的组织纪律性，掌握学生的出勤情况问题导入（5min）【教师】提出以下问题HTML框架标签应该包含哪些特性？【学生】思考、举手回答【教师】通过学生的回答引入要讲的知识通过问题导入的方法，引导学生主动思考，激发学生的学习兴趣传授新知（28min）2.10HTML框架标签2.10.1 框架标签<iframe>【教师】讲解HTML框架标签的格式与示例【课堂互动】【教师】提问HTML中框架标签的可选属性有哪些？通过教师讲解、课堂互动、知识拓展、演示操作等方式，使学生了解HTML框架标签的语法和使用，表格标签与单元格合并的相关内容+【学生】聆听、思考、回答<iframe>标签用于创建包含另夕一个文档的浮动框架，其可选择的属性有src、name,frameborderxWidIh、height,(1)src属性用于规定页面初始加载时浮动框架显示网页的地址。(2)name属性用于规定浮动框架的名称。(3)framebOrder属性用于规定浮动框架边框宽度.(4)width属性用于规定浮动框架的宽度。(5)height属性用于规定浮动框架的高度。<iframc>标签是块标签，其语法格式如下：<iframeSrC=”页面初始加载网页地址"name="框架名称”frameborde尸"框架边框宽度"Width="宽度"height="高度”><iframe>【高手点拨】框架标签Viframc>配合链接标签<a>使用，当<a>标签的target属性值与<iframe标签的name属性相同时，<a>标签链接的目标页面会在相应的浮动框架中打开。【示例2-10/】编辑HTML文档Vbody>标签的内容，代码如下：<body><palign=',center"><ahref="h(p:/www.baidu.corn"IargeI="aa">百度<a><ahref="http:WWW"largel="aa”>新浪<a><ahref=""target="aa">搜狐<a><p><iframesrc="http"name="aa'frameborder="0"width=',500"height="200"><iframe><body>【教师】组织学生分组上机完成上面的任务，并在各组中挑选T立学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示【教师】PPt展示”浮动框架初始状态效果”选择链接浮动框架效果”图片(详见教材)，并讲解效果：当页面加载后，浮动框架中显示hphao360com站点首页。当单击“百度”链接后，在浮动窗口中显示站点首页.同样，当单击"新浪"链接后，则在浮动窗口中显示站点首页。【提示】因为网页实际宽度和高度大于浮动窗口的宽度与高度，所以页面中显示水平和垂直滚动条。【学生】聆听、记录、理解2.10.2滚动条显示属性SCrolIing【教师】讲解HTML滚动条显示属性scrolling的基本语法与示例【课堂互动】十【教师】提问HTML中滚动条显示属性scrolling可以起到什么作用？十【学生】聆听、思考、回答SCroning属性可以有效控制浮动框架滚动条是否存在，其取值有auto、yes、no。其中，auio是默认值，表示在需要的情况下出现滚动条；yes表示始终显示滚动条；no表示从不显示滚动条。【示例2-10-2在【示例2-10-1的基础上，编辑HTML文档<body>标签的内容，即在<iframe>标签中添加属性scrolling,代码如下：<iframesrc="http"name="aa"frameborder="0"width=,500"height="200"scrolling=',no">【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示【教师】PPt展示“浮动窗口始终无滚动条效果”图片(详见教材)，并讲解效果：虽然页面很大，在浮动框架中无法完全显示，但依然没有滚动条。【提示】HTML5中,<iframe>标签的frameborder属性和scrolling属性将被弃，由CSS样式解决类I以问题。【学生】聆听、记录、理解2.11HTML表格标签2.11.1表格标签<table>【教师】讲解HTML表格标签的基本语法与示例【课堂互动】十【教师】提问HTML中表格标签应有什么设置?+【学生】聆听、思考、回答1able标签用于定义HTML表格其可选择的属性有border、bordercolor、CellpaddingxCellspacingxalign、width(1)border属性用于定义表格边框的宽度，其值是数值,单位为px(2)bordemolor属性用于定义表格边框的宽度，其值是颜色值。(3)cellpadding属性用于定义单元边沿与其内容之间的空白，其值是填充距离，单位为px.(4)cellspacing属性用于定义单元格之间的空白，其值是距离值，单位为px(5)align属性用于定义表格相对周围元素的对齐方式，其值是left(左对齐表格)、center(右对齐表格).right(居中对齐表格).(6)width属性用于定义表格的宽度，其值是整个表格的宽度，单位为px【提示】border、Cellpaddingxcellspacingxwidth属性的单位都是px,在编写HTML文档时，单位可以省略不写。Vlablc>标签是块标签，其语法格式如下：<(able><caption>表格CaPIion>< trxth>l行1列<th><th>l行2歹U<lh>.<th>l行n列<thxtr>< tr><td>2行1列<d><id>2行2歹Ikd>.vid>2行n列<id>vlr>< trxtd>m行1列<td><td>m行2列<td>.<td>m行n列<td><tr><table>【提示】<caption>标签用于定义表格标题，即表名，相对于整个表格居中显示。<th>标签用于定义表头，文字默认为粗体，且水平居中。<tr>标签用于定义表格行。<d>标签用于定义单元格.【示例2-11J】编辑HTML文档<body>标签的内容，代码如下：<body><table><caplion>学表<capiion><tr><lh>姓名vth><lh>数学<lh><lh>语文<hxih>英语<lh><ir><trxtd>1j2<td><td>98<td><td>77<tdxtd>98<td><tr><(r><td><td><d>92<td><(d>89<(d><td>87<td><r><tr><td><(d><ld>89<ld><(d>79<(d><td>89<(d><tr><table><body>【教师】组织学生分组上机完成上面的任务，并在各组中挑选T立学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示【教师】PPt展示“无修饰的表格”图片(详见教材)，井浴解效果：页面中显示"学生成绩表"，整体向页面左上角靠拢，表名相对于整个表格居中，表头内容加粗且水平居中.【示例2-11-2编辑HTML文档<body>标签的内容，代码如下：<body>(tableborder="1"bordercolor="blue"CelIPadding="10"CenSPaCing="5px"align="center"width="500"><caption>学绩表<capion><tr><h>姓名<thxth>数学<h><th>语文<th><th>英语<thxtr><tr><td><td><td>98<td><td>77<td><td>98<td><tr><tr><td><d><td>92<td><td>89<td><d>87<td><tr><tr><td><td><td>89<td><td>79<td><td>89<tdxtr><table><body>【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示【教师】PPt展示”表格各属性设置效果”图片(详见教材)，并讲解效果：页面中显示"学生成绩表"，表名相对于整个表格居中，表头内容加粗且水平居中，单元格内容距单元格边框IOpx,单元格与单元格之间的间距为5px,边框宽度为1px,边框颜色为蓝色。【提示】HTML5中，<table>标签的Cellpaddingxcellspacing,align、width属性都将被废弃，由CSS样式解决类似问题。【学生】聆听、记录、理解2.11.2单元格合并【教师】讲解HTML单元格合并的基本语法与示例【课堂互动】十【教师】提问表格中的单元格需要合并时，通过<td>标签可以如何实现？【学生】聆听、思考、回答表格中的单元格有时需要合并,可以通过为<d>标签添加COlspan属性或者rowspan属性实现.(1)Colspan属性用于定义单元格跨几列合并，即定义单元格可横跨的列数,其值是一个数字。(2)rowspan属性用于定义单元格跨几行并，即定义单元格可横跨的行数，其值也是一个数字。【示例2-11-3编辑HTML文档<body>标签的内容，代码如下：<body><tableborder="!"width="400"height=,'400"celIspacing=,'O"><caption>合并单元格<caption><tr><tdcolspan="3"><id><tdrowspan="3"><td><tr><tr>ab'''j<tdrowspan="3"><td><tdcolspan="2"><td><tr><tr><tdcolspan="2"><7td><tr><tr><ldcolspan="3"><td><tr><table><body>【教师】组织学生分组上机完成上面的任务，并在各组中挑选T立学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示【教师】PPt展示“表格单元格合并效果”图片（详见教材），并讲解效果：页面显示一个四行四列的表格合并单元格之后的样子。【学生】聆听、记录、理解头脑风暴（10min）【教师】根据头脑风暴主题，组织学生分组开展讨论根据各队伍的网站主题，讨论如何使用本节课中介绍的HTML框架标签。【学生】思考、讨论通过头脑风暴的形式，活跃课堂气氛，引发学生思考，培养学生的创新能力和团队精神第二节课问题导入（5min）【教师】提出以下问题HTML表格分组标签有什么功能？【学生】思考、举手回答通过问题引导学生思考本节课内容传授新知(25min)2.11.3表格分组标签【教师】讲解表格分组标签的基本语法与示例如果一个表格中有特定的标题行、数据行、总计行等内容时，就可以将表格进行分组，从而使浏览器能够更好地支持表格正文的滚动，并在打印需要分页的长表格时，可以将表头和底部信息打印在每张页面上。<thead>标签用于定义表格头部，对HTML表格中的表头内容进行分组。4body>标签用于定义表格主体，对HTML表格中的主体内容进行分组.<lfoot>标签用于定义表格底部，对HTML表格中的表注（页脚）内容进行分组。这些标签都是块标签，它们的语法格式如下：<thead>表头内容<thead><tbody>主体内容<body）<tfooi>表注（页脚）内容<tfoot>【示例2-11-4】编辑HTML文档VbO<ly>标签的内容，代码如下：<body><tableborder="1"width="500'rcellspacing="O"cellpadding="O"><caplion>班级人数统计<caption><thead><tr>通过教师讲解、课堂互动、知识拓展、演示操作等方式，让学生熟悉表格分组标签、表格列属性设置标签、多媒体标签的语法与使用【学生】聆听、上机操作、演示【课堂互动】中【教师】提问十【学生】聆听、思考、回答>»*<由>人数统计<th><th>web1班<th><(h>web2班<h><th>web3班<h><tr><thead><tbody><tr><td>男生人数<td><td>27<td><td>22<d><td>25<td><r>VIrxId>女生人数<d><td>15<td><td>18<td><ld>14<td><tr><tbody><tft><tr><td>总人数<td><td>42<td><td>40<d>vtd>39<td><r><tfoot><table><body>【教师】组织学生分组上机完成上面的任务,并在各组中挑选一位学生进行演示，演示完成后教师进行点评【教师】PPt展示”表格内容分组效果”图片（详见教材），并讲解效果：页面中表格没有特殊的外观。【学生】聆听、记录、理解2.11.4表格列属性设置标签【教师】讲解表格列属性设置标签的基本语法与示例如果需要对表格列的属性进行设置，可以使用哪些标签？在表格内部，如果需要对表格列的属性进行设置，可以使用colgroup标签和。1标签。VCOIgro叩标签用于对表格中的列进行组合，以便对其进行格式化，它可以向整个列应用样式，而不需要重复为每个单元格或每一行设置样式。col标签用于为表格中一个或多个列定义属性值。如果想对colgroup中的某列定义不同的属性，需要在colgroup标签内使用col标签。它们的语法格式如下：colgroupcol属性="属性值”colgroup【示例2-11-5在【示例2-11-4】的基础上，编辑HTML文档body标签的内容，即在caption标签后面添加colgroup标签，代码如下：bodytableborder="1"width="500"cellspacing="O"cellpadding="O"caption班RA数统计CaPtiOn>»<colbgcolor="pink"><colbgcolor="1ighblue',><colgroup><table><body>【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示,演示完成后教师迸行点评【学生】聆听、上机操作、演示【教师】PPt展示“表格列分组并设置背景效果”图片（详见教材），并讲解效果：页面中表格第二列、第三列、第四列背景颜色分别为银色、粉红色、淡蓝色。【高手点拨】bgcolor属性用于规定表格的背景颜色,值silver,pink.Iighblue分别表示银色、粉红色、淡蓝色。【学生】聆听、记录、理解2.12HTML多媒体标签2.12.1 多媒体标签<enbed>插入视频【教师】讲解多媒体标签<embed>插入视频的基本语法与示例【课堂互动】【教师】提问HTML中多媒体标签<embed>插入视频应有什么设置？十【学生】聆听、思考、回答在网页中多媒体的插入方式有很多种，其中标签embed、ObjeCt最为常用，而且这两个标签可以插入动画、普通视频和音频等多种格式的多媒体。此外，背景音乐标签bgsound也是常用的网页元素。<embed>标签可以在网页中插入多媒体，并指定多媒体资源地址，以及多媒体在页面中所占的宽度和高度，其可选择的属性有src.width、height.该标签是行标签，其语法格式如下：<embedSrC=多媒体资源地址Width=多媒体在页面中所占的宽度值heighl=多媒体在页面中所占的高度值【示例2“2-1】编辑HTML文档<body>标签的内容，代码如下：<body><embedsrc="objectsea.mp4"width="300"height="200"|><body>【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后教师迸行点评【学生】聆听、上机操作、演示【教师】PPt展示“网页插入视频效果”图片（详见教材），并讲解效果：网页加载后，便自动播放视频"seamp4",该视频在页面中所占宽度为300px、高度为200px【提示】embed标签可以用来插入多种格式的多媒体，但有些浏览器需要安装插件。【学生】聆听、记录、理解2.12.2 多媒体标签object插入音频【教师】讲解多媒体标签object插入音频的基本语法与示例【课堂互动】）【教师】提问HTML中object插入音频应有什么设置？十【学生】聆听、思考、回答object标签同样可以在网页中插入多媒体，并指定多媒体资源地址，以及多媒体在页面中所占的宽度和高度，其可选择的属性有data、width,height,该标签是行标签，其语法格式如下：objectdata=多媒体资源地址Width=多媒体在页面中所占的宽度值height=多媒体在页面中所占的高度值object【示例2-12-2编辑HTML文档body标签的内容，代码如下：bodyobjectdata="objectbana.np3"width="400"height="50"objectbody【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示【教师】PPt展示“网页插入音频效果”图片（详见教材），并讲解效果：网页加载后，自动播放音乐"banamp3",该音频在页面中所占宽度为400px、高度50px【提示】不同浏览器的兼容性不同，对object标签而言，IE浏览器是支持的，但是火狐、360、谷歌等浏览器是不支持的。【学生】聆听、记录、理解2.12.3 背景音乐标签bgsound【教师】讲解背景音乐标签bgsound的基本语法与示例【课堂互动】>»【教师】提问HTML中背景音乐标签bgsound应有什么设置?十【学生】聆听、思考、回答bgsound标签可以在网页中添加背景音乐，并设置播放次数，其可选择的属性有src、loop.该标签的语法格式如下：bgsoundsrc=背景音乐地址1。P=循环次数(当循环次数为-1时则无限循环播放【示例2-12-3编辑HTML文档body标签的内容，代码如下：bodybgsoundsrc="objectbana.mp3"loop="-,body【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示【教师】PPt展示“网页插入音频效果”图片(详见教材)，并讲解效果：网页加载后,自动播放背景音乐"banamp3",并无限循环播放。【提示】bgsound标签只适用于IE浏览器。【学生】聆听、记录、理解上机操作(10min)【教师】组织学生分组讨论，上机完成以下任务在之前创建的COUNehmI文件中，使用框架标签iframe将课程教材中部分信息设置为浮动形式，使用表格标签tablc添加班级成绩信息，使用d标签按照性别进行单元格合并，最后使用多媒体标签embed插入课程介绍的视频。【学生】讨论、上机操作通过上机操作巩固所学知识课堂小结(3min)【教师】简要总结本节课的要点本节课主要学习了HTML的框架标签、表格标签、多媒体标签等相关内容，希望通过本节课的讲解，大家可以熟练掌握这些标签的使用方法，提升操作技能。【学生】总结回顾知识点总结知识点，巩固学生对框架标签、表格标签、多媒体标签相关知识的印象作业布置(2min)【教师】布置课后作业个人作业：请根据课堂所学知识，完成课后习题团队作业：围绕第一节课制定的主题项目，使用本节课所学的ifmme、table,Id、embed、VObjeC3等标签进行设计，并形成文档上传至APP【学生】完成课后任务通过课后作业复习巩固学到的知识，提高学生的理解能力教学反思本节课效果不错，每个学生都积极参与到教学活动中，发挥了自己的价值。教学中注意分析学生的特点，根据不同学生的学习情况采用灵活多样的教学方法，极力营造一种平等和谐、活跃有序的课堂氛围。
