情境四 制作表格布局的网页（教案）-《网页设计与制作》同步教学（电子工业版）

情境四 制作表格布局的网页 课程名称 网页设计与制作 学时 授课时间 授课章节 情境四 制作表格布局的网页 授课班级 授课教师 网页设计与制作课程组 教学目的 专业理论知识 1、 掌握并能应用表格结构、设置表格属性 2、 学会正确在表格中插入文字和图片 实际操作技能 1、 掌握创建表格的HTML标签 2、 掌握表格标签的属性及排列 3、 掌握表格的布局定位 4、 能使用表格元素制作符合要求的表格页面 思政元素目标 1、 培养学生立志报效祖国的爱国情操 2、 培养学生精益求精的职业素养 知识、技能重点 1、 插入并设置表格属性。 2、 表格及单元格的属性设置。 3、 使用表格对页面进行布局。 知识、技能难点 1、 表格以及单元格的属性设置。 2、 学会正确在表格中插入文字和图片。 3、 使用表格对页面进行布局。 教学方法 课前、课中、课后“三课一体”螺旋渗透教学法 教具 学习通APP、腾讯会议、学习强国APP 教学过程设计 4.1 网页中表格的概念 4.2 模仿型任务讲解 4.2.1 创建并规划站点“历史人物故事网” 4.2.2 在网页中插入表格并设置其属性 4.2.3 在表格中插入网页元素 4.3开放型任务制作 教学过程 【组织教学】 1、准备教学设备、软件等； 2、点名检查学生出勤情况，填写教学情况记录表； 3、发布教学资料 【复习旧课、导入新课】 1、提问：网页中最重要的组成元素有哪些？目前有办法定位网页元素吗？ 2、展示两个网页，一个网页是图文混排，另外一个则是使用表格布局； 3、教学目的：掌握表格对网页中的文本、图像及其他元素进行定位,灵活地使用表格的背景、边框等属性还可以起到美化网页的作用。 【讲授新课】 知识储备 1.1学习路线，如图4.1 图4.1表格学习路线 1.2 知识小天地 如何实现网页中的表格？ 在浏览网页的时候，我们能够看见一些数据的演示和网页的分区，都是可以使用表格，以此来降低页面的排版困难性以及实现更好的演示性。 1.2.1 表格标记 表格是一个或多个单元格构成的集合，表格中横向有多个单元格则为行（<tr></tr>），垂直的多个单元格则为列，单个的则为单元格（<td></td>）， 表头（<th></th>）,标题标签（<caption></caption>）。 语法格式如下： <table> <caption>标题</caption> <tr> <th>...</th> <th>...</th> <th>...</th> </tr> <tr> <td>...</td> <td>...</td> <td>...</td> </tr> </table> 【练一练】制作一个“红色书籍”统计表 代码如下如所示： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <table> <caption>红色书籍</caption> <tr> <td>序号</td> <td>书名</td> <td>价格</td> <td>出版社</td> </tr> <tr> <td>001</td> <td>长征</td> <td>98元</td> <td>人民文学出版社</td> </tr> <tr> <td>002</td> <td>中共共产党全国代表大会史</td> <td>58元</td> <td>东方出版社</td> </tr> </table> </body> </html> 运行效果如图所示： 图4.2 运行效果 思考： （1）如何显示表格的边框？ 使用属性border，如<table border="1"> （2）如何设置表格边框中间没有空隙？ 使用属性cellspacing，如<table cellspacing="0"> 1.2.2 合并单元格 <td>标签有两个常用的属性，colspan用于定义单元格跨行；rowspan用于定义单元格跨列。 练一练：制作一张课程表 代码如下所示 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <table border="1" cellpadding="0" cellspacing="0" width="600px" height="300px"> <caption>课程表</caption> <tr> <th>星期一</th> <th>星期二</th> <th>星期三</th> <th>星期四</th> <th>星期五</th> </tr> <tr align="center"> <td rowspan="2">网络技术</td> <td rowspan="2">C语言</td> <td>Java</td> <td>Python</td> <td>C++</td> </tr> <tr align="center"> <td>C#</td> <td>Android</td> <td>HTML</td> </tr> <tr align="center"> <td colspan="5">午休时间</td> </tr> <tr align="center"> <td>JavaScript</td> <td>Mysql</td> <td rowspan="2">CSS</td> <td>SQL</td> <td>Ajax</td> </tr> <tr align="center"> <td>Jquery</td> <td>Access</td> <td>VUE</td> <td>Bootstrap</td> </tr> </table> </body> </html> 运行效果图如下所示。 图4.3 运行效果 思考： （1）如何设置行或者单元格的背景颜色？ 使用属性bgcolor，如 <tr bgcolor="">。 （2）如果表格第一行的每个单元作为列标题，应该使用哪个标签？ 使用<th>，该标签自带剧中和加粗效果。 二、模仿型任务讲解 分析案例效果，根据案例需求，通过相应的工具及渠道收集符合要求的素材，并完成资讯表。 表4-1 资讯单 制作表格布局的网页资讯单 学习情景 制作历史人物故事网 学习任务 学时 4学时 案例描述 搜集渠道 素材要求 小组成员 参考资料 完成时间 案例分析 2.1历史人物故事网案例分析 案例学习目标 · 能够熟练建立站点 · 能够了解并熟练使用表格 案例知识要点 · 表格标签及属性设置 · 表格的布局 少年兴那么国兴，少年强那么国强。当代大学生是建设祖国的强大力量，要适应时代的开展要求，努力学习先进的科学文化知识，正确的认识祖国的历史和现实。增强爱国的情感和振兴祖国的职责感，树立民族自尊心和自信心，弘扬伟大的中华民族精神，高举爱国主义旗帜，锐意进取，自强不息，艰苦奋斗，顽强拼搏，真正的把爱国之志变成爱国之行。 本次历史人物故事网的制作，旨在通过历史爱国名人事迹，唤起学生的家国情怀、社会责任感和理想信念。 实现探究 2.2 案例设计思路 在具体实现过程中，选择部分历史爱国名人作为素材，引起学生的学习兴趣，使学生更加有动力去完成网页的设计与制作；同时，网页整体设计主题要突出，内容要丰富，能给人留下深刻印象。 具体页面设计思路如下： 文字及图片搜集 确定表格行列 编码实现 测试运行 【思考】 （1）如何使用表格进行排版 （2）如何在表格中插入图片使页面更加美观 三、实操示范 操作步骤 Step01 打开开发工具“HBuilder X”，选择“文件”------> “新建”------>“项目”，打开如下图4.4所示对话框。 图 4.4 项目创建 写好相应的项目名称后，选择基本的HTML项目，点击创建，即可完成项目的创建。 Step02 将课前搜集好的图片素材，复制粘贴到新建项目的“img”文件夹中，如下图4.5所示。 图 4.5 图片存放 Step04 插入一个4行4列的表格，并设置表格属性及表格标题，代码如下所示。 <table border="1" cellpadding="0" cellspacing="0"> <caption>历史人物故事</caption> <tr> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> </tr> </table> Step04 先完成第一行，将第一行的4个单元格作为标题，将其<td>改成<th>，并设置第一行的背景颜色属性，代码如图4.6所示，效果如图4.7所示。 图4.6 代码示意图 图4.7效果图 Step06 接下来完成第二行，在第二行的每个单元格中插入图片，注意对应第一行的人物。代码如图4.8，效果图4.9。 图4.8代码图 图4.9效果图 Step07 接下来第三行对应第一行的人物，写上相应的诗句，代码如图4.10，效果图4.11。 图4.10代码图 图4.11效果图Step08 对应第一行的人物，补全第四行的人物介绍，最终效果图如图4.12所示。 图4.12最终效果图 四、学生完成开放型任务，教师巡回指导 开放型任务的任务卡如表4-2所示 表4-2 开放型任务卡 任务编号 任务名称 使用表格布局网页 网页主题 制作历史人物故事网 开放型任务描述 本次任务要求使用表格来布局网页，任务如下： 1、 创建一个命名为“历史人物故事网”的站点 2、 设置好站点目录 3、 使用“文件”面板在站点根目录下创建一个介绍历史人物故事的网页“index.html” 4、 将网页标题设置为“历史人物故事” 【课堂小结】 通过本次任务，给大家介绍了表格的创建、表格内容的添加和表格属性设置等知识以及如何应用表格对网页进行布局。通过完成任务熟练地掌握了在网页中插入表格的方法，在表格中插入嵌套表格及行、列的方法，表格及单元格的属性设置方法，合并与拆分单元格的方法等。 【布置作业】 1. 在Hbuilder中网页布局的方法有哪些？各有哪些优点？ 2. 在Hbuilder中有几种选择整个表格的方法？ 【创新型任务】 分小组选择科技强国、红色之旅、绿水青山为主题的表格布局与美化网页。通过推送学习强国学习视频的看自然栏目、看科技栏目、看党史的红色故事栏目，搜集相关表格布局与美化素材，分小组设计科技强国、红色之旅、绿水青山的表格布局与美化网页，渗透革命文化和社会主义先进文化教育、生态文明教育多个“思政元素线”。培养学生爱国情、强国志。 教学评价 考核要点 考核内容 标准分 计分 知识考核 (1)课前观看学习通微视频及完成微课下方进阶练习题 20   (2)学会设计页面的布局结构 (3)学会创建页面布局样式 (4)学会创建美化页面元素的样式 能力考核 (5)学会插入Div标签对网页的页面进行布局 30   (6)学会在使用Div+CSS布局的网页中输入文字和插入各种页面元素 思政考核 (7)考查学生的态度端正、时间观念强等方面综合评价 20   (8)搜索科技强国、红色之旅、绿水青山的素材，制作对应的网页，体现革命文化、社会主义先进文化、生态文明等方面进行评价分析 30   总计 100   评价方式 自我评价 小组评价 教师评价 考核得分       学科网（北京）股份有限公司 $$