初中信息科技七年级下册《网页载文脉·数据叙食光-基于大模型的美食文化数字叙事》教案

初中信息科技七年级下册《网页载文脉·数据叙食光——基于大模型的美食文化数字叙事》教案

一、课程基础与顶层设计

（一）课程标识与定位

本教案依据教育部《义务教育信息科技课程标准（2022年版）》研制，对应川教版（2024）初中信息科技七年级下册第一单元第三课时《分享我的美食》。学段为初中七年级，学科领域为信息科技，主题归属“跨学科主题学习”与“过程与控制”“信息安全与隐私”模块的深度融合。本课定位为单元产出导向课（Output-Oriented），是在学生完成“开启美食之旅”的信息检索与“记录我的美食”的Markdown结构化存储之后，进行的数字化表达、数据可视化呈现与人工智能赋能传播的终极产出环节。

（二）教材解构与重构

教材第一单元以“用网页展示美食”为大情境，暗含从“信息的获取与加工”到“信息的发布与表达”的完整逻辑链。然而，传统网页制作教学易陷入工具论窠臼，仅停留在图文堆砌层面。本设计对教材进行垂直重构：将静态的“网页分享”升维为动态的“美食文化数字叙事”，将单一的HTML技术教学拓展为包含数据透视、语义网、轻量级本地大语言模型应用的三维目标体系。我们将“分享”重新定义为“基于数据洞察的文化传播”，使技术学习服务于文化理解与思维外显。

（三）学情深描

七年级学生正处于形式运算思维发展阶段，对图文排版工具（Typra、WPS）具备基础操作能力，能够完成简单的Markdown转HTML。但存在三个关键断点：其一，对数据的认知停留在“数字”层面，无法将文本类信息（菜系分布、烹饪技法、味型）转化为可分析的数据资产；其二，网页制作常陷于模仿，缺乏顶层的信息架构意识；其三，对人工智能工具的使用多集中于“直接索取答案”，尚未形成“人机协同进行知识生产”的元认知策略。本课正是要打通这三个断点，实现从“工具使用者”到“数字叙事者”的认知跃迁。

二、核心素养表现性目标

（一）信息意识

能在海量的美食图文素材中，依据传播受众与媒介特征，精准筛选高价值密度的文化符号；敏锐感知数据在不同呈现形式（文本、表格、关系图谱）下的语义差异，建立“形式服务于意义”的表达自觉。

（二）计算思维

通过“美食数据字段化”实践，理解现实世界对象（菜品）向数据世界实体（记录）的映射过程；运用分类、比较、关联等逻辑方法，设计面向查询的美食资源库元数据结构；能清晰描述从“用户需求”到“DSL查询语句”再到“可视化呈现”的问题求解路径。

（三）数字化学习与创新

综合运用HTML5语义化标签、在线数据可视化工具（如Flourish、百度Sugar）、本地部署的开源语言大模型（Ollama），创造性地生成兼具审美意蕴与文化深度的交互式美食数字故事页；能够在提示工程中融入地域文化术语，驯化AI生成具有风格化特质的文本与代码。

（四）信息社会责任

深刻理解“分享”背后的版权伦理，在网页中规范采用知识共享协议（CCBY-NC）声明素材来源；辩证看待AI生成内容的客观性与潜在偏见，在美食文化传播中坚守真实性与地域本真性，拒绝过度商业化的浮夸叙事。

三、教学重难点与化解策略

（一）教学重点

1.美食数据字段化与元数据模型设计。

2.基于数据透视的美食特征关系图谱构建。

3.利用提示工程调用本地大模型生成个性化网页描述文本及代码片段。

（二）教学难点

1.从非结构化文本信息中提炼结构化字段，并建立字段间的语义关联。

2.理解大模型生成内容的概率本质，建立“AI生成—人工校验—审美增强”的人机协作工作流。

（三）难点突破路径

采用“认知支架—工具中介—社会建构”三维突破：提供“美食元数据设计九宫格”思维支架，将抽象建模转化为填空式思考；引入“DSL查询生成器”半自动化工具，降低复杂语法的认知负荷；组织“提示词拍卖会”活动，通过同伴互评优化与AI的对话策略。

