高中信息技术选修三《动态HTML——让网页“动”起来》教学设计.docxVIP

高中信息技术选修三《动态HTML——让网页“动”起来》教学设计

一、教学背景与教材分析

本课选自粤教版高中信息技术选修三《网站设计与评价》第五章第一节第二部分“动态HTML”。教材在学习了静态网页的基本制作之后，引入动态HTML（DHTML）这一核心概念，意在让学生理解网页从“静态呈现”走向“动态交互”的技术跃迁。动态HTML并非一门独立的新语言，而是HTML、CSS、客户端脚本语言（如JavaScript）与文档对象模型（DOM）协同工作的技术集合。教材落脚于三个层面：一是动态效果的表现形式，如鼠标悬停变化、下拉菜单、动态文字与图片轮播；二是实现动态效果的基本原理，即通过脚本改变页面元素的样式与内容；三是动态技术与网页整体设计的协调关系，避免为“动”而动的设计误区。

本节内容承上启下：前面学生已经掌握了HTML基本标记、表格布局与CSS基本用法，具备了“看懂页面结构”的能力；后续章节将涉及网站的整体规划与发布评价，动态效果的恰当运用正是提升网站品质的关键一环。因此本课既要落实具体技能，又要培养“技术服务表达”的设计观。

二、学情分析

授课对象为高中二年级选修该模块的学生。此前他们已在必修模块接触过算法与程序设计初步，部分学生有Scratch或Python的学习经历，对“事件—响应”的逻辑不陌生。但从课堂观察看，学生普遍存在三个薄弱环节：其一，对CSS选择器与盒模型的理解停留在模仿