高中信息技术浙教版选修3 第6.1节 网站的规划与设计 教学设计

高中信息技术浙教版选修3第6.1节网站的规划与设计教学设计一、教材分析与课程定位《网站的规划与设计》是浙教版高中信息技术选修3《网页设计与制作》模块的首课，承担着从“单页制作”向“站点构建”认知跨越的关键任务。教材以“校园文化宣传网站”贯穿全章案例，本节聚焦于需求分析、站点架构设计、页面布局规划、导航系统设计及风格规范制定五个核心环节。课标要求学生具备“信息觉悟、计算思维、数字化学习与创新、信息社会责任”四大核心素养，本节课重点落脚于计算思维中“抽象与建模”能力的培养——将复杂的业务需求抽象为逻辑清晰的站点结构模型，以及数字化创新中“设计与开发”能力的初步形成。教材编排呈现“问题引入—概念辨析—流程演示—规范实践”四层递进结构。重点在于站点结构图的三种典型模型（线性、层级、网状）的适用场景判断、目录与文件命名的规范性建立、以及交互原型从低保真到高保真演进的认知链条。难点集中于学生如何将模糊的用户需求转化为可执行的技术规格书，以及在多页面协同设计中保持视觉语言与交互逻辑的一致性。学情调研显示，学生已掌握HTML/CSS基础语法与单页面布局技能，但缺乏系统工程视角，习惯“边做边改”，对版本控制、资源复用、团队协作规范认知薄弱。二、教学目标1.知识与技能：准确阐述网站规划的完整流程与交付物清单；熟练绘制站点结构图、页面线框图、导航流程图；规范建立站点根目录与资源分类目录，制定《站点设计规范文档V1.0》包含色板、字阶、间距系统、组件库雏形。2.过程与方法：体验“用户调研—竞品分析—架构设计—原型验证—规范沉淀”完整设计迭代循环；掌握卡片分类法梳理信息架构、灰盒测试法验证导航可用性、设计令牌化管理视觉资产等专业方法论。3.素养与价值：树立“以用户为中心”的设计伦理，践行无障碍设计原则（WCAG2.1AA级基线）；建立工程化思维，理解规划阶段投入1小时可节省开发阶段10小时返工成本的经济账；培养技术文档撰写规范意识，为后续团队协作奠基。三、教学策略与环境配置采用项目制学习（PjBL）驱动工作室教学模式。全班分为6个设计工作室（每组45人），设项目经理、信息架构师、交互设计师、视觉设计师、前端工程师五角色轮值制。物理空间重组为岛式工位，配备双屏显示器（主屏编码/设计，副屏参考/文档）、Figma专业协作账号、GitHubClassroom私有仓库、Markdown知识库。引入“设计评审会”机制：每阶段产出必经同伴评审、教师把关、版本定基三道关卡。四、教学过程设计（一）情境导入：从“页面拼凑”到“系统工程”——10分钟投屏两组对比案例：左侧为学生过往期中作业“个人主页”——首页3MB背景图未压缩、二级页面风格割裂、面包屑导航缺失、移动端布局崩塌；右侧为成熟商业站点“浙江省数字教材服务平台”——首屏加载1.2s、全站统一设计语言、键盘可达性完备、多语言切换无感。引导学生复盘：单页技能达标为何站点体验崩盘？关键差异在“规划前置”。抛出本节核心驱动问题：“若接到‘校园文化宣传网站’重构项目，甲方给两周上线期限，你的交付清单第1项是什么？”学生静默思考30秒，便利贴写核心动作贴白板，教师归纳聚类引出“需求与规划”主题。（二）深度任务一：需求挖掘与竞品拆解——20分钟任务卡1.1发放《项目委托书》（模拟校团委真实委托）：目标受众含在校生、教职工、校友、招生家长四类人群；核心功能覆盖新闻动态、社团风采、校史馆、招生专题、在线报名五大板块；无障碍合规要求；双语切换预留。工作室内角色分工：项目经理主持访谈脚本设计，信息架构师整理内容清单，交互设计师绘制用户旅程图，视觉设计师建立情绪板，前端工程师评估技术可行性。实操环节：1.用户画像构建：基于预设访谈数据（教师提供脱敏真实问卷200份），各组提炼3个核心Personas。示例：“老陈，52岁退休校友，手机操作迟缓，仅想找当年版面设计系毕业合影，痛点：搜索入口隐蔽、字号过小、返回首页无明显入口”。2.竞品交互审计：分组领取杭州二中、上海中学、北京四中官网截图包，使用“启发式评估清单”（含Nielsen十大原则+校园场景专项指标）打分记录。重点观察：新闻列表是否支持无限滚动分页？校史时间轴交互形式？报名表单校验反馈机制？3.内容清单卡片分类：每组获取80张内容卡片（新闻、公告、师生风采、课程介绍、招生政策等），执行开放式卡片分类，产出亲和图，拍照上传FigJam协作白板。教师巡场重点追问：“‘校友捐赠’归属‘校史馆’还是‘新闻动态’？决策依据是什么？”引导学生从用户心智模型而非部门行政架构出发分类。产出物：`/docs/01_需求/用户画像卡.md`、`竞品审计报告.xlsx`、`内容分类树.json`。（三）核心任务二：站点架构建模与结构图绘制——25分钟微讲座（8分钟）：结合学生卡片分类结果，讲解三种结构模型决策矩阵。|结构模型|适用场景判据|典型校园站点映射|导航深度建议|SEO权重分布策略|:::::线性结构单一叙事流程、引导式体验、步骤强依序招生报名向导、校史馆虚拟导览线路≤5步集中首页与终点页层级结构信息分类稳定、用户目标明确、扩展性要求高新闻中心、社团风采、政策文档库≤3层金字塔权重下沉网状结构高关联内容、探索式浏览、个性化推荐师生风采关联标签、专题聚合页扁平化长尾词分权实战环节（17分钟）：各组基于内容分类树，绘制校园文化站点结构图V1.0。要求：4.标注每个节点：页面标题、URL语义化路径、页面类型（列表/详情/落地/功能）、模板复用标识。5.绘制全局导航、局部导航、面包屑、页脚导航四层导航系统映射关系。6.标记“招生报名”线性流程节点与“新闻中心”层级节点的差异化处理。7.预留“校友捐赠”“在线选课”二期扩展接口节点（虚线框标识）。评审关卡：组间交叉评审，使用《站点结构图评审清单》——是否存在孤岛页面？URL层级是否超过3级？动态参数页是否规范标识？模板复用率是否≥60%？教师抽查3组，现场重构演示：将某组“社团风采”从三级扁平为二级聚合页，演示面包屑逻辑修正。（四）进阶任务三：页面线框图与交互原型构建——30分钟概念澄清：区分线框图、原型图、视觉稿三层次。线框图只解决“放什么、放哪里、优先级”，不涉及色值、字体、图片细节。引入原子设计理论指导组件拆解：原子（按钮、输入框、图标）→分子（搜索栏、卡片、导航项）→生物体（页头、侧边栏、列表区）→模板（列表页模板、详情页模板、落地页模板）→页面（实例化内容）。实操工具链：Figma建立团队文件`CampusCulture_DesignSystem`，启用AutoLayout与ponents功能。步骤1组件库搭建（10分钟）：各组按分工并行。•原子层：定义色板（Primary/0052A3、Secondary/E8F4FD、Semantic/Success00A859WarningF5A623ErrorE03E3E）、字阶（Display/32px、H1/28px、Body/16px、Caption/12px、Lineheight1.5/1.75）、间距系统（4px基准网格：4/8/12/16/24/32/48/64）、圆角令牌（2/4/8/16px）、阴影系统（Elevation14）。•分子层：制作“新闻卡片”组件——含缩略图（16:9）、分类标签、标题（两行省略）、摘要（三行省略）、时间、浏览量、操作区（收藏/分享）。设置4种状态：Default、Hover、Focusvisible、Disabled。•生物体层：组装“页头”含、主导航（支持二级下拉键盘操作）、语言切换、搜索入口、用户中心；“页脚”含快捷链接矩阵、备案号、微信/微博图标、友情链接滚动带。步骤2关键页面线框（15分钟）：基于1440px/375px两个断点，产出5张核心模板线框图。•首页：Hero区（轮播/视频）、快捷入口矩阵（4×2）、新闻动态双列+社团风采单列、校史时间轴横向滚动、招生专题CTA条。•新闻列表页：左侧分类筛选栏（手风琴折叠）、右侧网格/列表切换、分页器（首页/末页/上下/页码/每页条数）、空状态插画。•新闻详情页：面包屑、标题、元信息（分类/作者/时间/来源）、正文区（富文本渲染规范：图片自适应/视频16:9/代码块/引用块）、标签云、上下篇、相关推荐（基于标签算法）、评论区骨架。•校史馆专题页：年代筛选器（滑块/下拉）、时间轴视图（左右交替/单侧）、多媒体灯箱、全景漫游入口。•招生报名落地页：进度指示器、分步表单（基本信息/志愿选择/材料上传/确认提交）、实时校验、进度保存、成功态/失败态反馈。步骤3交互流程图（5分钟）：绘制“招生报名”完整用户流：进入落地页→点击立即报名→登录/注册分流→第一步表单填写→客户端校验→服务端校验→第二步……→最终确认→支付/免费提交→成功页→短信/邮件通知触发。标注异常分支：会话超时、网络中断、文件超限、名额已满。评审关卡：Figma文件内ment模式匿名互评，维度：组件复用率≥80%？断点适配逻辑自洽？焦点顺序符合视觉流？错误状态覆盖完备？教师抽查“新闻详情页”长图文阅读体验：是否设置阅读进度条？代码块是否支持复制/换行？移动端图片是否启用srcset响应式策略？（五）关键任务四：站点规范文档化与工程化落地——20分钟痛点直击：过往学生规划止步于PPT汇报，交接开发时口头传递，导致还原度低、返工率高。本环节建立“设计即文档、文档即代码”工程文化。文档体系构建：在GitHub仓库`/docs/02_规范/`目录下建立以下Markdown文件，采用FrontMatter元数据管理版本：8.`designtokens.md`——设计令牌完整导出表（JSON格式兼容StyleDictionary构建跨端变量）。9.`ponentspec.md`——组件规格书：每个组件含Props表、状态机、无障碍属性（ARIA）、测试用例、代码片段。10.`layoutgrid.md`——布局网格系统：12列/24列混合、间距、断点切换规则、容器最大宽度1200px/1440px/100%三档。11.`namingconvention.md`——命名规范：BEM修饰符语法（`.newscardfeatured`）、语义化文件夹（`assets/images/news/`、`assets/icons/system/`）、CSS变量前缀（`c`色`t`字`s`间距`z`层级）。12.`accessibilitychecklist.md`——无障碍清单：语义化标签、ARIALandmarks、色对比度（正文4.5:1、大文本3:1）、焦点可见、SkipLink、Alt文案规范、键盘操作路径。13.`browsersupport.md`——兼容性基线：Chrome90+/Firefox88+/Safari14+/Edge90+，不再兼容IE，Polyfill策略按需引入。目录结构规范化实操：在VSCode中现场建立标准站点骨架，提交初始mit`chore:initsitescaffoldv0.1.0`。```textcampusculturesite/├──.github/workflows/CI/CD流水线├──docs/设计与技术文档│├──01_需求/│└──02_规范/├──public/静态资源无需构建直接部署│├──favicon.ico│└──robots.txt├──src/│├──assets/经构建处理的资源││├──styles/│││├──tokens.css设计令牌CSS变量│││├──reset.cssNormalize/Reset│││├──variables.css语义化变量映射│││└──global.css全局基础样式││├──scripts/│││└──utils/工具函数库││└──images/图片资源（WebP/AVIF优先）│├──ponents/可复用UI组件││├──header/││├──footer/││├──newscard/││└──pagination/│├──layouts/页面级布局模板││├──defaultlayout.html││├──articlelayout.html││└──landinglayout.html│├──pages/具体页面入口││├──index.html││├──news/│││├──index.html列表页│││└──detail.html详情页模板││├──history/││└──admission/│├──data/模拟数据/内容JSON│└──main.js入口文件（模块化）├──.gitignore├──package.json├──vite.config.js构建工具配置└──README.md```讲解关键决策：为何`pages/news/detail.html`为模板而非静态页？——配合后端模板引擎或SSG（Astro/Next.js）动态渲染。为何`assets/styles/tokens.css`单独拆分？——设计系统跨项目复用、主题切换（暗色模式）仅需覆盖此文件变量。（六）综合评审与迭代复盘——15分钟设计评审会正式流程（模拟企业级DesignReview）：14.汇报人（项目经理）5分钟陈述：设计决策rationale、关键权衡、风险预案、下阶段计划。15.提问人（教师+受邀校团委信息员+资深学生代表）10分钟挑战：数据埋点预留？多语言扩展性？CDN资源路径策略？应急降级方案？16.决定人（教师）现场裁决：通过/条件通过/驳回重做。条件通过需列出整改清单、责任人、截止节点，记入`ISSUE_TEMPLATE/designreview.md`自动生成GitHubIssue。复盘模板《规划阶段复盘记录卡》全员填写：•最耗时的决策是什么？为何？•哪个假设被验证/推翻？•如果重来，工具链/分工/流程如何优化？•给下一届学弟学妹的3条避坑指南。五、评价体系设计采用过程性评价（60%）+产出物评价（30%）+素养观测（10%）三维模型。过程性评价（全程留痕GitHubInsights/FigmaVersionHistory）：•提交频次与质量：平均每日mit≥3次，Message规范度（Angularmit规范）。•CodeReview参与度：每人每阶段至少Review2个PR，提出有效建议≥1条。•协作冲突解决：MergeConflict自主化解记录、分支策略执行度。产出物评价（评审会定基版本为准）：|维度|权重|优秀基准（A级）|合格基准（C级）|::::站点结构图20%逻辑自洽、扩展节点预留、URL语义化、导航四层齐备结构完整、层级≤3、无孤岛页线框图与原型25%组件复用≥80%、双断点自洽、交互状态全覆盖、无障碍标注核心5页完整、基础交互可演示规范文档体系30%令牌化彻底、组件Props标准、命名规范贯穿、CI集成校验6大文档齐全、内容准确可执行工程脚手架15%目录规范、构建跑通、Lint零报警、README可一键上手目录合规、能本地预览复盘与迭代10%深度复盘、量化改进指标、形成团队资产库记录完整、有改进动作六、分层教学与弹性支持策略A层（核心层·全员必达）：完成单一语言、PC端优先、基础无障碍的站点规划全套交付物。B层（进阶层·60%学生挑战）：双语国际化（i18n路由策略/语言包结构）、移动端优先响应式断点体系、PWA离线缓存规划、埋点数据层设计。C层（拓展层·顶尖15%冲刺）：设计系统Figma插件开发（自动生成Tokens/组件文档）、Storybook组件文档站搭建、视觉回归测试基线建立、微前端架构预研（qiankun子应用划分）。支架工具包随时可取：•《信息架构速查卡》：卡片分类法/树测试/首次点击测试操作步骤。•《Figma协作避坑指南》：分支合并冲突/库发布更新/权限管理。•《Git协作法则》：TrunkBasedDevelopment简化版流程、语义化版本发布。•《无障碍自测清单》：axecore自动化集成、屏幕阅读器实测话术。七、预设偏差与应急预案|预设偏差|观测信号|应急干预措施|八、课程延伸与资源包延伸阅读清单（纳入班级Notion知识库）：•《InformationArchi