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

高中信息技术选修三《动态HTML——让网页“动”起来》教学设计一、教学背景与教材分析本课选自粤教版高中信息技术选修三《网站设计与评价》第五章第一节第二部分“动态HTML”。教材在学习了静态网页的基本制作之后，引入动态HTML（DHTML）这一核心概念，意在让学生理解网页从“静态呈现”走向“动态交互”的技术跃迁。动态HTML并非一门独立的新语言，而是HTML、CSS、客户端脚本语言（如JavaScript）与文档对象模型（DOM）协同工作的技术集合。教材落脚于三个层面：一是动态效果的表现形式，如鼠标悬停变化、下拉菜单、动态文字与图片轮播；二是实现动态效果的基本原理，即通过脚本改变页面元素的样式与内容；三是动态技术与网页整体设计的协调关系，避免为“动”而动的设计误区。本节内容承上启下：前面学生已经掌握了HTML基本标记、表格布局与CSS基本用法，具备了“看懂页面结构”的能力；后续章节将涉及网站的整体规划与发布评价，动态效果的恰当运用正是提升网站品质的关键一环。因此本课既要落实具体技能，又要培养“技术服务表达”的设计观。二、学情分析授课对象为高中二年级选修该模块的学生。此前他们已在必修模块接触过算法与程序设计初步，部分学生有Scratch或Python的学习经历，对“事件—响应”的逻辑不陌生。但从课堂观察看，学生普遍存在三个薄弱环节：其一，对CSS选择器与盒模型的理解停留在模仿层面，独立修改样式时容易出错；其二，对JavaScript抱有“高深难学”的心理预设，看到代码就想复制粘贴而不愿细读；其三，制作网页时热衷于堆砌特效，缺少用户体验意识。基于上述学情，本课采用“低门槛进入、分层次递进、真实任务驱动”的策略：先用最直观的悬停变色效果建立信心，再过渡到由脚本控制的显示与隐藏，最后以小组项目整合应用。评价环节特意设置“特效是否必要”的辩论点，倒逼学生思考技术与人、技术与内容的关系。三、教学目标（一）知识与技能1.能用自己的语言解释动态HTML的含义，说出它是HTML、CSS、脚本语言与DOM协同工作的结果，而非一门新语言。2.能识别网页中常见的动态效果，并判断其可能采用的技术手段。3.掌握两种基础动态效果的实现方法：利用CSS的:hover伪类实现鼠标悬停效果；利用简单的JavaScript语句控制元素的显示与隐藏、更换图片或文字内容。4.能通过开发者工具（F12）查看网页源代码结构，初步体验“审查元素”的调试方法。（二）过程与方法经历“观察现象—猜测原理—验证代码—迁移改造”的探究过程，体会从模仿到理解再到创造的学习路径；在小组项目中练习任务分解与协作交流。（三）情感态度与价值观形成“动态效果为内容服务”的设计观，懂得克制也是一种技术素养；在调试排错中培养耐心与严谨的工作习惯。四、教学重点与难点教学重点：动态HTML的组成原理；悬停效果与脚本控制显示隐藏两类典型效果的实现。教学难点：理解“事件触发—脚本执行—页面更新”的动态机制；能把所学效果恰当地整合进有主题的网页作品。五、教学方法与课前准备教学方法以任务驱动为主轴，辅以对比演示法与小组协作学习。教师准备：多媒体机房、教学广播软件、本课学习资源包（含半成品网页文件、素材图片、任务单、评价量表）、两个对比演示站点（一个是纯静态页面，一个是同主题含适度动态效果的页面）。学生准备：复习HTML基本标记与CSS基本语法，2人一组。六、教学过程（一）情境导入：两张网页的“对话”（约6分钟）上课伊始，教师通过广播同时展示两个介绍本地茶文化的网页：页面A是静态网页，图文齐全但毫无生机；页面B内容与A完全一致，但鼠标滑过导航栏时按钮变色，点击“历史沿革”“制作工艺”等栏目时下方内容即时切换，首页图片每三秒自动轮换。教师提问：“两个页面信息量相同，你更愿意浏览哪一个？为什么？”学生的直觉几乎一边倒地选择B，理由集中在“有反馈”“像活的”“找东西方便”。教师顺势点拨：“页面B并没有用什么神秘的新技术，它用的还是你们已经认识的HTML和CSS，再请了一位‘调度员’——脚本语言。这三位老朋友合作，就有了一个新名字：动态HTML。”板书课题，明确本课任务：人人都能让网页“动”起来，而且要动得有理有据。（二）新知建构：拆解动态HTML的“家族成员”（约8分钟）教师用一个类比展开讲解：把网页比作一出舞台剧。HTML是舞台的结构——有多少个房间、门窗在哪里；CSS是舞台美术——灯光颜色、布景风格；JavaScript是舞台监督——发号施令，让幕布升起、演员上场；DOM则是那本被所有部门共同使用的、可以随时涂改的舞台平面图，脚本正是通过改写这张图来改变观众看到的画面。配合讲解，教师现场打开页面B，按下F12调出开发者工具，鼠标点击导航按钮，学生在大屏幕上亲眼看到对应的HTML标签被高亮、CSS属性被实时修改。教师强调：“动态的本质不是页面换了，而是页面被‘现场改写’了。”这一演示把抽象的DOM从名词变成了可见的操作对象，为后续代码学习扫清认知障碍。随后师生共同归纳动态HTML常见效果的四个类别：鼠标响应类（悬停变色、弹出提示）、内容更新类（文字图片切换、滚动公告）、显隐控制类（下拉菜单、折叠面板）、运动变化类（渐变、位移）。教师提醒：类别背后的技术各不相同，但逻辑只有一个——某个事件发生了，某个元素因此改变了。（三）探究任务一：不用脚本的“动”——CSS悬停效果（约10分钟）教师广播演示最小案例：导航栏中的一个按钮，原始背景为绿色，当鼠标移入时变为橙色并有圆角过渡。核心代码只有几行，关键就在于:hover伪类与transition过渡属性。学生打开资源包中的半成品文件“任务一.html”，按照任务单完成三步操作：第一步，运行页面，感受现状（按钮无任何反馈）；第二步，在样式区补写:hover规则，保存刷新，观察变化；第三步，挑战题——修改transition的时长参数，从0.1秒到2秒体验差异，并为悬停状态追加文字变白的声明。教师巡视，重点关注两类典型错误：一是冒号写成中文全角导致规则失效；二是把:hover写在了错误的标签选择器后。纠错时请出错学生自己对照页面说出“为什么这一条没生效”，强化语法严谨性。完成后教师小结提升：“没有写一行脚本，页面就实现了交互反馈，这说明动态HTML里CSS本身就是重要的‘动态担当’。能用样式解决的问题，不要轻易动用脚本——这是最经济的设计原则之一。”（四）探究任务二：请脚本出场——点击切换内容（约15分钟）教师提出新挑战：“点击‘制作工艺’按钮，下方显示制茶的图文；点击‘历史沿革’，下方换成历史介绍。注意，页面不跳转、不刷新，内容就地替换。这一次，光靠CSS不够了。”讲解分三步走。第一步，认识事件：为按钮添加onclick属性，告诉浏览器“被点击时执行某段脚本”。第二步，操作DOM：用document对象的方法按id找到目标元素。第三步，改变属性：通过修改元素的style.display值在“显示”和“隐藏”（none与block）之间切换。教师在黑板上用图示画出“按钮点击→函数执行→两个内容区一个显示一个隐藏”的流程，帮助学生建立事件驱动模型。学生两人一组完成任务二：资源包中已给出页面结构和两个内容区，脚本函数留空待填。基础要求是实现两个按钮的切换；进阶要求是增加第三个按钮并实现三个内容区的互斥切换；挑战要求是尝试把切换方式从display改为改变文字内容（修改元素的文本内容属性），观察两种思路的差别。巡视过程中，教师发现一个共性问题及时广播集中讲解：有小组把三个内容区全部设为显示，切换逻辑混乱。教师不直接给答案，而是反问：“如果同一时间只允许一个主角站在舞台上，脚本上台前应该先做什么？”学生领悟到“先全部隐藏，再显示目标”的通用套路，这正是编程中可迁移的思维方式。任务完成后，请一组学生演示并讲解自己的代码，教师着重表扬能解释每一行含义的小组，重申“能讲出来的代码才是真正学会的代码”。（五）思辨讨论：特效的边界在哪里（约5分钟）教师展示一个反面案例：某网页布满了闪烁文字、跟随鼠标的飘浮图案和自动弹出的窗口，警徽般刺眼。提问：“这些效果技术上都做得到，但这是一个好网页吗？”学生展开简短讨论后形成共识：动态效果的价值在于帮助用户理解结构、获得反馈、聚焦内容，而不是炫耀技术。教师将结论板书为一句话：“动，要有理由；静，也是设计。”这一环节看似简单，实则承担着本课情感态度目标的主要落点，也是后续作品评价量表中的核心指标。（六）综合实践：为班级网站首页注入活力（约18分钟，可延伸至下节课）各小组领取综合任务：以资源包中的班级网站首页半成品为基础，至少合理运用两种动态效果进行改造：必须为导航栏增加悬停反馈；必须在首页合适位置实现一处内容切换或图片轮换（可提供简化脚本模板供选用，鼓励有能力的小组自行编写）；所有效果必须服务于内容的清晰呈现。小组内先讨论设计方案，在任务单上写明“我们准备在____位置加入____效果，理由是____”，再动手实施。教师与各组进行简短对话，追问设计理由，防止盲目堆砌。展示与互评环节，每组用一分钟演示并陈述设计意图，其余小组依据评价量表从“技术实现、与主题的契合度、用户体验、整体美感”四个维度打分并写一句建议。教师点评时优先肯定“克制的恰当”，再谈技术的精巧，强化设计观的导向。（七）课堂小结与作业布置（约3分钟）师生共同回顾本课知识脉络：动态HTML是HTML、CSS、脚本与DOM的协同；掌握了:hover悬停与脚本控制显隐两类效果的实现；树立了“内容为本、动效为用”的设计观。课后作业分两层：基础层，把综合实践作品完善后上传到班级学习空间；拓展层，浏览三个自己常用的网站，用F12找出其中一处动态效果的实现线索，在作业单上记录“效果描述＋我的推测”，下节课交流。七、板书设计主板书以“动态HTML＝结构＋表现＋行为”为总纲，下方分两列：左列“CSS组：hover悬停——最省力的反馈”，右列“脚本组：事件→找元素→改属性”，底部一行醒目地写着设计理念：“动，要有理由。”八、教学评价设计本课评价采用过程性评价与表现性评价结合的方式。过程性评价依托任务单，记录学生在任务一、任务二中的完成度与纠错情况，关注“能否独立排查语法错误”这一关键表现。表现性评价依托综合实践的四维量表，由自评、互评与教师评价三方构成，权重上教师侧重技术实现的正确性，同伴评价侧重浏览体验，使评价本身也成为一次“用户测试”。量表维度及描述简洁明确，便于学生在紧张的课堂时间内快速上手使用。九、教学反思从实施效果看，以开发者工具为“显微镜”呈现DOM被实时改写的过程，是化解本课抽象难点的关键一招，学生对“脚本修改页面”的