中文版DreamweaverCC基础培训教程-教学教案

《中文版DreamweaverCC基础培训教程》配套教学教案课时内容网页的基本操作授课时间45分钟课时1教学目标网页设计基础。制作网站的基本流程。上机实训——赏析特色网站。教学重点网页制作的核心语言。如何正确搭配网页的色彩。教学难点如何正确搭配网页的色彩。教学设计教学思路：（1）先介绍一些主流网站的网页，让学生着重赏析网页的布局和色彩搭配；（2）接着介绍常见的网站类型、网站的基本结构等知识点，着重讲解网页制作的核心语言；（3）最后讲解制作网站的基本流程。教学手段：讲解常见的网站类型、网页的大致分类、制作网页使用的语言，以及制作网页应该遵循的原则；讲解制作网站的一般流程，并带领学生一起赏析一些特色网站。教学资料及要求：除教材中讲解的知识，可以要求学生在上网的时候多多观察每个网页的布局、配色等。教学内容知识回顾：下面将讲解网页设计基础，以及制作网站的基本流程。讨论问题：1、什么是网站？什么是网页？网站和网页之间的关系是什么？2、说一说有名的网站有些什么？3、你知道网页的分类吗？内容大纲：具体可结合本章的PPT课件进行配合讲解。1.1网页设计基础1.1.1网站与网页的关系1.1.2常见的网站类型1.1.3网页的分类1.1.4网站的基本结构1.1.5网页的构成要素1.1.6网页制作的核心语言1.1.7屏幕分辨率和网页编辑器1.1.8网页色彩搭配1.1.9网页制作遵循的原则1.2制作网站的基本流程1.2.1网站分析与策划1.2.2网页效果图设计1.2.3创建并编辑网页文档1.2.4优化与加工网页文档1.2.5测试并发布HTML文档1.2.6网站的更新与维护1.3上机实训——赏析特色网站1.3.1实训要求1.3.2实训分析1.3.3操作思路1.4课后练习1.练习1——规划个人网站2.练习2——规划灯饰照明网站小结了解网站与网页的关系。了解网站类型与基本结构。掌握网页的基本构成要。掌握网站制作的基本流程。思考及作业课后练习：练习1本练习要求对个人网站进行规划。该网站主要用于展示用户的个人摄影作品、个人信息和最新动态，并且会和大家分享一些摄影作品的拍摄技巧。要求制作的网页能体现该网站的主要功能，界面设计要符合网站特色。要完成本练习需要先搜集相关的图像和文字等资料，然后制作草图并确认。练习2本练习要求对一个灯饰照明电商网站进行规划。该网站主要用于展示企业的产品、企业的相关信息和最新动态。要求制作的网页能体现该网站的主要功能，界面设计要符合网站特色。要完成本练习需要先搜集相关的图像和文字等资料，然后规划站点结构。

