《网站前端技术》教案第6课HTML与HTML5（五）.docx
-
资源ID：899715
资源大小：302.47KB
全文页数：17页
- 资源格式： DOCX
下载积分：5金币
快捷下载
账号登录下载
微信登录下载
三方登录下载：
|
友情提示
2、PDF文件下载后，可能会被浏览器默认打开，此种情况可以点击浏览器菜单，保存网页到桌面，就可以正常下载了。
3、本站不支持迅雷下载，请使用电脑自带的IE浏览器，或者360浏览器、谷歌浏览器下载即可。
4、本站资源下载后的文档和图纸-无水印,预览文档经过压缩，下载后原文更清晰。
5、试题试卷类文档，如果标题没有明确说明有答案则都视为没有答案，请知晓。
|
《网站前端技术》教案第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=,'40
