边做边学Dreamweaver网页设计案例教程DreamweaverCC2019教案全套项目1

《边做边学——Dreamweaver CC 2019网页设计案例教程（微课版）》

教案

第1讲

课时内容

初识Dreamweaver CC 2019

 掌握工作界面的操作。

 掌握网站框架的创建。

教学目标

 掌握站点的管理。

 掌握网页文件头的设置。

授课时间

180分钟

课时

4

教学重点

 熟练掌握Dreamweaver CC 2019工作界面的基本操作。

 熟练掌握Dreamweaver CC 2019的站点。

教学难点

在Dreamweaver CC 2019中站点的建立及编辑。

1. 教学思路：（1）通过对课堂实训案例的讲解掌握界面操作和站点设置的方法；（2）通过软件相关功能的解析学习Dreamweaver CC 2019工作界面的基本操作和设置文件头的基本方法。

（1）通过课堂实训案例熟悉设计理念和软件功能；（2）通过软件功能教学设计

2. 教学手段：解析深入学习软件功能和制作特点。

3. 教学资料及要求：除了课堂实训案例中讲解的软件功能外，还可以根据相关的工具特点进行简单的练习和操作。

教学内容

讨论问题：1、Dreamweaver CC 2019中的网页分为哪几种网页？

2、在Dreamweaver CC 2019中有哪几种方法可以创建站点？同时本地站点与远程站点有什么区别？

内容大纲：具体可结合本项目的PPT课件进行配合讲解。

1.1 操作界面

1.1.1 【操作目的】

1.1.2 【操作步骤】

1.1.3 【相关工具】

1．友善的开始页面

2．不同风格的界面

3．伸缩自如的功能面板

4．多文档的编辑界面

5．新颖的“插入”面板

6．更完整的CSS功能

1.2 管理站点

1.2.1 【操作目的】

1.2.2 【操作步骤】

1.2.3 【相关工具】

1．站点管理器

2．创建文件夹

3．定义新站点

1.3 创建网站框架

1.3.1 【操作目的】

1.3.2 【操作步骤】

1.3.3 【相关工具】

1．创建和保存网页

2．管理站点文件和文件夹

1.4 网页文件头设置

1.4.1 【操作目的】

1.4.2 【操作步骤】

1.4.3 【相关工具】

1．插入搜索关键字

2．插入作者和版权信息

3．设置刷新时间

4．设置说明信息

小结

1、 熟练掌握Dreamweaver CC 2019界面的操作方法和技巧。

2、 熟练掌握在Dreamweaver CC 2019中站点的创建、编辑、复制、删除和导出的方法，掌握新建、保存的技巧。

第2讲

课时内容

文本与文档

授课时间

270分钟

课时

6

 了解文本与文档的创建方法和使用技巧。

教学目标

 掌握项目符号和编号列表使用方法和区别。

 掌握水平线、网格与标尺的使用方法和技巧。

教学重点

 熟练掌握文本的多种创建方法和编辑技巧。

 熟练掌握项目符号、编号列表和水平线的使用方法。

教学难点

能够正确输入文本并编辑相关属性。

1. 教学思路：（1）通过对课堂实训案例的讲解掌握青山别墅网页、机电设备网页和摄影艺术网页的制作方法；（2）再通过软件相关功能的解析学习输入文本和编辑文本相关属性，以及进行区分使用项目符号和编号列表方法和技巧；（3）再通过课堂实战演练巩固软件功能及网页制作技巧；（4）最后通过课后综合演练消化所学软件知识，提高制作网页的能力。

教学设计

2. 教学手段：（1）通过课堂实训案例熟悉设计理念和软件功能；（2）通过软件功能解析深入学习软件功能和制作特点。（3）通过课堂实战演练和课后综合演练提高学生的实际应用能力。

3. 教学资料及要求：在网上找一些简单的网页页面进行制作，来加深学员对知识点的理解和提高实际操作能力。

教学内容

讨论问题：1、在Dreamweaver CC 2019中可以有哪几种方法创建文本？

2、在Dreamweaver CC 2019中如何输入多个连续空格？

3、在Dreamweaver CC 2019中如何更改文字颜色、字号等设置？

内容大纲：具体可结合本项目的PPT课件进行配合讲解。

2.1 青山别墅网页

2.1.1 【案例分析】

2.1.2 【设计理念】

2.1.3 【操作步骤】

1．设置页面属性

2．输入空格和文字

2.1.4 【相关工具】

1．输入文本

2．设置文本属性

3．输入连续的空格

4．设置是否显示不可见元素

5．设置页边距

6．设置网页的标题

7．设置网页的默认格式

2.1.5 【实战演练】——有机果蔬网页

2.2 机电设备网页

2.2.1 【案例分析】

2.2.2 【设计理念】

2.2.3 【操作步骤】

1．添加字体

2．改变文字外观

2.2.4 【相关工具】

1．改变文本的大小

2．改变文本的颜色

3．改变文本的字体

4．改变文本的对齐方式

5．设置文本样式

6．设置段落格式

7．设置无序列表或编号列表

8．修改无序列表或编号列表

9．设置文本缩进格式

10．插入日期

11．插入特殊字符

12．插入换行符

2.2.5 【实战演练】——电器城网页

2.3 摄影艺术网页

2.3.1 【案例分析】

2.3.2 【设计理念】

2.3.3 【操作步骤】

2.3.4 【相关工具】

1．水平线

2．显示和隐藏网格

3．标尺

2.3.5 【实战演练】——休闲度假村网页

2.4 综合演练——国画展览馆网页

