情景六 使用模板制作网页（教案）-《网页设计与制作》同步教学（电子工业版）

情景六 使用模板制作网页 课程名称 网页设计与制作 学时 授课时间 授课章节 情景六 使用模板制作网页 授课班级 授课教师 网页设计与制作课程组 教学目的 专业理论知识 1、 掌握标签嵌套规则； 2、 掌握注释方法 实际操作技能 1、 掌握创建和编辑模板的方法 2、 掌握应用模板制作网页的方法 3、 了解更新、删除及分离模板的方法 思政元素目标 1、 引导学生在观察和处理问题时候要着眼于立足于整体，充分发挥局部的积极作用。 2、 培养学生的职业素养 知识、技能重点 1、 模板的创建。 2、 使用模板生成新的网页，并对网页进行优化。 3、 修改网页模板更新使用该模板生成的网页。 知识、技能难点 1、 用模板生成新的网页，并对网页进行优化。 2、 修改网页模板并同步更新该模板生成的网页。 教学方法 线上线下混合式信息化教学、启发式教学、讨论式教学、案例法教学 教具 课前学习通APP、腾讯会议、课后学习强国APP 教学过程设计 6.1 模板在网页中的作用 6.2 模仿型任务讲解 创建并保存模板文件 使用表格布局模板 在模板中添加公共元素 在模板中添加可编辑区域 创建基于模板的网页 套用模板到页 在模板中设置超级链接更新基于模板的网页 6.3开放型任务制作 教学过程 【组织教学】 1、准备教学设备、软件等； 2、点名检查学生出勤情况，填写教学情况记录表； 3、发布教学资料 【复习旧课、导入新课】 1、提问：一个网站中的所有网页都具有大致相同的外观，让你做这些看起来都几乎一样的网页呢？ 2、展示多个使用模板制作出来的网页； 3、教学目的：掌握使用模板制作网页的方法，应用模板来建网站中的网页页，既可以避免重复劳动，还可以统一网站的整体风格。 【讲授新课】 知识储备 1.1学习路线，如图6.1 图6.1 模板学习路线 1.2 知识小天地 如何使用模板制作网页？ 在一般的网页中同一栏目中的网页一般会使用相同的布局方式或页面元素。如果每个都重新做就会浪费大多数不必要的时间，而利用hb中的模板功能可以避免乏味而又重复的繁琐工作，大大提高网站的制作和维护效率。 1.2.1 创建模板 1.先把建一个需要作为模板的网页，以网页头部导航栏为例，代码如下： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <nav> <a href="#" title="">首页</a> <a href="#" title="">红色精神</a> <a href="#" title="">红色电影</a> <a href="#" title="">红色地标</a> <a href="#" title="">红墙纪事</a> <a href="#" title="">会员注册</a> </nav> </body> </html> 运行效果如下图所示： 图6.2 创建模板页面 2.新建html文件，点击右上角“自定义模板”，如图6.3 图6.3 创建模板 2.点击“自定义模板”后，会自动跳转到模板存储路径，如图6.2，在readme.txt同层下放入模板保存，将我们第一步创建好的模板存放到该路径下。 图6.4 模板存放位置 3.再次新建一个模板，此时下面就出现了你刚刚新建的模板，勾选即可。 图6.5 使用模板创建页面 1.2.2 管理模板 1.更新模板创建模板并应用其创建网页后，如果对模板中的某个部分不满意，可将其打开进行修改。在修改完毕并保存时，HBuilder会弹出“更新模板文件”对话框，提示是否更新站点中基于该模板创建的网页文档，单击“更新”按钮可更新通过该模板创建的所有网页，单击“不更新”按钮，则只保存模板而不更新基于该模板创建的网页。 2.如果不再需要某个模板，可将其删除。在“资源”面板中选中不再需要的模板文件，按【Delete】键将会弹出提示框。如果确认删除，单击“是”按钮；如果不想删除，则单击“否”按钮。 3.如果用户需要对使用模板创建的网页中的不可编辑区域进行编辑，可以直接将网页文档与模板分离。分离后的文档就变成了普通的网页文档，可以像编辑普通网页文档一样对其进行编辑操作，但更新原模板文档后，分离后的文档无法再自动更新。 【练一练】制作一个历史书店的导航栏模板 提示：可以使用表格来实现，添加背景颜色，使导航栏更加美观，具体代码如下。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <table border="0" width="600px" height="50px" cellspacing="0" cellpadding="0"> <tr align="center" bgcolor="coral"> <th>首页</th> <th>中国史</th> <th>世界史</th> <th>历史地理</th> <th>文化史</th> <th>革命史</th> <th>近代史</th> </tr> </table> </body> </html> 效果如下图 图6.6 运行效果 将该页面保存到模板路径下，新建一个bookstore页面，并以该页面作为模板。 二、模仿型任务讲解 2.1 使用模板制作网页网页资讯单 分析案例效果，根据案例需求，通过相应的工具及渠道收集符合要求的素材，并完成资讯表。 表6-1 资讯单 使用模板制作网页资讯单 学习情景 红色书籍平台制作资讯单 学习任务 学时 4学时 案例描述 搜集渠道 素材要求 小组成员 参考资料 完成时间 案例分析 2.2红色书籍平台案例分析 案例学习目标 · 能够熟练建立模板 · 能够熟练对模板进行修改、管理 案例知识要点 · 模板的创建 · 模板的使用 实现探究 2.3 案例设计思路 在具体实现过程中，选择红色书籍或红色故事作为素材，引起学生的学习兴趣，使学生更加有动力去完成网页的设计与制作；同时，网页整体设计主题要突出，内容要丰富，能给人留下深刻印象。 具体页面设计思路如下： 素材整理 页面设计 编码实现 测试运行 【思考】 （1）如何使用模板使得制作更加简单 （2）如何通过设置模板的样式使得网页更加美观 三、实操示范 操作步骤 Step01 打开开发工具“HBuilder X”，选择“文件”------> “新建”------>“项目”，打开如下图6.16所示对话框：Step01 图 6.7 项目创建 写好相应的项目名称后，选择基本的HTML项目，点击创建，即可完成项目的创建。 Step02 将课前搜集好的图片素材，复制粘贴到新建项目的“img”文件夹中，如下图6.8所示 图 6.8 图片存放 Step03 新建一个页面page01，并以上面的练一练作为模板，创建好后，如下图。Step03 图 6.9 使用模板创建网页Step04 接下来，使用表格创建书店首页，代码如下图所示： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <table border="0" width="600px" height="50px" cellspacing="0" cellpadding="0"> <tr align="center" bgcolor="coral"> <th>首页</th> <th>中国史</th> <th>世界史</th> <th>历史地理</th> <th>文化史</th> <th>革命史</th> <th>近代史</th> </tr> </table> <table border="1" width="600px" height="200px" cellspacing="0" cellpadding="0"> <tr> <td> <img src="img/shz.png" width="280px" /> </td> <td> <img src="img/sgyy.png" width="280px"/> </td> </tr> <tr> <td> 《水浒传》是中国古典四大名著之一，问世后，在社会上产生了巨大的影响，成了后世中国小说创作的典范。 </td> <td> 《三国演义》是中国文学史上第一部章回小说，是历史演义小说的开山之作，也是第一部文人长篇小说， 明清时期甚至有“第一才子书”之称。 </td> </tr> <tr> <td> <img src="img/xyj.png" width="280px"/> </td> <td> <img src="img/hlm.png" width="280px"/> </td> </tr> <tr> <td> 《西游记》是中国古代第一部浪漫主义章回体长篇神魔小说。现存明刊百回本《西游记》均无作者署名， 鲁迅、胡适等人从《天启淮安府志》所载断定淮安府人吴承恩即是章回小说《西游记》作者 </td> <td> 《红楼梦》是一部具有世界影响力的人情小说、中国封建社会的百科全书、传统文化的集大成者。 其作者以“大旨谈情，实录其事”自勉，只按自己的事体情理，按迹循踪，摆脱旧套，新鲜别致， 取得了非凡的艺术成就。 </td> </tr> </table> </body> </html>Step03 Step03 Step03 Step03 Step03 Step03 图6.10 案例效果图 四、学生完成开放型任务，教师巡回指导 开放型任务的任务卡如表4-2所示 表4-2 开放型任务卡 任务编号 06-2 任务名称 使用模板制作网页 网页主题 红色书籍推荐 开放型任务描述 任务如下： 1. 创建一个命名为“红色书籍推荐”的站点 2. 设置好站点目录 3. 使用“文件”面板在站点根目录下创建一个介绍桂林的网页“index.html” 4. 将网页标题设置为“红色书籍推荐” 5. 创建基于模板的网页 6. 修改模板内容已到达到修改相关网页的目的 【课堂小结】 本次任务介绍了模板和库的相关知识，主要对模板的概念、模板的创建、应用与更新，使用户能够熟练地应用模板来制作风格一致的网站页面。 【布置作业】 1. 模板有什么作用？ 2. 库的作用是什么？ 3. 模板和库有何区别? 4. 可编辑区域在模板中的作用是什么？ 5. 如何设置可选区域？ 【创新型任务】 分小组选择科技强国、红色之旅、绿水青山为主题的使用模板和库制作网页。通过推送学习强国学习视频的绿水青山栏目、看科技栏目、看党史的红色故事栏目，搜集相关表格布局与美化素材，分小组设计科技强国、红色之旅、绿水青山的表格布局与美化网页，渗透革命文化和社会主义先进文化教育、生态文明教育多个“思政元素线”。培养学生爱国情、强国志。 教学评价 考核要点 考核内容 标准分 计分 知识考核 (1)课前观看学习通微视频及完成微课下方进阶练习题 20   (2)能正确编辑模板，掌握设置可编辑区域和可选区域的方法 (3)用模板生成新网页，并对新网页进行编辑加工 (4)修改网页模板并同步更新该模板生成的网页 能力考核 (5)能灵活运用模板和库到小组作业科技强国、红色之旅、绿水青山网页中 30   思政考核 (6)过程考核：考查学生的团队合作、创新意识、思维、专业技术能力等方面综合评价 20   (7)网页作品：对设计作品中体现的中国传统文化、生态文明意识、与软件专业有关的最新科技技术、创新性等方面进行评估 30   总计 100   评价方式 自我评价 小组评价 教师评价 考核得分       学科网（北京）股份有限公司 $$