边做边学-Dreamweaver CS6网页设计案例教程 教学教案

《边做边学---DreamweaverCS6网页设

计案例教程（第3版）（微课版）》

配套教学教案

第1讲

课时内容初识DreamweaverCS6授课时间90分钟课时2

0掌握工作界面的操作。

0掌握网站框架的创建。

教学目标

0掌握站点的管理。

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

0熟练掌握DreamweaverCS6工作界面的基本操作。

教学重点

0熟练掌握DreamweaverCS6的站点。

教学难点在DreamweaverCS6中站点的建立及编辑。

1.教学思路：（1）通过对课堂实训案例的讲解掌握界面操作和站点设置的方法；（2）

通过软件相关功能的解析学习DreamweaverCS6工作界面的基本操作和设置文件

头的基本方法。

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

解析深入学习软件功能和制作特点。

3.教学资料及要求：除了课堂实训案例中讲解的软件功能外，还可以根据相关的工

具特点进行简单的练习和操作。

教学内容

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

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

区别？

内容大纲：具体可结合本项目的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.3管理站点

1.3.1【操作目的】

1.3.2【操作步骤】

1.3.3【相关工具】

1.站点管理器

2.创建文件夹

3.定义新站点

1.4网页文件头设置

1.4.1【操作目的】

1.4.2【操作步骤】

1.4.3【相关工具】

1.插入搜索关键字

2.插入作者和版权信息

3.设置刷新时间

4.设置描述信息

5.设置页面中所有链接的基准链接

6.设置当前文件与其他文件的关联性

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

小结2、熟练掌握在DreamweaverCS6中站点的创建、编辑、复制、删除和导出的方法，掌

握新建、保存的技巧。

第2讲

课时内容文本与文档授课时间180分钟课时4

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

教学目标0掌握项目符号和编号列表使用方法和区别。

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

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

教学重点

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

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

1.教学思路：（1）通过对课堂实训案例的讲解掌握轩宇门窗网页、休闲旅游网页和

休闲度假网页的制作方法：（2）再通过软件相关功能的解析学习输入文本和编辑

文本相关属性，以及进行区分使用项目符号和编号列表方法和技巧；（3）再通过

课堂实战演练巩固软件功能及网页制作技巧：（4）最后通过课后综合演练消化所

学软件知识，提高制作网页的能力。

教学设计

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

解析深入学习软件功能和制作特点。（3）通过课堂实战演练和课后综合演练提高

学生的实际应用能力。

3.教学资料及要求：在网上找一些简单的网页页面进行制作，来加深学员对知识点

的理解和提高实际操作能力。

教学内容

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

2、在DreamweaverCS6中如何输入多个连续空格？

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

内容大纲：具体可结合本项目的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【实战演练】一一佳人SPA养生馆网页

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.2Q【设计理念】

在网页设计制作过程中，背景采用了灰色并使用大幅家居秀影图片作为装饰，使整个页面看'起来典雅舒迄

黑色的导航设计简洁雅观，更方便浏览者查阅。整体设计风格具有家居装饰的特包优雅并且时尚…

2.4.3口（知识要点】~

使用“页面属性”命令，设置页面的边距、网页标题效果；使用“腐性”面板，改变文字的大小。.

2.5综合演练一有机果蔬网页

作业

251口［案例分析2

现代人对生活质量的要求同时表现在对食物的追求，有机果蔬是指在生产过程中严格按照有机生产规程，

并含有绿色食品标，且经过有机食品认证机构鉴定并颁发有机食品证书的果蔬产品。网页设计要求突出果蔬健

康无污染等特色。，

2.5.2口【设计理念】~

在网页设计制作过程中，背景采用了绿色蔬菜的图片，它给消费者一种健康的感觉；画融体色彩搭配舒

适亲切，白色的文字与图片搭配相得益彰，导航条设计简》的娱有特色，网页设计与宣传主题相呼应；画面清

爽舒适，符合有机食物的风格特点。“

2.5.30［知识要点】，

使用“页面属性”命令，设置页面边距和标题；使用“首选参数”命令，设置允许多个空格一

第3讲

课时内容图像和多媒体授课时间180分钟课时4

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

