网页制作Dreamweaver模板和库课件.ppt

《网页制作Dreamweaver模板和库课件.ppt》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、第10章模板和库网页设计与制作DreamweaverCC标准教程1.模板2.库本章学习主要内容：在网页的制作过程中，常常会制作很多布局结构和版式风格相似而网页内容不同的页面，如果每个页面都从头开始制作，不仅工作乏味而且效率低下。为此，需要预先定义多个网页的相同部分，将其存入相应文件中，这就构成了模板。套用模板可以迅速生成多个风格一致的网页，避免了很多重复性工作，提高了工作效率10.1模板12.1.1课堂案例—花仙子园艺12.1.2创建模板12.1.3定义可编辑区域12.1.4定义可编辑重复区域12.1.5创建基于模板的网页12.1.6管理模板10.1模板案例学

2、习目标：学习模板的使用。案例知识要点：新建模板文件，选择菜单【插入】

3、【模板对象】

4、【可编辑区域】，在模板文件中插入可编辑区域，通过模板文件创建网页，在【资源】面板中对模板文件进行编辑。素材所在位置：光盘/案例素材/ch10/课堂案例-花仙子园艺。案例效果如图10-1所示。10.1.1课堂案例-花仙子园艺创建网页模板时必须明确模板是建在哪个站点中，因此，正确建立站点尤为重要。模板文件创建后，Dreamweaver自动在站点根目录下创建名为Templates的文件夹，所有模板文件都保存在该文件夹中，扩展名为.dwt。1.新建空白模板2.根据现有网页文件创建模板1

5、0.1.2创建模板创建完成的网页模板中，所有区域都被锁定为“不可编辑区域”。所谓“不可编辑区域”是指多个风格相同网页中的共同部分，该部分在通过模板创建的网页文件中是保持一致的。因此，我们还需要在模板中插入“可编辑区域”，用来编辑各个网页文件中的不同内容。10.1.3定义可编辑区域网页模板中的重复区域不同于可编辑区域，在基于模板创建的网页中，重复区域不可编辑，但可以多次复制。因此，重复区域通常被设置为网页中需要多次重复插入的部分，多被用于表格。若希望编辑重复区域，可以在重复区域中嵌套一个可编辑区域。10.1.4定义可编辑重复区域创建基于模板的网页通常采用以下两种

6、方法。（1）利用菜单命令创建基于模板的网页（2）利用【资源】面板创建基于模板的网页10.1.5创建基于模板的网页1.修改模板文件2.重命名模板文件3.删除模板文件4.更新站点10.1.6管理模板Dreamweaver可以把网站中经常反复使用到的网页元素存入一个文件夹中，该文件夹称为库。当库项目创建后，Dreamweaver会自动在站点根目录下创建名为Library的文件夹，所有库项目文件都保存在该文件夹中，扩展名为.lbi，称为库项目。将库项目插入网页中，实际上是插入库项目的一个副本和对该库项目的引用。从而保证了对该库项目编辑修改后，引用该库项目的网页能自动更

7、新。库项目和模板一样，可以规范网页格式、避免多次重复操作。它们的区别是模板对整个页面起作用，库项目则只对网页的部分元素起作用。10.2库12.2.1课堂案例-时尚女性网12.2.2创建库项目12.2.3向页面添加库项目12.2.4更新库项目文件10.2库案例学习目标：学习库的使用。案例知识要点：创建库项目文件，在网页文件中插入库项目，在【资源】面板中对库项目进行编辑。素材所在位置：光盘/案例素材/ch10/课堂案例-时尚女性网。案例效果如图10-38所示。10.2.1课堂案例-时尚女性网同网页模板一样，库项目也是基于站点创建，因此在创建之前需正确建立站点。创建

8、库项目通常采用两种方式。1.根据已有网页元素创建库项目2.新建空白库元素10.2.2创建库项目在网页中应用库项目，实际就是把库项目插入相应的页面中10.2.3向页面添加库项目1.修改库项目文件2.将库项目从网页中分离3.重命名库项目文件4.删除库项目文件5.更新站点10.2.4更新库项目文件12.3.1练习案例-旗袍文化12.3.2练习案例-恒生国际老年公寓10.3练习案例案例练习目标：练习模板基本操作。案例操作要点1．根据已有网页文件example.html创建模板，模板名称为temp.dwt。2．编辑模板文件，在导航图像下方创建可编辑区域，名称为conte

9、nt。3．在网页模板文件中建立两个CSS文字样式并保存在样式表文件qipao.css中。标题样式.w1：幼圆16号字，颜色为#C30。正文样式.w2：幼圆16号字，颜色为黑色，行高20。4．根据模板创建网页文件index.html，在可编辑区插入1*3表格，宽度为100%。10.3.1练习案例-旗袍文化5.根据模板创建网页文件a-1.html，在可编辑区插入1*2表格，宽度为100%。6.根据模板创建网页文件a-2.html，在可编辑区插入3*4表格，宽度为100%。7．修改模板文件，在图像“首页”上设置链接文件为index.html，在图像“旗袍史话”上设置

10、链接文件为a-1.html，在图像“旗