第四单元 建立网站 第12课 蓝图架构师-网站规划设计（初中信息科技七年级）

第四单元建立网站第12课蓝图架构师——网站规划设计（初中信息科技七年级）

一、教学背景与设计立意

（一）课程定位与大单元语境【非常重要】

本课隶属于义务教育信息科技课程标准（2022年版）第三学段“互联网应用与创新”模块，是七年级大单元项目“模光织史·码动千年——校园数字文博云展厅”中的第2课时。在上一课时中，学生已完成对万维网服务本质、HTTP协议基础及HTML基本骨架的感知，破除了对代码编程的神秘感；本课时则需完成从“浏览者”向“建构者”认知转型的关键一跃——在动手输入第一行代码之前，先行完成对数字化作品的整体架构设计。本课并非孤立的技术步骤教学，而是以大概念“系统与工程”为锚点，将“规划设计”确立为工程思维的核心实践环节，使学生理解：任何可靠的数字系统都源于严谨的设计蓝图，代码仅是设计的物化表达。

（二）学科核心概念与大概念锚点

1.【核心大概念】系统与工程、信息系统的构成、数字化创新与表达。

2.【学科本质透视】网站规划设计课的本质不是教授“填写规划表的技能”，而是培育学生在不确定情境中进行问题界定、要素分析、结构优化与创新表达的系统工程思维。规划行为映射了从“用户需求”到“功能规格”再到“结构蓝图”的映射与转换过程。

（三）真实情境与项目驱动

本课承接单元总项目：为学校“百廿校庆·学科探秘”大型主题活动搭建云上数字展厅。各小组化身为“数字策展与建造联合事务所”，承接真实任务——为物理学科“水火箭的飞天密码”、生物学科“扎染与植物色素”、历史学科“文物里的中国”等特色社团设计并搭建主题展区网站。本课核心挑战为：“在不写一行代码的前提下，如何让客户（师生/虚拟甲方）相信你们的网站值得被建造？”通过此具有挑战性的真实问题，将规划从“作业”升维为“专业提案”。

二、学习目标与表现期望

（一）【基础】信息意识与概念建构

1.通过类比建筑设计与施工的关系，能用自己的语言复述“网站规划设计”在网站建设全生命周期中的前置性与决定性价值。

2.能够列举至少3个因规划设计缺陷导致用户体验失败的数字产品案例（如导航迷失、内容庞杂、风格混乱），初步建立“以用户为中心设计”的意识。

（二）【重要】计算思维与工程方法

1.掌握网站规划的四维要素模型（目的与用户、内容与功能、结构与导航、风格与体验），并能运用该模型对一个给定的主题网站进行反向拆解与分析。

2.学会使用思维导图工具（XMind/手绘）或站点地图对网站的信息架构进行可视化建模，形成具有层级逻辑的树状结构图。

3.经历“需求分析—功能定义—内容归并—链接关系设计”的完整推演过程，初步具备将抽象问题转化为结构化方案的建模能力。

（三）【核心】【高频考点】【难点】数字化学习与创新

1.能够结合本小组选定的学科主题，运用“设计冲刺”方法，在40分钟内完成一份包含项目定位、受众画像、栏目架构、首页布局线框草图、交互亮点在内的《网站规划提案书》（数字化或纸质）。

2.在规划中有意识地融入中华优秀传统文化元素（如非遗扎染配色、水墨风格界面）或社会责任议题（如数字版权声明、无障碍浏览设计），体现技术温度与文化自信。

（四）【热点】信息社会责任与工程伦理

1.在规划阶段即前置思考网站内容的知识产权合规性，明确素材来源的自创与引用边界，学会在规划书中标注“拟引用素材授权状态”。

2.探讨数字空间的可访问性设计，思考色盲用户、老年人等群体如何顺畅浏览网页，规划中主动避免纯色差传导关键信息。

三、教学重难点与靶向突破策略

（一）【重点】网站信息架构的可视化建模

学生需从发散性的创意碎片中凝练出具有逻辑层次的栏目体系。突破策略：引入“卡片分类法”——将各组头脑风暴出的20~30个内容关键词写在便利贴上，小组通过协作将卡片进行归并、分层、命名，物理化地呈现“父级栏目—子页面—同位页面”的关系，再将物理分类结果迁移至思维导图软件中固化。

（二）【难点】从“内容堆砌”到“交互设计”的思维跃升