2.4.1 【案例分析】

2.4.2 【设计理念】

2.4.3 【知识要点】

2.5 综合演练——旅行购票网页

2.5.1 【案例分析】

2.5.2 【设计理念】

2.5.3 【知识要点】

小结

1. 熟练掌握文本的使用方法和技巧。

2. 了解并掌握项目符号和编辑列表的使用方法和技巧。

2.4

综合演练

国画展览馆网页

2.4.1 【案例分析】

国画展览馆是专门收藏好的国画作品以及展览国画供人参观的场所，该网页主要通过网络介绍艺术馆的收藏并进行宣传。网页的设计要体现出国画的艺术品位，以及该艺术馆的特色。

2.4.2 【设计理念】

在网页设计制作过程中，背景采用了国画图片作为装饰，使整个页面看起来典雅舒适。白色的导航设计简洁雅观，更方便浏览者查阅。整体设计风格具有特色，优雅并且时尚。

2.4.3 【知识要点】

使用“属性”面板，设置文字大小、颜色及字体。

作业

2.5

综合演练

旅行购票网页

2.5.1 【案例分析】

Ravel是一个综合性旅行服务平台，可以随时随地向用户提供集酒店预订、旅游度假及旅游资讯在内的全方位旅行服务。现为了更好的为用户提供服务，需要重新设计网站页面，要体现出平台的调性、功能以及特点。

2.5.2 【设计理念】

在网页设计制作过程中，使用浅色调的底图作为背景，给消费者带来温馨、浪漫的感觉；画面整体色彩搭配舒适亲切，文字与图片搭配相得益彰，导航条设计简洁并具有特色，网页设计与宣传主题相呼应；画面清爽舒适，符合平台的风格特点。

2.5.3 【知识要点】

使用“页面属性”命令，设置页面边距和标题；使用“CSS样式”命令，改变文本的颜色及行距的显示。

第3讲

课时内容

图像和多媒体

教学目标

授课时间

180分钟

课时

4

 掌握插入图像的方法和技巧

 掌握多媒体在网页中的应用。

 熟练掌握图像的格式与模式。

教学重点

 熟练掌握Flash文件的插入与设置。

教学难点

能够正确使用图像和图像的属性设置、Animate作品的格式及设置属性。

1. 教学思路：（1）通过对课堂实训案例的讲解掌握蛋糕店网页、绿色农场网页的制作方法；（2）再通过软件相关功能的解析学习图像的插入与使用技巧，以及进行动画的使用；（3）再通过课堂实战演练巩固软件功能及网页制作技巧；（4）最后通过课后综合演练消化所学软件知识，提高图像与动画的使用能力。

（1）通过课堂实训案例熟悉设计理念和软件功能；（2）通过软件功能教学设计

2. 教学手段：解析深入学习软件功能和制作特点。（3）通过课堂实战演练和课后综合演练提高学生的实际应用能力。

3. 教学资料及要求：在网上找一些带有图像和动画的网页页面进行制作，来加深学员对知识点的理解和提高实际操作能力。

教学内容

讨论问题：1、在Dreamweaver CC 2019中插入图像后在浏览器中不能正常显示图像，是哪几种原因造成？如何解决？

2、在Dreamweaver CC 2019中如何设置插入的Flash动画为透明背景？

内容大纲：具体可结合本项目的PPT课件进行配合讲解。

3.1 蛋糕店网页

3.1.1 【案例分析】

3.1.2 【设计理念】

3.1.3 【操作步骤】

3.1.4 【相关工具】

1．网页中的图像格式

2．插入图像

3．设置图像属性

4．给图像添加文字说明

5．跟踪图像

3.1.5 【实战演练】——环球旅游网页

3.2 绿色农场网页

3.2.1 【案例分析】

3.2.2 【设计理念】

3.2.3 【操作步骤】

3.2.4 【相关工具】

1．插入Flash动画

2．插入FLV

3．插入Animate作品

4．插入HTML5 Video

5．插入音频

6．插入插件

3.2.5 【实战演练】——物流运输网页

3.3 综合演练——时尚先生网页

3.3.1 【案例分析】

3.3.2 【设计理念】

3.3.3 【知识要点】

3.4 综合演练——五谷杂粮网页

3.4.1 【案例分析】

3.4.2 【设计理念】

3.4.3 【知识要点】

小结

1. 熟练掌握图像的格式与插入方法和使用技巧。

2. 掌握Flash动画的插入和属性的设置。

3.3

综合演练

时尚先生网页

3.3.1 【案例分析】

时尚先生是一家生活资讯类的网站，为广大男性提供生活消费、美好新闻、精品阅读、时装、休闲、理财等相关信息和咨询。现网站需要重新设计制作首页页面，设计要求符合网站特点且能够吸引用户目光。

作业

3.3.2 【设计理念】

在网页设计制作过程中，使用深灰色作为网页的背景，能瞬间吸引人们的视线，达到宣传的目的；低调优雅的色系搭配，增强了网页的视觉效果和观赏性；页面整体设计高端、大气，体现出了网站特点和宣传特色。

3.3.3 【知识要点】

使用“Image”按钮插入图像，美化页面。

3.4

综合演练——五谷杂粮网页

3.4.1 【案例分析】

五谷杂粮是一家粮食网站和美食交流社区，拥有多种优质粮食品种及海量原创美食菜谱。现网站新推出招商加盟和网络营销服务，需要重新设计网站页面，要求设计风格接简洁，能够着重体现出宣传内容。

3.4.2 【设计理念】

