第3课站点的创建与管理( 一 ）（教案）-《网页设计与制作案例教程（第2版）》同步教学（航空工业出版社）

课题 站点的创建与管理( 一 ） 课时 2课时（180 min） 教学目标 知识技能目标： （1）认识Dreamweaver CC工作界面 （2）了解Dreamweaver CC的初始化设置 （3）掌握调整Dreamweaver CC工作界面的方法 思政育人目标： （1）体验网页制作工具的使用方法，培养基本的工作能力 （2）练习创建站点，锻炼学生的实践能力，培养学生的探究精神。 教学重难点 教学重点：Dreamweaver CC工作界面 教学难点：调整Dreamweaver CC工作界面 教学方法 情景模拟法、问答法、讨论法、练习法 教学用具 电脑、投影仪、多媒体课件、教材 教学设计 第1节课：课前任务→ 考勤（2 min）→ 问题导入（10 min）→传授新知（23 min）→课堂抢答（10 min） 第2节课：问题导入（5 min）→ 任务实施（25 min）→ 实践探究（10 min）→ 课堂小结（3 min）→ 作业布置（2 min） 教学过程 主要教学内容及步骤 设计意图 第一节课 课前任务 · 【教师】布置课前任务，和学生负责人取得联系，让其提醒同学通过文旌课堂APP，查阅资料，了解Dreamweaver CC软件 · 【学生】按照教师要求完成课前任务 通过课前的预热，让学生了解所学软件，激发学生的学习欲望 考勤 （2 min） · 【教师】使用文旌课堂APP进行签到 · 【学生】按照老师要求签到 培养学生的组织纪律性，掌握学生的出勤情况 问题导入 （10 min） · 【教师】提出以下问题： 阅读教材，说一说什么是Dreamweaver CC软件，它的主要作用是什么？ · 【学生】思考、举手发言 Dreamweaver CC是一款集网页制作和网站管理于一身，所见即所得的可视化网页编辑软件。 通过问题导入，引导学生思考，调动学生的主观能动性，了解本节课要学习的内容 传授新知 （23 min） · 【教师】通过学生的发言，引入新的知识点，介绍Dreamweaver CC 一、Dreamweaver CC的工作界面 【教师】安装Dreamweaver CC，展示其工作界面，帮助学习理解 Dreamweaver CC的工作界面比较简洁，主要由应用程序栏、工具栏和文档标签栏等组成。 （详见教材） 【教师】布置以下学习任务： 根据教材提示，安装软件，探索Dreamweaver CC软件应用程序栏、工具栏、文档标签栏的功能 【学生】思考、实际操作 【教师】巡视课堂纪律，对学习有困难的学生进行帮助 1．应用程序栏 应用程序栏位于工作区顶部，左侧显示菜单栏，右侧包含工作区切换器（可在其下拉列表中选择不同的工作区模式）和程序窗口控制（最小化、最大化及关闭）按钮 2．工具栏 工具栏用于放置一些常用按钮，如打开文档、文件管理等。此外，单击工具栏最下方的自定义工具栏按钮可以打开“自定义工具栏”对话框，在该对话框中能够自由设置工具栏中要显示的按钮。 3．文档标签栏 文档标签栏依次显示当前打开的所有网页文档的标签（标签上显示相应网页文档的名称）及其关闭按钮；当某个文档链接了外部文档时，其文档标签下方将显示当前文档源代码及其链接的文档名，单击对应的链接按钮，可打开其所链接的文档。 （详见教材） 【教师】展示Dreamweaver CC软件的界面，辅助学习理解Dreamweaver CC界面的文档工具栏的功能 4．文档工具栏 文档工具栏位于文档标签栏上方，包括代码、拆分、设计等按钮，单击它们可切换至对应的视图模式。 代码：在文档窗口中显示代码视图。代码视图是用于编写HTML、CSS、JavaScript，以及其他任何类型代码的手工编码环境。 设计：在文档窗口中显示设计视图。设计视图中显示的效果类似于在浏览器中看到的效果，用户可以在该视图中直接编辑网页中的各个对象，并且在对网页文档进行操作之后，网页代码会自动更新。 实时视图：单击“设计”按钮右侧的三角按钮，在展开的下拉列表中选择“实时视图”选项，文档窗口中即显示实时视图，其与设计视图类似，但能更逼真地显示文档在浏览器中的效果，还可以与文档进行交互。 （详见教材） 【教师】展示Dreamweaver CC软件的界面，辅助学习理解Dreamweaver CC界面的状态栏、“插入”面板、“文件”面板等菜单的功能 5．状态栏 状态栏位于文档窗口底部，它提供了当前文档的一些基本信息。 6．“插入”面板 “插入”面板包含用于创建和插入对象（如表格、图像等）的按钮，在设计视图或代码视图中定位插入点后单击某个按钮可插入对应的元素。例如，要在页面中插入图像，可先定位插入点，然后单击“Image”按钮。 7．“文件”面板 使用“文件”面板可查看和管理站点中