四、教学环境与资源准备

（一）环境配置

学生机房需具备互联网访问权限，教师机安装Ollama开源框架并预先拉取轻量级模型（如qwen2.5:7b或yi:6b），建立局域网内模型服务共享端点。学生机预装VSCodium编辑器并集成LiveServer插件，配备Markdown编辑器（Typora/Mark）。准备数据可视化公共账号或本地部署的RawGraphs桌面版。

（二）资源支架

1.数字学材：项目式学习任务单《美食文化数字叙事策划书》.docx。

2.半成品素材：含有语义化HTML5框架的空白网页模板、含脏数据的班级美食调研表.xlsx。

3.图式工具：菜系-技法-味型三元关系图谱空白画布、元数据设计参考范例（唐诗资源库字段映射）。

4.伦理工具箱：素材引用声明模板、AI生成内容免责声明范例。

五、教学实施过程（四学时进阶）

一、课时一：从灶火到字段——美食信息的数据化建模

（一）认知冲突导入：数据能煮出什么味道

上课伊始，教师在大屏幕并置呈现两则美食分享作品：一则为图文并茂的散文式网页，情真意切但信息零散；另一则为基于真实调研数据的“校园周边面馆风味分析仪表板”，包含价格区间、等待时长、汤底类型分布等交互式图表。教师设问：“哪一则分享让你对这碗面产生了‘确定性’的认知？数据是否剥离了美食的温度，还是赋予了我们新的洞察工具？”学生在静思与自由辩论中逐渐明晰：数据不是情感的敌人，而是精准传递群体经验的语法。

（二）项目启动与角色赋予

教师宣布本课核心驱动问题：如何为即将到来的校园美食节设计一份“不仅好看，而且有据可查”的交互式美食推荐网页，使外校来宾在三十秒内迅速建立起对本地饮食文化的结构性认知？各小组正式受聘为“美食数据新闻编辑部”，成员分别担任数据记者（负责信息采集与信源核实）、字段架构师（负责元数据模型设计）、可视化工程师（负责图表转化）、前端叙事师（负责网页语义呈现）。角色实行轮换制，确保每人经历完整的数据链。

（三）关键建构活动：给美食做一次CT扫描

学生以小组为单位，从“记录我的美食”课时所积累的Markdown文档中提取核心描述信息。教师引导学生抛弃“作文思维”，转向“字段思维”。教师展示反例：“古蔺麻辣鸡麻辣鲜香，皮脆肉嫩”这是形容词堆砌；随后展示正例，将这句话拆解为实体-属性-值三元组：菜品名称=“古蔺麻辣鸡”；所属菜系=“川菜-小河帮”；核心味型=“麻辣-复合型”；主料=“土鸡”；烹饪技法=“卤煮+淋油”；口感特征=“皮脆度0.9，肉质嫩度0.85”。学生骤然发现，一句感性的赞美可以坍缩为一组精确的测量数据。各组随即针对本组选定的美食主题（如自贡冷吃兔、宜宾燃面、乐山钵钵鸡），在任务单上绘制“美食信息字段图谱”，至少抽象出八个以上具有分析价值的字段，包括定量字段（价格区间、制作时长）与定性分类字段（食用场景、情感标签）。

（四）元数据模型的形式化表达

在字段梳理基础上，教师引入“元数据”概念，类比图书馆的索书号与电商平台的商品SKU。学生以小组为单位，使用JSONSchema语法，将刚才的字段图谱转化为机器可读的结构化描述文档。这是本课时认知负荷最高的环节。教师提供脚手架：一份简化版的“唐诗资源库元数据定义”作为类比样例-7。学生参照样例，开始定义“菜品的唯一标识符”“允许的味型取值列表”“烹饪技法的受控词表”。当学生亲手写下“味型：{类型：字符串，枚举：[麻辣，酸辣，甜酸，咸鲜，酱香，烟熏……]}”时，对“数据标准化”的理解便从抽象概念落地为指尖的代码实践。

（五）课时小结与形成性评价

各字段架构师使用“一分钟电梯演讲”形式，向全班介绍本组元数据模型中最具巧思的一个自定义字段。教师收集各组JSONSchema初稿，导入预设的校验工具进行语法检查，发布至班级共享知识库，作为第二课时的输入资产。