学生极易将规划理解为“我要放什么内容”，而忽视“用户如何获取这些内容”以及“内容之间如何发生联系”。突破策略：创设“用户迷失情境”——展示一个仅有海量内容却无清晰导航的网站，引导学生模拟用户寻找特定信息的挫败感，从而自主建构出“链接逻辑”与“导航策略”同样是规划设计不可分割的组成部分。引入“三点击原则”，强化信息获取效率意识。

（三）【易错点】规划与制作的脱节

学生常认为规划是“给老师看的作业”，制作时仍随意修改。全程嵌入一致性审查：在后续课时启动制作前，必须进行“规划—原型比对会”，强化蓝图对施工的约束力与迭代更新的规范性。

四、教学准备与学习环境建构

（一）数字化平台与工具

1.国家中小学智慧教育平台：教师提前建立班级群组，上传本节课范例文档、微课视频及数字化学案。

2.协作白板：选用亿图图示（EdrawMax）或ProcessOn在线思维导图工具，支持多人在线同步协作绘制站点地图。

3.AI辅助工具【创新应用】：提供结构化“提示词模板”，学生可调用生成式AI辅助生成网站栏目建议、受众分析报告，作为思维拓展的“副驾驶”而非替代思考-2。

（二）实体资源与教具

1.行业案例包：选取“故宫博物院青少版网站”“NASA太阳系探索互动站”“哔哩哔哩非遗区”等优秀青少年网站截图及站点地图解构。

2.物理教具：大型磁性白板、彩色便利贴、马克笔、A3尺寸“规划蓝图草稿纸”（预印有网站LOGO位、导航区、内容区、版权区的占位框）。

3.脚手架工具：《网站规划设计自查量表》《用户角色模型画像模板》《同类型网站竞品分析简表》。

五、教学实施过程（全景展开）

（一）【定向与唤醒】工程隐喻：万丈高楼从何起？（7分钟）

1.锚点情境创设

上课伊始，教师不直接提出“网站规划”，而是在大屏幕上展示一张享誉世界的建筑作品——悉尼歌剧院。画面切分为两栏：左栏是壮丽的实景照片，右栏是丹麦建筑师约恩·乌松最初的手绘草稿，线条甚至有些潦草。教师以叙述性口吻发问：“这座耗时16年、成本超支1400%的奇迹，究竟是从哪一秒开始真正‘存在’的？是从第一块混凝土浇筑时，还是从笔尖触碰草图纸的那一刻？”【非常重要】

学生在短暂沉思后倾向后者。教师顺势揭示本课核心隐喻：代码即施工，规划即设计。没有蓝图，工地永远是散落的钢筋水泥；没有规划设计，服务器里只是一堆无关的文本标签。

2.失败博物馆·数字馆

教师呈现两个“反面典型”微型案例（均为脱敏处理的往届学生作品）：

案例A：名为“我爱动物”的网站，首页堆砌了37张高清图片，没有标题、没有栏目分类、链接全部失效，用户打开后完全不知从何点起。

案例B：名为“宇宙探秘”的网站，首页布局华丽，但点击“火星”栏目跳转出的却是“宠物狗”的收养信息。

学生以“用户体验顾问”身份进行30秒快速诊断。学生自然生成关键概念：做网站必须提前想清楚给谁看、放什么、怎么放、如何跳。教师将这些零散的回答提炼，以概念词云形式呈现在屏幕侧边，引出本节课的核心挑战：成为网站建设的“蓝图架构师”。

（二）【解构与建模】专家思维：规划的四维罗盘（13分钟）【基础】【高频考点】

1.案例拆解——以“鄱阳湖里探白鹤”为标本

教师引导学生打开本地服务器中的范例站点“鄱阳湖里探白鹤”-6。这不是简单的浏览，而是逆向工程。学生被赋予四色便签纸，分别对应四个分析维度：

红色（目的）：建站者为什么要做这个站？希望访客离开时带走什么认知？

蓝色（内容）：站里包含了哪些具体的信息块？文字、图片、数据？

绿色（结构）：页面如何被组织？点击几次能从首页找到白鹤迁徙的具体原因？

黄色（风格）：整个站给你什么视觉情绪？宁静？震撼？严肃？

小组将四色便签贴至磁性白板对应区域，形成可视化的思维拼图。教师在各组汇报中提炼出高度结构化的“网站规划四维罗盘”模型：【非常重要】

[1]定位层：建站目的+核心受众（为谁解决什么问题）。

[2]内容层：信息要素+功能模块（提供什么资源与服务）。

[3]架构层：栏目划分+链接关系+页面层级（信息如何被组织）。

[4]表现层：视觉基调+色彩意象+版式风格（以何种情感呈现）。

2.专家工具引入——站点地图的可视化语法

