高中信息技术高一年级《网页制作（一）-民以食为天》教学设计

高中信息技术高一年级《网页制作（一）——民以食为天》教学设计一、设计理念与教学依据本课是浙教版高中信息技术必修模块《信息技术基础》第六章“网页的设计与发布”中的第二节，是学生第一次系统接触网页制作。课程标准对必修模块的要求落脚于“通过解决实际问题的过程，体验信息处理的基本方法，提升信息素养”。网页制作恰好是一个综合载体：它把前几章的文字处理、图像处理、信息获取与评价等知识收拢到一个真实任务中，又为学生打开了“做一名信息世界的作者而不仅是读者”的大门。本课选择“民以食为天”作为主题情境，理由有三。其一，饮食文化是学生每天置身其中却未必认真审视过的生活素材，门槛低、有话可说；其二，中华饮食文化本身蕴含地域、历史、健康的多重维度，天然适合作为网页内容组织的训练材料；其三，以“为班级美食文化节制作一张宣传网页”为主任务，能把表格布局、图片插入、超链接设置等技术点全部串起来，避免把软件操作教成菜单说明书。本设计的核心立场是：网页制作课的上位目标是表达与传播，技术只是表达的脚手架。因此整堂课以“作品意识”为纲，以“技术够用、设计走心”为度，让学生在有限课时内完成一张有主题、有结构、有审美的网页，而不是一份机械化跟练的操作手册。二、教材与学情分析教材6.2节以制作一个简单网页为目标，主要内容包括：网页的组成要素（标题、文字、图片、表格、超链接）、用表格进行页面布局、插入与设置图片、建立超链接、保存与预览网页。教材采用任务驱动写法，操作线索清晰，但示例内容与学生生活有一定距离，直接照搬容易让课堂滑向“看一步做一步”。授课对象为高一年级学生。他们在初中大多接触过简单的演示文稿制作，对复制粘贴、插入图片等基础操作并不陌生，但对“网页”这一媒介的工作原理——浏览器如何解释HTML文件、图片文件为何要与网页文件一同保存、相对路径为何物——几乎零认知。这一认知缺口恰恰是本课最有价值的生长点。同时，高一学生正处于审美意识快速觉醒期，他们对自己作品“好不好看”非常敏感，这种敏感可以成为驱动他们主动学习布局、配色与内容取舍的内在动力，教师应善加利用而非压制。学习难点预判有三：一是表格布局的思路，学生习惯“内容先行”，而网页制作要求“骨架先行”；二是图片路径问题，预览时图片显示为红叉是本课最常见的挫折点；三是为“把网页做得像样”，学生容易陷入装饰性元素的堆砌，偏离主题表达。三、教学目标信息意识层面：学生能够从“民以食为天”这一主题出发，辨析并筛选适合网页传播的饮食文化素材，体会信息组织方式对传播效果的影响。计算思维层面：学生能够用“先规划结构、再填充内容”的方法分解网页制作任务，能用表格结构图描述页面布局，理解文件与路径的对应关系。数字化学习与创新层面：学生能够综合运用文字格式化、图片插入与大小调整、表格属性设置、超链接创建等技术，独立或在协作中完成一张主题网页，并对作品进行有依据的评价与修改。信息社会责任层面：学生在选用网络图片与文字素材时初步建立版权与出处意识，在介绍饮食文化时传递健康饮食与传统文化的正向价值。四、教学重点与难点教学重点：用表格实现页面布局；图片的插入、缩放与对齐；超链接的创建。教学难点：布局思维的建立，即从“内容”到“结构”的抽象；图片失效问题的成因理解与自主排错。五、教学策略与方法本课拟用两课时连排共90分钟完成，采用“情境引领—任务驱动—分层递进—展示互评”的组织方式。教师讲授压缩在25分钟以内，其余时间交给学生动手。机房环境按4人异质分组，每组设一名操作能力较强的“技术委员”，承担组内小顾问角色，把教师的辅导压力部分转化为同伴互助。教学资源包提前下发到学生机桌面“民以食为天”文件夹，内含：分类整理好的图片素材约40张（注明来源）、文字素材片段若干、半成品网页一个（供排错环节使用）、评价量规一份。六、教学过程（一）情境导入：从“看”到“想做”（约8分钟）上课伊始，教师不打开软件，而是投影展示三张网页：第一张是纯文字堆叠的饮食介绍页，密密麻麻、毫无层次；第二张是结构清晰、图文得当的“杭州小笼包”介绍页；第三张是上一年学生制作的“食堂美食地图”获奖作品。教师只问两个问题：同样是介绍吃的，你愿意点开哪一张？为什么？学生会很快指出配色、图片、栏目划分、能点击跳转等差异。教师顺势把学生的口头表述板书提炼为四个关键词：标题醒目、图文结合、结构分区、可以跳转，并明确告知：这四件事，就是我们这节课要亲手做出来的东西。随后揭示任务：学校下月举办美食文化节，每个班要提交一张主题网页用于校园网展示，今天就从“民以食为天”做起。这一设计的用意在于让学习目标由学生自己说出口。教师随后用一分钟展示课程标准的对应表述：“能够运用恰当的工具加工信息并进行有效表达”，让学生明白这不是一次玩票，而是课程规定的正经学习。（二）新知建构一：认识网页的骨骼（约10分钟）教师打开浏览器，以第二张范例页为例，按下“查看网页源代码”，满屏的标签符号出现，教师只点一句话：“浏览器读的就是这种文字，我们今天的制作软件就是替我们写这些符号的翻译官。”这一步只为建立“网页本质是一个文件”的概念，不展开HTML语法。接着教师把范例页截图导入到电子白板，用方框把页面描出：最上面一条是标题区，中间左侧是图片、右侧是文字，下方三个并列栏目，最底一行是版权与链接。教师揭示：这张网页的内部，其实是一张看不见的表格。随后切换到制作软件的设计视图，把表格边框显示出来，与刚才的描框一一对应。此处给出本课第一个方法口诀：先搭骨架，再添血肉。教师发放“布局设计单”，要求每组先用铅笔在纸上画出自己网页的表格草图：打算分几行几列、每格放什么、标题放哪。五分钟完成，教师巡视中重点纠正两种典型倾向：一是格子切得过碎（超过12格的基本劝改），二是不留标题区。（三）新知建构二：动手制作主体页面（约25分钟）教师演示环节严格控制在8分钟，只演示三件事：新建网页并保存（强调先保存、再插图的顺序，保存路径为“民以食为天”文件夹）；插入表格并按草图调整行列与宽度百分比；在单元格中键入标题并设置字号与对齐。其余技术点不演示，改为任务卡片形式下放到各组，由学生带着问题去摸索，教师巡回点拨。任务按难度分三层下发。基础任务（人人必做）：按设计单完成页面骨架，输入网页标题“民以食为天——××组·××菜”，插入一张菜品图片并调整到合适大小，写一段不少于80字的介绍文字。进阶任务：为页面设置统一的背景色或淡雅的背景图，给图片添加简短的文字说明；在页面底部插入一条水平线与制作信息。挑战任务：在页面上再建一张小表格，呈现这道菜的热量、主要食材等数据，做到图文数据并茂。学生操作期间，教师手持记录单巡视，重点关注三件事并做即时标注：是否先保存后插图；表格边框粗细是否设为零以达到“隐形布局”效果（这是本课一个关键技术细节，教师发现学生页面出现难看边框时，引导其找到“边框粗细”属性并设为0）；文字与图片是否在单元格内合理对齐。“技术委员”在此阶段发挥作用：每组的小问题（如找不到某菜单）先组内解决，组内解决不了的举手求助。教师对共性问题实行“叫停两分钟”集体讲解，绝对不逐组重复同一句话。（四）难点突破：红叉的诞生与死亡（约12分钟）教师故意打开半成品网页文件夹，双击浏览，页面中的三张图片全部显示为红叉。学生窃笑之际，教师发问：图片明明昨天还在，今天为什么丢了？给学生两分钟讨论猜测。多数学生能猜到“图片被移动过”，但说不清机理。教师用白板画图讲解：网页文件里并不真正“装着”图片，它只记了一张写有图片住址的纸条；你把图片挪了家，纸条地址作废，浏览器自然找不到人。这就是相对路径的概念——用生活类比讲清即可，不必堆术语。随后教师当众排错：把图片文件放回正确位置，刷新，红叉复活成图。学生齐声“哦”的一声，是本课最值得珍惜的时刻。随即布置一分钟自查：各组把自己网页的图片文件与网页文件的存放位置核对一遍，并试验把网页整体复制到U盘后预览。通过这个小小的“搬家实验”，路径意识被真正种进学生心里，远胜十次口头强调。（五）新知建构三：让网页能“走出去”——超链接（约10分钟）教师展示范例页底部的“更多杭帮菜”链接，点击后跳转到一个饮食知识网站，提问：如果我们的网页和别的网页连起来，会发生什么？学生自然答出“连成一个网”。教师点题：这正是“万维网”三个字的来历，超链接就是网页的灵魂。操作教学分两类链接展开。第一类是外部链接：选中文字“中国十大菜系”，建立指向指定百科页面的链接，教师强调网址必须完整正确。第二类是锚点与文件间链接（作为分层内容）：学有余力的组，把自己组内两张网页互相链接，制作一个迷你“美食站”。部分组还会自发尝试邮件链接、图片链接，教师不拦，只提醒测试每一个链接的真实可达性。此处教师插入一句责任教育：链接通向哪里，等于你向读者推荐了什么。给学生三十秒思考“你会把读者引向什么地方”，再动手。技术背后的价值判断，往往就在这样一句轻放的追问里落地。（六）作品完善与展示互评（约18分钟）各组用最后的时间打磨作品，教师下发评价量规，四个维度各赋分：主题与内容（30分，信息是否准确、是否扣题、有无健康与文化视角）、结构与布局（25分，骨架是否清晰、图文是否协调）、技术实现（25分，图片正常显示、链接有效、无明显操作失误）、规范与责任（20分，素材注明出处、页面整洁无错字）。互评采用“画廊漫步”方式：各组上传作品至教师机共享目录，学生离开座位自由浏览，给除本组外的两个组贴上便利贴评语，必须写“一星一点赞，一愿一建议”，禁止只写“很好”“不错”。教师挑选两类作品当众点评：一份技术娴熟但内容空泛的，一份技术朴素但内容真诚的，明确告诉学生：后者更接近好作品的本义——技术是船，内容才是要渡的河。点评中教师针对性回扣开头的四个关键词，让学生看到自己一节课与起点之间的距离，形成真实可见的成就感。（七）课堂小结与延伸（约7分钟）小结不搞教师独白。教师只抛出三个问题，请学生接龙回答：做网页为什么要先画格子？图片为什么会丢？链接为什么被称为网页的灵魂？三个回答恰好把本课三个核心概念串成知识链。教师板书画出这张简易知识网，并预告下节内容：今天每人只有一张网页，下次我们要让一个班的网页彼此相连、能导航跳转，还要让页面“美得有章法”——表格布局将升级为更系统的版面设计，并引入网站的规划与链接结构图。课后分层任务：基础层，修订本组网页并存入班级作品集；提高层，拍摄一张真实的家常菜照片，替换自己的网页图片，体验“素材从生活里来”；拓展层，阅读软件帮助文档，尝试为图片添加“停一句说明”的悬停提示效果。七、板书设计板书以思维导图式结构呈现：中心为“民以食为天·网页作品”，伸出四根主枝——“结构看表格（骨架先行）”“图文有取舍（内容为王）”“路径要记牢（文件住址）”“链接连天下（网页灵魂）”，每根主枝下标注关键技术动作：插入表格、边框设为0、先存后插、相对路径、创建超链接、测试链接。板书随课生成，不写满、写成网。八、教学评价设计本课评价实行“三三制”：三主体——学生自评、组间互评、教师点评；三时点——布局设计单的纸上诊断、操作过程中的巡视记录、终作品的量规评定；三指向——技术达成度、表达完成度、责任规范度。巡视记录单上教师为每组记录的“先保存了吗、红叉出现过吗、链接测试了吗”三项过程数据，最终按40%的权重计入作品总评，意在传递一个信号：过程里的好习惯，比临时的漂亮更值钱。九、教学反思（预设）本设计最大的风险在于时间：90分钟