资源简介

中小学教育资源及组卷应用平台
第4课《组建网站跟我做》教学设计
课题 组建网站跟我做 单元 第一单元 学科 信息科技 年级 七年级下
核心素养目标 信息意识:理解超链接在网页中用于连接不同页面、资源或外部网站的作用，认识到它对信息传播和用户导航的重要性。计算思维:将复杂的网页结构分解为多个页面和模块，通过超链接实现它们之间的逻辑连接。数字化学习与创新:尝试创新的超链接形式，如动态链接、多媒体链接或交互式导航菜单，提升网页的互动性和吸引力。信息社会责任:不创建或传播虚假信息的链接，避免恶意链接对用户造成误导或伤害。
教学重点 1、理解超链接在网页设计中的作用2、生应该学会如何使用HTML 标签创建超链接，并了解常见的属性如 href, target, title 等。
教学难点 1、超链接在网页设计中的运用。
教学过程
教学环节 教师活动 学生活动 设计意图
导入新课 板书课题。1. 展示一些设计精美的网站，引导学生观察网页之间的跳转效果，提问：“大家在浏览这些网站时，有没有注意到是如何从一个页面跳转到另一个页面的呢？”
2. 壮壮和小伙伴们各自负责的网页已经设计得差不多了，接下来就要考虑如何将制作好的网页关联起来，形成一个完整的网站。壮壮回想起以前认识的老朋友——“超链接”。网页之间的超链接设置跟以前学习的超链接设置一样吗？网页之间的超链接是指通过一个链接将一个网页与另一个网页连接起来。这种链接可以是：站内链接或者站外链接。 1. 认真观察网站页面跳转，思考老师提出的问题。
2. 学习新知引入，观看教学视频。 1. 通过展示有趣的网站实例，激发学生的学习兴趣和好奇心。
2. 以故事情景引入，让学生更容易理解本节课知识在实际中的应用，增强学习的积极性。
讲授新课 新知讲解：页面的跳转
1. 结合 PPT 中 “五色糯米饭探秘之旅” 的网页示例，演示点击导航栏 “制作过程” 时网页的跳转过程，引导学生思考跳转的原理。
2. 打开 “开发者工具”，展示对应代码，讲解实现网页跳转的关键代码部分，如 制作过程 。
二、开发者工具
1. 让学生对比浏览器窗口和 “开发者工具” 的内容，引导学生观察代码结构和元素与页面显示的对应关系。
2. 组织学生进行探究实践，在 “开发者工具” 中找出能实现网页跳转效果的 HTML 代码，比较它们的异同。
三、页面跳转的实现方式
1. 讲解超链接的常见类型为文本超链接和图像超链接，通过 PPT 展示对应的代码示例和实际效果。
2. 让学生结合之前设计的网站结构图，使用箭头表示跳转方向，完善网站链接关系图，实现网页之间的链接。
四、知识讨论
1. 让学生选择一个自己喜欢的网站进行浏览，感受超链接的效果，观察超链接的设置特点，包括位置、显示效果、作用等。
2. 组织学生填写表格，分享自己的浏览体验，引导学生总结设计得好的超链接的特点。五、课堂练习。完成PPT22页到17页练习题。
六、拓展延伸1、绝对URL：完整的网址，如 https://www.。相对URL：相对于当前页面的网址，如 /about 或 ../contact.html。协议相关：了解不同协议（如 http, https, ftp）对链接行为的影响。2、hreflang：指定链接内容的语言，有助于多语言网站的SEO。type：指定链接资源的MIME类型，有助于浏览器正确处理资源。3、JavaScript：使用JavaScript动态生成链接，如在用户交互后创建链接。服务器端语言：如PHP、Python等，可以在服务器端生成动态链接。4、防止链接欺骗：确保链接指向正确的地址，避免用户被误导到恶意网站。安全协议：使用HTTPS协议来保护链接的数据传输安全。 一、页面的跳转
1. 认真观察网页跳转过程，思考跳转原理，积极回答老师的问题。
二、开发者工具
1. 仔细对比浏览器窗口和 “开发者工具” 内容，观察代码与页面元素的对应关系。
三、页面跳转的实现方式
1. 理解文本超链接和图像超链接的概念和代码示例，记录笔记。
2. 根据网站结构图，完成网站链接关系图，实现网页之间的链接设置。
四、知识讨论
1. 选择网站浏览，仔细观察超链接的设置特点。
2. 填写表格，分享浏览体验，参与讨论，总结超链接的优点。
五、超链接的其他知识
1. 理解相对地址的使用方法和原因，记忆不同层级相对地址的代码格式。
2. 了解超链接结构、属性、动态生成和安全性等方面的知识，拓宽知识面。 一、页面的跳转
1. 帮助学生直观理解网页跳转的原理和实现方式。
2. 培养学生观察和分析代码的能力，为后续学习 HTML 代码打下基础。
二、开发者工具
1. 让学生熟悉 “开发者工具” 的使用，提高学生对网页代码的认知。
2. 通过实践探究，培养学生自主学习和探索的能力。
三、页面跳转的实现方式
1. 让学生掌握超链接的常见类型和代码编写方法。
2. 锻炼学生将理论知识应用到实际网站建设中的能力，培养学生的逻辑思维。
四、知识讨论
1. 培养学生的观察能力和对知识的归纳总结能力。
2. 通过分享交流，让学生从多个角度了解超链接的设计要点。
五、超链接的其他知识
1. 确保学生在设置超链接时能正确使用相对地址，避免错误。
2. 拓宽学生的知识面，让学生了解超链接相关的前沿知识，激发学生的学习兴趣。
课堂小结 图书的查找算法1、进行新知引入2、学习超链接的使用方法3、学习使用超链接的注意事项4、完成课堂练习5、进行知识拓展 总结回顾 对本节课内容进行总结概括。
课后作业 1. 布置作业：在 HTML 中创建一个指向 "https://www. ( https: / / www. / " \t "https: / / www. / chat / _blank )" 的超链接，并且当用户点击这个链接时，它应该在新的浏览器标签页中打开；设计一个简单的网页导航栏，包含三个超链接，分别指向 “首页”、“关于我们” 和 “联系我们” 三个页面，使用 HTML 编写代码，假设这三个页面的文件名分别为 index.html、about.html 和 contact.html，它们都位于网站的根目录下。
2. 提醒学生认真完成作业，下节课进行检查和点评。 布置作业 拓展学生的学习能力
课堂板书 观看板书 强调教学重点内容。
21世纪教育网 www.21cnjy.com 精品试卷·第 2 页 （共 2 页）
HYPERLINK "http://www.21cnjy.com/" 21世纪教育网(www.21cnjy.com)

展开更多......

收起↑