课时内容DreamweaverCC的基本操作授课时间135分钟课时3教学目标认识DreamweaverCC工作界面。创建与管理站点。网页文档的基本操作。设置页面属性。上机实训——创建“花火植物”站点。教学重点如何创建与管理站点？如何管理站点中的文件和文件夹？如何设置页面属性？教学难点如何设置页面属性？教学设计教学思路：（1）通过自定义工作界面的小例子引出对DreamweaverCC工作界面的介绍，可以多讲解一些关于“属性”面板和几个不同视图方面的知识；（2）通过创建和编辑“宝莱灯饰”网站的例子讲解创建与管理站点，以及管理站点中的文件和文件夹的知识；（3）通过创建并保存网页的小例子来讲解新建和保存网页文档，以及打开和关闭网页文档的知识；（4）通过设置“djqsm.html”网页属性的例子来讲解设置页面属性的知识（5）最后将本章所讲的知识点串联起来创建“花火植物”站点，达到学以致用的目的。教学手段：通过理论带案例步骤的方式，让学生加深理论知识理解的同时，掌握其操作方法；教学资料及要求：学生可以使用教材中的方法，在不同的PPT里进行实践，熟练其操作方法。教学内容知识回顾：在前面讲解了网页的基本操作，以及制作网站的基本流程，下面对DreamweaverCC的工作界面、创建与管理站点、网页文档的基本操作，以及设置页面属性等知识进行讲解。讨论问题：1、如何高效地管理站点呢？2、如何设置页面属性？内容大纲：具体可结合本章的PPT课件进行配合讲解。2.1认识DreamweaverCC工作界面2.1.1课堂案例——自定义工作界面2.1.2文档窗口2.1.3面板组2.1.4“属性”面板2.1.5工作区布局2.1.6视图模式2.1.7环境设置2.2创建与管理站点2.2.1课堂案例——创建并编辑“宝莱灯饰”网站2.2.2创建本地站点2.2.3管理站点2.2.4管理站点中的文件和文件夹2.3网页文档的基本操作2.3.1课堂案例——创建并保存zhuce.html网页2.3.2新建网页2.3.3保存文档2.3.4打开与关闭文档2.4设置页面属性2.4.1课堂案例——设置“djqsm.html”网页属性2.4.2设置“外观（CSS）”属性2.4.3设置“外观（HTML）”属性2.4.4设置“链接（CSS）”属性2.4.5设置标题2.4.6设置标题/编码2.4.7跟踪图像2.5上机实训——创建“花火植物”站点2.5.1实训要求2.5.2实训分析2.5.3操作思路2.6课后练习1.练习1——自定义“我的工作区”2.练习2——创建并规划“珠宝”网站小结如何创建与管理站点？如何管理站点中的文件和文件夹？如何设置页面属性？思考及作业练一练：练习1——自定义“我的工作区”根据工作使用习惯的不同，用户可自定义DreamweaverCC的工作区，使其更加符合设计者的操作习惯。本练习将自定义一个工作区，然后将其保存。练习2——创建并规划“珠宝”网站某珠宝公司需要制作一个电子商务网站，需要先对站点进行规划，首先是网站首页，然后按不同内容分成多个页面，最后在DreamweaverCC中创建站点、文件和相关文件夹。课时内容制作基础的文本网页授课时间90分钟课时2教学目标插入文本对象。设置网页头部内容。上机实训——制作企业简介网页教学重点如何输入文本并设置文本属性？怎样插入日期和特殊符号？怎样插入列表？教学难点如何输入文本并设置文本属性？教学设计教学思路：（1）通过制作“花火简介”网页的案例来讲解输入文本、设置文本属性，以及插入各种特殊对象的方法；（2）通过设置“Index.html”文件头的案例来介绍设置网页头部内容的知识；（3）最后将本章所讲的知识点串联起来制作企业简介网页，达到学以致用的目的。教学手段：通过理论带案例步骤的方式，让学生加深理论知识理解的同时，掌握其操作方法。教学资料及要求：除教材中的实例外，学员还需通过其他途径了解更多的制作文本网页的方法。教学内容知识回顾：前面讲解了DreamweaverCC的基本操作，包括认识DreamweaverCC的工作界面、创建与管理站点，以及设置网页属性等知识，下面将对在网页中插入文本对象、设置网页头部内容等知识进行讲解。讨论问题：1、为什么要在网页中插入水平线？2、能够在网页中插入哪些类型的列表？内容大纲：具体可结合本章的PPT课件进行配合讲解。3.1插入文本对象3.1.1课堂案例——制作“花火简介”网页3.1.2输入文本3.1.3设置文本属性3.1.4插入特殊符号3.1.5插入日期3.1.6插入水平线3.1.7插入列表3.2设置网页头部内容3.2.1课堂案例——设置“Index.html”文件头3.2.2Meta3.2.3关键字3.2.4说明3.2.5视口3.3上机实训——制作企业简介网页3.3.1实训要求3.3.2实训分析3.3.3操作思路3.4课后练习1.练习1——制作学校简介网页2.练习2——制作代金券说明网页小结掌握文本的基本操作。掌握特殊文本对象的插入方法。掌握项目符号和编号列表的插入方法。掌握网页头部内容的设置方法。思考及作业练一练：练习1——制作学校简介网页打开“xxjj.html”网页文件，在其中输入文本并设置文本格式和段落格式、然后添加水平线。练习2——制作代金券说明网页新建“djqsm.html”网页文件，在其中设置网页说明和关键字，然后在网页中添加文本，并设置文本格式和段落格式，添加其他网页元素。课时内容制作丰富的图像网页授课时间90分钟课时2教学目标插入与设置图像。插入并设置多媒体元素。上机实训——美化“帮助中心”网页。教学重点如何插入图像并设置其属性？如何插入鼠标经过图像？怎样插入多媒体元素？教学难点如何插入图像并设置其属性？如何插入鼠标经过图像？教学设计教学思路：（1）通过制作“植物分类”网页的案例来讲解在网页中插入图片并为其设置属性的方法，并引申出插入鼠标经过图片、插入FireworksHTML的方法；（2）通过制作“花火团购”网页的案例来介绍插入并设置多媒体元素的方法；（3）最后将本章所讲的知识点串联起来美化“帮助中心”网页，达到学以致用的目的。教学手段：通过理论带案例步骤的方式，让学生加深理论知识理解的同时，掌握其操作方法。教学资料及要求：除教材中的实例外，学员还需通过其他途径了解更多的制作图像网页的方法。教学内容知识回顾：在前面对在网页中插入文本对象，以及设置网页头部内容等内容进行讲解，下面讲解制作丰富的图像网页的方法，包括插入与设置图像，以及插入并设置多媒体元素等知识点。讨论问题：1、你觉得美观的网页应该包含些什么元素？2、你知道的图像格式有哪些？内容大纲：具体可结合本章的PPT课件进行配合讲解。4.1插入与设置图像4.1.1课堂案例——制作“植物分类”网页4.1.2网页中常用的图像格式4.1.3插入图像4.1.4设置图像属性4.1.5插入鼠标经过图像4.1.6插入FireworksHTML4.2插入并设置多媒体元素4.2.1课堂案例——制作“花火团购”网页4.2.2使用EdgeAnimate动画4.2.3使用HTML5Video文件4.2.4使用HTML5Audio音频文件4.2.5使用FlashSWF动画文件4.2.6使用FlashVideo视频文件4.2.7使用插件4.3上机实训——美化“帮助中心”网页4.3.1实训要求4.3.2实训分析4.3.3操作思路4.4课后练习1.练习1——制作“订餐”网页2.练习2——制作“家居”网页小结掌握插入各种图像的方法。掌握设置图像属性的方法。掌握Flash动画和背景音乐的添加方法。掌握其他多媒体对象的插入和设置方法。思考及作业练一练：练习1——制作“订餐”网页本练习要求制作一个“订餐”网页的部分页面，主要包括操作：在网页中插入图像设置图像的属性和输入文本。练习2——制作“家居”网页本练习要求在“家居”网页中插入SWF动画和背景音乐，最后再插入图像并输入文字，使制作的网页效果更加美观。

