资源简介

中小学教育资源及组卷应用平台
第2课《制作网页展活动》教学设计
课题 制作网页展活动 单元 第一单元 学科 信息科技 年级 七年级下
核心素养目标 信息意识:清楚制作网站的基本流程，通过对科技发展与通信方式演变的深入研究，增强对信息时代通信与网络技术动态变化的敏感度。计算思维:能完整规划出一个网站的结构，熟悉网站制作的流程和网站的组成结构，熟练掌握制作网页的方法。数字化学习与创新:能独立规划网站结构并设计网页，积极探索创新网页，体会科技创新的意义。信息社会责任:确保网页信息真实、准确、合法，不传播虚假信息、不良内容，尊重不同文化和价值观，保护用户隐私，避免对他人造成伤害或误导。
教学重点 精准阐述网站的组成结构，包括主页及其他页面的功能和相互关系，理解主页常见的命名规则。2. 熟全面了解制作网站的基本流程，从确定主题、规划结构、搜集素材，到制作网页、美化网页和发布网站，每个环节都能清晰把握并实际操作。
3. 深入理解网页常用构建语言（HTML、CSS、JavaScript）的功能和作用，知晓 Markdown 语言的特点和应用场景，如在项目文档管理中的使用方法。
教学难点 1. 引导学生设计出既符合主题又具有创意和个性化的网页结构，避免结构混乱或缺乏特色，培养学生的创新思维和审美能力让学生在网页制作过程中，综合运用多种知识和技能。
2. 帮助学生理解人工智能生成代码的原理和逻辑，使其能够对生成的代码进行有效调整和优化，解决代码质量和个性化定制方面的问题，提升学生的代码理解和调试能力。
教学过程
教学环节 教师活动 学生活动 设计意图
导入新课 板书课题。1. 讲述壮壮在网上搜集 “三月三” 宣传素材后，思考如何设计网站呈现内容的故事，提问学生如果是自己会怎么做，引导学生关注网站设计。
2. 展示一些风格各异、内容丰富的网站，涵盖不同主题，如旅游、美食、科技等，让学生观察网站的呈现形式，激发学生对网页制作的兴趣和好奇心，引出本节课主题。 1. 认真倾听故事，思考老师提出的问题，分享自己对网站设计的初步想法。
2. 仔细观察展示的网站，感受不同网站的特点，如视觉布局、交互设计、内容呈现等方面的差异，对网页制作产生兴趣。 1. 通过贴近学生生活的故事和直观的网站展示，吸引学生注意力，引发学生共鸣，使学生快速进入学习状态。
2. 为后续教学内容的展开奠定基础，让学生带着问题和好奇心进入课堂学习，增强学习的主动性。
讲授新课 新知讲解：一、讨论
1. 提出 “回顾你之前浏览过的网站，和老师、同学一起交流，说一说它们在呈现形式上都有哪些特点” 的问题，组织学生分组讨论。
2. 引导学生从视觉布局、交互设计、内容呈现等方面进行讨论，在学生讨论过程中，教师巡视各小组，参与讨论并适时引导，帮助学生总结不同类型网站的呈现特点，如简洁明了型、图文并茂型网站的优势等。
二、案例分析
1. 展示某网站的截图和对应的本地源文件，提出 “什么是主页？图中哪个文件对应该网站的主页”“你能根据图画出该网站的简易结构图吗” 等问题，引导学生观察和分析。
2. 讲解主页是网站的起始页面，包含核心信息和导航，通常以特定文件名命名，帮助学生理解主页的重要性和命名规则；对学生画出的网站结构图进行点评和总结，加深学生对网站组成结构的理解。
三、马上行动
1. 让学生选择一个喜欢的主题进行网站规划，指导学生填写网站规划表，包括网站名称、设计意图、网站结构图等内容。
2. 邀请学生分享自己的网站规划思路，组织学生互相交流和学习，拓宽学生的设计思路。
小贴士讲解
1. 讲解网页一般使用 HTML、CSS 和 JavaScript 等语言构建基础框架和功能，分别介绍这三种语言的作用，如 HTML 定义网页结构和内容、CSS 设置视觉样式、JavaScript 实现交互功能。
2. 介绍制作网站的基本流程，包括确定主题、确定结构、搜集素材、制作网页、美化网页、发布网站等环节，结合实际案例进行说明，让学生对网站制作有整体的认识。
五、做中学
1. 介绍可以辅助制作网页的人工智能工具，如 ChatGPT、百度文心一言、字节跳动豆包等，指导学生选择工具并输入制作网页的主题及内容要求。
2. 演示如何获取生成的 HTML 代码，用记事本保存代码并在浏览器中打开查看效果，引导学生根据预览效果调整生成请求，完善网页效果，让学生亲身体验人工智能辅助制作网页的过程。
六、讨论
1. 组织学生讨论利用人工智能技术辅助制作网页的优缺点，引导学生从效率、技术门槛、代码质量、个性化定制等方面进行分析。
2. 对学生的讨论结果进行总结，强调在利用人工智能的同时，要注意代码质量和个性化需求的满足，培养学生辩证看待技术的能力。
七、马上行动
1. 让学生围绕同一个主题，分别用网页编辑工具和人工智能网站进行网页制作，对比两种制作方式生成的网页效果，填写对比表格。
2. 组织学生交流对比结果，分享制作过程中的体会，让学生感受科技创新对网页制作的影响。
八、任务拓展
1. 布置任务，让学生利用人工智能技术生成跑马灯效果并加到自己设计的网页中，指导学生输入指令获取代码并添加到网页。
2. 微交互设计在网页中的应用：微交互是指网页上那些细微的、与用户交互的动画效果或反馈机制。响应式网页设计的新发展：除了适应不同屏幕尺寸，如今的响应式设计更注重不同设备的交互特点。3.移动互联网中的位置服务与网页应用：借助 GPS、基站定位等技术，移动设备能精准获取用户位置信息。移动互联网安全中的数据加密技术：为保护用户在移动互联网环境下的数据安全，数据加密技术至关重要。4.自媒体信息传播中的版权保护：自媒体创作者在发布内容时，必须尊重他人的知识产权，不得未经授权使用他人的文字、图片、视频等作品。虚假信息在信息传播中的危害及治理：虚假信息在网络传播中可能引发社会恐慌、误导公众决策等严重后果。5.介绍 Markdown 语言，组织学生开展小组活动，包括分工收集资料、学习语法、实践操作、总结交流等环节，让学生了解 Markdown 语言在编写文档方面的优势。
讨论
1. 积极参与小组讨论，分享自己浏览网站的经验，倾听他人意见，总结网站呈现形式的特点。
2. 认真听讲，理解老师讲解的内容，加深对不同类型网站特点的认识。
案例分析
1. 观察网站截图和源文件，思考老师提出的问题，尝试分析主页和网站结构。
2. 学习主页的概念和命名规则，根据要求画出网站结构图，锻炼分析和绘图能力。
马上行动
1. 选择主题，认真填写网站规划表，规划网站的整体架构和功能。
2. 分享自己的规划思路，学习他人的创意，完善自己的设计方案。
小贴士讲解
1. 认真学习网页构建语言和制作流程的知识，记录重点内容，理解各语言和环节的作用。
2. 结合实际案例，对网站制作流程形成清晰的认识，为后续实践操作做准备。
五、做中学
1. 选择人工智能工具，输入制作需求，获取并保存生成的代码，查看网页效果。
2. 根据预览效果调整请求，不断完善网页，掌握人工智能辅助制作网页的方法。六、讨论
1. 参与讨论，发表自己对人工智能辅助制作网页优缺点的看法，分析不同方面的影响。
2. 倾听老师总结，辩证看待人工智能技术在网页制作中的应用，提高技术认知能力。七、马上行动
1. 分别用网页编辑工具和人工智能网站制作网页，对比效果，填写表格。
2. 交流分享制作体会，感受不同制作方式的差异，体会科技创新的意义。
八、任务拓展
1. 按照要求利用人工智能生成跑马灯效果并添加到网页，提高实践操作能力。
2. 参与 Markdown 语言小组活动，学习语法，进行实践操作和总结交流，了解 Markdown 语言的应用。 讨论
1. 培养学生的观察能力、表达能力和团队协作能力，让学生从不同角度了解网站的呈现形式。
2. 引导学生主动思考和总结，加深对网站设计的理解，为后续自己设计网站提供参考。案例分析
1. 提高学生的观察和分析能力，让学生理解网站的组成结构和主页的重要性。
2. 锻炼学生的绘图和逻辑思维能力，帮助学生构建网站结构的概念。马上行动
1. 培养学生的规划和设计能力，让学生学会明确网站的目标和架构。
2. 促进学生之间的交流和学习，激发学生的创意和灵感。小贴士讲解
1. 让学生掌握网页制作的基础知识，为实际操作打下理论基础。
2. 帮助学生建立网站制作的整体框架，明确各个环节的任务和顺序。
做中学
1. 培养学生的实践操作能力和对新技术的应用能力，让学生体验人工智能辅助制作网页的便捷性。
2. 引导学生根据效果进行调整，培养学生解决问题的能力和审美能力。
讨论
1. 培养学生的辩证思维能力和分析问题的能力，让学生全面认识人工智能技术在网页制作中的作用。
2. 引导学生正确对待新技术，提高学生对技术的选择和应用能力。
七、马上行动
1. 让学生对比不同制作方式，深入了解各自的特点和优势，提高学生的技术应用能力。
2. 促进学生之间的经验分享和交流，让学生在实践中感受科技创新带来的变化。
八、任务拓展
1. 进一步提高学生的实践操作能力，让学生学会将新技术融入网页制作中。
2. 让学生了解 Markdown 语言，拓宽学生的知识面，培养学生的团队协作和自主学习能力。
课堂小结 制作网页展活动1、进行新知引入2、准确阐述网站的组成结构3、理解主页常见命名规则4、完成课堂练习5、进行知识拓展 总结回顾 对本节课内容进行总结概括。
课后作业 请使用人工智能工具（如豆包）生成一个介绍家乡特色景点的网页 HTML 代码，要求包含标题、导航栏（导航栏需有景点介绍、游玩攻略两个链接）、景点简要介绍和一张景点图片（假设图片路径为 “jingdian.jpg”）。生成代码后，将代码保存为.html 后缀文件，并用浏览器打开查看效果，最后将操作过程和遇到的问题记录下来。 布置作业 拓展学生的学习能力
课堂板书 观看板书 强调教学重点内容。
21世纪教育网 www.21cnjy.com 精品试卷·第 2 页 （共 2 页）
HYPERLINK "http://www.21cnjy.com/" 21世纪教育网(www.21cnjy.com)

展开更多......

收起↑