第2课 Dreamweaver CS5基本操作（教案）-《网页制作三合一案例教程》同步教学（航空工业出版社）

课题 第2课 Dreamweaver CS5基本操作 课时 2课时（90 min） 教学目标 知识目标： （1）认识Dreamweaver CS5工作界面中各组成元素 （2）掌握在Dreamweaver CS5中定义和管理站点的方法 （3）掌握在Dreamweaver CS5中新建、打开、保存和预览网页的方法 （4）掌握利用“文件”面板管理站点文件和文件夹的方法 技能目标： （1）掌握Dreamweaver CS5软件的使用 （2）掌握Dreamweaver CS5对站点进行管理 素质目标： 工欲善其事必先利其器，学习中不急不躁，做足充分准备 教学重难点 教学重点：使用Dreamweaver CS5软件制作网页的基本操作 教学难点：使用Dreamweaver CS5定义和管理站点 教学方法 问答法、讨论法、讲授法、练习法 教学用具 电脑、投影仪、多媒体课件、教材 教学设计 第1节课：课前任务→ 考勤（2 min）→  问题导入（3 min）→传授新知（30 min）→课堂实训（10 min） 第2节课：问题导入（3 min）→ 传授新知（27 min）→ 课堂实训（10 min）→ 课堂小结（3 min）→ 作业布置（2 min） 教学过程 主要教学内容及步骤 设计意图 第一节课 课前任务 【教师】让学生上网查询网页制作的软件有哪些，各自有哪些特点，应如何选择适合的软件 【学生】按照要求完成课前任务 通过课前任务，让学生了解行业中网页制作各类软件 考勤 （2 min） 【教师】使用文旌课堂APP进行签到 【学生】班干部报请假人员及原因 培养学生的组织纪律性，掌握学生的出勤情况 问题导入 （3min） 【教师】提出以下问题，并随机邀请学生进行回答 上节课我们在记事本中通过编写XHTML代码呈现出一个简单网页，这种方式有什么缺点？ 【学生】聆听、思考、回答 【教师】总结学生的回答，导入本节课内容：Dreamweaver CS5基本操作 通过上节课最原始的编写网页代码呈现网页，引出其缺点，让学生学会利用集成化的专门的网页制作软件 传授新知 （30 min） 【教师】讲解新知，介绍Dreamweaver CS5软件 任务一 认识Dreamweaver CS5工作界面 一、任务说明 本任务将简单介绍Dreamweaver CS5的工作界面。其中包括应用程序栏、文档标签栏、文档工具栏、状态栏、属性检查器和面板组。 二、预备知识 （一）启动Dreamweaver CS5 【多媒体】展示“Dreamweaver CS5起始页”与“Dreamweaver CS5工作界面”图片（详见教材） 单击桌面左下角的“开始”按钮，选择“所有程序”>“Adobe Dreamweaver CS5”，就可以启动Dreamweaver CS5了。 启动Dreamweaver CS5后，首先显示起始页。通过起始页可以直接打开最近使用过的文档或其他文档，也可以创建新文档，如图2-1所示（详见教材）。 单击起始页“新建”列中的任一项，将会创建一个相应格式的新文档，并进入Dreamweaver CS5工作界面。此处单击“HTML”项，创建一个.html格式的文档并进入Dreamweaver CS5工作界面，如图2-2所示（详见教材）。 （二）应用程序栏和文档标签栏 【多媒体】展示“应用程序栏和文档标签栏”图片（详见教材） 应用程序栏位于工作区顶部，左侧显示菜单栏，右侧包含工作区切换器（可在其下拉列表中选择不同的工作区模式）、“CS Live”按钮和程序窗口控制按钮。 文档标签栏位于应用程序栏下方，左侧显示当前打开的所有网页文档的标签（标签上显示相应网页文档的名称）及其关闭按钮；右侧显示当前文档在本地磁盘中的保存路径及向下还原按钮；下方显示当前文档中包含的文档以及链接文档。当用户打开多个网页时，通过单击文档标签可在各网页之间切换。另外，单击下方的包含文档或链接文档，同样可打开相应文档。 【知识库】 如果文档名后带一个“*”号，表示网页已修改但未保存。 （三）文档工具栏 文档工具栏位于文档标签栏下方，其中包括各种可对文档进行操作的按钮。 【多媒体】展示“文档工具栏”图片（详见教材） A．显示代码视图：在文档窗口中显示代码视图，代码视图以不同的颜色显示网页XHTML代码，方便用户区分各种标签并对代码进行编辑。 B．同时显示代码视图和设计视图：将文档窗口拆分为代码视图和设计视图，这样当用户在代码视图中编辑网页HTML源代码后，单击设计视图中的任意位置或单击“刷新设计视图”按钮，能立刻看到相应的编辑结果。 C．显示设计视图：在文档窗口中显示设计视图。在设计视图中可以直接编辑网页中的各个对象（一般情况下，使用Drea