课时内容为网页添加超链接授课时间90分钟课时2教学目标认识超链接。创建超链接。管理超链接。上机实训——设计“详情页”网页的跳转。教学重点怎样创建文本和图像超链接？如何管理超链接？教学难点怎样创建文本和图像超链接？教学设计教学思路：（1）首先为学生介绍什么是超链接，以及超链接的类型和路径；（2）通过为植物网站设计跳转的案例来介绍如何创建超链接；（3）然后讲解检查超链接、更改超链接，以及自动更新超链接的知识；（4）最后将本章所讲的知识点串联起来设计“详情页”网页的跳转，达到学以致用的目的。教学手段：通过理论带案例步骤的方式，让学生加深理论知识理解的同时，掌握其操作方法。教学资料及要求：除教材中的实例外，学员还需通过其他途径了解更多的制作文本网页的方法。教学内容知识回顾：前面讲解了制作文本网页和图像网页的方法，下面将介绍在网页中添加超链接的方法。讨论问题：1、超链接的类型有哪些？2、可以为网页中的什么元素添加超链接？内容大纲：具体可结合本章的PPT课件进行配合讲解。5.1认识超链接5.1.1超链接的定义5.1.2超链接的类型5.1.3链接路径5.2创建超链接5.2.1课堂案例——为植物网站设计跳转5.2.2创建文本超链接5.2.3创建图像超链接和热点链接5.2.4创建电子邮件超链接5.2.5创建锚点超链接5.2.6创建其他超链接5.3管理超链接5.3.1检查超链接5.3.2在站点范围内更改超链接5.3.3自动更新超链接5.4上机实训——设计“详情页”网页的跳转5.4.1实训要求5.4.2实训分析5.4.3操作思路5.5课后练习1.练习1——为“企业新闻”网页创建超链接2.练习2——为“帮助”网页创建超链接小结了解超链接的定义和路径。了解超链接的类型。掌握创建不同类型的超链接的方法。掌握管理超链接的方法。思考及作业练一练：练习1——为“企业新闻”网页创建超链接本练习要求在“企业新闻”网页中创建文本、图像热点、电子邮件和空链接，并对超链接属性进行设置。练习2——为“帮助”网页创建超链接本练习要求为“帮助”网页创建超链接，主要包括文本超链接、电子邮件超链接、空链接、锚点链接的创建。

