高中信息技术选修3教学设计：Dreamweaver新建网站与网页实战

高中信息技术选修3教学设计：Dreamweaver新建网站与网页实战教学设计基本信息学科：信息技术年级：高二（选修模块）教材版本：粤教版选修3《网页设计与制作》章节：第四章网站建设基础第4.3节网站的创建与管理第4.3.2课时新建网站及网页课时安排：2课时（第1课时：站点定义与环境配置；第2课时：网页创建与站点资源管理）核心素养定位：信息意识（规范管理数字资源）、计算思维（结构化构建站点架构）、数字化学习与创新（工具赋能原型设计）、信息社会责任（遵循Web标准与版权规范）学情分析与教学对象画像本班学生已完成必修模块学习，具备基本的文件管理操作、HTML基础标签书写经验及CSS盒模型初步认知。但普遍存在“代码与可视化割裂”“本地预览正常、发布即错链”“文件命名随意导致协作混乱”三大痛点。心理层面，学生渴望摆脱单页练习，渴求完整项目实战体验，但缺乏工程化思维，易陷入“工具操作细节泥潭”而忽视架构设计。教学需从“会操作”向“懂逻辑、重规范、能迁移”转型，通过真实项目情境重构认知结构。教材深度解读与重难点立体化拆解教材第4.3.2节是选修3模块从“单页制作”迈向“站点工程”的关键枢纽。内容涵盖站点定义、本地根文件夹规划、网页创建保存、资源面板操作四大知识簇。重点在于Dreamweaver站点管理机制的底层逻辑——即“站点定义本质是建立本地文件系统与服务器映射的配置文件”，难点在于“相对路径与绝对路径在站点内部解析的动态机制”及“资源面板中资源分类、链接检测、Cloaking隐藏文件的工程化应用”。教学不应局限于菜单点击演示，而应揭示“定义站点—>建立映射—>资源跟踪—>链接自动更新”这一完整工程链条，为后续模板应用、库项目、服务器部署奠基。教学目标体系（基于核心素养的可观测行为动词）1.信息意识维度：能规范命名站点、文件夹、文件（全小写、英文/数字/下划线、语义化），能解释本地根文件夹作为站点“根命名空间”的作用，养成资源分类归档习惯。2.计算思维维度：能分析站点定义向导中“本地信息”“远程服务器”“测试服务器”三者逻辑关系，能推演文件移动、重命名时站点缓存自动更新链接的原理，能排查典型路径错误（../层级穿越、中文路径编码失效、大小写敏感）。3.数字化学习与创新维度：熟练掌握DreamweaverCC2019+版本站点管理面板操作，能在可视化/代码/分离视图间高效切换创建符合HTML5规范的语义化结构页面，能利用资源面板批量插入图片、颜色、URL，能创建站点地图可视化架构图。4.信息社会责任维度：理解版权意识在素材引用中的体现，在资源面板建立“版权标注”元数据备注，遵循W3C标准声明DOCTYPE，确保跨浏览器兼容性。教学策略与环境配置采用“项目式学习（PBL）”主策略，嵌套“任务驱动法”与“分层递进法”。构建“校园社团招新官网原型”真实项目情境，贯穿两课时。环境部署：机房预装Dreamweaver2021，配置本地Apache测试服务器模拟远程环境，部署云端协作平台（如蓝湖/飞书文档）托管设计稿与素材包，搭建班级评价看板系统实时采集过程性数据。准备三层级素材包：基础版（结构化素材、标准命名）、进阶版（含未规范命名干扰项、断链模拟）、挑战版（响应式断点素材、SVG图标系统），支撑分层教学。教学过程设计（核心篇）【第一课时：站点定义——从“文件堆砌”到“工程命名空间”】情境导入：工程化思维觉醒（8分钟）投影展示两组对比案例：左侧“混乱站点”——文件散落桌面、D盘、U盘，文件名“新建文件夹(2)”、“图片1.jpg”、“final_final_v3.html”，打开报错404，CSS失效，图片裂图；右侧“规范站点”——目录清晰，命名语义化，拖拽移动文件夹后链接自动修复，一键同步上传。提问：“同样是做网页，为何工程师从不把文件存在桌面？”引导学生聚焦“路径解析机制”与“资源管理成本”。揭示本课核心驱动问题：如何建立一套“自描述、可迁移、抗破坏”的站点管理体系。任务一：站点定义向导深度解剖与实操（20分钟）演示Dreamweaver“站点—>新建站点”高级模式。重点拆解三大核心面板：“站点”面板：站点名称（项目代号，如club_recruit_2024）、本地站点文件夹（强调必须为空文件夹或仅含规划好的目录树），演示在D盘创建Project_ClubRecruit根目录，强制规范子目录结构：Project_ClubRecruit/├──index.html├──css/│├──reset.css│├──mon.css│└──page_recruit.css├──js/│└──main.js├──images/│├──banner/│├──icon/│└──.svg├──fonts/└──assets/（存放原始设计稿、切图源文件，不发布）现场演示：在站点未定义时直接拖入图片到编辑区，对比定义站点后拖入图片自动触发“复制到站点”对话框的差异，揭示“站点定义是资源托管契约”的本质。“服务器”面板：配置本地Apache映射。讲解“服务器文件夹”与“WebURL”映射关系，演示测试服务器配置（PHP/Node环境预留），阐述“本地预览（file://协议）与服务器预览（http://协议）在根路径解析差异”的工程隐患。“高级设置”面板：本地信息中“链接相对于”选项（文档vs站点根目录），结合代码演示：//相对于文档：../css/mon.css//相对于站点根目录：/css/mon.css强制要求学生选择“相对于站点根目录”，并阐述团队协作中统一该设置的必要性。学生实操：按示范完成站点定义，截图“站点设置汇总”界面上传评价平台，教师终端实时抽查“本地根文件夹路径深度不超过3层”“无中文路径”“服务器映射正确”三项硬性指标。任务二：路径解析机制推演与断链排查实战（17分钟）核心知识建模：在白板绘制“路径解析决策树”。起始节点：浏览器发起资源请求→判断协议→file://协议下绝对路径(以/开头)指向盘符根目录失效→http://协议下绝对路径指向DocumentRoot→相对路径基准为当前文档所在目录→Dreamweaver站点缓存介入→文件移动触发站点缓存扫描→更新所有引用该文件的链接。分组挑战赛：分发“进阶版素材包”，内含故障站点：images文件夹重命名为img、css文件移动至子目录styles、index.html中包含中文命名图片引用、绝对路径写死D:/Project/...。任务：10分钟内利用Dreamweaver“站点—>检查链接站点范围”生成报告，利用“资源面板—>链接修复”功能批量修正，利用“文件面板—>重命名”触发自动更新，最终实现零断链、零裂图、代码中路径全为相对站点根目录格式。教师巡回指导，重点纠正“手动修改代码路径而不走站点面板导致缓存不同步”的违规操作。课时小结与预习桥梁（5分钟）学生口头复述“定义站点三要素：名称、本地根目录、服务器映射”，书面完成《站点定义自检清单》电子表单。布置微任务：利用资源面板“颜色”“URL”面板预存项目主色调、常用CDN链接，为下课时网页创建提效。【第二课时：网页创建与站点资源管理——从“单页编写”到“架构构建”】情境升级：原型驱动开发（5分钟）展示UI设计稿：社团招新官网包含首页、社团列表、报名表单、关于我们四页面，共享导航栏、页脚、侧边栏。提问：“若每页单独写HTML，修改导航栏需改四次，如何用工程化思维解决？”引出“模板与库”的前置认知——本课时重点掌握“标准页面骨架构建”与“资源面板复用机制”，为下一节“模板与库”铺垫。任务三：HTML5标准页面骨架构建与语义化布局（25分钟）演示“文件—>新建—>HTML—>HTML5”模板，拒绝空白文档起步。逐行解析生成代码：<!DOCTYPEhtml>（声明文档类型，触发标准模式渲染）<htmllang="zhCN">（语言属性，无障碍阅读器识别依据）<head><metacharset="UTF8">（编码声明，必须位于title前，防止中文乱码）<metaname="viewport"content="width=devicewidth,initialscale=1.0">（响应式视口，移动端适配基石）<metahttpequiv="XUApatible"content="IE=edge">（兼容性声明）<title>校园社团招新官网</title>（SEO核心权重标签）<linkrel="stylesheet"href="/css/reset.css"><linkrel="stylesheet"href="/css/mon.css"><linkrel="stylesheet"href="/css/page_index.css"><scriptsrc="/js/main.js"defer></script>（defer保证DOM就绪执行）</head><body><!语义化结构区块预留><headerclass="siteheader"></header><navclass="mainnav"></nav><mainclass="sitemain"></main><footerclass="sitefooter"></footer></body></html>强制规范：缩进2空格、属性值双引号、自闭合标签规范、类名BEM命名规范（block__elementmodifier）。演示Emmet语法快速生成结构：header.siteheader>nav.mainnav+main.sitemain+footer.sitefooter。分层实操任务：基础层（C级）：完成index.html骨架，正确引入三个CSS、一个JS，保存至站点根目录，预览无报错。进阶层（B级）：在资源面板“颜色”面板新建主色2c3e50、辅助色e74c3c、背景色ecf0f1；在“URL”面板存入BootstrapCDN、jQueryCDN、字体图标CDN；利用资源面板拖拽方式插入images/.svg至header，自动生成<img>标签并携带width/height属性。挑战层（A级）：创建club_list.html、apply.html、about.html，利用“文件—>另存为”复制骨架，修改title与page_xxx.css引用。在资源面板“库”面板尝试将导航栏代码片段存入（预演库功能），并尝试跨页面插入。任务四：站点资源面板深度驾驭与协作规范（15分钟）系统讲解资源面板五大核心面板实战价值：5.图片面板：预览尺寸、格式、路径，右键“编辑原图”关联PS/Fireworks，右键“插入”自动生成带尺寸属性标签，右键“重新采样”无损压缩。6.颜色面板：建立项目色板，拖拽至CSS规则面板属性值，实现全站换肤“改一处、动全站”雏形。7.链接面板：展示“站点链接”视图，解读“链接检查器”图标含义（绿点正常、红叉断链、黄叹外部链接、蓝锚邮件链接），演示批量修复外部链接target="_blank"rel="noopener"安全属性。8.库面板：演示将公共导航栏创建为库项目，插入到四个页面，修改库项目后“更新当前页面/更新整个站点”差异，揭示“库项目锁定机制”防止误改。9.模板面板：预演下节课核心——创建.dwt模板文件，定义可编辑区，基于模板生成子页面，修改模板自动传播。协作规范建立：全班统一“资源面板导出/导入”操作，导出.designresources文件分享至协作平台，实现团队色板、URL库、常用代码片段零成本同步。任务五：综合实战挑战——社团招新站点原型交付（15分钟）综合挑战卡：要求在20分钟内完成站点最小可行性产品（MVP）交付清单：10.站点定义零警告，文件面板目录树与规划图一致。11.四页面骨架创建完毕，语义化标签使用率100%，通过W3C验证器校验（安装Dreamweaver扩展或在线验证）。12.资源面板：颜色面板≥5条项目色，URL面板≥3条CDN，图片面板无裂图，库项目≥1个（导航栏）。13.链接检查报告：站点内部链接零断链，外部链接均添加安全属性。14.站点地图：生成站点地图视图，截图上传，清晰展示页面层级与链接关系。15.版本控制意识：在文件面板右键“签出”（模拟团队协作锁定），编辑完成“签入”并填写版本备注“v1.0原型骨架完成”。教师角色转为“技术总监”，仅受理“架构决策咨询”（如：是否将reset.css合并入mon.css？图标用SVGSprite还是FontIcon？），不处理基础操作提问，倒逼学生查阅官方文档、MDN、站内互助。成果展示与结课评价（5分钟）随机抽取3组投屏演示：站点地图架构讲解、资源面板复用演示、断链修复复盘。全班依据《站点工程化评价量表》进行互评，教师终评聚焦“规范性、可维护性、扩展性”三维度。布置分层拓展作业：基础：补全四页面内容填充，利用语义化标签构建内容结构。进阶：引入Normalize.css替代reset.css，配置CSS自定义属性实现主题色一键切换。挑战：研究Dreamweaver“Git面板”集成，完成本地仓库初始化、首次提交、远程推送至Gitee，体验“站点定义+版本控制”双重保障。教学评价体系设计构建“过程性评价（50%）+终结性评价（30%）+素养观察（20%）”三元模型。过程性评价嵌入教学全流程：①站点定义自检清单（自评+互评+师评三维打分，权重15%）；②断链排查挑战赛排名积分制（权重15%）；③资源面板配置完整度自动化采集（平台抓取颜色数、URL数、库项目数，权重10%）；④协作平台日志：版本备注规范度、素材共享贡献度（权重10%）。终结性评价产品导向：交付物：站点源码包、站点定义配置文件(.ste)、链接检查报告、站点地图截图、版本提交记录。评分细则（百分制）：|评价维度|核心指标|分值|评分细则示例||:|:|::|:||规范性(30)|命名规范|10|全项符合BEM/全小写/下划线规范得满分，每违规一处扣1分|||目录结构|10|严格遵循规划目录树，无冗余文件、无深层嵌套(>4层)|||代码标准|10|HTML5语义化、W3C验证通过、缩进统一、无内联样式/脚本||工程性(30)|站点定义|10|本地/远程/测试服务器配置完整，相对站点根目录路径模式|||资源管理|10|资源面板五面板均有效配置，库项目复用率≥80%|||链接健康|10|站点内零断链，外链安全属性全覆盖，Cloaking配置隐藏源文件||创新性(20)|扩展应用|10|完成分层作业进阶/挑战层任务，引入新技术(如CSS变量/Git)|||问题解决|10|过程性记录中体现独立排查疑难杂症(如编码乱码、路径穿越)||素养观察(20)|协作与分享|10|协作平台活跃度、互助解答质量、资源贡献度|||职业素养|10|文件版本备注规范、截止时间前交付、代码整洁度(无冗余注释/调试代码)|素养观察依托《核心素养观察记录表》，教师随机记录关键行为：主动纠正同伴命名不规范(信息意识)、推演路径解析原理(计算思维)、尝试Git版本控制(数字化创新)、拒绝使用盗版素材并标注来源(社会责任)。教学反思与迭代优化预案预设反思点一：工具版本差异导致教学演示与学生实操界面不一致（如DWCC2019无Git面板，2021有）。优化方案：统一机房镜像版本；准备“版本差异对照表”手册；教学重心下沉至“站点管理核心逻辑”而非界面按钮位置。预设反思点二：学生对“相对站点根目录路径”理解停留在“以/开头”语法层面，未建立“虚拟主机文档根目录”心智模型。优化方案：引入可视化路径解析动画演示；安排“本地预览vs服务器预览”对比实验，亲历绝对路径在file://协议下失效的痛点，内化“协议决定基准”认知。预设反思点三：分层任务导致进度两极分化，挑战层学生闲置，基础层学生焦虑。优化方案：实施“领学制”，挑战层学生担任组长负责基础层操作托底，进阶层学生攻关资源面板疑难杂症，教师巡回“把脉”关键节点；设置“通关制”最低门槛，保底任务全班必过，拓展任务计入素养观察加分项。迭代方向：引入Figma/Sketch设计稿标注还原流程，打通“设计—>切图—>标注—>重构”全链路；接入无障碍访问(WCAG2.1)检测工具，将语义化标签、ARIA属性、颜色对比度纳入评价指标；探索“站点性能预算”概念，引入Lighthouse审计，从“能跑通”进阶至“跑得快、体验好”。附件一：站点目录结构规范与命名规约速查表|资源类型|目录规范|命名规约|示例|备注||:|:|:|:|:||站点根目录|项目根目录|项目代号_阶段_版本|club_recruit_v1|全小写，下划线分词，禁用中文/空格/特殊符号||入口文件|根目录|index.html|index.html|服务器默认识别入口，必须存在||样式文件|/css/|功能/页面_模块.css|mon.css,page_index.css|公共/页面级分离，避免单文件过大||脚本文件|/js/|功能/模块.js|main.js,form_validator.js|按功能模块拆分，ES6模块化导入||图片资源|/images/|业务类型/语义.格式|banner/hero_bg.webp,icon/arrow.svg|分类建子目录，优先WebP/SVG，注明尺寸||字体文件|/fonts/|字体名_字重.格式|pingfang_sc_medium.woff2|仅存放Web字体，本地字体