《网站前端技术》教案第6课HTML与HTML5（五）.docx

《《网站前端技术》教案第6课HTML与HTML5（五）.docx》由会员分享，可在线阅读，更多相关《《网站前端技术》教案第6课HTML与HTML5（五）.docx（17页珍藏版）》请在第壹文秘上搜索。

1、Mii3出嗤三一；卢课题第6课HTML与HTML5（五）课时2课时(90min)教学目标知识技能目标：掌握HTML的框架标签、表格标签以及多媒体标签的使用素质目标：掌握HTML的相关知识，加强学生的理论基础,提升学生的专业技能教学重难点教学重点：HTML框架标签、HTML表格标签教学睚点：HTML多媒体标签教学方法问答法、讨论法、讲授法、实践练习法教学用具电脑、投影仪、多媒体课件、教材、APP教学设计第1节课：课前任务一考勤（2min）一问题导入（5min）一传授新知（28min）一头脑风暴（10min）第2节课：问题导入（5min）一传授新知（25min）一上机操作（IOmin）一课堂小结（

2、3min）一作业布置（2min）教学过程主要教学内容及步骤设计意图第一节课课前任务【教师】布置课前任务，和学生负责人取得联系，让其提醒同学通过APP或其他学习软件，完成课前任务请大家了解HTML框架标签、HTML表格标签、HTML多媒体标签的相关概念。【学生】完成课前任务通过课前任务，使学生了解本次课的主要内容，增加学生的学习兴趣考勤(2min)【教师】使用APP进行签到【学生】按照老师要求签到培养学生的组织纪律性，掌握学生的出勤情况问题导入（5min）【教师】提出以下问题HTML框架标签应该包含哪些特性？【学生】思考、举手回答【教师】通过学生的回答引入要讲的知识通过问题导入的方法，引导学生主

3、动思考，激发学生的学习兴趣传授新知（28min）2.10HTML框架标签2.10.1 框架标签【教师】讲解HTML框架标签的格式与示例【课堂互动】【教师】提问HTML中框架标签的可选属性有哪些？通过教师讲解、课堂互动、知识拓展、演示操作等方式，使学生了解HTML框架标签的语法和使用，表格标签与单元格合并的相关内容+【学生】聆听、思考、回答标签用于创建包含另夕一个文档的浮动框架，其可选择的属性有src、name,frameborderxWidIh、height,(1)src属性用于规定页面初始加载时浮动框架显示网页的地址。(2)name属性用于规定浮动框架的名称。(3)framebOrder属性

4、用于规定浮动框架边框宽度.(4)width属性用于规定浮动框架的宽度。(5)height属性用于规定浮动框架的高度。标签是块标签，其语法格式如下：【高手点拨】框架标签Viframc配合链接标签使用，当标签的target属性值与iframe标签的name属性相同时，标签链接的目标页面会在相应的浮动框架中打开。【示例2-10/】编辑HTML文档Vbody标签的内容，代码如下：百度新浪搜狐【教师】组织学生分组上机完成上面的任务，并在各组中挑选T立学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示【教师】PPt展示”浮动框架初始状态效果”选择链接浮动框架效果”图片(详见教材)，并讲解效果

5、：当页面加载后，浮动框架中显示hphao360com站点首页。当单击“百度”链接后，在浮动窗口中显示站点首页.同样，当单击新浪链接后，则在浮动窗口中显示站点首页。【提示】因为网页实际宽度和高度大于浮动窗口的宽度与高度，所以页面中显示水平和垂直滚动条。【学生】聆听、记录、理解2.10.2滚动条显示属性SCrolIing【教师】讲解HTML滚动条显示属性scrolling的基本语法与示例【课堂互动】十【教师】提问HTML中滚动条显示属性scrolling可以起到什么作用？十【学生】聆听、思考、回答SCroning属性可以有效控制浮动框架滚动条是否存在，其取值有auto、yes、no。其中，auio

6、是默认值，表示在需要的情况下出现滚动条；yes表示始终显示滚动条；no表示从不显示滚动条。【示例2-10-2在【示例2-10-1的基础上，编辑HTML文档标签的内容，即在标签中添加属性scrolling,代码如下：【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示【教师】PPt展示“浮动窗口始终无滚动条效果”图片(详见教材)，并讲解效果：虽然页面很大，在浮动框架中无法完全显示，但依然没有滚动条。【提示】HTML5中,标签的frameborder属性和scrolling属性将被弃，由CSS样式解决类I以问题。【学生】聆听、记

7、录、理解2.11HTML表格标签2.11.1表格标签【教师】讲解HTML表格标签的基本语法与示例【课堂互动】十【教师】提问HTML中表格标签应有什么设置?+【学生】聆听、思考、回答1able标签用于定义HTML表格其可选择的属性有border、bordercolor、CellpaddingxCellspacingxalign、width(1)border属性用于定义表格边框的宽度，其值是数值,单位为px(2)bordemolor属性用于定义表格边框的宽度，其值是颜色值。(3)cellpadding属性用于定义单元边沿与其内容之间的空白，其值是填充距离，单位为px.(4)cellspacing属

8、性用于定义单元格之间的空白，其值是距离值，单位为px(5)align属性用于定义表格相对周围元素的对齐方式，其值是left(左对齐表格)、center(右对齐表格).right(居中对齐表格).(6)width属性用于定义表格的宽度，其值是整个表格的宽度，单位为px【提示】border、Cellpaddingxcellspacingxwidth属性的单位都是px,在编写HTML文档时，单位可以省略不写。Vlablc标签是块标签，其语法格式如下：表格CaPIionl行1列l行2歹U.l行n列2行1列2行2歹Ikd.vid2行n列vlrm行1列m行2列.m行n列【提示】标签用于定义表格标题，即表名

9、，相对于整个表格居中显示。标签用于定义表头，文字默认为粗体，且水平居中。标签用于定义表格行。标签用于定义单元格.【示例2-11J】编辑HTML文档标签的内容，代码如下：学表姓名vth数学语文英语1j2987798928987897989【教师】组织学生分组上机完成上面的任务，并在各组中挑选T立学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示【教师】PPt展示“无修饰的表格”图片(详见教材)，井浴解效果：页面中显示学生成绩表，整体向页面左上角靠拢，表名相对于整个表格居中，表头内容加粗且水平居中.【示例2-11-2编辑HTML文档标签的内容，代码如下：(tableborder=1b

10、ordercolor=blueCelIPadding=10CenSPaCing=5pxalign=centerwidth=500学绩表姓名数学语文英语987798928987897989【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示【教师】PPt展示”表格各属性设置效果”图片(详见教材)，并讲解效果：页面中显示学生成绩表，表名相对于整个表格居中，表头内容加粗且水平居中，单元格内容距单元格边框IOpx,单元格与单元格之间的间距为5px,边框宽度为1px,边框颜色为蓝色。【提示】HTML5中，标签的Cellpaddingx

11、cellspacing,align、width属性都将被废弃，由CSS样式解决类似问题。【学生】聆听、记录、理解2.11.2单元格合并【教师】讲解HTML单元格合并的基本语法与示例【课堂互动】十【教师】提问表格中的单元格需要合并时，通过标签可以如何实现？【学生】聆听、思考、回答表格中的单元格有时需要合并,可以通过为标签添加COlspan属性或者rowspan属性实现.(1)Colspan属性用于定义单元格跨几列合并，即定义单元格可横跨的列数,其值是一个数字。(2)rowspan属性用于定义单元格跨几行并，即定义单元格可横跨的行数，其值也是一个数字。【示例2-11-3编辑HTML文档标签的内容，代码如下：tableborder=!width=400height=,40