高中一年级信息技术教学设计：网页鉴赏评价与HTML制作初步

高中一年级信息技术教学设计：网页鉴赏评价与HTML制作初步一、设计理念与课标依据本课面向高一年级学生，依据《普通高中信息技术课程标准（2017年版2020年修订）》中"信息系统与社会"模块及必修课程"数据与计算"相关学业要求展开设计。课程标准明确指出，高中生应能够根据解决问题的需要，选择恰当的网络工具获取、加工与交流信息，并对网络作品进行批判性鉴赏与评价。本课以"鉴赏—剖析—仿制—创作"为学习主线，将网页审美素养、信息甄别能力与HTML基础技能融为一体，力图在一至两个连续课时内让学生完成从"看热闹"到"看门道"、从"用网人"到"做网人"的第一次角色跨越。日照青山学校地处城乡接合部，学生信息素养差异明显：部分学生初中阶段接受过Scratch、Python启蒙，部分学生仅会用手机浏览短视频平台。本设计以此为学情出发点，采用分层任务单驱动教学，让每位学生都能在原有基础上获得看得见的成长。二、教材与教学内容分析本课内容处于高中信息技术必修模块与选择性必修模块的衔接地带。教材将"网页的鉴赏"放在"网页制作"之前，意图非常明确：先建立评价标准，再动手实践，避免学生陷入"会做页面、不懂好坏"的技术本位误区。教学内容可拆解为三层。第一层是网页构成要素的认知，包括标题、导航、正文区、多媒体元素、页脚版权信息等版面结构，以及色彩、字体、留白等视觉语言。第二层是网页评价维度的建构，即内容的真实性与时效性、结构的清晰度、交互的友好性、美感的协调性。第三层是HTML制作初步，涵盖HTML文档基本骨架、常用标签（标题、段落、图片、超链接、列表、表格）的书写，以及使用记事本或轻量编辑器保存并在浏览器中预览的完整流程。这三个层次不是并列关系，而是递进关系：鉴赏为制作提供标准，制作为鉴赏提供实证。三、学情分析授课对象为高一年级学生，年龄在十五至十六岁之间，具有以下特征。其一，经验充足而概念匮乏。学生日均上网时间长，对网页的"好用"与"难用"有直觉判断，但说不清判断依据，需要教师帮助其将模糊感受上升为可表述的评价语言。其二，对代码既好奇又畏惧。多数学生从未接触过标记语言，看到尖括号和英文单词容易产生"这是程序员的事"的距离感，需要用极低门槛的成功体验破除心理障碍。其三，审美偏好受流量平台影响深。部分学生认为弹窗、闪烁、高饱和配色等于"酷炫"，需要通过正反案例对比引导其理解克制与秩序之美。其四，动手能力分化。教学设计必须内置"基础任务人人达标、进阶任务量力挑战"的弹性结构。四、教学目标信息意识目标：能够辨识网页中信息要素的组织方式，意识到网页是设计者有意图的信息建构，而非中立的信息容器。计算思维目标：理解HTML"标记—结构—呈现"的工作逻辑，能将一个网页在头脑中拆解为标签嵌套的树状结构，初步建立"代码即结构"的抽象思维。数字化学习与创新目标：能借助评价量规对三个以上真实网站进行有依据的鉴赏评价，并独立制作一个包含标题、段落、图片、超链接的个人介绍网页。信息社会责任目标：在鉴赏环节关注网页信息的版权标注、来源可信度与广告诱导问题，在制作环节养成注明素材来源、尊重他人作品的习惯。五、教学重点与难点教学重点：网页鉴赏评价量规的建立与运用；HTML基本骨架与常用标签的书写。教学难点：让学生理解"内容与表现分离"的初步思想，即HTML负责结构而非美化；帮助学生从"凭感觉说好坏"过渡到"依标准作判断"。难点突破策略：用"毛坯房与精装修"作类比阐释结构与样式的分工；用"先量后评"的两轮鉴赏法强制学生先使用量规、后发表感想，以外在流程重塑内在思维习惯。六、教学准备硬件环境：机房联网电脑四十台，教师机配广播教学软件，投影与白板各一。软件环境：Windows记事本或Notepad++，Chrome浏览器，预先存放于学生机桌面的素材包（含校园风景图片三张、示例网页文件两个、任务单电子文档一份）。案例资源：精选五个对比性网站书签——一个政务网站（结构严谨但视觉朴素）、一个省级博物馆网站（视觉与内容俱佳）、一个过度广告的营销页面（反面案例）、一个国外极简风格获奖站点、本校校园网首页（学生熟悉的对象）。评价工具：自编的《网页鉴赏四维量规》，从"内容可信、结构清晰、视觉协调、交互友好"四个维度各设三档描述，印入任务单。七、教学过程（一）情境导入：一次"翻车"的网购经历（约6分钟）上课铃响，教师不打开课件，而是向学生讲述自己上周的经历：想为家里老人买一台血压计，搜索后点进一个页面花哨的商城，图片精美、好评如潮，付款后收到的却是三无产品。讲到这里停顿，问学生："回看那个页面，其实破绽很多。如果重来一次，你会检查哪些地方？"学生七嘴八舌：看有没有客服、看评论是不是真的、看有没有备案号。教师将学生的回答即兴板书在白板左侧，不归类、不评价，形成一团"原始经验"。随后教师亮明立场："大家刚才的判断都很敏锐，但都是碎片。今天这节课，我们要把这些碎片锻造成一把标准的尺子——学会像专家一样鉴赏网页；更进一步，我们还要拿起工具，亲手做一个属于自己的网页。看懂了，才做得出。"设计意图：以真实消费陷阱激活冲突，让学生意识到"不会鉴赏网页"是有现实代价的，学习动机由此从"老师要我学"转向"我自己要学"。白板上那团未经整理的板书，将在课末被学生亲手整理成体系，形成首尾呼应。（二）新知建构一：解剖一个网页（约10分钟）教师广播演示打开省级博物馆网站首页，用浏览器开发者工具中的元素高亮功能，逐块圈出页面区域：最上方是站标与全局导航，中部是焦点图轮播，下方是分栏的信息列表，最底部是版权与备案信息。每圈一处，请学生用日常语言描述"这块是干什么的"，教师随即给出规范术语：导航栏、横幅区、内容区、页脚。接着教师做关键一步：关闭网页样式（通过开发者工具禁用CSS），页面瞬间褪去颜色与排版，只剩朴素的文字和链接纵向排列。教室里通常会出现轻轻的惊叹声。教师追问："衣服脱掉，骨架还在。你们看到了什么？"学生发现内容仍在、层级仍在。教师顺势点破："刚才你们看到的漂亮外表是样式表画的妆，而这副骨架叫HTML。网页设计的第一个秘密是——结构是骨，样式是衣，内容是魂。"学生在任务单上完成"网页解剖图"填空：给一张打印的网页截图标注五个区域名称，并用一句话说明每个区域的功能。设计意图：用"卸妆"实验制造认知冲击，让"结构与表现分离"这一抽象原理获得直观经验的支撑，为后续理解HTML只做结构埋下伏笔。（三）新知建构二：锻造评价的尺子（约12分钟）教师将课前准备的四个网站书签同时推送到学生机，宣布任务："四人小组，用八分钟浏览这四个网站，先不要讨论，每位成员独立写下'我最喜欢哪个、最不喜欢哪个、为什么'，每句理由不超过二十字。"独立判断完成后，组内交流。教师巡视，有意收集两类典型发言：一类是"我就是觉得它好看"式的直觉判断，一类是"它的导航让我三秒就找到了展览信息"式的依据判断。全班分享环节，教师把两类发言并列呈现，提问："哪一类说法更能说服别人？差在哪儿？"学生自然得出"要有依据"的结论。教师趁势下发《网页鉴赏四维量规》，逐条解读四个维度：内容可信（有无来源、有无更新、有无夸大其词）、结构清晰（信息分区是否一目了然、层级深浅是否合适）、视觉协调（配色是否克制、字体是否统一、留白是否充分）、交互友好（链接是否有效、按钮是否易找、加载是否顺畅）。量规每一维度分"优秀、合格、待改进"三档，每档附一句可观察的描述，避免空泛打分。随后小组用量规重评刚才的四个网站，填写评价表，并推选一名记录员准备汇报。设计意图：先暴露直觉判断的局限，再提供工具，量规的介入时机恰逢学生的认知饥渴期。两轮评价（先感觉后轮规）形成鲜明对照，让"依标准作判断"的思维转变可感可见。（四）鉴赏汇报与思维提升（约8分钟）两组代表汇报。第一组给营销页面打出低分："内容不可信，找不到任何备案和联系方式，弹窗一直干扰阅读。"教师追问："但它色彩鲜艳、图片诱人，为什么仍是坏设计？"学生答："因为它服务于误导，不是服务于用户。"教师板书金句：美为内容服务，不为流量服务。第二组评价本校校园网："结构清楚，但首页新闻更新停在半年前，内容时效性不合格。"教师公开表扬这条评价的胆量与依据："对自己学校的网站也敢用量规，这才是真正的鉴赏者。"同时补充引导：评价是为了改进，不是为批评而批评。教师此时回到白板左侧导入环节的那团"原始经验"，邀请学生用四个维度给它们分类归档。学生发现，自己开课时的零散意见竟能全部归入量规框架，且量规还补充了他们没想到的角度（如加载速度、版权标注）。原先杂乱的板书被重新组织成四个整齐的词块。设计意图：首尾呼应的板书重构，让学生直观看到自己一节课的思维增量；对校园网的真实评价则把量规从纸面拉进生活，落实信息社会责任。（五）制作初步：写下人生第一行HTML（约18分钟）教师抛出问题过渡："我们已经会用专家的尺子量别人的作品，想不想造一个能被量的？"明确本环节任务：用记事本写一个"我的家乡日照"主题的个人网页，包含标题、自我介绍段落、一张图片、一个推荐链接。第一步，认识骨架。教师广播演示，在记事本中逐行敲出文档骨架，每敲一行用一句话解释：第一行声明文档类型，告诉浏览器"这是一场标准对话"；html标签是所有内容的最大容器，像房子的地基与外墙；head里放给浏览器看的信息，比如页面标题，它显示在浏览器标签页上而非页面中；body里放给访问者看的内容，刚才鉴赏过的标题、段落、图片都住在这里。学生同步跟写，教师强调三个纪律：标签成对出现，开闭呼应；英文半角输入，尖括号不能是中文符号；文件保存时后缀改为.html，编码选UTF8，否则中文会变乱码。第二步，填充内容。任务单给出五个必做标签的速查样例：一级标题、段落、图片、超链接、无序列表。学生将素材包中的日照海滨照片插入页面，并链接到博物馆官网作为"延伸阅读"。每完成一个标签，保存后双击文件在浏览器中刷新查看，即写即验。第三步，分层挑战。基础达标线：页面完整显示四大要素，无明显标签错误。进阶挑战A：用列表标签制作"日照三处必去景点"清单；进阶挑战B：尝试修改标题标签中的文字，观察浏览器标签页的同步变化，并在页面底部加一行版权注明"图片拍摄：某某某"。教师巡视，对共性错误集中广播纠正。预设高频错误有三：一是图片路径写错导致裂图，引导学生理解相对路径与文件位置的关系；二是忘记写结束标签，引导学生从上往下逐对检查"括号配对"；三是保存后未刷新浏览器，提醒"浏览器只认最后一次保存的结果"。对于提前完成的学生，教师口头抛出思考题："如果我想让标题变红、居中，该动骨架还是动衣裳？"为下一课CSS埋下钩子。设计意图：即写即验的反馈循环把抽象代码转化为即时可见的成果，快速积累成就感；分层任务保证零起点学生够得着底线、有基础学生摸得到高线；对错误类型的预判使辅导有的放矢。（六）作品展评与量规回用（约6分钟）随机抽取三份学生作品广播展示。评价规则有特别设计：必须用本课量规来说话——先说结构上达到了哪些要求，再提一条改进建议。学生发现评价自己同学的作品时，"交互友好"暂时用不上，因为还没有按钮，"视觉协调"也只能谈得有限，因为还没学样式。教师肯定这种发现："你们刚才其实预言了下两节课的内容。量规像地图，我们的学习是按图索骥。"设计意图：量规的回用使评价工具贯穿"鉴赏他人—评价同伴—规划自学"三个场景，实现工具的迁移；学生自发指出"还评不了的部分"，等于自己生成了后续学习的需求。（七）课堂小结与拓展延伸（约3分钟）教师用三句话收束全课："今天我们建立了两件家当：一把尺子——内容、结构、视觉、交互四维量规；一门手艺——HTML骨架与五个基本标签。鉴赏让我们不迷信屏幕上的光鲜，制作让我们不畏惧屏幕背后的代码。"布置课后任务：基础作业是完善课堂网页，至少修正一处课堂未解决的错误并写明排错过程；拓展作业是用四维量规评价一个自己常用的App内嵌网页，写成二百字短评，下节课前五分钟抽读。预习提示：浏览W3C相关入门教程，看看"CSS"三个字母背后藏着什么。八、板书设计主板书区自左至右分三栏。左栏：网页解剖图——导航、横幅、内容、页脚，配"结构是骨、样式是衣、内容是魂"。中栏：四维量规——内容可信、结构清晰、视觉协调、交互友好，此处即导入环节散板书的归宿。右栏：HTML骨架示意——声明、html、head、body的缩进层级图，下缀三个纪律"标签成对、半角输入、UTF8保存"。居中一行用彩粉笔书写：先学会看，再动手做。九、教学评价设计过程性评价占六成：任务单完成质量（解剖图、量规评价表）占两成，课堂作品是否达到四大要素底线占两成五，小组汇报与互评中的表达质量占一成五。终结性评价占四成：课后完善版网页作品，按量规改编的作品评分表打分，其中"排错过程记录"单独计分，权重高于页面美观度——这一权重设置向学生传递明确信号：本课珍视思维过程胜过装饰结果。评价主体多元：学生自评对照量规，组内互评聚焦建议的可操作性，教师评价聚焦思维增量。评价语言一律要求"有依据"，与课标倡导的素养落地方式保持一致。十、教学反思预案本课容量偏大，鉴赏与制作各占半壁江山，时间风险集中在制作环节。预案有二：若鉴赏汇报超时，压缩为两组汇报加教师点评，保证制作环节不