高中信息技术选修3教学设计：网站建设起步-新建站点与首张网页的诞生

高中信息技术选修3教学设计：网站建设起步——新建站点与首张网页的诞生一、教材分析与课标定位本节内容选自粤教版高中信息技术选修3《网络技术应用》第四章“网站的设计与制作”之4.3.2节“新建网站及网页”。在整套教材体系中，本节处于承上启下的关键位置：前承4.1节“网络信息获取”与4.2节“网络信息交流”，学生已经掌握了互联网基础知识与信息检索技能；后启4.3.3节“网页编辑与修饰”及第四章综合实践项目“班级主题网站建设”。从课程内容结构来看，本节聚焦于网站建设的“从无到有”环节，具体涉及三方面核心知识：一是网站站点的创建与规划（包括站点物理结构与逻辑结构的建立）；二是网页文件的新建、命名与保存规范；三是网页基本框架（HTML文档结构）的认知与首张网页（首页）的制作。这一内容既是网站开发的起点，也是学生将前期抽象的网络知识转化为具体可视化成果的转折点。《普通高中信息技术课程标准（2017年版2020年修订）》在本模块中明确要求：“学生能够根据任务需求，规划并设计网站结构，掌握网页制作的基本方法，体验信息创作的全过程。”同时强调“在项目活动过程中，培养学生的信息意识、计算思维、数字化学习与创新以及信息社会责任四大学科核心素养”。本节教学设计正是基于上述课标要求，以项目式学习为主线，让学生在“做中学、学中创”的过程中，实现知识建构与能力提升的有机统一。从学生认知基础分析，高二年级学生经过前期学习，已具备以下先备知识：能够熟练使用浏览器浏览网页并查看源代码，了解HTML语言的基本概念与常用标签，具备一定的文件管理能力（如新建文件夹、重命名、保存文件等），部分学生通过自学或课外实践已接触过可视化网页编辑工具（如Dreamweaver、Frontpage等）。但学生的认知差异较大，部分学生对“网站”与“网页”的概念区分模糊，对站点管理的思想认识不足，动手操作能力参差不齐。因此，本课设计需要兼顾不同层次学生的学习需求，既要有基础性任务保障全体达标，又要有拓展性任务激发优等生潜能。二、教学目标与核心素养指向基于课标要求与学情分析，本课确立以下三维教学目标与核心素养指向：（一）知识与技能目标1.理解“网站”与“网页”的辩证关系，明确站点在网站建设中的组织管理作用。2.掌握在Dreamweaver（或同类工具）中新建站点、新建网页文件的基本操作方法。3.掌握网页文件命名规则（如使用小写字母、数字、下划线，不使用中文名和特殊字符）及其背后的逻辑。4.了解HTML文档的基本结构（<!DOCTYPE>声明、html、head、title、body等标签），能够识别并修改网页标题与正文内容。5.能够独立完成首张网页（首页index.html）的创建、编辑、保存与预览。（二）过程与方法目标6.通过任务驱动与项目实践，经历“需求分析—站点规划—网页创建—测试预览”的完整网站建设流程。7.在小组协作中学会分工、沟通与互助，培养团队协作能力。8.通过问题探究（如“为什么要建立站点而不直接建网页”），发展计算思维与逻辑推理能力。（三）情感态度与价值观目标9.感受从“信息消费者”到“信息生产者”的角色转变，体验信息创作的成就感。10.树立规范命名、有序管理的工程化意识，培养严谨细致的工作作风。11.增强版权意识与网络道德观念，自觉遵守网络信息传播的相关法律法规。（四）学科核心素养具体指向信息意识方面，学生能够认识到网站建设中规划与组织对信息呈现效率的影响，形成主动优化信息结构的意识。计算思维方面，理解站点目录结构设计的层次化思想，体会“分而治之”的问题解决方法。数字化学习与创新方面，通过亲手创建网站与网页，实现从创意到作品的数字化表达。信息社会责任方面，在网页内容创作中坚持正确价值导向，自觉维护清朗网络空间。三、教学重点、难点与突破策略（一）教学重点1.站点的概念理解与创建站点的完整操作流程。2.网页文件的新建、保存与命名规范。3.HTML基本文档结构的识别与简单编辑。（二）教学难点4.学生对“站点”这一抽象概念的真正理解——它不仅是磁盘上的文件夹，更是网站内容的逻辑组织方式。5.部分学生容易混淆“保存网页文件”与“在站点中新建网页”的区别，导致文件位置混乱、链接失效等问题。6.将HTML源码视图与设计视图之间的对应关系建立起来，理解“所见即所得”背后的代码逻辑。（三）突破策略7.运用生活化类比：将“站点”比作“一本书的目录框架”，网页比作“书中的每一页”。书籍必须先有整体框架规划，才能有章可循地撰写每一页内容。这种类比贴近学生经验，化抽象为具体。8.设计对比实验：课前准备一组“混乱文件夹”（文件随意命名、存放杂乱）与“规范文件夹”（分门别类、命名清晰），让学生在对比中直观感受规范管理的重要性。9.采用双视图对照教学：在软件中同时展示设计视图与代码视图，教师操作时实时指出两者对应关系，帮助学生建立“可视化界面背后是代码”的认知模型。四、教学方法与教学准备（一）教学方法本课综合运用以下教学方法：任务驱动法，以“创建班级主题网站首页”为核心任务贯穿全课；演示法，教师利用多媒体广播系统进行关键操作的逐步演示；自主探究法，给予学生充分的动手实践时间，鼓励自主尝试与发现；协作学习法，以四人小组为单位开展讨论、互助与互评。（二）教学环境与资源准备1.多媒体网络教室，配备教师控制台与广播系统，学生机安装AdobeDreamweaverCS6（或开源替代品SeaMonkey等，版本不限，功能一致即可）。2.教师提前在每台学生机桌面创建“学生素材”文件夹，内含：本次课程的素材图片23张（需符合社会主义核心价值观，如校园风景、科技发展成就图片）、课前调查问卷统计结果（用于确定班级网站主题方向）。3.导学案一份，包含本课学习目标、操作步骤提示、小组活动记录表与评价量规。4.演示文稿一份，包含关键概念图示、操作截图、问题引导语等。（三）课时安排本课安排1课时（45分钟），具体时间分配如下：情境导入与概念建构约8分钟，教师演示与同步练习约15分钟，学生自主创作与小组互助约15分钟，作品展示与总结提升约7分钟。五、教学过程（一）环节一：情境创设，激活经验（约4分钟）教师活动：上课伊始，教师打开浏览器，快速浏览几个风格迥异的网站，包括学校官网、知乎社区、一个个人博客。随后提出问题：“同学们每天都在上网，你们有没有想过这些精美的页面是怎么样被创建出来的？它们背后的‘家’在哪里？”大屏幕展示一个网站文件夹结构截图（以学校官网为例），其中包含index.html、images文件夹、css文件夹、js文件夹等。教师追问：“请大家观察这个截图，想一想：这个网站的所有文件是杂乱无章堆在一起的吗？还是有规律可循？”学生活动：观察并自由发言，大部分学生能发现文件夹分门别类，有明确的组织规律。教师总结引导：“没错，每一个正规的网站，它的所有文件都有自己清晰的‘家’，这个‘家’在专业上称为‘站点’。今天我们要学习的，就是如何为我们的班级网站安好这个‘家’，然后在这个‘家’里诞生第一张网页。”设计意图：以学生熟悉的网站为切入点，利用认知冲突（学生看到网站成品却不知其幕后组织）激发学习兴趣，自然引出“站点”概念。同时渗透工程化管理思想。（二）环节二：概念建构，理解站点（约4分钟）教师活动：播放一段约60秒的微视频，动画形式展示“一本书从构思、目录设计、章节撰写到装订成册”的过程，旁白强调“先有框架规划，后有内容填充”。播放结束后，教师板书（电子屏幕呈现）核心概念对比表格：对比维度一本书一个网站整体框架目录结构站点结构基本单元页面网页组织方式章、节、小节栏目、子栏目首页性质封面+目录首页（index.html）管理思想先规划后写作先建站后建页随后教师提出一个驱动性问题：“如果我们不建站点，直接在桌面新建一个网页文件，行不行？”让学生短暂思考但不急于作答，留作悬念在后续操作中验证。设计意图：通过跨域类比与对比表格，将抽象的站点概念具象化。悬念设问为后续操作中的问题发现埋下伏笔。（三）环节三：教师演示，同步跟练（约15分钟）本环节采用“教师演示+学生同步操作”的方式进行，教师通过广播系统逐步操作，学生在自己电脑上同步完成。第一步：启动软件与新建站点教师演示：打开Dreamweaver→菜单栏选择“站点”→“新建站点”→弹出站点定义对话框→在“站点名称”中输入“班级主题网站”→在“本地站点文件夹”中点击文件夹图标，选择预先在D盘建好的“D:\classweb”文件夹→点击“保存”。教师操作同时强调关键点：“站点名称是给网站起的一个逻辑名字，可以随便取，方便我们识别；本地站点文件夹是网站文件在电脑磁盘上实际存放的位置，这个必须记清楚，以后所有网页文件、图片文件都要放在这个文件夹里面。”学生同步操作。教师巡视，发现部分学生找不到“站点”菜单，及时提醒：“每个软件版本可能菜单位置略有不同，如果你用的版本找不到‘站点’菜单，可以查看‘窗口’菜单中是否有‘文件’面板，在文件面板左上角也有站点管理入口。”第二步：认识站点文件夹结构教师操作：在文件面板中，右键点击站点根目录→新建文件夹→分别创建“images”（存放图片）、“css”（存放样式表）、“music”（存放音乐素材）三个子文件夹。教师解释：“这个目录结构不是凭空想的，而是根据我们班级网站内容规划来的。我们计划在首页放班级合影图片，所以要images文件夹；以后要给网页设计统一样式，需要css文件夹。这就是我们刚才所说的‘先规划后建设’。”学生同步操作，创建文件夹并正确命名。教师在巡视中注意纠正名学生将文件夹命名为中文或带空格的情况，引导其改为规范命名。第三步：新建首页文件教师演示：“现在，我们在站点根目录下新建我们的第一张网页——首页。在‘文件’面板中右键点击站点根目录→选择‘新建文件’→输入文件名index.html。”教师提问：“为什么首页要叫index.html而不是别的名字呢？”短暂停顿后解释：“Index是索引的意思，web服务器默认会把这个文件作为网站的入口页面。当我们访问一个域名时，比如.example，服务器会自动寻找该域名对应的站点文件夹下的index.html文件。这是国际通用的命名惯例。”教师强调：“文件命名有几个规则，请大家记下来：第一，全部使用小写英文字母；第二，单词之间用下划线或连字符连接，不能有空格；第三，不能使用中文命名文件；第四，扩展名必须写清楚。这些都是为了确保我们的网站在不同服务器上都能正常访问。”学生同步操作，新建index.html文件。随后教师演示双击打开该文件，进入编辑界面，同时展示设计视图与代码视图的切换方法。第四步：编辑首页基本内容教师演示：在代码视图中，向学生展示HTML文档的基本骨架。教师在代码视图中用醒目的颜色（利用代码高亮功能）圈出关键标签：<!DOCTYPEhtml><html><head><metacharset="utf8"><title>这里是网页标题</title></head><body>这里是网页正文内容</body></html>教师逐一讲解每个标签的含义与作用，并使用“设计视图与代码视图对照”策略：当教师在代码视图中把“这里是网页标题”改为“欢迎来到高二(3)班班级网站”时，切回设计视图，让学生看到浏览器标题栏位置的变化；当教师把“这里是网页正文内容”改为“这是我们班级的第一张网页”时，让学生看到设计视图中内容的变化。随后，教师指导学生在body标签内输入一段关于班级简介的文字（素材来自课前调查问卷），并插入一张准备在images文件夹中的校园风景图片。插入图片的操作使用菜单“插入”→“图像”，选择images文件夹中的图片文件。教师提醒：“注意观察，插入图片后代码视图中多了一个img标签，它的src属性值就是图片文件的路径。这就体现了我们刚才把图片放在images文件夹里的好处——路径清晰，文件管理有序。”第五步：保存与预览教师演示：点击“文件”→“保存”（或者快捷键Ctrl+S），然后点击“在浏览器中预览/浏览”按钮（或按F12键）。浏览器自动打开，显示刚才制作的网页效果。教师引导学生在浏览器中右键选择“查看页面源代码”，让学生对照刚才在Dreamweaver中编写的代码与浏览器显示的源代码，认识到“网页的本质就是一段由HTML语言编写的代码文本”。设计意图：本环节环环相扣、步步递进，从抽象概念到具体操作，从站点创建到网页诞生，学生全程动手，教师及时巡视纠错。双视图对照教学策略有效落实了教学难点的突破。操作过程中的命名规范、目录规范等细节渗透了工程化管理思想。（四）环节四：问题探究，辨析强化（约6分钟）教师活动：回到之前留下的悬念问题——“如果我们不建站点，直接在桌面新建一个网页文件，行不行？”组织学生以四人小组为单位讨论3分钟。教师引导讨论方向：请大家结合刚才的操作体验，从文件管理的角度思考这个问题。学生讨论后，各组代表发言。教师汇总观点并做出评价与总结：“不建站点而在桌面直接创建网页文件，从技术上讲当然可以，浏览器照样能打开。但这会带来几个问题：第一，桌面文件杂乱无章，时间一长找不到文件；第二，当网页中涉及图片、视频、样式表等外部资源时，如果没有统一的站点文件夹管理，资源文件的路径就会非常混乱，可能因为文件移动导致图片无法显示；第三，将来如果要把网站上传到互联网服务器上，服务器要求整个网站必须是一个完整的文件夹结构，没有站点管理习惯的同学往往丢三落四，导致网站上传后无法正常显示。所以，建立站点，养成分门别类管理网站文件的习惯，不仅是一种技术规范，更是一种工程化的思维方法。就像好的作家一定会先列提纲再动笔，好的建筑师一定先画图纸再施工，我们做网站，也要先建站点，再建网页。”教师结合之前的“书籍类比”进一步深化：“大家回顾一下刚才那本书的例子。如果你把一本书的每一页撕下来随便放在口袋里，你能说这本书还存在吗？不能。同样，只有把所有网页文件有序地放在站点这个‘文件夹’中，网站才真正成为一个整体，才谈得上后续的超级链接、导航结构等。”设计意图：此环节通过设问、讨论、辨析，引导学生从感性操作上升为理性认识，将“为什么要建站点”这一问题内化为工程思维的一部分。这既是教学难点的深化突破，也是计算思维培养的重要途径。（五）环节五：自主创作，小组互助（约10分钟）教师活动：布置本课的自主创作任务：“现在，请各小组根据课前确定的班级网站主题，完善你的首页内容。具体要求如下：1.确保你的index.html文件位于站点根目录下。2.在网页标题（title标签）中写入你设计的网站名称。3.在正文（body标签）中至少写一段你自己的介绍文字，不少于50字，内容要求积极向上，体现班级正能量。4.插入一张素材图片（可以是班级活动照片，也可以是校园风景图），适当调整大小。5.在文本末尾输入自己的姓名和制作日期。6.保存文件并在浏览器中预览效果，检查是否正确显示。”教师在大屏幕展示评价量规：评价维度优秀（5分）良好（34分）需改进（12分）站点结构站点文件夹规整，子文件夹命名清晰站点已建立，但子文件夹不够完整站点未建立或文件存放混乱文件命名完全符合命名规范基本符合，略有瑕疵使用中文名或未命名代码规范HTML结构完整，标签配对正确结构基本完整，个别标签有误结构不完整，标签错误较多内容质量文字积极向上，图文搭配合理文字基本通顺，图片插入正确内容过于简单或未插入图片预览效果浏览器预览完美呈现预览基本正常，有个别问题预览失败或内容缺失对于操作较快的学生，教师布置拓展任务：“尝试在head标签中增加meta标签，设置网页的字符编码为UTF8，并尝试将网页背景颜色设置为淡蓝色（属性bgcolor="E0F0FF"）。”对于操作有困难的学生，小组内同学互帮互助，教师给予个别辅导。设计意图：自主创作环节是对知识技能的综合应用，评价量规的展示使学生明确“优秀”的标准，小组互助机制兼顾了学生个体差异。拓展任务为学有余力的学生提供了深度探究的空间。（六）环节六：作品展示，总结提升（约6分钟）教师活动：随机选取3名学生的作品（兼顾不同层次水平），通过广播系统展示在全体学生屏幕上。邀请该学生简要介绍自己的网页内容与制作心得。教师在学生介绍后进行针对性点评，点评聚焦于：命名规范性、站点结构合理性、HTML代码完整性、网页内容的思想性。对优秀作品给予肯定，对有问题的作品指出改进方向。随后，教师带领学生回顾本课知识脉络，以“思维导图式”板书呈现在电子白板上：新建网站及网页├──网站与网页的关系│├──站点是网站所有文件的“家”│└──网页是网站的基本组成单元├──新建站点│├──站点名称（逻辑标识）│└──本地站点文件夹（物理存储位置）├──新建网页│├──命名规范（小写、无空格、扩展名）│└──index.html作为首页├──HTML基本结构│├──声明与html标签│├──head（标题、编码）│└──body（网页可见内容）└──保存与预览├──保存到站点文件夹内└──浏览器中查看效果最后，教师进行情感升华：“今天，我们从信息的消费者转