教学目标

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

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

教学重点

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

教学难点能够正确使用图像和图像的属性设置、Flash文件的格式及设置属性。

1.教学思路：（1）通过对课堂实训案例的讲解掌握咖啡馆网页、物流运输网页的制

作方法；（2）再通过软件相关功能的解析学习图像的插入与使用技巧，以及进行

动画的使用；（3）再通过课堂实战演练巩固软件功能及网页制作技巧；（4）最后

通过课后综合演练消化所学软件知识，提高图像与动画的使用能力。

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

解析深入学习软件功能和制作特点。（3）通过课堂实战演练和课后综合演练提高

学生的实际应用能力。

3.教学资料及要求：在网上找一些带有图像和动画的网页页面进行制作，来加深学

员对知识点的理解和提高实际操作能力。

教学内容

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

如何解决？

2、在DreamweaverCS6中如何设置插入的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.3.3【操作步骤】

3.2.4【相关工具】

1.插入Flash动画

2.插入FLV

3.插入Shockwave影片

4.影片插入Applet程序

5.插入ActiveX控件

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口【案例分析】，

零食是指除一日三餐外的其他食物，一般J集对零食比的衷，零食对儿童具有不可抗拒的特殊魅力，所

以网页设计要求能够吸引儿童关注，符合儿童的审美需求。~

3.3.2口【设计理念】~

在网页设计制作过程中,使用大红色作为网页的背景,能瞬间吸引人们的视线，达到宣传的目的；明快鲜

亮的色彩搭配在网页设计上十分突出，增强了网页的视觉效果和观赏性，卡通的图日配使画面更加欢快，下

方产品的介绍直观明了，方便消费荀蟒。~

3.3.3Q［知识要点】“

使用“图像”按钮插入图像；使用“代码”视图，手动输入代码设置图像的水平间距。~

作业

3.4综合演练——房源网页

3.4.1口【案例分析】“

房源网是当下房地产行业的一种运营方式，它不光是有房屋出租出售的内容，还包括房屋装修、装饰，以

及一些二手房的出售出租。要求网页风格简洁，并且着重内容的宣传。~

3.4.20【设计理念】

在网页设计和制作过程中，椽色的背景给人安心舒适的感觉，大气的图文搭配使网页更具质感，细致全面

的图文信息更加体现了网站周到的服务；简洁清晰的导航设计更便于人们的浏览；整体风格具有商业气息，让

人耳目一新0•

3.4.3口［知识要点】，

使用“SWF”按钮为网页文档插入Flash动画效果；使用,,属性”面板，设置动画背景透明效果；使用“播

放”按钮在文档窗口中预览效果，"

第4讲

课时内容超链接授课时间180分钟课时4

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

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

教学目标0掌握图像超链接的创建方法和技巧。

0掌握命名锚记超链接的创建方法和技巧

0掌握热区链接的创建方法和技巧

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

教学重点

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

教学难点能够正确给所需文本添加超链接，以及锚记超链接的使用方法和技巧。

1.教学思路：（1）通过对课堂实训案例的讲解掌握建筑模型网页、温泉度假网页的

制作方法：（2）再通过软件相关功能的解析学习超链接的种类，以及进行不同类

型的超链接创建；（3）再通过课堂实战演练巩固软件功能及网页制作技巧；（4）

最后通过课后综合演练消化所学软件知识，提高制作超链接的能力。

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

解析深入学习软件功能和制作特点。（3）通过课堂实战演练和课后综合演练提高

学生的实际应用能力。

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

和提高实际操作能力。

教学内容

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

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

内容大纲：具体可结合本项目的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【操作步骤】

1.制作鼠标经过

2.创建热点链接

4.2.4【相关工具】

1.图像超链接

2.鼠标经过图像链接

3.命名锚记链接

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.2D【设计理念】“

在网页设计和制作过程中，灰绿色的背景使网页看上去更具质感；整齐排^的世界景观的照片及文字使网

页看上去更加整洁清晰；网页设计留有大量空白，使网页设计更具特色，画面更加开阔，整体风格大气时尚。

口（知识要点】一

作业4.3.3

使用“矩形热点”工具，制作指定的链接网页文档…