在网页设计和制作过程中，蓝色和绿色的搭配给人健康、安全的感觉，大气的图文搭配使网页更具质感，细致全面的图文信息更加体现了网站周到的服务；简洁清晰的导航设计更便于人们的浏览；整体风格具有商业气息，让人耳目一新。

3.4.3 【知识要点】

使用“Flash SWF”按钮，插入Flash动画效果。

第4讲

课时内容

超链接

授课时间

270分钟

课时

6

 了解超链接的概念与路径知识

 掌握文本超链接的创建方法和技巧。

教学目标

 掌握图像超链接的创建方法和技巧。

 掌握ID超链接的创建方法和技巧

 掌握热点超链接的创建方法和技巧

教学重点

 简单了解超链接的概念与路径知识。

 熟练掌握超链接的分类及每种类型的创建方法。

教学难点

能够正确给所需文本添加超链接，以及ID超链接的使用方法和技巧。

1. 教学思路：（1）通过对课堂实训案例的讲解掌握创意设计网页、狮立地板网页的制作方法；（2）再通过软件相关功能的解析学习超链接的种类，以及进行不同类型的超链接创建；（3）再通过课堂实战演练巩固软件功能及网页制作技巧；（4）最后通过课后综合演练消化所学软件知识，提高制作超链接的能力。

（1）通过课堂实训案例熟悉设计理念和软件功能；（2）通过软件功能教学设计

2. 教学手段：解析深入学习软件功能和制作特点。（3）通过课堂实战演练和课后综合演练提高学生的实际应用能力。

3. 教学资料及要求：在网上找一些多级页面进行制作，来加深学员对知识点的理解和提高实际操作能力。

教学内容

讨论问题：1、在Dreamweaver CC 2019中超链接有哪几种类型？分别是哪几种？

2、在Dreamweaver CC 2019中使用哪种超链接可以跳至指定的位置？

内容大纲：具体可结合本项目的PPT课件进行配合讲解。

4.1 创意设计网页

4.1.1 【案例分析】

4.1.2 【设计理念】

4.1.3 【操作步骤】

1．制作电子邮件超链接

2．制作下载文件链接

4.1.4 【相关工具】

1．超链接的概念

2．创建文本超链接

3．设置文本超链接的状态

4．创建下载文件链接

5．创建电子邮件链接

4.1.5 【实战演练】——建筑模型网页

4.2 狮立地板网页

4.2.1 【案例分析】

4.2.2 【设计理念】

4.2.3 【操作步骤】

4.2.4 【相关工具】

1．创建图像超链接

2．创建鼠标指针经过图像超链接

3．创建ID超链接

4．创建热点超链接

4.2.5 【实战演练】——影相天地网页

4.3 综合演练——摩托车改装网页

4.3.1 【案例分析】

4.3.2 【设计理念】

4.3.3 【知识要点】

4.4 综合演练——建筑规划网页

4.4.1 【案例分析】

4.4.2 【设计理念】

4.4.3 【知识要点】

小结

1. 熟练掌握超链接的概念与路径。

2. 熟练掌握超链接的类型与创建方法的技巧。

4.3

综合演练

摩托车改装网页

4.3.1 【案例分析】

摩托车改装网是一家摩托车销售平台，主营摩托车改装、摩托车咨询、摩托车报价等业务，平台掌握多类摩托车品牌及型号信息，且为摩托爱好者提供交流的论坛。现网站要进行升级，需要设计网站页面，要求能偶突出平台特点和特色。

作业

4.3.2 【设计理念】

在网页设计和制作过程中，双色的背景使网页看上去更具质感；整齐排列的的照片及文字使网页看上去更加整洁清晰；网页设计留有大量空白，使网页设计更具特色，画面更加开阔，整体风格大气时尚。

4.3.3 【知识要点】

使用“电子邮件链接”命令，制作电子邮件链接效果；使用“浏览文件”链接按钮，为文字制作下载文件链接效果。

4.4

综合演练

建筑规划网页

4.4.1 【案例分析】

风和地产是一家建筑设计类公司，主要经营建筑规划设计、观演建筑、教育建筑设计、楼宇规划等业务。现公司上市，需要设计制作线上网站，设计要求能够展示出公司风采，要体现出公司经营业务。

4.4.2 【设计理念】

在网页设计和制作过程中，网页使用低明度的色彩进行搭配，给人沉稳安全的感觉；网页的设计以图片为主，使人能够直观地接收到网页信息，导航栏设计简洁，网页分类明确，方便浏览。整体风格设计直观明了，使浏览者观看起来赏心悦目。

4.4.3 【知识要点】

使用热点按钮，为图像添加热点；使用“属性”面板，为热点创建超链接。

第5讲

课时内容

使用表格

授课时间

270分钟

课时

6

 了解表格的简单操作

教学目标

 掌握网页中的数据表格。

 掌握利用表格进行页面布局的方法和技巧。

 简单了解表格在制作网页中的作用。

教学重点

 熟练掌握表格的插入与属性的设置。

教学难点

能够正确使用表格的嵌套制作复杂的网页页面。

1. 教学思路：（1）通过对课堂实训案例的讲解掌握租车网页、典藏博物馆网页的制作方法；（2）再通过软件相关功能的解析学习表格的插入与属性的设置，以及进行表格数据的导入与导出；（3）再通过课堂实战演练巩固软件功能及表格的使用技巧；（4）最后通过课后综合演练消化所学软件知识，提高网页制作的能力。

（1）通过课堂实训案例熟悉设计理念和软件功能；（2）通过软件功能教学设计

