高中信息技术选修3《网站实现-网页创建与代码编写》教学设计

高中信息技术选修3《网站实现——网页创建与代码编写》教学设计【教材分析】本课选自教科版高中信息技术选修3《网络技术应用》第四章第三节"网站实现"的第一课时。本章内容处于整个选修3的核心位置，前面章节依次讲解了网络技术基础、因特网应用、网站规划与设计，本课是承上启下的关键环节。学生在前一课已经完成网站规划，明确了网站主题、栏目结构与素材准备，本课的任务是将规划蓝图转化为可运行的网页，即从"图纸"走向"建筑"。本节内容主要包括三部分：网站实现的基本过程、网页制作工具的选用，以及使用代码编写简单网页并完成超链接设置。教材以Todo清单方式引导学生逐步完成建站，体现了工程化思维。第一课时的教学重心落在网页创建、HTML基本结构认知、常用标记的使用和页面间超链接的实现上，为第二课时的网站调试与发布奠定基础。【学情分析】授课对象为高中一年级学生。学生在必修模块中已接触过信息集成的一般方法，具备一定的文档编辑和信息素养基础，但绝大多数学生从未接触过HTML代码，对"代码"存在畏惧心理，认为写代码是专业人员的事情。与此同时，学生日常频繁使用各类网站，对网页有直观的感性认识，对"自己做一个网站"有较强兴趣和成就感期待。学生之间的计算机操作水平存在明显差异，部分学生打字速度较慢，部分学生逻辑思维能力较强但动手意识一般。教学中需要利用分层任务和小组协作化解差异，帮助每一名学生跨越从"浏览者"到"建设者"的心理门槛。【教学目标】一、知识与技能说出网站实现的一般流程，理解网页与网站的关系。认识HTML文件的基本结构，能够识别html、head、title、body等基本标记的作用。会使用记事本或代码编辑器创建网页，完成标题、段落、图片的插入，并能通过超链接标记实现页面之间的跳转。二、过程与方法经历"规划对照—创建首页—编写代码—调试预览—建立链接"的完整过程，体会软件开发中分析与实现的关系，发展计算思维。通过观察浏览器显示效果与代码之间的对应关系，学会对照排查错误的基本方法。三、情感态度与价值观在完成网页运行的过程中体验创造的成就感，克服对代码的畏难情绪，建立"我能写代码"的信心。养成规范书写代码、及时保存文件、有序管理素材的工程习惯，初步形成版权意识与网络责任意识。【教学重点与难点】教学重点：HTML文件基本结构的认识，常用标记（标题、段落、换行、图片）的使用，超链接标记的实现。教学难点：理解标记的成对出现及嵌套规则，相对路径的理解与图片、链接资源的正确定位。【教学策略】采用任务驱动教学法与合作探究相结合的方式。以一个真实情境任务贯穿全课，将大任务分解为四个递进的子任务。教师通过演示搭建脚手架，学生在实践中对照、模仿、改造，最终以小组形式完成一个包含两到三个页面的小型主题网站雏型。课堂中引入"对比观察法"，让学生始终在"代码—效果"的对照中理解概念，避免抽象讲解。【教学准备】教师准备：多媒体广播系统、提前制作好的演示站点（含首页及两个二级页面）、素材包（图片、文字）、任务导学案及分层任务单、常见错误案例库。学生准备：复习上节课完成的网站规划方案，确定小组分工（主编、代码员、素材员、测试员）。机房环境：每台计算机安装记事本或Notepad++、浏览器，建立统一的站点文件夹d:\mysite，下设images子文件夹。【教学过程】一、情境导入，点燃动机（约5分钟）上课伊始，教师通过广播展示两个页面：一个是某同学上节课绘制的"校园文化生活网"规划图（纸面草图），另一个是根据该规划图实际制作完成的网站首页。教师提问：左边是图纸，右边是房子，房子是怎么从图纸里"长"出来的？学生自由发言，观点集中在"用软件做出来""要写代码"上。教师顺势揭示课题：网站实现。明确告诉学生：今天这节课，每位同学都将用代码亲手把自己小组规划的网站做出首页，并且让页面之间能够点击跳转。教师强调：大家平时上网只是浏览者，今天开始大家是建设者。随后在浏览器地址栏演示输入本地文件路径打开一个网页，让学生看到网页原来就是本地的一个文件，消除网页的神秘感。板书课题：网站的实现——创建网页。二、温故知新，明确任务（约4分钟）教师带领学生快速回顾网站实现的一般流程：根据规划准备素材、创建网页、添加内容、建立页面之间的链接、调试检查。强调第一步"对照规划"的重要性：动手之前先想清楚做什么。各小组查收自己的素材包，核对图片和文字是否齐全，明确本课总任务：完成小组主题网站的首页和一个二级页面，并在两者之间建立双向超链接。教师将总任务拆解呈现在屏幕上：任务一，建立站点文件夹并放置素材；任务二，编写首页代码并预览；任务三，丰富页面内容（标题、段落、图片）；任务四，创建二级页面并实现双向链接。三、新知建构，认识HTML（约8分钟）教师用记事本现场创建一个文件，输入最简单的两行文字后保存为index.htm，再双击用浏览器打开，学生看到文字原样显示在浏览器窗口中。教师设问：记事本里的内容为什么变成了网页？引出网页的本质：网页是用HTML语言写出来的文本文件，浏览器负责解释并展示它。教师广播展示一段标准HTML骨架代码：以尖括号包围的html标记作为整个文档的根；head部分包含title标记，其中的文字显示在浏览器标题栏；body部分容纳所有在页面上可见的内容。讲解标记规律：绝大多数标记成对出现，形如左尖括号加标记名开始、加斜杠闭合；标记不分大小写但建议统一小写；标记之间可以嵌套但不能交叉。为了让学生直观记忆，教师用"括号要关门"的比喻说明标签成对出现，用"穿衣服先穿里面的再穿外面的"说明嵌套顺序。学生跟做：打开记事本，输入骨架结构，在body中输入小组网站名称，保存为index.htm到站点文件夹，再用浏览器打开验证。教师巡视，重点关注三类典型错误：文件扩展名被自动加上.txt导致无法被浏览器按网页解析；忘记输结束标记；使用了全角尖括号。发现共性问题即时广播纠错，让学生认识到一个字符的错误都会使页面"变脸"，从而养成严谨书写习惯。四、任务驱动，丰富页面（约12分钟）任务三以小组为单位开展，教师提供标记参考卡：标题标记h1至h6，数字越小字号越大；段落标记p，会自动分段；换行标记br为单标记；图片标记img，通过src属性指定图片路径；水平线标记hr。教师演示图片插入：在body中添加img标记，src属性指向images文件夹下的图片文件。强调相对路径的概念——路径是以当前网页文件为起点去找图片的"路线"，写成images反斜杠加文件名。广播展示两种典型错误：把图片绝对路径写成本机d盘路径、图片名含中文或空格，引导学生分析浏览器中图片无法显示（出现小叉图标）的原因。讲授素材命名规范：全部使用英文小写字母和数字。学生工作期间，教师巡视并对不同层次学生实施分层支持：基础较弱的小组提供半成品代码，要求补全缺失的结束标记和src路径；能力较强的小组在拓展任务卡引导下尝试设置图片的width和height属性、多个段落的排布。代码员负责输入，素材员负责提供文件路径，主编核对规划方案，测试员不断刷新浏览器检查效果，每五分钟轮换一次角色提示，确保全员参与。教师刻意在巡视中抓拍两类典型作品：一个是路径正确、图文并茂的页面，一个是图片加载失败的页面，作为下一环节对比讲评的素材。五、精讲难点，实现链接（约10分钟）教师展示两个已经做好的页面：首页index.htm和活动页huodong.htm，提问：一个网站只有一个页面行吗？怎样从首页"走"到活动页？引出超链接——网站的"门"和"路"。教师演示超链接标记：a标记配合href属性，href中写目标页面的文件名，标记中间的文字就是页面上可点击的链接文字。现场在首页插入指向huodong.htm的链接，浏览器演示点击后成功跳转，再演示在二级页面中加入返回首页的链接，完成双向互通。学生完成任务四：复制首页骨架另存为二级页面文件，修改标题和内容，在两个页面中互设链接。各组测试员逐一点击检查链接是否有效。教师巡视中重点纠正三类问题：href中的文件名与实际文件名大小写或拼写不一致；链接文字缺少或标记未闭合导致整段文字都变成链接；二级页面保存到了错误目录导致链接404。针对学有余力的小组给出挑战任务：研究怎样让链接在新窗口打开，怎样制作指向外部网址的链接，体会站内链接与站外链接的区别。六、展示评价，交流提升（约5分钟）邀请两个小组广播展示作品，从三个维度进行学生互评：页面内容与规划方案是否一致；图片、标题、段落排版是否合理；超链接能否正常往返。评价采用"两颗星一个建议"的方式：先说两点优点，再提一条改进建议。教师点评时着重肯定规范的代码书写和素材管理习惯，对图片版权问题作简短提醒：网络图片的使用要注意来源与授权，自己拍摄或标明出处的图片更稳妥。教师将各组作品简要归类，指出共性问题：有的组把全部内容堆在一行，忘记了段落和换行标记的作用；有的组页面标题仍是默认文字。让学生在对比中自我修正。七、课堂小结，延伸铺垫（约3分钟）师生共同梳理本课收获：网页的本质是HTML文本文件；标记成对出现、可嵌套；img和a两个标记分别完成了"放图片"和"开门路"两件大事；调试的方法是在浏览器里反复对照观察。教师用一句话概括：今天大家已经走完了从规划到首页的最难一步，代码并不可怕，它只是精确的语言。布置课后任务：完善小组网站首页美化和内容充实，思考"为什么我们的页面不够漂亮"，为下一课时的表格、样式与网站调试做好问题准备。预告后续将学习页面排版、网站检测与发布到因特网的方法。【板书设计】主板书分三栏：第一栏：网站实现的流程——对照规划→创建网页→添加内容→建立链接→调试检查。第二栏：HTML骨架——html包含head与body；title决定标题栏文字；页面内容写在body中。第三栏：常用标记——h1标题、p段落、br换行、img图片（src）、a链接（href）。【教学反思预设】本课