4.4综合演练——世界旅游网页

4.4.1口【案例分析】『

旅游网站是为游客提供全新独家的旅游线路，以及旅游服务经验，并且包含特价旅游网报价和详细的旅游

网攻略,网站设计要求能够让人感受到舒适、放松的出游氛围，，

4.4.2D［设计理念］。

在网页设计和制作过程中，网页的色彩都是用清爽舒适的色彩搭配；网页的设计以图片为主，使人能够直

观地接收到网页信息，导航栏设计简洁，网页分类明确，方便浏览。整体风格设计直观明了，画面丰富自然，

使浏览者观看起来赏心悦目。"

4.4.3D［知识要点】

使用“鼠标经过图像“按钮，为网页添加导航效果，，

第5讲

课时内容使用表格授课时间270分钟课时6

0了解表格的简单操作

教学目标0掌握网页中的数据表格。

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

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

教学重点

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

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

1.教学思路：（1）通过对课堂实训案例的讲解掌握营养美食网页、绿色粮仓网页的

制作方法；（2）再通过软件相关功能的解析学习表格的插入与属性的设置，以及

进行表格数据的导入与导出；（3）再通过课堂实战演练巩固软件功能及表格的使

用技巧；（4）最后通过课后综合演练消化所学软件知识，提高网页制作的能力。

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

解析深入学习软件功能和制作特点。（3）通过课堂实战演练和课后综合演练提高

学生的实际应用能力。

3.教学资料及要求：在网上找一些简单的网页页面进行制作，来加深学员对知识点

的理解和提高实际操作能力。

教学内容

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

2^在DreamweaverCS6中＜tr＞标签可否添加背景图像？

内容大纲：具体可结合本项目的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【操作步骤】

5.2.4【相关工具】

I.导入和导出表格的数据

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.2D【设计理念】

在网页设计和制作过程中，淡是闲适的茶区直盘绐人悠闲舒适的印象：素鞋古朴的茶具和新鲜的茶叶搭配

清新自然之感油然而生，具有民族特色和中国文化的图文搭配，更加提升了画面的中国文化气息:整体风格符

合茶文化的特色，画面搭配舒适和谐，~

作业5.3.3D［知识要点】.，

使用“导入表格式数据”命令，导人外部表格数据；使用“插入列”命令，为表珞增加列；使用“图像”

按径插入图像；使用“CSS样式“命令，控制文字的大小及颜色,，

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

5.4.1口【案例分析】

火锅，古称“古董堂”，因投料入沸水时发出的“咕咚”声而得名。重庆火锅，麻辣醇香，名扬天下，是

现代人热爱的美食之一。网站设计要求时尚新潮，符合年轻人的口味,~

5.4.2口【设计理念】，

在网页设计和制作过程中，模糊的火锅背景能够给浏览者带来好奇心；红色的色块在画面中突出，也符合

火锅的特色，色块的排放具有秩序，使画面看起来整齐并具有规律。网页设计突出了宣传的主题。，

5.4.3Q［知识要点］~

使用“页面属性”命令，设置页面的边距和标题；使用“表格”按钮插入表格；使用“CSS样式”命令，

为单元格添加背景图像效果；使用“图像”按钮插入图像°，

第6讲

课时内容使用框架授课时间270分钟课时6

0了解框架与框架集的作用。

教学目标

0掌握框架的属性设置方法和技巧。

0简单了解框架的作用。

教学重点

0熟练掌握框架布局的应用。

教学难点能够正确使用框架布局制作部分跳转页面。

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【操作步骤】

1.新建框架并编辑

2.插入图像

6.1.4【相关工具】

1.建立框架集

2.为框架添加内容

3.保存框架

4.框架的选择

5.修改框架的大小

6.拆分框架

7.删除框架

6.1.5【实战演练】——献爱心活动中心网页

6.2建筑规划网页

6.2.1【案例分析】

6.2.2【设计理念】

6.2.3【操作步骤】

1.设置保存文档

2.插入表格、图像和鼠标经过图像

3.修改页面属性并插入图像

4.创建图像超链接

6.2.4【相关工具】

1.框架属性

2.框架集的属性

3.框架中的链接