教师指出：仅有四维罗盘还不够，工程师需要精确的图纸语言。此刻引入站点地图这一专业工具。对比展示：文本形式的栏目列表（枯燥、难理解）与图形化的树状站点地图（直观、揭示关系）。学生瞬间感知到图形化建模的力量。

教师以“鄱阳湖里探白鹤”为例，在思维导图工具中现场演示绘制过程：根节点（首页）—一级栏目（白鹤档案、三进鄱阳湖、水文气候、保护行动）—二级页面（例如“水文气候”下挂“水温年际变化”“降雨量与栖息地”）—同级页面关系（兄弟节点）—跨页面链接示意（虚线表示）。此步骤需慢放，边绘边讲，将头脑中的抽象逻辑外化为可视节点。【难点突破】

（三）【迁移与模拟】协同建模：为“非遗扎染”设计信息骨架（15分钟）【重要】

1.情境接驳——从分析者转向设计师

屏幕切换至本班生物社团提供的真实素材包：“巧手扎锦绣，靛蓝染春秋”——扎染工艺数字化展陈需求。包括：扎染历史口述稿、植物染料（板蓝根）种植照片、扎结技法示意图（捆扎、缝绞）、学生自己动手染制的围巾作品图、靛蓝染色化学原理小视频。大量碎片化信息扑面而来，形成认知压力——这正是规划设计需要解决的痛点。

2.卡片分类——让结构从混沌中涌现

各小组领到一袋信息卡片（约25张），每张卡片写有一条具体素材描述。任务指令：【请为这些信息建立秩序】。

学生通过协作将卡片进行物理分组：有的组按“时间线”（古代—现代）、有的组按“工艺流程”（备料—扎结—浸染—氧化—成品）、有的组按“学科融合”（艺术图案、化学原理、劳动实践）。教师在巡视中不评判对错，而是引导学生思考：哪一种分类方式对目标访客（初中生、家长、来访嘉宾）更友好？如果我希望重点展示学生创造力，应该把“学生作品集”放在一级导航还是三级页面？

各组将分类结果用双面胶固定在大白纸上，并用箭头绘制从首页到末梢页面的“点击路径”。此时，部分组别已经无意识地绘制出了具有层级结构的站点地图雏形。

3.工具迁移——从物理到数字

学生登录ProcessOn在线协作平台，领取教师提前的《扎染展厅·空白画布》。小组将物理白板上的卡片分类结果转化为数字化的节点和连线。平台支持多人同时拖动、编辑，对话气泡里充满了协商：“这个不应该放在二级，这是整个展厅的核心价值观，应该在首页就有入口！”——规划设计课在此刻已不仅是技术课，而是思维品质与协作技能的淬炼场。【核心素养落地】

教师通过教师端广播展示某一小组的实时建模过程，进行“过程性示范”而不是“结果性展示”，重点讲解：如何为页面节点命名（动词短语还是名词短语）、如何控制树形结构的宽度与深度、如何在复杂的层级中保持导航的一致性。

（四）【攻坚与创造】设计冲刺：小组项目《校园文博云展厅》规划提案（35分钟）【重中之重】【热点】【难点】

此环节为全课高潮与主体，占据近一半课堂时间，采用高度浓缩的“设计冲刺”模式，模拟真实设计事务所的限时竞标。

1.角色分工与身份赋予（2分钟）

每组抽取“客户委托卡”：物理组“飞天密码——水火箭的百年追问”、历史组“方寸之间——馆藏汉代铜镜”、地理组“岩石会说话——校园地质标本”。组内产生4个专业角色，佩戴工牌：

【非常重要】

[1]策展人：负责确定网站立意、受众定位、情感基调。

[2]信息架构师：负责人卡片分类、站点地图绘制、导航逻辑。

[3]交互体验官：负责规划用户点击路径、链接策略、特殊交互动效设想。

[4]创意美工：负责色彩风格联想、LOGO意象构思、首页版式线框草绘。

角色非固定，每5分钟可进行轮换或支援，但需确保人人有核心贡献。

2.第一轮冲刺：竞品调研与定位（8分钟）

各小组利用教师提供的资源包（内含同类主题的博物馆网站截图、优秀学生作品链接）。使用SWOT简表分析：现有网站哪里做得好？哪里存在空白？我们组的网站相比它们的独特价值主张是什么？

【重要】此时教师介入提供AI提示词脚手架：若小组定位思路受阻，可向AI助手提问，但必须使用标准指令模板，例如：“我是一名初中生，正在策划一个关于[水火箭历史]的主题网站，目标访客是参加校园开放日的小学生，请推荐3个具有吸引力的网站栏目名称。”-2这一方面提升效率，更重要的是将模糊的创意冲动转化为精确的语言指令，本身即是一种思维训练。

