Dreamweaver CS6网页设计与制作标准教程教学教案.docx
《Dreamweaver CS6网页设计与制作标准教程教学教案.docx》由会员分享，可在线阅读，更多相关《Dreamweaver CS6网页设计与制作标准教程教学教案.docx（41页珍藏版）》请在冰豆网上搜索。
DreamweaverCS6网页设计与制作标准教程教学教案
《DreamweaverCS6网页设计与制作标准教程（微课版）》
配套教学教案
第1讲
课时内容
网页设计基础知识
教学目标
þ掌握互联网基础和网站建设基本流程。
þ掌握网站建设基础和网页设计基础。
þ掌握网页的制作常用软件和标准技术。
教学重点
þ熟练掌握网站建设的基本流程。
þ熟练掌握网页设计基础知识。
教学难点
þ软件的应用和标准技术。
教学设计
1、教学思路：
（1）通过对互联网的了解讲解掌握互联网相关知识；
（2）通过对网站的了解讲解网站建设基本流程及网页设计基础知识；（3）通过网页设计需要讲解制作网页应用到的相关软件及语言。
2、教学手段：
（1）通过书籍了解相关知识；
（2）通过软件功能解析深入学习软件功能和制作特点。
3、教学资料及要求：
除了课堂讲解的软件功能外，还可以根据相关的工具特点进行简单的练习和操作。
教学内容
讨论问题：
1、网页可分为哪几种？
2、常见的版面布局形式有哪几种？
内容大纲：
具体可结合本项目的PPT课件进行配合讲解。
1.1互联网基础
1.1.1Internet与WEB服务
1.1.2URL路径
1.1.3服务器与浏览器
1.1.4互联网数据中心
1.2网站建设基本流程
1.2.1前期准备工作
1.2.2方案实施
1.2.3后期工作
1.3网站建设基础
1.3.1什么是静态网页
1.3.2什么是动态网页
1.3.3常见网站类型
1.3.4申请域名和购买空间
1.4网页设计基础
1.4.1网页版面布局的原则和方法
1.4.2常见的版面布局形式
1.4.3网页配色基础
1.5网页制作常用软件
1.5.1Photoshop
1.5.2Fireworks
1.5.3Flash
1.5.4Dreamweaver
1.6网页制作标准技术
1.6.1网页标记语言Html
1.6.2页面修饰语言CSS
1.6.3网页脚本语言JavaScript
1.6.4动态网页编程语言ASP、PHP和JSP
小结
1、熟练掌握网站建设基本流程。
2、熟练掌握网页设计基础知识。
第2讲
课时内容
初识DreamweaverCS6
教学目标
þ掌握软件的工作界面和创建网站框架。
þ掌握管理站点文件和文件夹的方法。
þ掌握管理站点和网页文件头设置。
教学重点
þ熟练掌握DreamweaverCS6工作界面的基本操作。
þ熟练掌握DreamweaverCS6的站点。
教学难点
þ在DreamweaverCS6中站点的建立及编辑。
教学设计
1.教学思路：
（1）通过对软件相关功能讲解掌握界面操作和站点设置的方法；
（2）通过软件相关功能的解析学习DreamweaverCS6工作界面的基本操作和设置文件头的基本方法。
2.教学手段：
（1）通过书籍了解软件功能；
（2）通过软件功能解析深入学习软件功能和制作特点。
3.教学资料及要求：
除了课堂讲解的软件功能外，还可以根据相关的工具特点进行简单的练习和操作。
教学内容
讨论问题：
1、在DreamweaverCS6中有哪几种方法可以创建站点？
2、同时本地站点与远程站点有什么区别？
内容大纲：
具体可结合本项目的PPT课件进行配合讲解。
2.1DreamweaverCS6的工作界面
2.1.1友善的开始页面
2.1.2不同风格的界面
2.1.3伸缩自如的功能面板
2.1.4多文档的编辑界面
2.1.5新颖的“插入”面板
2.1.6更完整的CSS功能
2.2创建网站框架
2.2.1站点管理器
2.2.2创建文件夹
2.2.3定义新站点
2.2.4创建和保存网页
2.3管理站点文件和文件夹
2.3.1重命名文件和文件夹
2.3.2移动文件和文件夹
2.3.3删除文件或文件夹
2.4管理站点
2.4.1打开站点
2.4.2编辑站点
2.4.3复制站点
2.4.4删除站点
2.4.5导入和导出站点
2.5网页文件头设置
2.5.1插入搜索关键字
2.5.2插入作者和版权信息
2.5.3设置刷新时间
2.5.4设置描述信息
小结
1、熟练掌握DreamweaverCS6界面的操作方法和技巧。
2、熟练掌握在DreamweaverCS6中站点的创建、编辑、复制、删除和导出的方法，掌握新建、保存的技巧。
第3讲
课时内容
文本与文档
教学目标
þ掌握输入文本和设置文本属性的方法。
þ掌握项目符号和编号列表的创建方法。
þ掌握水平线、网格与标尺的使用方法。
教学重点
þ熟练掌握文本的多种创建方法和编辑技巧。
þ熟练掌握项目符号、编号列表和水平线的使用方法。
教学难点
þ能够正确输入文本并编辑相关属性。
教学设计
1、教学思路：
（1）通过对课堂案例的讲解掌握绿林别墅网页、果蔬网、电器城网店和摄影艺术网页的制作方法；
（2）再通过软件相关功能的解析学习输入文本和编辑文本相关属性，以及进行区分使用项目符号和编号列表方法和技巧；（3）再通过课堂练习巩固软件功能及网页制作技巧；（4）最后通过课后习题消化所学软件知识，提高制作网页的能力。
2、教学手段：
（1）通过课堂案例熟悉设计理念和软件功能；
（2）通过软件功能解析深入学习软件功能和制作特点。
（3）通过课堂练习和课后习题提高学生的实际应用能力。
3、教学资料及要求：
在网上找一些简单的网页页面进行制作，来加深学员对知识点的理解和提高实际操作能力。
教学内容
讨论问题：
1、在DreamweaverCS6中可以有哪几种方法创建文本？
2、在DreamweaverCS6中如何输入多个连续空格？
内容大纲：
具体可结合本项目的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.1.8设置网页的默认格式
3.1.9课堂案例——果蔬网
3.1.10改变文本的大小
3.1.11改变文本的颜色
3.1.12改变文本的字体
3.1.13改变文本的对齐方式
3.1.14设置文本样式
3.1.15段落文本
3.2项目符号和编号列表
3.2.1课堂案例——电器城网店
3.2.2设置项目符号或编号
3.2.3修改项目符号或编号
3.2.4设置文本缩进格式
3.2.5插入日期
3.2.6特殊字符
3.2.7插入换行符
3.3水平线、网格与标尺
3.3.1课堂案例——摄影艺术网页
3.3.2水平线
3.3.3显示和隐藏网格
3.3.4标尺
3.4课堂练习——有机果蔬网页
3.5课后习题——休闲旅游网页
小结
1、熟练掌握文本的使用方法和技巧。
2、了解并掌握项目符号和编辑列表的使用方法和技巧。
作业
第4讲
课时内容
图像和多媒体
教学目标
þ熟练掌握图像的插入方法。
þ掌握多媒体在网页中的应用。
教学重点
þ熟练掌握图像的格式与模式。
þ熟练掌握Flash文件的插入与设置。
教学难点
þ能够正确使用图像和图像的属性设置、Flash文件的格式及设置属性。
教学设计
1、教学思路：
（1）通过对课堂案例的讲解掌握咖啡网页和木工网页的制作方法；
（2）再通过软件相关功能的解析学习图像的插入与使用技巧，以及进行动画的使用；（3）再通过课堂练习固软件功能及网页制作技巧；（4）最后通过课后习题消化所学软件知识，提高图像与动画的使用能力。
2、教学手段：
（1）通过课堂案例熟悉设计理念和软件功能；
（2）通过软件功能解析深入学习软件功能和制作特点。
（3）通过课堂练习练和课后习题提高学生的实际应用能力。
3、教学资料及要求：
在网上找一些带有图像和动画的网页页面进行制作，来加深学员对知识点的理解和提高实际操作能力。
教学内容
讨论问题：
1、在DreamweaverCS6中插入图像后在浏览器中不能正常显示图像，是哪几种原因造成？
如何解决？
2、在DreamweaverCS6中如何设置插入的Flash动画为透明背景？
内容大纲：
具体可结合本项目的PPT课件进行配合讲解。
4.1图像的插入
4.1.1课堂案例——咖啡网页
4.1.2网页中的图像格式
4.1.3插入图像
4.1.4设置图像属性
4.1.5给图片添加文字说明
4.1.6插入图像占位符
4.1.7跟踪图像
4.2多媒体在网页中的应用
4.2.1课堂案例——木工网页
4.2.2插入Flash动画
4.2.3插入FLV
4.2.4插入Shockwave影片
4.2.5影片插入Applet程序
4.2.6插入ActiveX控件
4.3课堂练习——时尚先生网页
4.4课后习题——房源网页
小结
1、熟练掌握图像的格式与插入方法和使用技巧。
2、掌握Flash动画的插入和属性的设置。
作业
第5讲
课时内容
超链接
教学目标
þ了解超链接的概念与路径知识。
þ掌握文本、图像超链接的创建方法。
þ掌握命名锚点、热点超链接的创建方法。
教学重点
þ简单了解超链接的概念与路径知识。
þ熟练掌握超链接的分类及每种类型的创建方法。
教学难点
þ能够正确给所需文本添加超链接，以及锚记超链接的使用方法和技巧。
教学设计
1、教学思路：
（1）通过对课堂案例的讲解掌握建筑模型网页、温泉度假网页、金融投资网页和口腔护理网页的制作方法；
（2）再通过软件相关功能的解析学习超链接的种类，以及进行不同类型的超链接创建；（3）再通过课堂练习巩固软件功能及网页制作技巧；（4）最后通过课后习题消化所学软件知识，提高制作超链接的能力。
2、教学手段：
（1）通过课堂案例熟悉设计理念和软件功能；
（2）通过软件功能解析深入学习软件功能和制作特点。
（3）通过课堂练习和课后习题提高学生的实际应用能力。
3、教学资料及要求：
在网上找一些多级页面进行制作，来加深学员对知识点的理解和提高实际操作能力。
教学内容
讨论问题：
1、在DreamweaverCS6中超链接有哪几种类型？
分别是哪几种？
2、在DreamweaverCS6中使用哪种超链接可以跳至指定的位置？
内容大纲：
具体可结合本项目的PPT课件进行配合讲解。
5.1超链接的概念与路径知识
5.2文本超链接
5.2.1课堂案例——建筑模型网页
5.2.2创建文本链接
5.2.3文本链接的状态
5.2.4下载文件链接
5.2.5电子邮件链接
5.3图像超链接
5.3.1课堂案例——温泉度假网页
5.3.2图像超链接
5.3.3鼠标经过图像链接
5.4命名锚点超链接
5.4.1课堂案例——金融投资网页
5.4.2命名锚点链接
5.5热点链接
5.5.1课堂案例——口腔护理网页
5.5.2创建热点链接
5.6课堂练习——家装设计网页
5.7课后习题——建筑设计网页
小结
1、熟练掌握超链接的概念与路径。
2、熟练掌握超链接的类型与创建方法的技巧。
作业
第6讲
课时内容
使用表格
教学目标
þ熟练掌握表格的简单操作。
þ熟练掌握在网页中制作数据表格。
þ掌握复杂表格的排版方法。
教学重点
þ简单了解表格在制作网页中的作用。
þ熟练掌握表格的插入与属性的设置。
教学难点
þ能够正确使用表格的嵌套制作复杂的网页页面。
教学设计
1、教学思路：
（1）通过对课堂案例的讲解掌握布艺沙发网页和典藏博物馆网页的制作方法；
（2）再通过软件相关功能的解析学习表格的插入与属性的设置，以及进行表格数据的导入与导出；（3）再通过课堂练习固软件功能及表格的使用技巧；（4）最后通过课后习题消化所学软件知识，提高网页制作的能力。
2、教学手段：
（1）通过课堂案例熟悉设计理念和软件功能；
（2）通过软件功能解析深入学习软件功能和制作特点。
（3）通过课堂练习和课后习题提高学生的实际应用能力。
3、教学资料及要求：
在网上找一些简单的网页页面进行制作，来加深学员对知识点的理解和提高实际操作能力。
教学内容
讨论问题：
1、在DreamweaverCS6中如何向表格一次添加多行或多列？
方法分别是？
2、在DreamweaverCS6中
标签可否添加背景图像？内容大纲：
具体可结合本项目的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.1.9缩放表格
6.1.10合并和拆分单元格
6.1.11增加和删除表格的行和列
6.2网页中的数据表格
6.2.1课堂案例——典藏博物馆网页
6.2.2导入和导出表格的数据
6.2.3排序表格
6.3复杂表格的排版
6.4课堂练习——火锅餐厅网页
6.5课后习题——茶文化网页
小结
1、熟练掌握表格的插入及表格属性的设置方法和技巧。
2、熟练掌握表格嵌套布局。
作业
第7讲
课时内容
框架
教学目标
掌握框架与框架集的操作方法。
熟练掌握框架属性的设置方法。
教学重点
熟练掌握框架的创建方法。
熟练掌握框架的拆分方法。
教学难点
能够正确使用框架的应用。
教学设计
1.教学思路：
（1）通过对课堂案例的讲解掌握牛奶饮品网页和建筑规划网页的制作方法；
（2）再通过软件相关功能的解析学习框架的应用方法和使用技巧；（3）最后通过课堂练习及课后习题消化所学软件知识，提高网页制作的能力。
2.教学手段：
（1）通过课堂实训案例熟悉设计理念和软件功能；
（2）通过软件功能解析深入学习软件功能和制作特点。
（3）通过课堂练习及课后习题提高学生的实际应用能力。
3.教学资料及要求：
在网上找一些带有框架的网页页面进行制作，来加深学员对知识点的理解和提高实际操作能力。
教学内容
讨论问题：
1、在DreamweaverCS6中如何添加框架？
2、在DreamweaverCS6如何拆分框架？
内容大纲：
具体可结合本项目的PPT课件进行配合讲解。
7.1框架与框架集
7.1.1课堂案例——牛奶饮品网页
7.1.2建立框架集
7.1.3为框架添加内容
7.1.4保存框架
7.1.5框架的选择
7.1.6修改框架的大小
7.1.7拆分框架
7.1.8删除框架
7.2框架的属性设置
7.2.1课堂案例——建筑规划网页
7.2.2框架属性
7.2.3框架集的属性
7.2.4框架中的链接
7.2.5改变框架的背景颜色
7.3课堂练习——阳光外语小学网页
7.4课后习题——阳光外语小学网页2
小结
1.熟练掌握框架的创建方法。
2.熟练掌握框架的拆分方法。
作业
第8讲
课时内容
层的使用
授课时间
90分钟
课时
2
教学目标
熟练掌握层的基本操作方法。
掌握应用层设计表格的技巧。
教学重点
掌握如何创建层。
熟练掌握层的属性设置。
教学难点
能够正确使用不同类型的样式控制标签。
教学设计
1.教学思路：
（1）通过对课堂案例的讲解掌握联创网络技术网页和信业融资网页的制作方法；
（2）再通过软件相关功能的解析学习层的创建；（4）最后通过课堂练习及课后习题消化所学软件知识，提高网页制作的能力。
2.教学手段：
（1）通过课堂实训案例熟悉设计理念和软件功能；
（2）通过软件功能解析深入学习软件功能和制作特点。
（3）通过课堂练习及课后习题提高学生的实际应用能力。
3.教学资料及要求：
在网上中找一些带有层的网页页面进行制作，来加深学员对知识点的理解和提高实际操作能力。
教学内容
讨论问题：
1、在DreamweaverCS6中层有什么作用？
2、在DreamweaverCS6中如何同时绘制多个层？
内容大纲：
具体可结合本项目的PPT课件进行配合讲解。
8.1层的基本操作
8.1.1课堂案例——联创网络技术网页
8.1.2创建层
8.1.3选择层
8.1.4设置层的默认属性
8.1.5AP元素面板
8.1.6更改层的堆叠顺序
8.1.7更改层的可见性
8.1.8调整层的大小
8.1.9移动层
8.1.10对齐层
8.1.11层靠齐到网格
8.2应用层设计表格
8.2.1课堂案例——信业融资网页
8.2.2将APDiv转换为表格
8.2.3将表格转换为APDiv
8.3课堂练习——美味小吃网页
8.4课后习题——充气浮床网页
小结
1.熟练掌握层的创建方法。
2.熟练掌握层的属性设置。
作业
第9讲
课时内容
CSS样式
教学目标
掌握CSS样式的概念和面板的使用。
掌握样式类型和创建、编辑样式的方法。
掌握CSS属性和过滤器的使用方法。
教学重点
掌握如何应用CSS样式控制标签。
熟练掌握CSS的属性设置。
教学难点
能够正确使用不同类型的样式控制标签。
教学设计
1、教学思路：
（1）通过对课堂案例的讲解掌握爱越野网页和爱插画网页的制作方法；
（2）再通过软件相关功能的解析学习CSS样式，以及CSS样式的属性及分类；（3）再通过课堂练习固软件功能及CSS样式的应用技巧；（4）最后通过课后习题消化所学软件知识，提高网页制作的能力。
2、教学手段：
（1）通过课堂案例熟悉设计理念和软件功能；
（2）通过软件功能解析深入学习软件功能和制作特点。
（3）通过课堂练习和课后习题提高学生的实际应用能力。
3、教学资料及要求：
在网上中找一些多样式的网页页面进行制作，来加深学员对知识点的理解和提高实际操作能力。
教学内容
讨论问题：
1、在DreamweaverCS6中CSS样式分为哪几种类型？
每种类型的具体作用？
2、在DreamweaverCS6中使用CSS样式定位时需注意什么事项？
内容大纲：
具体可结合本项目的PPT课件进行配合讲解。
9.1CSS样式的概念
9.2CSS样式
9.2.1“CSS样式”面板
9.2.2CSS样式的类型
9.3样式的类型与创建
9.3.1创建重定义HTML标签样式
9.3.2创建CSS选择器
9.3.3创建和应用自定义样式
9.3.4创建和引用外部样式
9.4编辑样式
9.5CSS的属性
9.5.1课堂案例——爱越野网页
9.5.2类型
9.5.3背景
9.5.4区块
9.5.5方框
9.5.6边框
9.5.7列表
9.5.8定位
9.5.9扩展
9.5.10过渡
9.6过滤器
9.6.1课堂案例——爱插画网页
9.6.2可应用过滤的HTML标签
9.6.3CSS的静态过滤器
9.6.4CSS的动态过滤器
9.7课堂练习——爱美化妆品网页
9.8课后习题——咖啡屋网页
小结
1、熟练掌握CSS样式的概念。
2、熟练掌握CSS样式的分类及使用方法和技巧。
作业
第10讲
课时内容
模板和库
教学目标
掌握资源面板的使用方法。
掌握创建模板和模板属性的修改方法。
掌握创建库文件和使用库项目的方法。
教学重点
掌握模板的使用方法。
熟练库面板的应用。
教学难点
能够正确应用模板的所有属性。
教学设计
1、教学思路：
（1）通过对课堂案例的讲解掌握飞越天空网页和老年公寓网页的制作方法；
（2）再通过软件相关功能的解析学习模板的创建、编辑和应用，以及库面板的使用；（3）再通过课堂实战演练巩固软件功能及模板的应用技巧；（4）最后通过课后习题消化所学软件知识，提高网页制作的能力。
2、教学手段：
（1）通过课堂案例熟悉设计理念和软件功能；
（2）通过软件功能解析深入学习软件功能和制作特点。
（3）通过课堂练习和课后习题提高学生的实际应用能力。
3、教学资料及要求：
在网上中找一些具有共同点的多级页面进行制作，来加深学员对知识点的理解和提高实际操作能力。
教学内容
讨论问题：
1、在DreamweaverCS6中有几种方法创建模板？
分别是？
2、在DreamweaverCS6中库面板的具体作用是？
内容大纲：
具体可结合本项目的PPT课件进行配合讲解。
10.1“资源”面板
10.2模板
10.2.1课堂案例——飞越天空网页
10.2.2创建模板
10.2.3定义和取消可编辑区域
10.2.4创建基于模板的网页
10.2.5管理模板
10.3库
10.3.1课堂案例——老年公寓网页
10.3.2创建库文件
10.3.3向页面添加库项目
10.3.4更新库文件
10.4课堂练习——租车网页
10.5课后习题——爱家纺网页
小结
1、熟练掌握模板的创建、编辑、应用。
2、熟练掌握库面板的应用。
作业
第11讲
课时内容
CSS+DIV布局方法
教学目标
掌握CSS+DIV的概述。
掌握div和span标记的区别。
掌握盒子的概念和操作技巧。
教学重点
掌握DIV的应用方法。
熟练掌握CSS样式的应用。
教学难点
能够正确使用DIV标签布局。
教学设计
1、教学思路：
（1）通过对课堂案例的讲解掌握绿色农场网页的制作方法；
（2）再通过软件相关功能的解析学习DIV标签的应用；（3）再通过课堂练习巩固DIV及CSS的应用技巧；（4）最后通过课后习题消化所学软件知识，提高网页制作的能力。
2、教学手段：
（1）通过课堂案例熟悉设计理念和软件功能；
（2）通过软件功能解析深入学习软件功能和制作特点。
（3）通过课堂练习和课后习题提高学生的实际应用能力。
3、教学资料及要求：
在网上中找一些网页页面进行制作，来加深学员对知识点的理解和提高实际操作能力。
教学内容
讨论问题：
1、
与
有什么区别？2、CSS+DIV有什么优点及缺点？
内容大纲：
具体可结合本项目的PPT课件进行配合讲解。
11.1CSS+DIV的概述
11.1.1CSS+DIV的优势
11.1.2CSS+DIV缺点
11.2
标记与
标记11.2.1概述
11.2.2
与
的区别11.3盒子模型
11.3.1盒子结构
11.3.2盒子属性
11.4盒子的定位与浮动
11.4.1课堂案例——绿色农场网页
11.4.2盒子的定义
11.4.3盒子的浮动
11.5课堂练习——浪漫花屋网页
11.6课后习题——旅游网页
小结
1、熟练掌握表单的创建。
2、熟练掌握表单的类型与使用。
作业
第12讲
课时内容
使用表单
教学
展开阅读全文
相关搜索
资源标签