第1单元 1多工具开发环境搭建-HBuilder X、Dreamweaver与浏览器应用

教学设计一、基本信息课程名称Web前端开发技术课题名称多工具开发环境搭建——HBuilderX、Dreamweaver与浏览器应用授课班级授课时间授课类型理实一体化、新授课授课地点机房（有网络，接入超星教学平台）授课学时40分钟*2学时教材分析本节选自单元1核心实训内容，涵盖HBuilderX、Dreamweaver两款开发工具及浏览器的安装使用，是Web前端开发的入门基础。教材提供了清晰的实操步骤与案例，需补充跨工具对比案例，帮助学生建立工具选型思维，为后续网页制作铺垫。学情分析1.前置基础：已掌握计算机基本操作、文件管理技能，了解Web前端开发概念，具备软件安装的初步能力，可衔接工具实操任务。

2.学情特点：动手能力强、具象思维突出，对实操类内容兴趣浓厚；抽象逻辑较弱，对工具功能差异、浏览器调试作用的理解需具象引导。

3.潜在不足：缺乏工具选型意识，对开发工具与浏览器的协同作用认知不足，需通过任务驱动与案例对比化解。教学目标【知识目标】：

1.了解HBuilderX、Dreamweaver的功能特点及适用场景，掌握谷歌浏览器的安装与开发者工具基础用法。

2.掌握两款开发工具的安装、界面认知及简单网页创建步骤。

【能力目标】：

1.能独立完成HBuilderX、Dreamweaver及谷歌浏览器的安装与基础配置。

2.能使用两款工具创建简单网页，并通过浏览器预览验证效果。

【素质目标】：

1.培养规范的工具操作习惯与跨工具对比思维。

2.增强自主探究与问题解决能力，激发前端开发兴趣。教学重点1.HBuilderX的安装、界面认知及简单网页的创建与预览。

2.谷歌浏览器的安装及开发者工具的基础调用方法。教学难点1.区分HBuilderX与Dreamweaver的功能差异，建立工具选型逻辑。

2.理解浏览器开发者工具在网页调试中的作用，掌握基础调试操作。教学准备1.硬件：机房计算机（每人一台）、投影仪、音响。

2.软件：超星教学平台（上传工具安装包、操作视频、AI提示词模板）、HBuilderX、Dreamweaver、谷歌浏览器官方安装包。

3.素材：工具界面对比图、简单网页案例源码、实操任务单、AI辅助安装提示词。教学方法1.主导方法：项目引领任务驱动教学法。

2.辅助方法：理实一体化教学法、案例演示法、讲练结合法、跨工具对比法。板书设计核心内容：1.开发工具（HBuilderX免装、Dreamweaver可视化）；2.谷歌浏览器+开发者工具；3.核心任务：安装→创建网页→预览调试。二、教学设计教学环节教学内容师生活动设计意图/时间环节一：情景导入，项目发布（亮点：AI辅助任务规划）1.情景展示：展示3个不同风格网页案例（静态文本页、可视化排版页），提问“这些网页可用哪些工具制作？如何验证网页效果？”，引出本节课核心工具。

2.项目发布：明确本课时核心项目“搭建多工具开发环境并制作测试网页”，拆解为3个子任务——安装HBuilderX并创建网页、安装Dreamweaver对比操作、安装浏览器并调试预览。

3.AI辅助：展示超星平台的AI提示词模板（如“安装HBuilderX的步骤及界面认知要点”），引导学生利用AI获取实操指导。教师：展示案例，发起提问，讲解项目目标与子任务；演示如何使用AI提示词获取安装步骤，强调AI作为辅助工具的作用。

学生：观察案例，思考问题，明确学习目标；尝试使用AI提示词查询工具安装要点，记录关键步骤。设计意图：以案例激发兴趣，用AI辅助工具契合前沿教学，贴合职校生具象思维，明确任务方向。时间：10分钟。环节二：实操示范，突破重点（亮点：理实同步+易错点标注）1.HBuilderX安装与使用：

（1）安装：演示从官网下载安装包，解压后启动（强调免安装特性），创建桌面快捷方式的步骤，标注“解压路径避免中文”易错点。