2. 教学手段：解析深入学习软件功能和制作特点。（3）通过课堂实战演练和课后综合演练提高学生的实际应用能力。

3. 教学资料及要求：在网上找一些简单的网页页面进行制作，来加深学员对知识点的理解和提高实际操作能力。

教学内容

讨论问题：1、在Dreamweaver CC 2019中如何向表格一次添加多行或多列？方法分别是？

2、在Dreamweaver CC 2019中标签可否添加背景图像？

内容大纲：具体可结合本项目的PPT课件进行配合讲解。

5.1 租车网页

5.1.1 【案例分析】

5.1.2 【设计理念】

5.1.3 【操作步骤】

5.1.4 【相关工具】

1．表格的组成

2．插入表格

3．表格各元素的属性

4．在表格中插入内容

5．选择表格元素

6．复制、剪切、粘贴表格

7．清除内容和删除行或列

8．缩放表格

9．合并和拆分单元格

10．增加表格的行和列

5.1.5 【实战演练】——营养美食网页

5.2 典藏博物馆网页

5.2.1 【案例分析】

5.2.2 【设计理念】

5.2.3 【操作步骤】

1．导入数据表格

2．排序表格

5.2.4 【相关工具】

1．导入和导出表格的数据

2．表格数据排序

3．表格的嵌套

5.2.5 【实战演练】——OA办公系统网页

5.3 综合演练——绿色粮仓网页

5.3.1 【案例分析】

5.3.2 【设计理念】

5.3.3 【知识要点】

5.4 综合演练——火锅餐厅网页

5.4.1 【案例分析】

5.4.2 【设计理念】

5.4.3 【知识要点】

小结

1. 熟练掌握表格的插入及表格属性的设置方法和技巧。

2. 熟练掌握表格嵌套布局。

5.3

综合演练

绿色粮仓网页

5.3.1 【案例分析】

粮食即供食用的谷物、豆类和薯类的统称，是我们赖以生存的关键所在，在生活中占有极其重要的位置。绿色粮仓是一个以环保有机为发展目标的粮食生产基地，现为了更好的宣传公司理念，需要设计制作自己的网站，要求网站具有特色，让人印象深刻。

作业

5.3.2 【设计理念】

在网页设计和制作过程中，金灿灿的麦田背景给带来丰收的喜悦；色彩搭配适宜，带感人强烈的视觉冲击，凸显出了画面的烟火气息。整体风格符合绿色粮仓的特色，画面搭配舒适和谐。

5.3.3 【知识要点】

使用“表格式数据”命令，导入外部表格数据；使用“排序表格”命令，将表格的数据排序。

5.4

综合演练

火锅餐厅网页

5.4.1 【案例分析】

火锅，古称“古董羹”，因投料入沸水时发出的“咕咚”声而得名。火锅餐厅，以麻辣醇香远近闻名，是人们约会聚餐的首选之地。现餐厅要设计制作自己的网站，要求时尚新潮，符合年轻人的口味。

5.4.2 【设计理念】

在网页设计和制作过程中，模糊的火锅背景能够给浏览者带来好奇心；红色的色块在画面中突出，也符合火锅的特色，色块的排放具有秩序，使画面看起来整齐并具有规律。网页设计突出了宣传的主题。

5.4.3 【知识要点】

使用“Table”按钮，插入表格效果；使用“Image”按钮，插入图像；使用“CSS设计器”面板，为单元格添加背景图像及控制文字大小和字体。

第6讲

课时内容

ASP

教学目标

授课时间

180分钟

课时

4

 了解ASP动态网页基础。

 掌握ASP内置对象。

 ASP服务器的安装。

教学重点

 ASP语法基础。

 Response对象。

教学难点

能够正确使用ASP控制页面动态内容。

1. 教学思路：（1）通过对课堂实训案例的讲解掌握节能环保网页、网球俱乐部网页的制作方法；（2）再通过软件相关功能的解析学习ASP动态网页基础和内置对象；（3）再通过课堂实战演练巩固软件功能；（4）最后通过课后综合演练消化所学软件知识，提高网页制作的能力。

（1）通过课堂实训案例熟悉设计理念和软件功能；（2）通过软件功能教学设计

2. 教学手段：解析深入学习软件功能和制作特点。（3）通过课堂实战演练和课后综合演练提高学生的实际应用能力。

3. 教学资料及要求：在网上找一些动态网站页面进行制作，来加深学员对知识点的理解和提高实际操作能力。

教学内容

讨论问题：1、在Dreamweaver CC 2019中，ASP文件是以什么为扩展名？

2、在VBScript语言中，基本程序流程控制结构指哪3种？

内容大纲：具体可结合本项目的PPT课件进行配合讲解。

6.1 节能环保网页

6.1.1 【案例分析】

6.1.2 【设计理念】

6.1.3 【操作步骤】

6.1.4 【相关工具】

1．ASP服务器的安装

2．ASP语法基础

3．数组的创建与应用

4．流程控制语句

6.1.5 【实战演练】——卡玫摄影网页

6.2 网球俱乐部网页

6.2.1 【案例分析】

6.2.2 【设计理念】

6.2.3 【操作步骤】

6.2.4 【相关工具】

1．Request请求对象

2．Response对象

3．Session会话对象

4．Application应用程序对象

5．Server服务对象

6．ObjectContext事务处理对象

6.2.5 【实战演练】——用户登录界面

6.3 综合演练——挖掘机网页

6.3.1 【案例分析】

6.3.2 【设计理念】

6.3.3 【知识要点】

6.4 综合演练——建筑信息咨询网页

