高中二年级信息技术选修3网页的版面设计教案.docxVIP

高中二年级信息技术选修3网页的版面设计教案

本课对应粤教版高中信息技术选修3中“4.2.2网页的版面设计”，面向已完成网页基础、HTML标签与CSS入门学习的高二年级学生开设。学生能写出可被浏览器解析的页面，却常把页面做成“素材堆叠”：导航漂浮不定，栏宽忽宽忽窄，图片压住正文，标题与正文抢视线，移动端一缩就乱。教学的重心不应停留在“会做几个版式”，而要让学生理解版面背后的秩序：信息有主次，视线有路径，模块有边界，交互有反馈，风格有统一度。课堂以“校园阅读推广网页改版”为任务，把抽象栅格、留白、对比、重复、对齐、亲密性转译为可观察、可操作、可评价的设计决策，让学生在真实限制中完成从“摆上去”到“布好局”的转变。

一、教材地位和学情判断

本节处在网站建设流程的中枢位置。前面解决了内容结构化与样式分离，后面衔接视觉细节、交互行为与网站发布；若版面欠稳，后续再精美的图标与动效都会失去依托。粤教版选修3强调技术服务于表达，本节恰好提供把“技术正确”提升为“表达有效”的场域。学生已具备选择器、盒模型、浮动或弹性布局的初步经验，常见困难不在代码记忆，而在三个断层：一是把屏幕当成无限画布，忽略浏览器窗口、内容宽度与阅读距离；二是把设计等同于装饰，忽略信息层级对认知负荷的影响；三是把作业当成一次性成品，缺少依据证据迭代版式的习惯。

课堂对象差异明显。美术基础好的学生容易凭感觉配色，却说不出为何稳定