高中二年级信息技术粤教版选修3《4.3.2新建网站及网页》教学设计

高中二年级信息技术粤教版选修3《4.3.2新建网站及网页》教学设计一、教学背景分析（一）教材地位与内容结构本节课选自粤教版高中信息技术选修3《网络技术应用》第四章第三节第二部分，是学生完成网站规划、素材准备之后的关键操作环节。教材以可视化网页编辑工具为载体，引导学生建立站点、定义站点结构、新建网页并设置页面基本属性。这一节在整章中处于承上启下的枢纽位置：此前学生已经学习了网站的主题定位、栏目规划与素材筛选，此后将要学习页面布局、超链接设计与网站发布。站点概念是否真正建立，直接决定学生后续作品能否实现有序管理和顺利发布。（二）学情研判授课对象为高中二年级学生。他们对网络的依赖程度很高，日常大量浏览网页，却很少思考"一个网站在硬盘上究竟长什么样"。前期访谈与课堂观察表明，学生的典型认知障碍集中在三点：一是把网页等同于网站，认为做一个页面就是做一个网站；二是习惯把图片、页面随手存放在电脑桌面，缺乏文件结构意识；三是对绝对路径与相对路径毫无概念，作品一旦拷贝到其他电脑便图片丢失、链接失效。此外，学生的操作熟练度差异明显，分层任务与同伴互助机制必不可少。（三）教学环境准备本课在计算机网络教室完成，配备多媒体广播教学系统，安装DreamweaverCS6版本网页编辑软件。教师机预置"魅力家乡"半成品站点、断链演示素材、背景音乐与图片素材包，学生机按小组统一建立D盘学习任务目录。二、教学目标设计（一）信息意识维度学生能够从"使用者"视角转向"建设者"视角，理解网站是网页、图片、样式等资源按逻辑组织起来的集合，形成"先建站点、再建页面"的工程化意识。（二）计算思维维度学生能够通过站点结构图描述网站文件的组织关系，区分绝对路径与相对路径，解释资源引用失败的成因，并运用分解与抽象的方法规划自己网站的目录结构。（三）数字化学习与创新维度学生能够独立完成新建站点、设置站点根目录、新建并保存首页、设置页面标题与背景等操作，能在范例基础上进行个性化改造，表达自己的作品创意。（四）信息社会责任维度学生在素材使用环节理解版权与署名规范，养成规范命名、定期备份的良好数字工作习惯。三、教学重点与难点教学重点是新建站点的完整流程与网页的基本属性设置。教学难点是站点根目录、文件夹结构与文件引用路径三者之间关系的理解。突破难点的策略是"故障前置"，先让学生亲眼看到图片丢失的页面，再反推原因，把抽象的路径知识建立在真实的认知冲突之上。四、教学方法与策略本课采用任务驱动教学法与错误案例分析法相结合的方式，以"为学校七十周年校庆建设'魅力家乡·魅力校园'专题网站"为贯穿情境。课堂按"情境激趣—问题诊断—示范引领—任务实践—展示互评—总结升华"六个环节展开。小组采用异质分组，每组设技术员、素材员、测试员与汇报员四个角色，任务单按"基础任务—进阶任务—挑战任务"三级设计。五、教学过程（一）环节一：情境导入，由用转建（约5分钟）课堂伊始，教师通过广播系统展示三件学生期中前完成的优秀作品片段：一个介绍校园历史的页面、一个家乡美食推介页面、一个社团活动图集。随后提问：这些页面都很漂亮，但如果我想把它们组合成一个能给别人看的"网站"，让它们彼此能跳转、能整体拷给评委，我们现在能做到吗？学生沉默。教师顺势打开三台电脑上的同一份学生作业演示：在原来电脑上图片显示正常，拷贝到教室电脑上后图片全部变成红叉。学生发出惊叹。教师抛出本课核心问题：好看的页面我们都知道怎么做，但图片为什么一搬家就"丢"了？今天我们就来解决这个问题。引出课题——新建网站及网页。设计意图：用真实的失败案例制造认知冲突，让学生意识到"会做页面"不等于"会做网站"，为站点概念的学习提供内在动机。（二）环节二：类比建模，理解站点（约8分钟）教师不做软件演示，而是先进行概念建构。板书出示问题链：网站和网页是什么关系？一个网站在硬盘上是什么形态？教师给出类比：如果把网站比作一栋教学楼，网页就是一间间教室，图片视频就是教室里的桌椅设备，而"站点"就是这栋楼的地基和门牌地址。没有地基与统一管理，设备再多也只是一堆散件，搬家就会丢。随后教师在大屏幕展示一个规范站点的文件夹实景截图，与学生作业文件夹的混乱截图并排对比：一边是images、css、media等文件夹井然有序，index.html安放在根目录；一边是几十个图片网页混杂躺在桌面。提问：哪种结构在作品增多、多人协作、拷贝迁移时更安全？为什么首页要放在最外层？学生小组讨论两分钟，代表回答，教师用一句话归纳：站点就是一个被软件"登记在册"的根文件夹，软件以它为基准管理所有资源和链接。教师进一步点拨路径概念：图片标签里写的引用地址有两类写法。写"我的电脑D盘某某文件夹某图"，这是把地址写死在别人的地图上，换了电脑地图就失效，这叫绝对路径；写"图片文件夹下的某图"，是以站点根目录为起点记录相对位置，整个网站文件夹搬到哪儿都有效，这叫相对路径。建站点，就是让软件自觉用第二种方式替你管资源。设计意图：用建筑类比和正误对比，把抽象的站点与路径概念可视化、生活化，先理后技，避免学生陷入盲目跟做。（三）环节三：教师示范，流程建模（约10分钟）教师演示新建站点的完整流程，学生跟随观察，暂不操作。教师边做边口述操作要领与判断依据，强调每一步"为什么这样做"。第一步，打开Dreamweaver，执行"站点—新建站点"命令，输入站点名称"myschool"。教师强调：站点名称是软件中的管理名，可以含中文便于识别，但若考虑上传服务器的兼容性，建议使用拼音或英文命名，养成工程习惯。第二步，指定本地站点文件夹，定位到D盘预先建立的空文件夹myschool。教师强调：这是站点最关键的一步，必须指向一个专用空文件夹，切忌指向桌面或"我的文档"根目录，否则软件会把整张桌面纳入站点管理，未来文件引用将彻底失控。第三步，确认服务器相关设置本课暂不配置，保持默认，完成站点创建。观察"文件"面板，站点名下已可展开文件夹结构，这意味着软件已开始"登记管理"。第四步，创建首页。执行"文件—新建"，文档类型选择HTML5，立即执行"文件—另存为"，把文件保存为index.html并存入站点根目录。教师强调：先保存、再编辑是一条铁律。未保存的临时文件没有位置归属，插入图片时软件就无法计算相对路径，这正是课前演示中图片丢失的根源。第五步，设置页面属性。右键页面选择"页面属性"，设置页面标题为"魅力校园——首页"，设置背景颜色或背景图片，说明标题栏文字与文件名的区别：标题显示在浏览器标签上，文件名决定服务器如何访问。第六步，插入一张来自images文件夹的图片作为验证，保存后切换到"代码视图"，引导学生观察图片标签中的地址写法的简短与规整，与绝对路径写法对照。演示结束，师生共同在投影上补全流程图：规划目录结构——新建站点并指向空文件夹——新建页面并立即命名为index保存——设置页面属性——插入站点内素材资源。设计意图：完整流程演示配以"为什么"的口述，把操作技能上升为可迁移的工作规范；对照代码视图让学生看见软件背后替他们完成的路径管理，挑战任务埋下伏笔。（四）环节四：分层实践，巡回诊断（约15分钟）学生打开任务单，按层级自主推进。基础任务面向全体学生：在D盘建立个人站点文件夹，站点命名为"家乡"或"校园"主题拼音；新建首页并保存为index.html；设置页面标题、背景色或背景图；插入一张素材包内图片并写一句主题导语，保存并预览。进阶任务面向学有余力者：在站点内新建about.html第二个页面，在文件面板中建立images、media两个子文件夹分类存放素材；在首页与about页之间尝试互换查看，体会文件面板管理多页面的便捷。挑战任务面向技术组骨干：打开已保存页面的代码视图，找出图片标签中的路径写法，用自己的话解释"../images/fj.jpg"中两个句点的含义，并尝试故意把图片移出站点文件夹再刷新预览，观察现象并记录结论，准备向全班讲解。教师巡回指导，重点关注三类典型错误：把网页保存到了站点文件夹之外；把素材图片直接放在图片收藏而未拷入站点；用中文与空格命名网页文件。教师不直接代改，而是追问：你的资源现在归站点管吗？软件在替你记录哪条路径？引导学生自查自纠。对进度慢的学生，安排小组技术员结对帮扶；对遇到问题的高频点，教师随时广播讲解一次，控制广播时长在一分钟以内。设计意图：三级任务匹配学情差异，错误案例集中讲评，教师角色由讲授者转为诊断者，让学生在纠错中固化规范。（五）环节五：展示互评，提炼标准（约8分钟）教师从巡视中挑选三件典型作品广播展示：一件结构规范但页面素简，一件页面华丽但结构混乱，一件结构与内容俱佳。学生依据评价量表口头互评，量表维度为四项：站点命名与根目录是否规范、首页是否正确保存为index、页面标题与视觉效果是否完成、资源引用是否在站点之内。评价过程中教师追问几件"看不见"的细节：怎么证明你的图片走的是站点内路径？如果让你把作品交给校长办公室那台电脑展示，你有把握不丢图吗？学生现场把作品文件夹整体复制到教室共享盘并打开验证，成功的小组自我加压欢呼，失败的小组当场排查修正，教师点评：可移植性就是我们今天给作品做的最重要体检。挑战任务小组代表上台讲解两个句点的含义，教师用一句比喻收束：相对路径就像"从我房间出门左拐第三间"，搬到哪儿楼里都找得到；绝对路径像"某市某街某号楼"，换个城市就无效了。设计意图：评价指向不可见的工程素养而非表面美观，并创设真实迁移场景检验学习效果，让互评成为第二次学习。（六）环节六：课堂小结与延伸（约4分钟）师生共同完成板书收束。教师引导学生用"三个一"总结本课：一个观念，先做站点再做页面；一条铁律，新建文件先保存再编辑；一个标准，资源全进站点、引用全程相对路径。随后布置课后任务：以小组为单位完成网站栏目与目录结构的规划图，下节课我们将学习用表格与层对首页进行布局设计，让今天的"毛坯房"变成"精装房"。同时教师抛出拓展思考：今天我们用的是可视化软件，实际上淘宝的页面背后也是同样的文件结构逻辑。有兴趣的同学可以右击任何网页选择查看源文件，感受技术与应用的同构之处。六、板书设计主板书采用结构图式呈现：顶部为课题"新建网站及网页"，中部为中心词"站点"向下分支四个要点——规划目录、指定根文件夹、先保存为index.html、设置页面属性；右侧辅板书呈现绝对路径与相对路径的对比示意，底部预留"三个一"总结区。板书随教学推进分步生成，保持结构化与生长性。七、教学评价设计本课采用过程性评价与作品性评价相结合的方式。过程性评价依据课堂任务单完成度、小组协作表现与问题诊断发言记入平时成绩；作品性评价依据前述四维量表由自评、组内互评与教师点评三方合成。评价重点落在站点规范的达成度上，而非页面美观程度，引导学生关注工