6.4.1 【案例分析】

6.4.2 【设计理念】

6.4.3 【知识要点】

1.

2.

3.

4.

小结

ASP服务器的安装。

ASP语法基础。

数组的创建与应用及流程控制语句。

ASP内置对象。

6.3

综合演练

挖掘机网页

6.3.1 【案例分析】

随着现代技术的发展，各类大型机械工具都有了长足的进步。挖掘机是一家包括项目承包、技术培训、行业咨询、服务体验等业务的大型机械场，现新一代混合动力液压挖掘机发布，需要为其设计网站页面，要求合理地进行配色和编排，展现出专业、可靠的特点。

作业

6.3.2 【设计理念】

在网页设计和制作过程中，机器的实景照片作为背景点明网站的主题；清晰明快的编排方式给人简约、大气的印象，与网页的主题相呼应；整体设计简洁直观，让人一目了然，宣传性强。

6.3.3 【知识要点】

使用“Form集合”命令，获取表单数据。

6.4

综合演练

建筑信息咨询网

6.4.1 【案例分析】

建筑信息咨询网是一个以高质量服务为宗旨，强调规划、建筑、景观等设计，竭诚为行业各界提供满意服务且值得信赖的平台。现网站要进行优化需要重新设计制作页面，设计要求在设计上要简洁直观、清晰明确的展示出企业的相关信息。

6.4.2 【设计理念】

在网页设计和制作过程中，低透明度的建筑作为装饰，与主题相呼应；灰蓝色的背景展现出网站的品质，色调搭配适宜，使设计具有连贯性；图文搭配合理，内容清晰明确，让人一目了然；页面整体设计醒目直观，宣传性强。

6.4.3 【知识要点】

使用Response对象的Write方法，向浏览器端输出标签，显示日期。

第7讲

课时内容

CSS样式

授课时间

270分钟

课时

6

 了解CSS样式的概念

 掌握CSS设计器面板和样式类型

 了解CSS样式的创建及应用

教学目标

 掌握CSS样式的编辑方法

 掌握CSS样式的属性

 了解CSS过渡效果的应用

教学重点

 掌握如何应用CSS样式控制标签。

 熟练掌握CSS的属性设置。

教学难点

能够正确使用不同类型的样式控制标签。

1. 教学思路：（1）通过对课堂实训案例的讲解掌握山地车网页、足球运动网页制作方法；（2）再通过软件相关功能的解析学习CSS样式，以及CSS样式的属性及分类；（3）再通过课堂实战演练巩固软件功能及CSS样式的应用技巧；（4）最后通过课后综合演练消化所学软件知识，提高网页制作的能力。

（1）通过课堂实训案例熟悉设计理念和软件功能；（2）通过软件功能教学设计

2. 教学手段：解析深入学习软件功能和制作特点。（3）通过课堂实战演练和课后综合演练提高学生的实际应用能力。

3. 教学资料及要求：在网上中找一些多样式的网页页面进行制作，来加深学员对知识点的理解和提高实际操作能力。

教学内容

讨论问题：1、在Dreamweaver CC 2019中CSS样式分为哪几种类型？每种类型的具体作用？

2、在Dreamweaver CC 2019中使用CSS样式定位时需注意什么事项？

内容大纲：具体可结合本项目的PPT课件进行配合讲解。

7.1 山地车网页

7.1.1 【案例分析】

7.1.2 【设计理念】

7.1.3 【操作步骤】

1．插入表格并输入文字

2．设置CSS属性

7.1.4 【相关工具】

1．CSS样式的概念

2．“CSS设计器”面板

3．CSS样式的类型

4．创建CSS样式

5．应用CSS样式

6．创建和附加外部样式

7．编辑样式

8．布局属性

9．文本属性

10．边框属性

11．背景属性

7.1.5 【实战演练】——电商网页

7.2 足球运动网页

7.2.1 【案例分析】

7.2.2 【设计理念】

7.2.3 【操作步骤】

7.2.4 【相关工具】

1．“CSS过渡效果”面板

2．创建CSS过渡效果

7.2.5 【实战演练】——鲜花速递网页

7.3 综合演练——葡萄酒网页

7.3.1 【案例分析】

7.3.2 【设计理念】

7.3.3 【知识要点】

7.4 综合演练——布艺沙发网页

7.4.1 【案例分析】

7.4.2 【设计理念】

7.4.3 【知识要点】

小结

1. 熟练掌握CSS样式的概念。

2. 熟练掌握CSS样式的分类及使用方法和技巧。

7.3

综合演练——葡萄酒网页

7.3.1 【案例分析】

醇香是一家葡萄酒营销厂家，涉及多个业务线，包括葡萄种植园、酿造及贮存酒庄、葡萄源观赏、酿造体验等。本例将设计制作其网站页面，要求能够体现出网站丰富的业务线、高品质的质量保证、绿色健康的种植基地等特色，能够赢得消费者的信赖。

作业

7.3.2 【设计理念】

在网页设计和制作过程中，背景采用酒红色的色彩搭配，与主题相呼应，给人酒香四溢的感觉；将产品照片作为网页设计的主体，醒目直观地展示出网页的宣传主题，网站分类明确，与背景颜色相呼应；简洁直观的设计让人一目了然，易于查看浏览。

7.3.3 【知识要点】

使用“CSS设计器”面板，改变文字的大小和行距。

7.4

综合演练

布艺沙发网页

7.4.1 【案例分析】