二、课时二：冷眼观馔——数据透视与关联发现

（一）回顾与联结

上课伊始，各组回顾昨日的元数据模型。教师提出新挑战：“如果我们要从全班十余道菜品中，快速找到与‘牙签牛肉’味型最接近的三道小吃，你的元数据模型是否支持这种查询？”问题直指元数据设计的终极目的——支持高效的检索与关联分析。

（二）工具介入：从奥运排名争议到数据透视伦理

教师展示教材第64页经典案例：不同国家基于金牌总数、奖牌总数、人均奖牌数等不同统计口径，得出截然不同的奥运排名-7。这一案例在此处的功能不仅是激发兴趣，更是进行数据素养教育的关键锚点。学生讨论后达成共识：统计方法本身不中立，每一种数据透视视角都隐含设计者的价值取向。继而迁移至美食场景：若要推荐“最受欢迎夜宵”，是以“单店销量”排序，以“复购率”排序，还是以“社交媒体话题度”排序？这一讨论并非追求标准答案，而是让学生体察到“数据叙事背后隐形的作者”。

（三）实践操演：菜谱数据的关系图谱构建

教师分发清洗后的“班级美食调研数据集”，该数据集融合了各组昨日提交的菜品元数据，并特意植入了部分冲突数据与缺失值。学生以小组为单位，登录数据可视化平台，执行三项阶梯式任务。

第一项，生成单变量描述统计图。学生拖拽“菜系”字段至画布，柱状图即刻呈现川菜、湘菜、粤菜在本班的占比。教师提问：“为何粤菜在青少年群体中的即时偏好度低于川菜？这是味觉的胜利还是传播媒介的胜利？”引导学生从数据表象窥见文化传播规律。

第二项，构建双变量关联图谱。学生尝试建立“烹饪技法”与“平均制作时长”的关联，发现“蒸”与“炖”类菜品耗时显著高于“拌”与“熘”。更有小组创新性地将“情感标签”字段（如“治愈”“怀旧”“解压”）与“食材成本”字段关联，发现低成本食材（土豆、豆腐）反而高频关联正向情绪词汇，由此生成社会学假设：美食的慰藉感与物质稀缺性存在代际记忆关联。

第三项，开放性探索。学生利用关系图谱工具，以菜品为节点，以“共享主要食材”或“同属节庆食俗”为边，生成网状关联图-7。当“粽子”与“月饼”因“节令限定”属性被节点连线时，教室里响起了“原来如此”的惊叹——数据让学生看见了自己原本看不见的模式。

（四）嵌入AI：自然语言转查询语句

在生成复杂条件查询（如“找出所有烹饪时长小于20分钟且社交媒体提及率高于30%的川味小吃”）时，部分小组陷入DSL语法编写困境。教师适时演示AI工具辅助编程：在本地大模型对话窗口输入提示词——“请将我下面的需求翻译成适用于X平台的DSL查询语句，数据集字段包含菜品名、菜系、烹饪时长、提及率”，学生观察AI不仅输出了正确语法，还主动建议增加排序语句。此时教师刻意暂停，组织微型辩论：“AI帮我们写查询，我们是变聪明了还是变懒了？”学生逐渐领悟：AI替代的是字符串拼接的低阶劳动，而“提出正确的问题”“评估结果的合理性”仍是人类智能的核心疆域。

（五）课时收束

各组保存关系图谱为SVG矢量格式与交互式HTML片段，导出查询语句集，建立“数据洞察发现文档”。该文档将直接注入第三课时的网页叙事层，成为支撑观点的“证据链”。

三、课时三：驯龙高手——提示工程赋能创意表达

（一）双线并进：代码生成与文本生成

本课时面临双重产出需求：其一，将前序生成的Markdown美食文档转换为语义精美的HTML5页面；其二，为数据可视化图表撰写兼具科学性与文学性的解说词。若全部由学生手写，四十分钟远远不够；若全部粘贴，则沦为浅层的搬运工。因此，本课时的核心素养落点在于：建立与AI协同写作/编程的元认知监控能力。