课时内容网页布局设计授课时间180分钟课时4教学目标使用表格布局网页。创建CSS样式表。DIV+CSS美化网页。上机实训——制作“产品展示”网页。教学重点如何插入和编辑表格？如何创建CSS样式表？怎样使用CSS+DIV进行布局？教学难点怎样使用CSS+DIV进行布局？教学设计教学思路：（1）通过制作“上新活动”网页的案例来讲解使用表格布局网页的方法；（2）通过制作“style.css”样式表的案例来讲解创建CSS样式表的方法；（3）通过制作花火植物家居馆首页来介绍使用DIV+CSS美化网页的方法；（4）最后将本章所讲的知识点串联起来制作产品展示网页，达到学以致用的目的。教学手段：通过理论带案例步骤的方式，让学生加深理论知识理解的同时，掌握其操作方法。教学资料及要求：除教材中的实例外，学员还需通过其他途径了解更多的制作文本网页的方法。教学内容知识回顾：前面介绍了为网页添加超链接的知识，下面将对网页布局设计进行介绍。讨论问题：1、在网页中利用表格布局有什么好处？2、在网页中利用CSS样式表布局有什么好处？内容大纲：具体可结合本章的PPT课件进行配合讲解。6.1使用表格布局网页6.1.1课堂案例——制作“上新活动”网页6.1.2插入表格6.1.3选择表格和单元格6.1.4调整表格或单元格的大小6.1.5增加和删除表格的行或列6.1.6合并与拆分单元格6.1.7设置表格和单元格的属性6.1.8表格的高级操作6.2创建CSS样式表6.2.1课堂案例——制作“style.css”样式表6.2.2CSS概述6.2.3CSS样式表的基本语法6.2.4CSS样式表的类型6.2.5认识CSS设计器6.2.6创建样式表6.2.7使用丰富的CSS样式6.2.8CSS过渡效果的应用6.3DIV+CSS美化网页6.3.1课堂案例——制作花火植物家居馆首页6.3.2认识DIV标签6.3.3认识DIV+CSS布局模式6.3.4插入DIV元素6.3.5HTML5结构元素6.3.6使用jQueryUI6.4上机实训——制作“产品展示”网页6.4.1实训要求6.4.2实训分析6.4.3操作思路6.4课后练习1.练习1——制作“蓉锦大学教务处”网页2.练习2——制作“花店”网页小结掌握在网页中插入和编辑表格的方法.掌握在网页中创建CSS样式的方法.掌握使用CSS+DIV进行布局的操作方法。思考及作业练一练：练习1——制作“蓉锦大学教务处”网页本练习要求使用DIV+CSS来布局“蓉锦大学教务处”网页，制作时先创建DIV，然后进行编辑，最后通过CSS样式来统一控制页面风格。通过本练习的学习，可以掌握DIV+CSS布局页面的方法。练习2——制作“花店”网页本练习要求制作“flowes.html”网页，该网页是一个鲜花网页，主要用于展示店铺的鲜花产品。本练习将采用DIV+CSS来完成布局。

课时内容使用模板与库文件授课时间90分钟课时2教学目标创建并编辑模板。创建并使用库。上机实训——制作“婚纱详情页”网页模板。教学重点如何创建并编辑模板？如何创建并使用库文件？教学难点如何创建并编辑模板？如何创建并使用库文件？教学设计教学思路：（1）通过制作“宅家优购”网页的案例来讲解创建并编辑模板的方法；（2）通过制作“新品体验”网页的案例来介绍创建并使用库的知识；（3）最后将本章所讲的知识点串联起来制作“婚纱详情页”网页模板，达到学以致用的目的。教学手段：通过理论带案例步骤的方式，让学生加深理论知识理解的同时，掌握其操作方法。教学资料及要求：除教材中的实例外，学员还需通过其他途径了解更多的制作文本网页的方法。教学内容知识回顾：前面对网页布局设计进行了讲解，下面讲解在网页中使用模板与库文件的知识。讨论问题：1、模板有什么作用？2、库是什么？它有什么作用？内容大纲：具体可结合本章的PPT课件进行配合讲解。7.1创建并编辑模板7.1.1课堂案例——制作“宅家优购”网页7.1.2模板的概述7.1.3创建模板7.1.4编辑模板7.1.5应用模板7.2创建并使用库7.2.1课堂案例——制作“新品体验”网页7.2.2认识库7.2.3创建库项目7.2.4库项目的其他操作7.2.5设置库属性7.3上机实训——制作“婚纱详情页”网页模板7.3.1实训要求7.3.2实训分析7.3.3操作思路7.4课后练习1.练习1——制作“精品推广”网页2.练习2——制作“合作交流”模板网页小结掌握创建并编辑模板的方法。掌握创建并使用库文件的方法。思考及作业练一练：练习1——制作“精品推广”网页本练习要求为“服装网”制作一个精品推广页面，该网页主要由导航和推广内容组成，要求使用Dreamweaver的库功能来实现快速制作。练习2——制作“合作交流”模板网页本练习要求通过模板来快速制作合作交流页面。制作时可先创建模板，在其中创建可编辑区域，然后通过创建的模板来新建“hzjl.html”网页，并在网页中添加内容。

