高中信息技术选修三《网页的制作》教学设计

高中信息技术选修三《网页的制作》教学设计一、教学设计的立意与总体思路本课是粤教版高中信息技术选修三《网络技术应用》第四章第三节的核心内容，承接前两节"网站建设规划"与"网页设计语言基础"，是学生从"会用网"走向"会做网"的关键一课。网页制作不是孤立的技术操练，而是信息表达、视觉传达与工程思维的综合实践。本设计以"为班级制作一个专题网页"为真实情境主线，让学生在完整的项目流程中掌握HTML基本结构、常用标签、图文混排与超链接设置，体会网页作为信息载体的组织逻辑。本课的基本主张是：技术学习必须发生在真实任务之中。与其让学生孤立地记忆标签含义，不如让他们在做中学、在错中悟。教学全程以"做一页真正能打开的网页"为底线目标，以"做一页结构清晰、美观得体的网页"为发展目标，分层要求，弹性达成。二、学情分析授课对象为高二年级选修本模块的学生。学生经过必修模块学习，已具备基本的计算机操作能力和网络使用经验，对网页有丰富的感性认识，但绝大多数学生从未接触过网页源代码，对"网页背后是什么"缺乏认知。部分学生在初中接触过简单的网页制作软件，存在"拖一拖就能做网页"的工具依赖心理，对代码方式存有畏难情绪。从思维特点看，高二学生抽象逻辑思维趋于成熟，能够接受HTML这种结构化的标记语言；他们表现欲强，乐于展示个性化作品，这为项目式教学提供了良好的动机基础。需要警惕的是，学生差异明显：部分学生打字速度慢、英文基础薄弱，容易在代码输入环节产生挫败感。因此本课提供半成品代码框架和标签速查单作为支架。三、教学目标（一）知识与技能目标学生能够说出网页的基本构成要素，理解HTML"标记语言"的本质特征，即通过成对标签描述文档结构与呈现效果。学生能够书写网页的基本骨架，正确使用标题、段落、换行、水平线、图像、超链接、列表等常用标签，理解标签属性的作用方式。学生能够独立制作一个包含文字、图片、列表和超链接的完整网页，并在浏览器中正确呈现。（二）过程与方法目标学生经历"需求分析—结构设计—代码实现—测试修改—发布交流"的完整网页制作流程，体会工程化的工作方法。通过对结构化文档的分解与重构，发展计算思维中的抽象与分解能力。通过调试错误页面，形成"观察现象—定位问题—修改验证"的排错方法。（三）情感态度与价值观目标学生在创作个性化网页的过程中体验技术创作的成就感，建立"我也能做网页"的自信心。在素材选用环节树立版权意识和网络信息责任意识，明确网页发布者应遵守的基本规范。在小组协作与作品互评中学会欣赏他人、理性表达。四、教学重点与难点教学重点是HTML文档的基本结构和常用标签的使用，尤其是图像标签与超链接标签中属性与属性值的写法。教学难点有两处：一是理解标签的嵌套关系与成对出现规则，避免因遗漏结束标签导致页面错乱；二是理解相对路径的概念，解决"图片在本地能显示、换个文件夹就丢失"这一初学者最常见的困惑。五、教学方法与课前准备教法采用任务驱动法、对比演示法与分层教学法相结合。学法突出自主探究、小组互助与作品互评。课前准备包括：机房安装记事本或轻量级代码编辑器与主流浏览器；教师准备一个精心设计的有三处典型错误的演示网页源文件，一个精美的成品网页范例，以及班级专题网页的素材包（含图片、文字资料，图片统一放在images文件夹中供相对路径教学使用）；为每位学生印制标签速查单；提前将学生按异质原则分为六人小组，组内明确组长、代码员、素材员、测试员等角色。六、教学过程（一）情境导入：揭开幕布看真相（约7分钟）上课伊始，教师投影展示一个界面精美的校园文化网页：有轮播图片、栏目导航、图文版块。提问：这样一个网页，它是怎样诞生的？学生凭经验会回答"用软件做的""用专业的工具"。教师不置可否，接着在浏览器中右键选择"查看网页源代码"，满屏的代码呈现在学生面前。教室里通常会出现一阵低声的惊叹。教师顺势引导：再华丽的网页，送到浏览器里的，其实只是这样一份纯文本文件。浏览器像一位翻译官，把这些带尖括号的记号翻译成我们看到的样子。今天我们要做的，就是学会写这种记号。教师明确本课任务：以小组为单位，为班级制作一个专题网页，主题可以是"我们的班级""家乡风物""我喜爱的运动"等，期末将择优发布到学校网站的班级空间。真实任务的宣布让学习目标立刻变得可感。（二）初识HTML：标签语言的规则（约8分钟）教师打开记事本，现场敲入一个最小化的网页骨架并保存为first.html，双击用浏览器打开，页面显示出一句"你好，我的第一个网页"。全过程中学生亲眼看到：从输入文字到网页呈现，中间没有任何神秘的环节。随后教师用板书归纳三条铁律。第一，标签由尖括号包裹，多数成对出现，开始标签与结束标签之间是内容，结束标签多一个斜杠。第二，文档有固定的骨架：最外层是html标签，内部先head后body，网页上看得见的所有内容都放在body里，标题放在head中的title标签里。第三，标签可以带属性，属性写在开始标签内，起到补充说明的作用。为帮助学生建立整体图景，教师在黑板上画出一棵"文档树"，把骨架画成树干与枝丫的样子，形象展示嵌套关系，为后面的排错埋下伏笔。随后请学生观察教师写好的骨架，找出哪一对标签在最外层、哪一对标签管标题，通过指认活动快速检验理解程度。（三）任务一：搭建网页骨架（约8分钟）学生打开记事本，参照骨架范例完成第一个文件：设置网页标题为小组选定的专题名称，正文第一行用一级标题标签写上专题名，第二行用段落标签写一句不超过三十字的开场白。教师巡视，重点关注两类错误：文件保存时忘了加.html后缀或存成了txt；标签未闭合。各组完成后，教师请一位学生演示自己页面的打开过程，并让全班齐读浏览器标题栏上的文字，验证title标签的作用。这一环节节奏要快，目的是让每个学生迅速获得"我做出了网页"的第一次成功体验，消除畏难心理。（四）任务二：图文混排与列表（约12分钟）骨架立起来之后，就要往里填充血肉。教师提出新的子任务：在正文中插入一段介绍文字、至少三行换行排版的项目清单、一张与主题相关的图片。图片插入是本课的第一个难点。教师在屏幕上同步演示：将小组选好的图片复制进站点文件夹的images子目录，然后在代码中使用图像标签，通过属性指定图片地址，并添加替代文字说明。演示时教师故意把路径写错——代码里写的是图片的真实文件名，但大小写写错一个字母，保存刷新后图片位置出现破碎的小图标。教师停下手，问：图片去哪儿了？学生七嘴八舌地猜测后，教师带着大家一起排查：文件名核对了吗？后缀核对了吗？图片和网页文件的位置关系核对了吗？最终发现问题出在大小写上，顺势强调：服务器对文件名是较真的，代码工作来不得半点马虎。这次刻意的"翻车"是教学预设，亲历错误比听十遍叮嘱更有效。替代文字属性的教学则链接到素养层面：这个属性平时看不见，但当图片加载失败时，当视障用户使用读屏软件浏览网页时，它就开口说话了。写不写替代文字，体现的是网页制作者对每一位访问者的尊重。学生随即在自己的页面中补全这一属性。列表部分提供有序和无序两种选择，由学生根据内容性质自主决定。学有余力的小组对照速查单尝试为标题设置对齐属性、为文字设置颜色，满足差异化需求。（五）任务三：超链接——网页的灵魂（约10分钟）教师抛出问题：一张网页如果只是孤零零的一页，它和一张打印纸有什么区别？学生很快意识到：网页的价值在于互联。教师引出本课的点睛之笔——超链接。子任务分两层。基础层：每位学生在页面底部添加一个指向门户网站或专题相关网站的链接，链接文字要求能清晰提示去向，例如"了解更多：中国solid科技馆官网"而非生硬的"点击这里"。提高层：小组协作，新建第二个页面文件，在两页之间实现互相链接，体验站内导航的雏形。教师演示时重点讲透链接标签的两个要素：属性里的地址决定"去哪儿"，标签包裹的文字决定"看到什么"。随后组织学生观察地址的两种写法——完整的网址指向远方，简短的路径指向身旁，引出绝对地址与相对地址的初步概念，但不展开理论研讨，留待后续课程深化。巡视指导时，教师特别关注引号配对和尖括号闭合这两类高频错误，引导学生养成"写完一对标签立刻检查"的习惯。测试员角色在此环节发挥作用：每组的作品必须由测试员在浏览器里逐一点击链接验证，组长确认无误后方可进入下一环节。（六）综合完善与作品汇展（约15分钟）各组整合三项任务的成果，对网页进行最后的修饰与调试。教师发放评价量表，量表从四个维度打分：结构完整性，即骨架标签齐全且嵌套正确；内容丰富度，即图文列表链接齐备且切合主题；技术规范性，即路径正确、页面无错误；创意与美观，即版面安排合理、有个性表达。每个维度分三档赋分。各组派代表用两分钟展示作品，讲清三个问题：我们的主题是什么，我们用了哪些标签，我们克服了哪个困难。其他小组依据量表打分并写一句话评语。教师选取两件代表性作品进行点评：一件是技术规范但内容单薄的，肯定其严谨，建议补充素材；一件是内容鲜活但存在标签嵌套错误的，现场打开源代码，带领全班用文档树的思路找到那对"站错了队"的标签并修正。点评的落点始终放在"结构思维"上，而非单纯表扬漂亮界面。展示过程中教师特别追问一个细节：各组的图片从哪里来？由此自然引出网络素材的版权话题，明确使用他人图片应当注明来源、教学用途之外谨慎传播，把信息社会责任教育落在具体的操作行为上。（七）课堂小结与延伸（约5分钟）教师带领学生回顾全课的知识线索：网页的本质是纯文本加标记；HTML用成对标签搭骨架、用属性定细节；图像让网页有声有色，链接让网页互联互通。随后用一张表格梳理本课用到的全部标签，让学生在速查单上打钩自评掌握情况。教师展示一个用代码写成的歌词滚动页面源文件，告诉学生：我们今天只推开了门缝，门后还有层叠样式表让网页变美，还有脚本让网页动起来。有兴趣的同学可以通过学校网站上的拓展资源继续探索，下节课我们将讨论怎样让网页穿上漂亮的外衣。七、板书设计主板书分三列呈现。左列写本课主干：网页本质—纯文本加标记；网页骨架—html、head、title、body。中列写常用标签清单：标题、段落、换行、水平线、图像、超链接、列表，并在图像与链接两项旁标注"属性决定细节"。右列写工作方法：写代码要闭合，查路径要较真，做完必测试。右下角预留一角，记录课堂巡视中发现的典型错误代码片段，供小结时对照讲评。八、作业设计基础作业：完善课堂作品，确保图片与链接全部有效，下节课前以小组为单位提交站点文件夹。要求文件夹结构清晰，图片统一存放。选做作业一：查阅标签速查单之外的一个表格标签，尝试把自己的本周课表做成网页表格，体会网页呈现结构化数据的优势。选做作业二：在确保不泄露个人隐私的前提下，为自己的网页写一段一百字左右的"作者的话"，思考网页发布者应当承担怎样的信息责任。九、教学评价设计评价采用过程性评价与终结性评价相结合。过程性评价依托课堂巡视记录单，记录每组在三个任务中的完成情况、典型错误与互助表现。终结性评价依托作品量表，由组内自评、组间互评与教师评定按三比三比四的比例合成。评价结果不仅给分，更给出针对性评语，写明"好在哪里、下一步可以怎样改进"，让评价成为学习的延伸。对打字慢、进度落后的学生，以完成骨架和基础图文为达标线，不以其网页是否华丽论高下，保护其学习信心。十、教学反思本课最大的优势在于真实任务的牵引力。当学生知道自己的作品有机会出现在学校网站上，代码的枯燥感明显减弱，组内互助自发形成。