“Easy Life”是一家家具用品企业，销售主要包括沙发/座椅系列、卧室系列、厨房用具、办公用品、灯具照明、儿童产品等多个系列产品。现平台分化出新的衍生系列“布艺沙发”，要为其设计制作单独的网站页面，设计要求能够体现出产品特色及品牌特点。

7.4.2 【设计理念】

在网页设计和制作过程中，采用淡雅的实景照片作为广告区背景，通过优美的画面处理，营造出自然、闲适的氛围，给人清新、悠闲的感觉，符合产品的特色；图文的合理搭配，增添了画面的美感，与宣传的主题相呼应；整个设计简洁直观，让浏览者一目了然。

7.4.3 【知识要点】

使用“CSS过渡效果”面板，制作超链接变化效果。

第8讲

课时内容

模板和库

授课时间

180分钟

课时

4

 了解“资源”面板。

教学目标

 掌握模板的创建方法和使用技巧。

 掌握库的使用方法和技巧。

教学重点

 掌握模板的使用方法。

 熟练库面板的应用。

教学难点

能够正确应用模板的所有属性。

1. 教学思路：（1）通过对课堂实训案例的讲解掌握慕斯蛋糕店网页、鲜果批发网页的制作方法；（2）再通过软件相关功能的解析学习模板的创建、编辑和应用，以及库面板的使用；（3）再通过课堂实战演练巩固软件功能及模板的应用技巧；（4）最后通过课后综合演练消化所学软件知识，提高网页制作的能力。

（1）通过课堂实训案例熟悉设计理念和软件功能；（2）通过软件功能教学设计

2. 教学手段：解析深入学习软件功能和制作特点。（3）通过课堂实战演练和课后综合演练提高学生的实际应用能力。

3. 教学资料及要求：在网上中找一些具有共同点的多级页面进行制作，来加深学员对知识点的理解和提高实际操作能力。

教学内容

讨论问题：1、在Dreamweaver CC 2019中有几种方法创建模板？分别是？

2、在Dreamweaver CC 2019中库面板的具体作用是？

内容大纲：具体可结合本项目的PPT课件进行配合讲解。

8.1 慕斯蛋糕店网页

8.1.1 【案例分析】

8.1.2 【设计理念】

8.1.3 【操作步骤】

1．创建模板

2．创建可编辑区域

8.1.4 【相关工具】

1．“资源”面板

2．创建模板

3．定义和取消可编辑区域

4．创建基于模板的网页

5．管理模板

8.1.5 【实战演练】——游天下网页

8.2 鲜果批发网页

8.2.1 【案例分析】

8.2.2 【设计理念】

8.2.3 【操作步骤】

1．把经常用的图标注册到库中

2．利用库中注册的项目制作网页文档

8.2.4 【相关工具】

1．创建库文件

2．向页面添加库项目

3．管理库文件

8.2.5 【实战演练】——律师事务所网页

8.3 综合演练——电子吉他网页

8.3.1 【案例分析】

8.3.2 【设计理念】

8.3.3 【知识要点】

8.4 综合演练——婚礼策划网页

8.4.1 【案例分析】

8.4.2 【设计理念】

8.4.3 【知识要点】

小结

1. 熟练掌握模板的创建、编辑、应用。

2. 熟练掌握库面板的应用。

8.3

综合演练

电子吉他网页

8.3.1 【案例分析】

“吉他”是一家电子器件制造有限公司，专注吉他事业发展，志为更多怀揣梦想的学者设计制作出适合他们的乐器。现为响应第八届吉他文化节开幕式的召开，公司需要设计新的网站页面，设计要求搭配合理，能吸引浏览者观看。

作业

8.3.2 【设计理念】

在网页设计和制作过程上，网页的背景使用沉静的深蓝色，带给人沉稳大气的感觉；网页的页面划分较有特色，灵活多变的页面使网页看起来更加丰富；图文搭配合理，乐器照片丰富且与主题相呼应，使人一目了然；网页整体设计画面美观，符合网站的特色。

8.3.3 【知识要点】

使用“创建模板”按钮，创建模板；使用“可编辑区域”和“重复区域”按钮，制作可编辑区域和重复区域效果。

8.4

综合演练

婚礼策划网页

8.4.1 【案例分析】

婚礼策划是一家根据每位客户的不同需求、爱好或诉求而量身定做的婚礼的婚庆团队，由专业的策划师、造型师等人员组成，目前已有多个经典的成功案例。网页设计要求时尚大气，营造出浪漫温馨的氛围。

8.4.2 【设计理念】

在网页设计和制作过程上，背景采用淡雅柔和的紫色花朵为主体，营造出浪漫温馨的氛围；美丽的女性和浪漫的文字突出了网页的主题和特色；字体的渐变效果增强了画面的层次与质感，凸显出时尚大气的感觉；明确清晰的网页版式，让人一目了然。

8.4.3 【知识要点】

使用“库”面板添加库项目；使用库中注册的项目制作网页文档。

第9讲

课时内容

表单与行为

授课时间

360分钟

课时

8

 了解表单和文本域。

 掌握如何应用复选框和单选按钮的方法和技巧。

教学目标

 掌握创建列表和菜单的方法和技巧。

 掌握创建文件域和提交按钮方法和技巧。

 掌握行为的使用。

教学重点

 掌握如何创建表单。

 熟练掌握行为面板的使用方法。

教学难点

能够正确使用不同类型的表单制作网页。

1. 教学思路：（1）通过对课堂实训案例的讲解掌握人力资源网页、动物乐园网页和品牌商城网页的制作方法；（2）再通过软件相关功能的解析学习表单的应用，以及行为属性的设置；（3）再通过课堂实战演练巩固软件功能及表单与行为的应用技巧；（4）最后通过课后综合演练消化所学软件知识，提高网页制作的能力。