课时内容使用表单和行为授课时间90分钟课时2教学目标使用表单。应用JavaScript行为。上机实训——制作“用户注册”网页。教学重点使用表单的方法是什么？怎样在网页中应用JavaScript行为？教学难点使用表单的方法是什么？怎样在网页中应用JavaScript行为？教学设计教学思路：（1）通过制作“植物网登录”网页的案例来讲解使用表单的方法，其中包括介绍表单的概念、插入并设置表单属性、插入表单元素等知识点；（2）通过完善“植物网注册”网页的效果来讲解应用JavaScript行为的知识；（3）最后将本章所讲的知识点串联起来制作“用户注册”网页，达到学以致用的目的。教学手段：通过理论带案例步骤的方式，让学生加深理论知识理解的同时，掌握其操作方法。教学资料及要求：除教材中的实例外，学员还需通过其他途径了解更多的制作文本网页的方法。教学内容知识回顾：前面讲解了在网页中使用模板与库文件，下面将介绍使用表单和JavaScript行为的知识。讨论问题：1、表单的常见作用是什么？2、常用的事件包括些什么？内容大纲：具体可结合本章的PPT课件进行配合讲解。8.1使用表单8.1.1课堂案例——制作“植物网登录”网页8.1.2表单的概述8.1.3创建表单并设置属性8.1.4插入表单元素8.1.5使用jQueryUI的表单部分8.2应用JavaScript行为8.2.1课堂案例——完善“植物网注册”效果8.2.2认识行为8.2.3弹出窗口信息8.2.4打开浏览器窗口8.2.5调用JavaScript行为8.2.6转到URL行为8.2.7显示文本行为8.2.8图像与多媒体的行为8.2.9用行为控制表单8.2.10使用行为添加jQueryt效果8.3上机实训——制作“用户注册”网页8.3.1实训要求8.3.2实训分析8.3.3操作思路8.4课后练习1.练习1——制作“小儿郎注册网页”2.练习2——制作“宅粉注册”网页小结掌握使用表单的方法。掌握在网页中应用JavaScript行为的方法。思考及作业练一练：练习1——制作“小儿郎注册网页”本练习要求为“小儿郎”培训班制作一个用户注册网页，该网页主要由用户注册页面和使用协议页面组成，要求使用Dreamweaver的表单和行为功能来实现。练习2——制作“宅粉注册”网页本练习要求为宅家商城网站制作一个用户注册页面，要求该页面能够为网站收集用户的相关基本信息、实现用户与网站的交互。

课时内容制作移动端网页授课时间90分钟课时2教学目标使用jQueryMobile。使用PhoneGapBuild打包移动应用。上机实训——制作移动端页面。教学重点怎么使用jQueryMobile？怎么使用PhoneGapBuild打包移动应用？教学难点怎么使用jQueryMobile？教学设计教学思路：（1）通过制作没事APP主页的案例来讲解使用jQueryMobile制作移动端网页的方法；（2）介绍PhoneGapBuild，并讲解利用PhoneGapBuild打包移动应用程序的方法；（3）最后将本章所讲的知识点串联起来制作移动端页面，达到学以致用的目的。教学手段：通过理论带案例步骤的方式，让学生加深理论知识理解的同时，掌握其操作方法。教学资料及要求：除教材中的实例外，学员还需通过其他途径了解更多的制作文本网页的方法。教学内容知识回顾：前面介绍了利用DreamweaverCC制作电脑端网页的知识，下面将介绍制作移动端网页的知识。讨论问题：1、怎么创建jQueryMobile页面？2、怎么使用jQueryMobile组件？内容大纲：具体可结合本章的PPT课件进行配合讲解。9.1使用jQueryMobile9.1.1课堂案例——制作美食App主页9.1.2认识jQueryMobile9.1.3创建jQueryMobile页面9.1.4使用jQueryMobile组件9.2使用PhoneGapBuild打包移动应用9.2.1认识PhoneGapBuild9.2.2注册PhoneGapBuild9.2.3打包移动应用程序9.3上机实训——制作移动端页面9.3.1