Web前端开发HTML5 CSS3教案DreamWeaver工具的使用教案.doc

课程名称 WEB前端开发（1） 课次 2 任务、项目、课题名称 DreamweaverCC 2018工具的使用 课时 2学时 教学内容 Dreamweaver工具的使用 新建HTML5页面 教学目标 熟悉Dreamweaver操作界面 掌握新建HTML5页面的方法 教学重点 掌握新建HTML5页面的方法 教学难点 Dreamweaver工具的使用 教学活动及主要环节 学生活动 复习提问（5分钟） URL/HTTP/HTML的含义 导入新课：（3分钟） 制作网页的工具很多（Hbuilder、VScode等课下可自行了解，大同小异），Dreamweaver就是其中一种，它提供的可视化设计环境可非常方便地创建和编辑网页.因此本节介绍该软件的基本使用。 新授： Dreamweaver CC2018界面介绍（2分钟） 1、初始化设置（10分钟） 工作区布局 设置字体 选择菜单栏中的【编辑】→【首选项】选项，分类列表中选择“字体”，右侧设置“代码视图”合适的字号大小。 设置界面 分类列表中选择“界面”，更改可应用程序主题和代码主题 更改主浏览器和次浏览器 分类列表中选择“实时预览”，主浏览器快捷键F12 2、界面介绍（15分钟） （教师演示知识点涉及的具体操作） 菜单栏：文件、编辑、站点、窗口 工具栏：“格式化源代码”按钮、“应用注释”按钮、“删除注释”按钮 浮动面板：“文件”面板 二、新建HTML5页面（15分钟） “文件”——“新建”，打开“新建文档”对话框，单击“创建”按钮。 （演示后让学生总结，确保每一个同学都会新建网页文件） 在body/body标记中写入一个段落标记p/p，输入内容“这是我的第一个网页文件”。 F12再浏览器预览。（注：因电脑设置，部分电脑按Fn+F12预览） 小结：（5分钟） 熟悉DW界面构成、DW的运行环境，会创建最简单的网页文件并运行。 作业： 实训一 超星作业 超星平台利用“随机选人”功能，学生回答问题 学生跟随教师一起操作 学生跟随教师一起操作