网页设计与制作 Dreamweaver CS6 标准教程

Presentation on theme: "网页设计与制作 Dreamweaver CS6 标准教程"— Presentation transcript:

1 网页设计与制作 Dreamweaver CS6 标准教程
第12章 模板和库 网页设计与制作 Dreamweaver CS6 标准教程

2 本章学习主要内容： 1.模板 2.库

3 12.1模板 在网页的制作过程中，常常会制作很多布局结构和 版式风格相似而网页内容不同的页面，如果每个页 面都从头开始制作，不仅工作乏味而且效率低下。 为此，需要预先定义多个网页的相同部分，将其存 入相应文件中，这就构成了模板。套用模板可以迅 速生成多个风格一致的网页，避免了很多重复性工 作，提高了工作效率

4 12.1模板 12.1.1课堂案例—花仙子园艺 12.1.2创建模板 12.1.3定义可编辑区域 12.1.4定义可编辑重复区域
12.1.5创建基于模板的网页 12.1.6管理模板

5 12.1.1课堂案例-花仙子园艺 案例学习目标：学习模板的使用。
案例知识要点：新建模板文件，选择菜单【插 入】|【模板对象】|【可编辑区域】，在模板 文件中插入可编辑区域，通过模板文件创建网 页，在【资源】面板中对模板文件进行编辑。 素材所在位置：光盘/案例素材/ch12/课堂案 例-花仙子园艺。 案例效果如图12-1所示。

6

7 12.1.2创建模板 创建网页模板时必须明确模板是建在哪个站点中， 因此，正确建立站点尤为重要。
模板文件创建后，Dreamweaver自动在站点根目 录下创建名为Templates的文件夹，所有模板文件 都保存在该文件夹中，扩展名为.dwt。 1.新建空白模板 2.根据现有网页文件创建模板

8 12.1.3定义可编辑区域 创建完成的网页模板中，所有区域都被锁定为“不 可编辑区域”。
所谓“不可编辑区域”是指多个风格相同网页中的 共同部分，该部分在通过模板创建的网页文件中是 保持一致的。 因此，我们还需要在模板中插入“可编辑区域”， 用来编辑各个网页文件中的不同内容。

9 12.1.4定义可编辑重复区域 网页模板中的重复区域不同于可编辑区域，在基于 模板创建的网页中，重复区域不可编辑，但可以多 次复制。因此，重复区域通常被设置为网页中需要 多次重复插入的部分，多被用于表格。 若希望编辑重复区域，可以在重复区域中嵌套一个 可编辑区域。

10 12.1.5创建基于模板的网页 创建基于模板的网页通常采用以下两种方法。 （1）利用菜单命令创建基于模板的网页
（2）利用【资源】面板创建基于模板的网页

11 12.1.6管理模板 1.修改模板文件 2.重命名模板文件 3.删除模板文件 4.更新站点

12 12.2库 Dreamweaver可以把网站中经常反复使用到的网 页元素存入一个文件夹中，该文件夹称为库。当库 项目创建后，Dreamweaver会自动在站点根目录 下创建名为Library的文件夹，所有库项目文件都保 存在该文件夹中，扩展名为.lbi，称为库项目。 将库项目插入网页中，实际上是插入库项目的一个 副本和对该库项目的引用。从而保证了对该库项目 编辑修改后，引用该库项目的网页能自动更新。 库项目和模板一样，可以规范网页格式、避免多次 重复操作。它们的区别是模板对整个页面起作用， 库项目则只对网页的部分元素起作用。

13 12.2库 12.2.1课堂案例-时尚女性网 12.2.2创建库项目 12.2.3向页面添加库项目 12.2.4更新库项目文件

14 12.2.1课堂案例-时尚女性网 案例学习目标：学习库的使用。
案例知识要点：创建库项目文件，在网页文件中插 入库项目，在【资源】面板中对库项目进行编辑。 素材所在位置：光盘/案例素材/ch12/课堂案例-时 尚女性网。 案例效果如图12-38所示。

15

16 12.2.2创建库项目 同网页模板一样，库项目也是基于站点创建，因此 在创建之前需正确建立站点。 创建库项目通常采用两种方式。
1. 根据已有网页元素创建库项目 2 .新建空白库元素

17 12.2.3向页面添加库项目 在网页中应用库项目，实际就是把库项目插入相应 的页面中

18 12.2.4更新库项目文件 1. 修改库项目文件 2 .将库项目从网页中分离 3 .重命名库项目文件 4 .删除库项目文件 5 .更新站点

19 12.3练习案例 12.3.1练习案例-旗袍文化 12.3.2练习案例-恒生国际老年公寓

20 12.3.1练习案例-旗袍文化 案例练习目标：练习模板基本操作。 案例操作要点
1．根据已有网页文件example.html创建模板，模 板名称为temp.dwt。 2．编辑模板文件，在导航图像下方创建可编辑区域， 名称为content。 3．在网页模板文件中建立两个CSS文字样式并保存 在样式表文件qipao.css中。 标题样式 .w1：幼圆16号字，颜色为#C30。 正文样式 .w2：幼圆16号字，颜色为黑色，行高20。 4．根据模板创建网页文件index.html，在可编辑 区插入1*3表格，宽度为100%。

21 12.3.1练习案例-旗袍文化 5. 根据模板创建网页文件a-1.html，在可编辑区插入 1*2表格，宽度为100%。
7．修改模板文件，在图像“首页”上设置链接文件为 index.html，在图像“旗袍史话”上设置链接文件为 a-1.html，在图像“旗袍图片”上设置链接文件为a- 2.html。 素材所在位置：光盘/案例素材/ch12/练习案例-旗袍 文化，网页index.html效果如图12-64所示，网页a- 1.html效果如图12-65所示，网页a-2.html效果如图 12-66所示。

22

23

24

25 12.5.2练习案例-恒生国际老年公寓 案例练习目标：练习库的基本操作。 案例操作要点：
1．在index.html文档中，展开house.css样式文档， 将w1样式应用到一级导航条所在的表格标签上，并 将该表格定义为库项目nav1.lbi；将.w2样式应用到 二级导航条所在的表格标签上，并将该表格定义为 库项目nav2.lbi。 2． 在index1.html文档中，将库项目nav1.lbi和 nav2.lbi分别插入到相应位置，并将house.css样式 文档链接到该文档中。

26 12.5.2练习案例-恒生国际老年公寓 3．打开nav2.lbi文档，将house.css样式文档链接 到该文档中。在文字“公寓简介”上设置链接文件 为index.html，在文字“公寓特色”上设置链接文 件为index1.html。 4．设置a:link, a:visited复合样式：文字颜色为 #666，文本装饰选择“无”；设置a:hover复合样 式：文本装饰选择“下划线”，它们均保存在 house.css文档中。 素材所在位置：光盘/案例素材/ch12/练习案例- 恒生国际老年公寓，网页index.html效果如图12- 67所示，网页index1.html效果如图12-68所示。

27

28