（2）界面认知：讲解菜单栏、资源管理器、编辑器、预览区等核心区域功能，演示主题切换操作。

（3）创建网页：演示新建“基本HTML项目”，新建index.html文件，编写教材示例代码（标题+段落标签），使用内置浏览器预览效果。

2.谷歌浏览器安装：演示官网下载安装包，按向导完成安装，讲解浏览器在网页预览中的核心作用。教师：采用理实一体化教学法，通过投影仪分步演示，实时标注易错点；引导学生对比AI提示词步骤与演示步骤的差异。

学生：跟随演示同步操作，完成HBuilderX与浏览器安装，仿写网页代码，预览效果；遇到问题及时记录，小组内初步交流。设计意图：分步演示强化重点操作，易错点标注降低实操难度，契合学生动手能力强的特点，夯实基础技能。时间：20分钟。环节三：自主实操，跨工具对比（亮点：工具差异化实操）自主实操任务（结合小组协作）：

1.Dreamweaver安装与界面认知：

（1）按AI提示词或超星素材步骤，独立完成Dreamweaver安装，启动后熟悉可视化编辑区、代码区布局。

（2）对比HBuilderX界面，记录两款工具的功能差异（如Dreamweaver可视化编辑优势、HBuilderX轻量免装特点）。

2.跨工具网页制作：

（1）在Dreamweaver中创建相同内容的网页（复用HBuilderX中的标题、段落代码），切换“代码视图”与“设计视图”观察效果。

（2）分别用两款工具的预览功能打开网页，对比预览效果的一致性。教师：巡视指导，重点帮扶安装困难的学生；提供工具对比清单，引导学生梳理差异；针对共性问题（如Dreamweaver视图切换）集中讲解。

学生：独立完成Dreamweaver安装与网页制作，小组内交流工具使用感受，填写对比清单；总结两款工具的操作便捷性差异。设计意图：通过跨工具实操化解“工具选型”难点，培养对比思维，让学生自主感知不同工具的适用场景。时间：20分钟。环节四：难点精讲，调试实操（亮点：浏览器调试落地）1.浏览器开发者工具：讲解谷歌浏览器开发者工具的调用方法（F12键或右键“检查”），介绍“元素”“控制台”面板的基础功能。

2.调试实操：

（1）故意在网页代码中植入错误（如标签未闭合、字符编码错误），演示如何通过开发者工具“元素”面板定位错误位置。

（2）引导学生修改错误代码，刷新浏览器验证效果，掌握“编写-调试-修正”的闭环流程。

3.工具选型总结：结合实操案例，总结两款工具的适用场景（HBuilderX适合快速开发、Dreamweaver适合可视化设计）。教师：采用案例演示法，通过错误案例讲解调试技巧，强化难点突破；引导学生总结工具选型逻辑，结合专业方向给出建议。

学生：跟随演示学习开发者工具使用，自主排查网页代码错误，完成修正与预览；记录调试步骤与工具选型要点。设计意图：以错误案例具象化调试功能，突破“浏览器调试”难点，固化实操闭环思维，提升问题解决能力。时间：15分钟。环节五：课堂小结，布置作业1.小结：梳理本节课核心内容（两款开发工具的安装使用、浏览器调试、工具选型逻辑），回顾重难点与易错点，强化知识体系。

2.作业布置：明确课后任务要求，强调实操规范性与成果提交节点。教师：引导学生自主总结，补充完善知识点框架；通过超星平台发布作业，附上作业评价标准与拓展资料（工具进阶技巧）。

学生：梳理实操流程与知识要点，记录作业要求；保存课堂制作的网页文件，疑问及时提出。设计意图：梳理知识体系，强化记忆；通过作业延伸实操，巩固课堂成果，为下节课VSCode学习铺垫。时间：15分钟。三、课后作业和教学反思课后作业1.重新梳理HBuilderX、Dreamweaver的安装步骤与功能差异，撰写50字左右的工具使用心得，上传至超星平台。

2.使用两款工具分别制作一个简单网页（新增1个水平线标签），通过浏览器调试修正错误，将网页文件与调试截图一并提交。教学反