（1）通过课堂实训案例熟悉设计理念和软件功能；（2）通过软件功能教学设计

2. 教学手段：解析深入学习软件功能和制作特点。（3）通过课堂实战演练和课后综合演练提高学生的实际应用能力。

3. 教学资料及要求：在网上中找一些会员注册的网页页面进行制作，来加深学员对知识点的理解和提高实际操作能力。

教学内容

讨论问题：1、在Dreamweaver CC 2019中表单分为哪几种类型？如果想制作上传照片的效果应该应用哪种表单属性？

2、在Dreamweaver CC 2019中表单是否可以用CSS样式控制？

内容大纲：具体可结合本项目的PPT课件进行配合讲解。

9.1 人力资源网页

9.1.1 【案例分析】

9.1.2 【设计理念】

9.1.3 【操作步骤】

1．插入单选按钮

2．插入复选框

9.1.4 【相关工具】

1．创建表单

2．表单的属性

3．文本域

4．单选按钮

5．单选按钮组

6．复选框

7．创建下拉菜单和滚动列表

8．创建文件域

9．插入图像按钮（创建图像域）

10．插入按钮

11．插入“提交”按钮

12．插入“重置”按钮

9.1.5 【实战演练】——健康测试网页

9.2 动物乐园网页

9.2.1 【案例分析】

9.2.2 【设计理念】

9.2.3 【操作步骤】

9.2.4 【相关工具】

1．插入电子邮件文本域

2．插入URL文本域

3．插入Tel文本域

4．

插入搜索文本域

5．插入数字文本域

6．插入范围文本域

7．插入颜色

8．插入月表单

9．插入周表单

10．插入日期表单

11．插入时间表单

12．插入日期时间表单

13．插入日期时间（当地）表单

9.2.5 【实战演练】——鑫飞越航空网页

9.3 品牌商城网页

9.3.1 【案例分析】

9.3.2 【设计理念】

9.3.3 【操作步骤】

9.3.4 【相关工具】

1．“行为”面板

2．应用行为

3．调用 JavaScript

4．打开浏览器窗口

5．转到 URL

6．检查插件

7．检查表单

8．交换图像

9．设置容器的文本

10．设置状态栏文本

11．设置文本域文字

12．跳转菜单

13．跳转菜单开始

9.3.5 【实战演练】——婚戒网页

9.4 综合演练——智能扫地机器人网页

9.4.1 【案例分析】

9.4.2 【设计理念】

9.4.3 【知识要点】

9.5 综合演练——开心烘焙网页

9.5.1 【案例分析】

9.5.2 【设计理念】

9.5.3 【知识要点】

小结

1. 熟练掌握表单的类型及应用。

2. 熟练掌握行为面板。

9.4

综合演练

智能扫地机器人网页

9.4.1 【案例分析】

扫地机器人网是一个为用户提供各类有关扫地机器人高品质服务的网站，包括产品推荐、技术支持、购买渠道等多项功能。现要为网站设计新的页面，网页设计要求带给浏览者简洁明了，易于识别的观感。

9.4.2 【设计理念】

在网页设计和制作过程中，背景采用实景照片，使画面看起来干净清爽；产品与背景的搭配，使页面看起来活泼轻松；用户注册界面设计简洁，操作简单；整体设计简洁清晰，让人一目了然，增强了网站的吸引力。

作业

9.4.3 【知识要点】

使用“表单”按钮插入表单；使用“Table”按钮插入表格，进行页面布局；使用“图像按钮”按钮插入图像按钮；使用“复选框”按钮插入复选框；使用“文本”按钮插入单行文本域；使用“Tel”按钮插入Tel文本域。

9.5

综合演练

开心烘焙网页

9.5.1 【案例分析】

开心烘焙是一家连锁面包坊品牌。店铺以选用来自不同源产地的优质原料为主，精心烹饪各种口味的面包。现要为其设计制作网页，网页设计要求简单直观，使人印象深刻。

9.5.2 【设计理念】

在网页设计和制作过程中，浅色的背景将导航栏和品牌名称突显出来，给人清晰明快的印象，让人一目了然，宣传性强；页面中心的面包图片清晰诱人，能够充分调动浏览者的兴趣；便签形式的文字设计独具匠心。

9.5.3 【知识要点】

使用“交换图像”命令，制作鼠标指针经过图像发生变化效果。

第10讲

课时内容

网页代码

授课时间

180分钟

课时

4

 了解网页代码。

 掌握如何编辑代码。

教学目标

 掌握常用的HTML标签。

 掌握脚本语言。

 掌握响应HTML事件。

教学重点

 熟练掌握HTML标签。

 熟练掌握脚本语言。

教学难点

能够正确的编写代码。

1. 教学思路：（1）通过对课堂实训案例的讲解掌握品质狂欢节网页、土特产网页的制作方法；（2）再通过软件相关功能的解析学习标签的编写方法和常用工具，以及HTML响应时间；（3）再通过课堂实战演练巩固软件功能及编辑代码技巧；（4）最后通过课后综合演练消化所学软件知识，提高网页制作的能力。

（1）通过课堂实训案例熟悉设计理念和软件功能；（2）通过软件功能教学设计

2. 教学手段：解析深入学习软件功能和制作特点。（3）通过课堂实战演练和课后综合演练提高学生的实际应用能力。

3. 教学资料及要求：在网上中找一些网页页面进行制作，来加深学员对知识点的理解和提高实际操作能力。

