高中二年级信息技术选修3教学设计：网站的制作与调试-班级风采展示站第一课时

高中二年级信息技术选修3教学设计：网站的制作与调试——班级风采展示站第一课时一、教学设计的起点：对教材与学情的再认识本节课选自浙教版高中信息技术选修3《网络技术应用》第六章第二节“网站的制作与调试”，是本模块章节的实践核心。教材在前一节已经完成了网站规划、栏目设计、素材准备的铺垫，学生手中应当持有一份完整的网站规划书。本节课的任务，就是把纸面规划转化为真实可浏览的网页作品，并在制作过程中初步建立调试意识。教材的编排逻辑非常清晰：先建立站点，再制作首页，然后制作子页面并建立链接，最后预览检查。但在实际课堂中，如果完全按照软件操作手册式的步骤推进，学生容易陷入“跟着做一遍，关掉电脑全忘掉”的困境。因此本课在设计时做了三处重构。第一处重构是任务情境的真实化。放弃教材中泛泛的“个人网站”主题，改为“班级风采展示站”，并要求网站最终接受全班同学的真实浏览与评价。真实受众的存在，会从根本上改变学生对待排版、配色和链接检查的态度。第二处重构是调试环节的前置化。传统课堂把调试放在制作完成之后的最后五分钟，结果是学生来不及体验“出错—定位—修复”的完整过程。本课刻意把故障案例穿插在制作流程之中，让学生在犯错成本最低的时候建立调试的基本方法。第三处重构是作品评价的量规化。不再使用“做得很好”“很漂亮”这类模糊语言，而是由师生共同制定一张包含结构、内容、技术、创意四个维度的评价量规，让评价成为学习的延伸。就学情而言，授课对象为高二年级学生。他们已经在必修模块中接触过信息的加工与表达，多数学生使用过文字处理软件，对复制、粘贴、插入图片等操作不存在障碍，个别学生在初中阶段接触过简易网页制作工具。但是，学生普遍存在三个薄弱点：一是缺乏“站点”的概念，习惯把网页理解为单个文件，不理解相对路径与文件管理的意义；二是对HTML背后的逻辑没有感知，完全依赖可视化视图，一旦页面显示异常就束手无策；三是时间观念薄弱，容易在某一个装饰性细节上消耗过多时间，导致核心任务无法完成。本课的教学策略必须针对这三点给出回应。二、教学目标的确立依据课程标准对“网络技术应用”模块的要求，结合本节课的具体内容，教学目标从三个维度设定。知识与技能维度：学生能够说出网站、网页、主页三者之间的关系；能够在Dreamweaver或同类工具中正确建立本地站点；能够使用表格或层完成首页的基本布局，插入文字、图片并设置属性；能够在页面之间建立正确的超级链接；能够说明至少三种常见网页故障的成因与排查思路。过程与方法维度：学生经历“依照规划图纸施工”的完整过程，体会工程化制作中规划先行的意义；在教师预设的三次故障情境中，初步掌握“观察现象—提出假设—缩小范围—验证修复”的调试方法；通过组内互查与量规自评，学会用结构化的标准审视作品。情感态度与价值观维度：通过为班级制作展示网站这一真实任务，增强对集体的责任感与归属感；在调试受挫与修复成功的过程中，体验技术劳动的艰辛与成就感；在文件命名、路径管理、素材版权等细节中，养成规范、严谨、尊重知识产权的技术行为习惯。教学重点：站点的建立与文件管理；首页的布局制作与元素插入；页面间超链接的正确建立。教学难点：理解站点根目录与相对路径的关系；调试思路的形成而非具体故障的记忆。三、教学准备与资源配置硬件方面，机房保证每人一机，教师机安装广播教学软件，投影设备正常。所有学生机预装DreamweaverCS6或功能相当的可视化网页编辑工具，并预装至少两种浏览器用于对比预览。资源方面，教师课前完成四件准备工作。其一，将校门照片、运动会照片、班级合影、教师寄语文字稿等素材按“images”“text”两个文件夹分类打包，放置于学生机D盘根目录，图片均已压缩至适合网页使用的尺寸。其二，制作三个“带病”的微型网页案例：案例一为图片显示为红叉的页面，案例二为点击链接弹出“无法找到网页”的页面，案例三为在某浏览器中布局错乱的页面。其三，打印并剪裁好每个小组的“施工任务卡”，卡上列出本节课必须完成的最小任务集与可选挑战项。其四，设计好课堂评价量规初稿，留出让学生补充修改的空白栏。分组方面，两人一组，按操作能力强弱搭配，组内角色分为“主操作员”与“监理员”，监理员负责对照任务卡核验收尾、记录遇到的问题，两课时轮换。本设计覆盖第一课时的完整45分钟。四、教学过程（一）导入：从一次真实的浏览事故说起（5分钟）上课铃响，教师不打开任何课件，直接在投影上打开一个提前准备好的网页，称其为“隔壁班同学做的班级网站初稿”。页面打开后，首页大图是一个红色的叉，点击“班级相册”导航，浏览器提示无法显示该页面。教师提问：如果你是访客，此刻你对这个班级的第一印象是什么？学生哄笑之余会给出“不专业”“没检查就发出来了”之类的回答。教师顺势引导：这个页面里的每一个错误，都是你们今天极有可能亲手犯下的。今天的任务有两个，一是把我们班的网站首页做出来，二是学会让它不丢这种人。教师板书课题——网站的制作与调试，并在课题下方写下本课的两条主线：建站点，做首页；出故障，会排查。此环节的设计意图是：用一次“事故”替代惯常的“欣赏优秀作品”导入。展示完美作品只会让学生产生距离感与畏难情绪，而展示翻车现场能瞬间激活学生的纠错本能，并且自然地把“调试”这个本课的隐性主角提前推上前台。（二）概念厘清：为什么先做站点，再做网页（8分钟）教师提出一个看似简单的问题：一个网站和一个网页，差别在哪里？多数学生会说网站是很多网页。教师追问：很多网页随便堆在一起，就是网站吗？教师打开两个文件夹作对比：一个文件夹里五十个文件混杂存放，图片、网页、压缩包全部平铺；另一个文件夹结构清晰，根目录下是首页文件与images、css、pages三个子文件夹。教师讲解：网站不是文件的堆积，而是有组织的文件结构。这个组织的根，就是站点根目录。网页中所有图片、链接的地址，都是以这个根为起点计算的相对地址。一旦某个文件的存放位置越出了根目录，或者文件被随手挪动，相对地址就会断裂——刚才那个红叉，九成就是这个原因。随后教师演示建立站点的完整操作：启动Dreamweaver，选择“站点—新建站点”，命名为“classweb”，指定本地根文件夹为D盘下事先建好的“myweb”文件夹。演示过程中教师特别强调三个动作：站点名可以使用英文或拼音，避免部分服务器对中文名的兼容问题；根文件夹的位置由自己掌控，绝不允许散落在桌面；今后所有网页、图片一律先存进站点文件夹，再谈使用。学生跟随操作，建立各自的站点，并把教师下发的素材包中的图片文件夹整体复制进自己的根目录。监理员负责检查组员：打开站点面板，确认树状结构中出现images文件夹，确认根目录下没有游离文件。教师巡视中收集典型问题。此阶段最常见的错误是学生直接在桌面上双击图片“预览”之后，误以为图片已经“放进网站”。对此教师不做个别纠正，而是记下典型，留待调试环节公开剖析。此环节的设计意图是：站点概念是本课一切后续操作的地基，也是本模块会考与学业评价中的高频考点。用“文件堆”与“文件夹树”的实物对比，把抽象的站点概念转化为可见的目录结构；把相对路径的讲解压缩到最小必要量，只讲“以根目录为起点的地址”，其余留给操作时体会。（三）主干任务：班级首页的布局与制作（17分钟）教师发放施工任务卡，卡上列出最小任务集与两个可选挑战项。最小任务集包括：新建首页并以index.htm命名保存在站点根目录；用三行两列的表格搭建首页布局，第一行为通栏放置横幅与站名，第二行左侧为导航、右侧为正文，第三行为版权信息行；在正文区插入一段不少于五十字的班级介绍文字与一张班级合影，图片宽度设置为400像素；网页标题设置为“XX班班级风采”。挑战项为：为导航文字设置悬停变色效果；为页面设置背景色并使布局居中。教师进行不超过四分钟的集中演示，只演示两个关键操作：其一是插入表格时在对话框中设定行数、列数、宽度为760像素、边框粗细先设为1以便观察结构，后续再改为0；其二是插入图片时，注意观察“插入”对话框中的文件来源路径是否位于站点根目录之内，凡是路径指向其他盘符位置的，立即停止并改用“复制进站点再插入”的方式。教师在此明确一条课堂纪律式的技术规则：所有素材，进门先用。演示结束，学生开始制作，教师转入巡视与个别辅导。巡视中教师按预设节奏做三件事。第一圈快速扫描，确认每台机器都已正确新建页面并保存为index.htm，对保存位置错误的学生当场纠正——把网页错存在桌面是本环节最高发的失误，一旦发现，要求其把文件移入根目录，并观察站点面板中结构的变化，让错误本身成为理解站点管理的教具。第二圈聚焦布局质量。针对学生常见的两类问题进行点拨。一类是单元格中文字顶格、毫无间距，引导其在表格属性中设置单元格边距与间距；另一类是把大段文字直接灌入页面、不加任何排版，提醒其回顾上学期字处理中关于段落、对齐的行文规范在网页中同样成立，并顺带指出：网页排版与Word排版的本质差别在于，Word的版面是写给打印机看的，网页的版面是写给千变万化的屏幕看的，所以表格在这里承担的是骨架而非装饰。第三圈关注进度分化。对已经完成最小任务集的小组，立即发放挑战项并追加一个问题：你现在这个首页，如果明天要加一个“班级新闻”子页面，你打算从页面的哪个位置把访客引过去？这个问题为下一环节的超链接教学埋下伏笔，防止先完成的学生进入无目的的装饰时间。监理员在此环节同步填写施工记录单：本组完成到哪一步，卡在哪一步，报错信息是什么。这份记录单是本课过程性评价的直接依据。此环节的设计意图是：用任务卡实现分层教学，用限定最小任务集保证全体达到底线目标；教师演示严格控制在四分钟内，把课堂时间的主体还给学生；三次巡视各有明确职能，避免巡视流于“走来走去”，并用追加提问消化学生的进度差异。（四）故障诊所：调试方法的教学化生成（10分钟）这是本课区别于常规操作课的核心环节。教师通过广播宣布：全体停手，诊所开门。第一号病例：教师调出课前准备的案例一，页面中图片位置显示红叉。教师不公布答案，而是引导全班走一遍诊断流程。第一步观察现象：文字正常，只有图片丢失。第二步提出假设：图片文件丢了，或者地址写错了。第三步缩小范围：右键查看图片属性，读出浏览器试图寻找的地址，再回到站点文件夹中逐字比对。此时学生会发现，地址中写着“file:///C:/Users/Administrator/Desktop/heying.jpg”，而该图片实际存放在站点images文件夹中。成因揭晓：插入图片时引用了桌面上的原图，之后桌面文件被移动，链接即告断裂。教师收束：这就是刚才反复强调“复制进站点再插入”的原因。修复方法是删除占位图片，重新从站点内插入，并强调修复之后必须在浏览器中刷新验证，而不是在设计视图里看一眼就宣布完工。第二号病例：链接点开报“无法找到网页”。诊断流程复用一遍：观察现象，提出假设，检查链接目标文件是否存在、文件名是否与链接地址逐字一致。学生很快定位到一处大小写不一致：链接写的是“News.htm”，实际文件是“news.htm”。教师借此讲清楚一个道理：部分Web服务器对文件名大小写严格区分，本地测试正常不等于上传后正常。规范的做法是全站统一使用小写英文命名文件。这一条作为课堂生成性结论，被学生补充记录进组内的施工规范清单。第三号病例投石问路而不深挖：同一页面，在两个浏览器中一个正常、一个错位。教师只问一句：这说明错误一定出在你的文件里吗？学生讨论后教师点明：不同的浏览器对同一套网页代码的解读存在细微差别，这称为浏览器兼容性问题，是网页调试中真实存在的一类问题。现阶段的要求是先做到页面在主流浏览器中基本正常，深层原理将在后续课程结合层叠样式表展开。三个病例处理完毕，教师在黑板上把刚才的操作提炼为一张调试口诀：先看现象，再猜原因；由面到点，缩小包围；修复之后，定要验证。并要求各组立刻用两分钟，对照口诀互查本组首页：图片能否显示、文件是否全部在站点之内、命名是否规范。教师巡视发现，约三分之一的小组查出了自己尚未察觉的隐患，其中保存位置错误与图片未入站两类问题占绝大多数——这正是导入环节那场“事故”在课堂中的真实重演，教学闭环就此扣合。此环节的设计意图是：调试能力无法通过灌输获得，只能借助结构化的故障案例习得。把故障做成“病例”，把排查做成“会诊”，把方法凝成“口诀”，学生在亲历完整的诊断流程后，获得的是可迁移的排错思维，而不是零散的软件技巧。互查环节顺带达成教学目标中调试意识的初建。（五）课堂小结与作业延伸（5分钟）教师回到投影，展示本课开始时的那张施工任务卡，逐条勾画完成度，并请两组监理员用一句话汇报本组今天最大的收获与最大的坑。学生的回答会自然覆盖站点管理、素材进站、命名规范等本课要点，教师只做复述性确认，不再重复讲一遍。教师用三分钟提炼本课的三个观念。其一，做网站先建站点，站点是地址系统的根，一切断链事故都能追溯到根上。其二，调试不是制作的附属品，而是与制作并行的另一条生产线，今天每个人都既是制作者也是检修工。其三，规范——命名规范、存放规范、验证规范——不是束缚创意的清规戒律，而是让协作和发布成为可能的技术礼仪。布置课后作业。必做项：在站点中新建一个“班级新闻”子页面，命名为news.htm，版面从简，只放入一条新闻标题与两段文字；思考下节课将从首页的什么位置、用什么方式把访客引导到这个页面。选做项：拍摄或收集三张反映班级生活的照片，用图像处理软件裁剪压缩为宽度不超过600像素的文件，存入站点images文件夹备用。教师特别强调：素材必须是原创拍摄或标明出处的授权图片，随手从网上抓取图片直接商用是侵权行为，技术课上首先要守住这条底线。教师预告：下节课我们将完成全部子页面与整站超链接，并发布评价量规，各组作品将接受全班的实名制“验收”。五、板书设计主板书居中书写课题“网站的制作与调试”，其下分两条纵线展开。左线标题为“制作线”，自上而下依次是：建站点（定根目录）→建首页（index.htm，表格布局）→插内容（素材先进站再放行）→加超链接。右线标题为“调试试”，自上而下依次是：看现象→猜原因→缩范围→修后必验。两线之间画双向箭头，标注“并行”。副板书区右侧保留动态生成区，用于张贴学生在互查环节贡献的“我查到的隐患”便利贴，使板书成为全班共同完成的课堂档案。六、教学评价设计本课评价采用三维交织的方