6.2.5【实战演练】一一阳光外语小学网页

6.3综合演练——健康定制网页

6.3.1【案例分析】

6.3.2【设计理念】

6.3.3【知识要点】

6.4综合演练——健康定制网页2

6.4.1【案例分析】

6.4.2【设计理念】

6.4.3【知识要点】

1.熟练掌握框架的插入方法和技巧。

小结

2.熟练掌握框架页之间的超链接。

6.3综合演练一健康定制网页1

6.3.1口【案例分析】，

随獭代人生活压力的不断变大，健康就成了不可忽视的重要问题，健康定制可以根据用户的身体情况为

其定制相关的治疗方案，在设计上要求合理地进行配色和编排，展现出健康、简约的特点。“

6.3.20【设计理念】~

在网页设计和制作过程中，银灰色的背景展现出网站的品质；清晰明快的编排方式给人简约、大气的印象.

与网页的主题相呼应；整体设计简洁直观，让人一目了然，宣传性强，•

6.3.3L［知识要点】，

作业使用“新建”命令，新建空白页面；使用“插入”菜单，插入新建瓦；使用“保存全部”命令，将框架全

部保存；使用“图像”按钮制作钙的框架网页效果一

«««*

@©

6.4综合演练一健康定制网页2

6.4.1口［案例分析］

本网页是为健康定制网页制作的子页面，在设计上要求简洁直观、清晰明确的展示出企业的相关信息，并

与首页的设计相呼应。“

6.4.2D［设计理念］.，

在网页设计和制作过程中，与首页相同的用色和布局，使整体设计具有连贯性；橙色的标签使展示的内容

清晰明确，让人一目了然，明快的用色给人阳光、健康的印象，与网页的主题内容相呼应；整体设计醒目直观,

宣传性强。“

6.4.3口［知识要点】“

使用“链接”选项,设置链接效果；使用“目标”选项，设置链接的显示区域…

=［Tn-HHD“

第7讲

课时内容使用层授课时间225分钟课时5

0掌握层的基本操作方法和技巧。

教学目标

0掌握应用层设计表格的方法和技巧。

0掌握层的插入方法和应用技巧。

教学重点

0熟练层的属性设置。

教学难点能够正确使用层命令来布局元素的位置。

1.教学思路：（1）通过对课堂实训案例的讲解掌握联创网络技术网页、信业融资网

页的制作方法；（2）再通过软件相关功能的解析学习层的使用方法和技巧，以及

将层转换为表格的方法；（3）再通过课堂实战演练巩固软件功能及应用层技巧；（4）

最后通过课后综合演练消化所学软件知识，提高层的应用能力。

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

解析深入学习软件功能和制作特点。（3）通过课堂实战演练和课后综合演练提高

学生的实际应用能力。

3.教学资料及要求：在网上找一些网页页面进行制作，来加深学员对知识点的理解

和提高实际操作能力。

教学内容

讨论问题：1、在DreamweaverCS6中层的作用是？

2、在DreamweaverCS6中有哪几种方法调整层的顺序？

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

7.1联创网络技术网页

7.1.1【案例分析】

7.1.2【设计理念】

7.1.3【操作步骤】

7.1.4【相关工具】

1.创建层

2.选择层

3.设置层的默认属性

4.AP元素面板

5.更改层的堆叠顺序

6.更改层的可见性

7.调整层的大小

8.嵌套层

9.移动层

10.对齐层

11.层靠齐到网格

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

7.2信业融资网页

7.2.1【案例分析】

7.2.2【设计理念】

7.2.3【操作步骤】