（二）活动一：提示词拍卖会

教师宣布活动规则：各小组需为本组美食网页撰写一段“置于首页的英雄式宣传语”，但必须借助本地大模型生成。然而，直接输入“写一段宣传语”得到的结果平庸、空泛、充满套话。现在，每组拥有100个虚拟积分，可以对“更好的提示词”进行竞标。教师扮演提示词供应商，依次展示不同颗粒度的提示词及其产出结果。

第一档提示词（0积分）：“写一段关于钵钵鸡的宣传语”。产出：冷冰冰的菜品介绍。

第二档提示词（30积分）：“写一段关于乐山钵钵鸡的宣传语，面向大学生群体，突出社交属性”。产出：出现了“宿舍团建”“追剧搭档”等场景词。

第三档提示词（80积分）：“假设你是百年老店‘叶婆婆’的第四代传人，请为钵钵鸡写一段卷首语，要求融合红油秘方中‘三浸三提’的工艺细节，并隐喻一种青春期的等待与热烈”。产出：文学性与信息量兼备，甚至有学生被文本打动。

竞标过程实则是关于“如何向AI清晰描述创作意图”的社会建构学习。学生在惊叹与懊悔中习得提示词的核心语法：角色扮演+场景限定+风格指令+具体约束。

（三）活动二：语义化网页的AI结对编程

学生打开半成品HTML模板，该模板已预设header、main、article、section等语义区块，但内部为空。教师引导学生运用刚才习得的提示词技巧，分区块请求AI生成HTML结构及内嵌样式。但关键约束在于：不得全盘接受，必须进行“人肉代码审查”。

教师分发“代码审查清单”：1.AI生成的标题层级是否合理？有无跳过h1直接使用h3？2.图片alt属性是否为空？是否描述了图片内容而非文件名？3.列表是使用ul还是ol？语义是否符合？4.内联样式是否过多？能否抽象为class？学生在审查过程中，频繁与AI进行对话：“请将这里的div换成article”“这个class命名不够语义化，请改为chef-profile”。此时，AI从答案提供者降格为实习助理，人类学生则升维为技术主管、架构审核师。

（四）活动三：图说——为图表注入叙事

网页中嵌入的静态柱状图与关系图谱尚缺乏文字阐释。学生面临“看图说话”的诱惑——简单复述“川菜最多，占比40%”。教师展示高水平数据新闻范例，揭示其共性：不止于描述“是什么”，更试图解释“为什么”，并指向“那又怎样”。学生返回AI对话界面，输入增强型提示词：“你是美食专栏作家。请根据以下数据，撰写一段200字左右的微评论，分析为何‘锅气’类菜品（小炒、爆炒）在15-18岁群体中的偏好度显著高于‘炖煨’类菜品。请从时间感知、视觉冲击、叛逆心理三个维度展开。”AI生成初稿后，学生手动修改，将过于早熟的成人化表达置换为少年视角的本真语言。

（五）课时产出

至此，每个小组的网页文件夹已包含：基于元数据生成的菜品信息卡片区、基于数据透视生成的交互式关系图谱区、基于提示工程生成的文化叙事文本区、以及基于AI结对编程优化后的语义化HTML/CSS文件。技术不再是孤立的技能点，而是编织成一张有意义的网。

四、课时四：庙堂与街巷——发布、评议与文化反思

（一）局域网发布与沉浸式观展

本课时将学生机切换至局域网模式，利用LiveServer建立临时Web服务器。各小组将网页项目部署至本机端口，通过班级导航页实现互访。教师关闭大屏幕，将课堂控制权交还给学生。课堂转型为“中华传统美食数字创新博览会”，学生离开座位，手持平板电脑或移动终端，以“游客”身份穿行于各个小组的数字展位之间。

（二）STW三步评鉴法

为规避低效、无焦点的泛泛赞美，教师引入结构化的同伴评鉴流程。每位学生需在浏览过程中至少为三个小组填写数字评鉴卡，遵循STW框架：

S（见-See）：客观描述你在这张网页中看到的一个具体技术处理。例如：“我看到你们为每一张美食图片都添加了懒加载属性。”