教学内容

讨论问题：1、在Dreamweaver CC 2019中有哪几种方法可以添加所需的标签？

2、在Dreamweaver CC 2019中如何快速选中所需的标签？

内容大纲：具体可结合本项目的PPT课件进行配合讲解。

10.1 品质狂欢节网页

10.1.1 【案例分析】

10.1.2 【设计理念】

10.1.3 【操作步骤】

10.1.4 【相关工具】

1．代码提示功能

2．使用标签库插入标签

10.1.5 【实战演练】——自行车网页

10.2 土特产网页

10.2.1 【案例分析】

10.2.2 【设计理念】

10.2.3 【操作步骤】

1．制作浏览器窗口始终不出现滚动条

2．制作禁止使用单击右键

10.2.4 【相关工具】

1．常用的HTML标签

2．脚本语言

3．调用事件过程

10.2.5 【实战演练】——男士服装网页

10.3 综合演练——商业公司网页

10.3.1 【案例分析】

10.3.2 【设计理念】

10.3.3 【知识要点】

10.4 综合演练——活动详情页

10.4.1 【案例分析】

10.4.2 【设计理念】

10.4.3 【知识要点】

小结

1. 熟练掌握常用的HTML标签及标签的编写。

2. 熟练响应HTML事件。

10.3

综合演练

商业公司网页

10.3.1 【案例分析】

商务在线是依托网络进行生产和营销的商务活动。利用电子信息技术来扩大宣传、降低成本；包括网站策划、域名注册、主机服务等一系列活动的网站。本例是为商务在线设计制作的网页，目的是进行宣传、吸引更多的消费者。在网页设计中要体现出商务在线网站的实用性和完整性。

10.3.2 【设计理念】

作业

在网页设计和制作过程中，使用蓝色的渐变背景展示出低调的品质感；网页的中心图片显示了公司的科技感和技术能力，独具创意；简洁明确的白色文字清晰醒目，让人一目了然；整个页面简洁工整，体现了公司认真、积极的工作态度。

10.3.3 【知识要点】

使用“IFRAME”按钮，制作浮动框架效果。

10.4

综合演练

活动详情页

10.4.1 【案例分析】

美凌电器是以简洁卓越的品牌形象、不断创新的公司理念和竭诚高效的服务质量闻名，目前推出“逢7有奖系列活动”，要求制作活动详情页，用于平台宣传及推广，设计以此次优惠信息为主要内容，能表现出丰富的优惠活动及网站特色。

10.4.2 【设计理念】

在设计制作过程上，整个页面以红色为主色调，表现出喜庆、热烈、激情洋溢的氛围，承托出网站独特的优惠活动和大力的优惠力度。整个画面的搭配相得益彰，更加提升了整个画面的档次。

10.4.3 【知识要点】

使用“页面属性”命令，添加页面标题；使用“IFRAME”按钮，制作浮动框架效果。

第11讲

课时内容

综合设计实训

授课时间

225分钟

课时

5

 掌握个人网页的制作。

 掌握游戏娱乐网页的制作。

教学目标

 掌握旅游休闲网页的制作。

 掌握房地产网页的制作。

 掌握电子商务网页的制作。

教学重点

 熟练掌握表格布局的使用。

 熟练掌握CSS样式的使用。

教学难点

能够正确的使用CSS样式。

1. 教学思路：（1）通过对课堂实训案例的讲解掌握个人网页——李梅的个人网页、游戏娱乐网页——锋七游戏网页、旅游休闲网页——滑雪运动网页、房地产网页——购房中心网页、电子商务网页——家政无忧网页的制作方法；（2）再通过软件相关功能布局页面，以及通过CSS样式命令修饰页面。

教学设计

2. 教学手段：（1）通过课堂实训案例熟悉设计理念和软件功能；（2）通过软件功能解析深入学习软件功能和制作特点。

3. 教学资料及要求：在网上中找一些网页页面进行制作，来加深学员对知识点的理解和提高实际操作能力。

教学内容

讨论问题：1、在Dreamweaver CC 2019中有哪几种布局方法？

2、在Dreamweaver CC 2019中使用CSS样式的好处？

内容大纲：具体可结合本项目的PPT课件进行配合讲解。

11.1 个人网页——李梅的个人网页

11.1.1 【项目背景及要求】

1．客户名称

2．客户需求

3．设计要求

11.1.2 【项目创意及制作】

1．设计素材

2．设计作品

3．步骤提示

11.2 游戏娱乐网页——锋七游戏网页

11.2.1 【项目背景及要求】

1．客户名称

2．客户需求

3．设计要求

11.2.2 【项目创意及制作】

1．设计素材

2．设计作品

3．步骤提示

11.3 旅游休闲网页——滑雪运动网页

11.3.1 【项目背景及要求】

1．客户名称

2．客户需求

3．设计要求

11.3.2 【项目创意及制作】

1．设计素材

2．设计作品

3．步骤提示

11.4 房地产网页——购房中心网页

11.4.1 【项目背景及要求】

1．客户名称

2．客户需求

3．设计要求

11.4.2 【项目创意及制作】

1．设计素材

2．设计作品

3．步骤提示

11.5 电子商务网页——家政无忧网页

11.5.1 【项目背景及要求】

1．客户名称

2．客户需求

3．设计要求

11.5.2 【项目创意及制作】

1．设计素材

2．设计作品

3．步骤提示

小结

1. 熟练掌握表格的应用与表格的嵌套。

2. 熟练掌握CSS样式的各属性。