7.2.4[相关工具】

1.将APDiv转换为表格

2.将表格转换为APDiv

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.熟练层的插入方法及属性设置。

小结

2.熟练掌握层转为表格的方法和技巧。

豳7.3综合演练一充气浮床网页

7.3.1D【案例分析】“

充气浮床是水上娱乐项目不可或缺的娱乐设施，为水上娱乐带来更多欢乐，深受不同年龄层人们的喜爱：

网站设计要求具有欢乐温馨的氛围。。

7.3.2口［设计理念］“

在网页设计和制作过程中，彩色的线条在画面中多次出现，代表着充气床的多样魅力，并且起到丰富画面

效果的作用，充满快乐地画面氛围.达到宣传的目的；整个网页设计集欢乐、明快、现代为一体，并且体现出

水上运动的动感和欢乐。“

7.3.3Q［知识要点】“

使用“绘制APDiv”按钮绘制层；使用“图像”按钮在绘制的图层中插入图像。“

作业9-尹！ME1|"

—w.0..

■7.4综合演练一一美味小吃网页...一.■

7.4.1口［案例分析】~

比萨饼是一种发源于意大利的食品，在全球颇受欢迎c比萨饼的通常做法是在发酵的圆面饼上面覆盖番茄

酱、奶酪和其他配料，并由烤炉烤制而成，一般的比萨端会搭配其池小吃及饮品，网页设计要求体现比萨饼

的美味与特色。，

7.4.20【设计理念】

在网页设计和制作过程中，使用模糊的比萨底黑庄作为背景，能够呼应主题并骸！1衬托的效果，突出了画

面中的主要内容；网页的信息内容使用圆形在画面中系列，图文搭配合理舒适，整体风格简单大方，能够体现

出休闲随意的饮食特色。~

7.4.30［知识要点】0

使用“绘制AP-Div"按钮绘制层；使用“图像”按钮插入图像；使用"CSS样式”命令，设置文字的大

小和颜色；使用“移动层”命令,调整层的位置制作阴影效果。“

第8讲

课时内容CSS样式授课时间225分钟课时5

0了解CSS样式的概念。

0了解CSS样式。

0掌握样式的类型与创建方法。

教学目标

0掌握编辑样式的方法和技巧。

回掌握CSS的属性。

0掌握过滤器。

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

教学重点

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

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

1.教学思路：（1）通过对课堂实训案例的讲解掌握国画展览馆网页、打印机网页和

爱晚工程网页的制作方法；（2）再通过软件相关功能的解析学习CSS样式，以及

CSS样式的属性及分类；（3）再通过课堂实战演练巩固软件功能及CSS样式的应

用技巧：（4）最后通过课后综合演练消化所学软件知识，提高网页制作的能力。

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

解析深入学习软件功能和制作特点。（3）通过课堂实战演练和课后综合演练提高

学生的实际应用能力。

3.教学资料及要求：在网上中找一些多样式的网页页面进行制作，来加深学员对知

识点的理解和提高实际操作能力。

教学内容

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

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

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

8.1国画展览馆网页

8.1.1【案例分析】

8.1.2【设计理念】

8.1.3【操作步骤】

8.1.4【相关工具】

1.CSS样式的概念

2.“CSS样式”面板

3.CSS样式的类型

4.创建重定义HTML标签样式

5.创建CSS选择器

6.创建和应用自定义样式

7.创建和引用外部样式

8.编辑样式

8.1.5【实战演练】一一葡萄酒网页

8.2打印机网页

8.2.1【案例分析】

8.2.2【设计理念】

8.2.3【操作步骤】

1.插入表格并输入文字

2.设置CSS属性

8.2.4【相关工具】

1.类型

2.背景

3.区块

4.方框

5.边框

6.列表

7.定位

8.扩展

9.过渡

8.2.5【实战演练】一一室内设计网页

8.3爱晚工程网页

8.3.1【案例分析】

8.3.2【设计理念】

8.3.3【操作步骤】

1.插入图片

8.3.4【相关工具】

1.可应用过滤的HTML标签

2.CSS的静态过滤器

3.CSS的动态过滤器

8.3.5【实战演练】一一汽车配件网页

8.4综合演练——GPS导航仪网页

8.4.1【案例分析】

8.4.2【设计理念】

8.4.3【知识要点】

8.5综合演练——抒情散文网页

8.5.1【案例分析】

8.5.2【设计理念】

8.5.3【知识要点】

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

小结

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

8.4综合演练——GSP导航仪网页

作业8.4.1口【案例分析】.

GPS导航仪能够帮助用户准确定位当前位置，并且根据既定的目的地计算行程，广泛用于交通、旅游等方

面。本例将制作GPS导航仪网页，要求体现出GPS导航仪的技术和功能一

8.4.2D【设计理念】“

在网页设计和制作过程中，背景采用蓝白黑的色彩搭配，给人轻松和自在的感觉；将产品照片作为网页设

计的主体，醒目直观地展示出网页的宣传主题，网站分类明确，与背景颜色相呼应；简洁直观的设计让人一目

了然,易于查看浏览。~

8.4.3R［知识要点】

使用“属性”面板，为文字添加空白链接；使用“CSS样式”命令，设置超链接的显示及鼠标经过的显示

8.5综合演练一抒情散文网页

8.5.1D［案例分析】~

抒情散文以抒发主观清感为出发点，以空灵飘逸见长，着力点在于准确表达感清色彩的语言运用上。本例

将制作抒情散文网页，在设计上希望体现出作者清新、自然、悠闲的心境：“

8.5.2口［设计理念］。

在网页设计和制作过程中，采用淡雅的色彩作为背景，通过优美的画面处理，营造出自然、闲适的氛围，

给人清新、悠闲的感觉，符合抒清散文的特色；图文的合理搭配，增添了画面的美感，与宣传的主题相呼应；

整个设计简洁直观.没有多余的修饰,让浏览者一目了然C，

8.5.3口［知识要点】“

使用“CSS样式”命令，设置文字的样式显示。~

第9讲

课时内容模板和库授课时间225分钟课时5

0了解“资源”面板。

教学目标0掌握模板的创建方法和使用技巧。

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

0掌握模板的使用方法。

教学重点

0熟练库面板的应用。

教学难点能够正确应用模板的所有属性。

1.教学思路：（1）通过对课堂实训案例的讲解掌握电子吉他网页、建达康集团网页

的制作方法；（2）再通过软件相关功能的解析学习模板的创建、编辑和应用，以

及库面板的使用；（3）再通过课堂实战演练巩固软件功能及模板的应用技巧；（4）

最后通过课后综合演练消化所学软件知识，提高网页制作的能力。

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

解析深入学习软件功能和制作特点。（3）通过课堂实战演练和课后综合演练提高

学生的实际应用能力。

3.教学资料及要求：在网上中找一些具有共同点的多级页面进行制作，来加深学员

对知识点的理解和提高实际操作能力。

教学内容

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

2、在DreamweaverCS6中库面板的具体作用是？

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

9.1电子吉他网页

9.1.1【案例分析】

9.1.2【设计理念】

9.1.3【操作步骤】

1.创建模板

2.创建可编辑区域

9.1.4【相关工具】

1.“资源”面板

2.创建模板

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

4.创建基于模板的网页

5.管理模板

9.1.5【实战演练】一一水果慕斯网页

9.2建达康集团网页

9.2.1【案例分析】

9.2.2【设计理念】

9.2.3【操作步骤】

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

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

3.修改库中注册的项目

9.2.4【相关工具】

1.创建库文件

2.向页面添加库项目

3.更新库文件

9.2.5【实战演练】一一律师事务所网页

9.3综合演练——食谱大全网页

9.3.1【案例分析】

9.3.2【设计理念】

9.3.3【知识要点】

9.4综合演练——爱家纺网页

9.4.1【案例分析】

9.4.2【设计理念】

9.4.3【知识要点】

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

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

1QQ2A速位一_自鸿+今向TH1

y•O-nr'更良1日K壬网贝］

9.3.1□【案例分析】.

食谱网站是提供最全面的中国各地菜谱、外国菜谱、家常菜谱、创意美食等菜谱知识的专业网站，其推荐

专题菜谱包括豆腐的做法、蛋糕的做法、牛肉的做法、排骨的做法、鸡的做法等。网页设计要求搭配合理，能

吸引浏览者观看。，

9.3.20［设计理念］“

在网页设计和制作过程上，网页的背景使用明亮的橙色，带给人温暖舒适的感觉；网页的页面划分较有特

色，灵活多变的页面使网页看起来更加丰富；图文搭配合理，美食照片丰富且与主题相呼应，使人一目了然；

网页整体设计画面美观，符合美食网站的特色C~

9.3.3口［知识要点】一

使用“另存模板”命令将页面存为模板；使用“可编辑区域”按钮添加可编辑区C