T（思-Think）：推断创作者的设计意图。例如：“我猜你们是想在保证高清画质的同时不影响首屏加载速度。”

W（问-Wonder）：提出一个建设性的好奇或建议。例如：“我在想，如果能把菜系分布柱状图的配色改为与当地土壤或植被色调关联，会不会更有地域叙事感？”

这一框架将漫无目的的“逛展”转化为深度的同理心揣摩与专业对话，迫使评鉴者调用课程所学概念进行精准指认。

（三）圆桌思辨：分享的边界与责任

当学生沉浸在技术实现与创意呈现的成就感中时，教师投下一枚思辨的石子。屏幕上并置呈现两则材料：一则为本班某小组网页中高清精美的“李庄白肉”刀工过程图，另一则为该图片未经授权的原始来源——某美食博主的摄影作品。刚刚还热闹非凡的教室瞬时寂静。

教师未直接进行说教，而是启动“道德仲裁庭”活动。各小组化身大法官庭，对“在班级内部学习场景中未标注引用来源”是否构成侵权进行模拟合议。学生在援引《信息网络传播权保护条例》、辨析“合理使用”范畴的过程中，自主建构起信息社会责任的内化认知。最终，全班无异议通过决议：所有网页在页脚显著位置增设“内容声明”区块，采用CCBY-NC4.0协议声明共享方式，逐一标注图文素材的数字指纹与作者信息。

以此为契机，教师将思辨引向更深层：当我们向世界“分享”美食，我们究竟在分享什么？是炫耀猎奇的味觉冒险，还是传递一方水土的组织经验？学生逐渐意识到，本地大模型之所以能生成关于“古蔺麻辣鸡”的妥帖描述，是因为前人在互联网留下了海量的文化语料。分享不是单方面给予，而是对文化公共品的反哺与续写。

（四）总结升维：从作品到产品，从作业到生命实践

课程终末，教师不再总结知识点，而是呈现一份特别的“课后延展菜单”。这不是烹饪食谱，而是数字行动的路线图：1.将本课构建的“美食资源元数据模型”提交至学校数据中心，申请成为下届新生信息科技课的真实数据集。2.使用本课掌握的提示工程技术，为校园食堂每周菜谱生成营养学解读与饮食文化小贴士，投送至校内电子班牌。3.与历史、地理教研组合作，将“美食数字故事页”的开发范式迁移至“茶马古道商帮会馆分布”“三线建设时期厂矿饮食融合”等乡土研究课题。

至此，网页不再是网页，而是学生介入真实世界、参与文化存续的数字行动。四十分钟的课时结束了，但由数据驱动、AI赋能、伦理护航的数字化学习与创新，才刚刚开始在学生的生命经验中扎根。

六、差异化教学与支持策略

（一）认知负荷的动态调节

针对基础薄弱学生，提供“代码块填空卡”与“拖拽式元数据设计器”，剥离复杂的语法记忆负担，使其能集中精力于信息架构的逻辑关系。针对学有余力的高阶学习者，设置“彩蛋任务”：要求其在网页中嵌入微格式（S）标记，使美食介绍页能被搜索引擎以增强摘要形式呈现；或探索将本地大模型接入网页侧边栏，实现基于菜品知识的智能问答机器人。

（二）多元表征与可访问性

强调数字产品的无障碍设计。要求所有网页严格遵循WCAG2.1标准，包括但不限于：为所有非文本内容提供替代文本，确保前景色与背景色对比度达标，保证页面在键盘导航下的完整操作。这一规范不仅提升了作品质量，更是在技术实践中渗透了包容性设计的价值伦理。

七、教学评价设计

（一）过程性评价量规

摒弃笼统的“优秀”“良好”等级，采用基于证据的精准描述。量规聚焦三大维度：

证据丰沛度：网页中是否包含了由元数据生成的菜品信息卡片？是否至少有一幅由本组数据透视生成的可视化图表？图表与文字叙事是否形成互证关系？

人机协同度：是否在代码审查中发现并修正了AI生成的语义错误？提示词是否经历了至少两次迭代优化？能否在口头答辩中清晰描述自己向AI下达了什么指令以及为何修改？

伦理自觉度：