3.第二轮冲刺：架构蓝图与站点地图（12分钟）【核心产出】

各组在协作白板上全力构建站点地图。此阶段课堂声音分贝达到峰值，这是深度投入的标志。教师巡视，捕捉关键问题作为生成性资源：

典型困境A：内容贪多求全，架构层级深达5层（首页—历史—人物—传承人—第三代弟子—一件作品）。教师介入，讲述“三点击原则”：用户通常希望3次点击内抵达任何内容页面。小组砍掉冗余层级，合并同类项。

典型困境B：仅罗列“关于我们”“作品展示”等通用栏目，缺乏主题特色。教师引导回归定位层：“我们的独特性到底是什么？”物理组重新将“水火箭”栏目升华为“问天——从宋代火箭到流体力学”，既有文化厚度又具学科本质。【难点突破】

4.第三轮冲刺：首页线框原型与高光亮点（10分钟）

信息架构稳定后，转向表现层规划。并非要求高保真UI图，而是用A3草稿纸绘制线框图：页面从上到下分几块？导航栏是横向还是侧栏？首屏需不需要一个打动人的大标题/主视觉？哪些区域放置最能体现小组特色的内容？

此时，创意表达百花齐放：历史组将导航设计成“铜镜”造型，点击镜面不同区域进入不同年代；扎染组规划了“靛蓝渐变”的色彩主题；更有小组主动在页面底部预留“版权声明”和“图像引用来源”模块——这是信息社会责任从设计源头就植根的体现。

（五）【发布与校准】提案路演与同行评议（10分钟）

1.电梯演讲·60秒

每组选派“策展人”或“架构师”，携带规划蓝图纸质稿或平板截图，起立面向全班进行60秒提案。话语框架为：【我们的网站要让（谁）在（什么情境下）完成（什么任务），因此我们设计了（核心栏目）与（独特导航），并让用户感受到（情感关键词）。】

此环节不仅是展示，更是将隐性思维显性化、结构化表达的强制训练。台下学生依据《规划提案评价量规》进行诊断，重点记录“一个最欣赏的创新点”和“一个可能存在的迷失风险”。

2.同行反馈·静默修改

采用“画廊漫步”形式：各组将规划成果固定在教室四周白板，学生持便签贴流动观摩，在他人作品旁写下建设性意见（“导航栏如果能增加一个全站地图索引会更友好”“配色建议考虑色盲用户的可识别性”）。每组领回自己的规划书后，用红笔进行最后一轮“微迭代”，将外部反馈转化为内部优化指令。

（六）【整合与升华】工程伦理与认知闭环（5分钟）

1.前置的伦理：可访问性与包容性设计

教师在总结阶段并未重复技术要点，而是展示两张图片：全色画面与灰度画面；正常字号与放大150%后的排版错乱。提问：“我们规划的网站，是否把一部分人挡在了门外？”学生陷入沉思。教师引导：真正的卓越设计，是让尽可能多的人平等获取信息。这是2022版课标“信息社会责任”在规划设计课中最具温情的落点-2。学生回到小组规划书，用一句话在封面标注本组“包容性设计承诺”，如“本网站确保仅通过颜色不传达关键信息”“本网站支持字号自由缩放”。

2.认知闭环：从蓝图到施工的仪式感

教师总结：今天你们没有写一行代码，却完成了一个网站80%的智力工作量。下节课，当你们打开HTML编辑器时，请记住——优秀的代码忠实于优秀的规划，随意的修改是对蓝图的背叛。但规划不是枷锁，迭代是工程常态，只是每一次迭代都必须是集体智慧的再协商，而非个人的即兴冲动。

课代表将各组的《规划提案书》电子版加密归档，命名为“蓝图V1.0”。下节课启动制作前，必须进行“规划—原型”一致性审查，通过审查的小组方可获得“施工许可证”。这一仪式化设计，将规划设计从“软任务”转化为“硬约束”。

六、学业评价设计——量规嵌入全程

（一）过程性评价（权重60%）【非常重要】

1.信息分类能力（15%）：卡片分类的逻辑一致性、层级归并的合理性。

2.架构建模能力（25%）：站点地图的完整性（覆盖核心内容）、深度控制（3层以内）、节点命名清晰度、跨页面链接逻辑预设。

3.协作贡献度（10%）：角色履职情况、讨论中提供建设性观点的频次（教师课堂观察与小组互评结合）。

4.创新意识（