实例导入| 模板的编辑和创建 | 模板的应用和更新 | 使用库 | 生成站点

Presentation on theme: "实例导入| 模板的编辑和创建 | 模板的应用和更新 | 使用库 | 生成站点"— Presentation transcript:

1 实例导入| 模板的编辑和创建 | 模板的应用和更新 | 使用库 | 生成站点
第八章、模板与库的应用 实例导入| 模板的编辑和创建 | 模板的应用和更新 | 使用库 | 生成站点

2 目 录 1 利用模板生成的站点 2 模板的创建和编辑 3 模板的应用和更新 4 使 用 库 5 利用模板和库生成站点的制作过程

3 目 录 1 利用模板和库生成站点的制作过程 2 模板的创建和编辑 3 模板的应用和更新 4 使用库 5 利用模板和库生成站点的制作过程

4 第一节 利用模板生成的站点 一个成功的网站首先要具备自己独特的风格，才能够在如汪洋大海的网络中脱颖而出，给人留下深刻的印象。但仅凭网站中的一两个较好的页面，很难收到良好的效果。因此就需要整个站点内的页面体现出统一的风格。通过使用模板能够生成多个具有相似结构和外观网页，从而提高网页制作效率。 【例8.1】 利用模板和库技术生成网站实例，如下图所示。 本网站实例主要涉及以下知识点。 1）网页版面布局的设计。 2）划分模板锁定区域和可编辑区域。 3）创建模板和编辑模板，最后根据模板快速创建网页。

5 目 录 1 利用模板和库生成站点的制作过程 2 模板的创建和编辑 3 模板的应用和更新 4 使用库 5 利用模板和库生成站点的制作过程

6 第二节 模板的创建和编辑 1.创建模板 关于模板最显著的特征就是存在锁定区域和可编辑区域之分。锁定区域主要用来锁定体现网站风格的部分，而将经常要改变的文字、图像、链接等网页元素设置成可编辑区域，网页中只编辑可编辑区域的内容，从而得到与模板相似，但又有所不同的新的网页。 创建模板有两种常用的方法：一是创建新模板，二是将当前网页另存为模板。

7 模板的创建和编辑 第二节 1.创建模板 1．创建新模板
方法一：选择“文件”菜单→“新建”命令，弹出“新建文档”对话框，选择“空白页”选项→选择“页面类型”中的“HTML模板”选项→“布局”中的某项，单击“创建”按钮，如图8.2所示。，如图8.3所示。 方法二：选择 “窗口”菜单→“资源”命令，打开“资源”面板，单击“资源”面板左边的“模板”按钮，单击右下角的“新建模板”按钮

8 模板的创建和编辑 第二节 1.创建模板 2．将当前文档另存为模板 将一个编辑好的网页按照要求加以修改，然后另存为模板。操作步骤如下。
1）保留与其他网页相同的结构和相同的网页内容，删除不需要与其他网页共享的内容，插入“可编辑区域”。 2）选择“文件”菜单→“另存为模板”命令，弹出“另存为模板”对话框，如图8.4所示，或者单击“插入”栏→“模板”选项→“创建模板”按钮，如图8.5所示，弹出“另存为模板”对话框，输入模板名称，单击“保存”按钮。

9 第二节 模板的创建和编辑 2.编辑模板 首先划分可编辑区域和锁定区域，然后编辑模板，通常是像编辑网页一样先将锁定区域编辑好，然后再定义可编辑区域，如图8.6所示。

10 第二节 模板的创建和编辑 2.编辑模板 可编辑区域：在模板中可编辑区域对应网页中的可编辑部分，锁定区域是那些不可编辑的部分。在默认的方式下，Dreamweaver将新模板的所有部分设置为不可编辑区域，由用户来定义可编辑区域。在编辑模板时，无论是可编辑区域还是锁定区域都是可以编辑的。但是将模板应用到网页中，在网页中的锁定区域是不可以编辑的。常用定义可编辑区域的方法有两种。方法一：在模板中将光标定位在要新建可编辑区域位置，选择“插入”菜单→“模板” 选项→“可编辑区域”命令。方法二：单击“插入”栏→“模板”选项→“可编辑区域”按钮。弹出一个“新建可编辑区域”对话框，如图8.7所示，输入这个区域的名称，单击“确定”按钮。 Dreamweaver会将这个区域用高亮边框的矩形包围起来，同时在矩形的左上角显示这个可编辑区域的名称，如图8.6所示。创建模板后，本地站点会自动创建一个文件夹templates，模板的默认路径就是此文件夹，模板的后缀名为dwt。

11 目 录 1 利用模板和库生成站点的制作过程 2 模板的创建和编辑 3 模板的应用和更新 4 使用库 5 利用模板和库生成站点的制作过程

12 第三节 模板的应用和更新 1.模板的应用 在网站建设中，可以为网站设计几套不同的模板，为网站的风格提供不同的方案，这样也可以不定期地改变网站的风格，提高网站的吸收力。利用模板快速生成新的网页，也可以将模板应用于已经存在的网页。 1．模板的应用 选择“文件”菜单→“新建”命令，弹出“新建文档”对话框，选择“网站模板”选项卡，单击左侧列表框中站点名称，再单击右侧的模板文件，选中“当模板改变时更新页面”复选框，然后单击“创建”按钮，实现通过模板快速创建网页，如图8.8所示。

13 模板的应用和更新 第三节 1.模板的应用 2．将模板应用于当前网页
方法一：选择“窗口”菜单→“资源”命令，打开“资源”面板，在“资源”面板中选中要插入的模板，单击“应用”按钮，或直接拖动模板到页面中，如图8.9所示。 方法二：选择“修改”菜单→“模板”选项→“应用模板到页”命令。 如果模板与当前文档出现不匹配的情况，弹出“不一致的区域名称”对话框，如图8.10所示，选中可编辑区域名称，在“将内容移到新区域”下拉列表中，设置移动或丢弃不匹配区域。

14 模板的应用和更新 第三节 1.模板的应用 3．当前网页不再使用模板
当不再需要对一个网页使用模板时，选择“修改”菜单→“模板”选项→“从模板中分离”命令，将网页和与之关联的模板文件脱离。脱离之后的网页将变成普通网页，不再有可编辑区域和锁定区域之分。

15 模板的应用和更新 第三节 2.更新模板 1．修改模板
模板创建后，用户利用模板生成了网页文件。在网页文件的编辑过程中可能会有一些不合适的地方，比如链接有错误、网页布局中单元格对齐方式不合理、图像不能正常显示等，而对于锁定区域是无法在网页编辑状态进行修改的，因此需要对模板进行修改。 打开模板文件，对模板文件进行修改，针对在网页编辑中发现的问题对模板文件进行修改。 1）修改模板：对锁定区域进行修改。 2）删除多余可编辑区域：在模板编辑状态，选中已定义的可编辑区域，选择“修改”菜单→“模板”选项→“删除模板标记”命令，该可编辑区域就不存在了。

16 模板的应用和更新 第三节 2.更新模板 2．用模板更新网页和网站
一旦模板被应用到多个网页文档中，对此模板的修改则会更新全部与其相关联的文档。这种使用模板更新文件的方法大大节省了用户的时间，尤其在涉及大量的改动时极为有效。 （1）用模板更新整个网站和所有与之关联的网页 当修改了模板后，选择“修改”菜单→“模板”选项→“更新页面”命令，或当用户保存模板时，Dreamweaver会提示用户是否使用模板更新网站，更新整个网站和所有网页。弹出“更新模板页面”对话框，如图8.11所示，单击“更新”按钮，又弹出“更新页面”对话框，如图8.12所示，选择“查看”下拉列表框中“整个站点”选项，并在右侧的下拉列表中选择网站名称，单击“开始”按钮，则对整个网站进行更新。

17 模板的应用和更新 第三节 2.更新模板 （2）用模板更新一个单独的网页
打开要更新的网页，选择“修改”菜单→“模板”选项→“更新当前页”命令。

18 目 录 1 利用模板和库生成站点的制作过程 2 模板的创建和编辑 3 模板的应用和更新 4 使用库 5 利用模板和库生成站点的制作过程

19 第四节 使用库 1.创建库 Dreamweaver中提供了库的概念。库是用来存储想要在整个网站上经常重复使用或更新的网页元素，其他网页可调用库文件。这样一旦需要修改重复使用的部分，只需要修改库文件，而其他调用此库的页面将会被全部更新。 库项目可以包含多种网页元素，如图像、链接、表格、脚本等，但CSS样式表文件不能作为库项目添加到库。 创建库的常用方法有二种。 方法一：选择“窗口”菜单→“资源”命令，打开“资源”面板，选择“库”按钮，单击“资源”面板下方的“新建库项目”按钮，如图8.13所示。 方法二：将已经编辑好的网页元素转换为库项目，首先选中要转换为库项目的网页元素，然后选择“修改”菜单→“库”选项→“增加对象到库”命令，当前选中的网页元素就会成为一个新的库项目以供其他网页调用。 创建库项目后，站点中就会多出子文件夹library，库文件的默认存储路径就是该文件夹。库项目的后缀名为lbi，库项目的编辑与普通网页的编辑完全相同。

20 使用库 第四节 2.应用库 库建立好后，可以很轻松地将库应用于网页文件中。操作步骤如下。 1）打开模板或网页，把光标定位在需要插入库的位置。
2）在“资源”面板中选择“库”选项，然后单击相应的库项目，单击“插入”按钮，或者将库项目直接拖到网页需要插入库的位置。 将库项目应用到模板或网页文件中后，在Dreamweaver的网页编辑状态，库项目的背景呈现高亮度显示。

21 第四节 使用库 3.修改库 库被应用到模板或网页文档中，在模板或网页中是无法修改的。要修改库，必须首先打开库项目才能进行编辑。对库的修改则会自动更新所用与之关联的网页文档。 1．编辑库 打开“资源”面板，选中“库”选项，双击某个库项目，进入库项目的编辑状态，对库项目进行修改。 将库项目修改完毕，保存库文件。弹出 “更新库项目”对话框，单击“更新”按钮，如图8.15所示，或选择“修改”菜单→“库”选项→“更新”页面，有如下两种情况。

22 使用库 第四节 3.修改库 （1）更新本地站点上所有调用过库项目的文档
选择“查看”下拉列表中的“整个站点”，并在右侧的下拉列表中选择网站名称，单击“开始”按钮，则对整个网站进行更新，如图8.16所示。

23 使用库 第四节 3.修改库 （2）仅更新当前正在编辑的网页
选择“查看”下拉列表中的“文件使用”，单击“开始”按钮，如图8.17所示，或选择“修改”菜单→“库”选项→“更新当前页”命令。

24 第四节 使用库 3.修改库 2．删除库 打开“资源”面板，选中“库”选项，单击库项目名，按下Del键即可。删除库后，不会改变任何调用此库的其他模板或网页内容。 3．使模板或网页中库项目可编辑 如果网页中添加了库项目，则库项目以高亮显示，无法编辑。如果要在网页中编辑 库项目包含的内容，则必须断开当前网页与库之间的关联。操作步骤如下。 在当前网页中选中库项目，在“属性”面板中单击“从源文件分离”按钮。此时库项目不再以高亮显示，并且原始的库项目更改，它不会再更新，如图8.18所示。

25 目 录 1 利用模板和库生成站点的制作过程 2 模板的创建和编辑 3 模板的应用和更新 4 使用库 5 利用模板和库生成站点的制作过程

26 生成站点 第五节 本节讲解例8.1所举利用模板和库快速创建一个网站实例。制作过程如下。
1）创建一个本地站点www，在站点内新建一个文件夹images，用于存储图像素材。 2）选择“文件”菜单→“新建”命令，在“新建文档”对话框中，选择“空白页”选项→“页面类型”中的“HTML模板”→（布局）“无”选项命令，单击“创建”按钮。 3）编辑模板页面，编辑的方法与普通网页无异。采用CSS+DIV进行页面的布局，页面布局的宽度为1000像素。 4）插入一个总的DIV，命名为all，宽度设置为1000像素；在其中插入多个DIV，一是名为 a1的DIV；二是名为a2的DIV，插入导航图形并设置热点链接；三是插入名为a3的DIV，背景为棕色（#521F01），输入一段文本，四是插入名为a4的DIV，并设置背景图像，以上a1、a2、a3、a4宽度均为1000像素。 5）光标放在名为a3的DIV中，选择“插入”菜单→“模板对象”选项→“可编辑区域”命令，弹出“新建可编辑区域”对话框，输入可编辑区域的名称，单击“确定”按钮。最后命名并保存模板，模板名称为01.dwt。

27 第五节 生成站点 6）利用模板快速生成网页。选择“文件”菜单→“新建”命令，在“新建文档”对话框中，选择“网站模板”选项卡，选择站点名称，和模板名称，选中“当模板改变时更新页面”复选框，单击“创建”按钮。 7）对可编辑区域进行编辑，输入文本、插入图像等，保存网页。如图8.19所示。 8）预览网页，分析网页中存在的问题，然后修改模板：网页布局、网页美化、网页的链接等。添加DIV的背景图像，添加导航文本的超链接，在最下方添加名为down的DIV，插入公司的名称和地址等。 9）保存模板时，Dreamweaver会提示用户是否更新模板文件，弹出一个“更新模板文件”对话框，单击“更新”按钮，继而弹出一个“更新页面”对话框，更新完成后，单击“关闭”按钮。 10）在多个页面中要添加一个公司新闻图片，此新闻图片会经常变动，最好的办法是将此部分内容创建为一个库项目。打开“资源”面板，选择“库”选项，单击“资源”面板下方的“新建库项目”按钮，命名库项目，双击库名称，进入库的编辑状态，插入一幅图像，保存库项目。

28 第五节 生成站点

29 第五节 生成站点 11）将库项目与模板相结合应用到网页中。在网页中综合使用模板和库将大大减轻网站设计中重复的工作量。打开模板，将光标定位于名为a1的DIV的文本下方，打开“资源”面板，选择“库”选项，单击库项目，拖动到页面的最下方。此时库就应用于模板了，如图8.20将库项目与模板相结合。 12）保存模板时，Dreamweaver会提示用户是否更新模板文件，弹出 “更新模板页面”对话框，单击更新页面，继而弹出“更新页面”对话框，更新完成，关闭对话框。 同理，利用模板创建站点中的其他页面。

30 小结 本章通过网站实例的讲解，重点介绍了以下几点。 1）模板：创建模板，编辑模板，利用模板快速创建网页。
2）库：将多个网页重复使用的网页元素存储在库项目。

31 练习题 （1）什么是模板？在Dreamweaver中如何使用模板？ （2）如何将库项目从源文件中分离？ （3）模板和库的区别是什么？

32 上机实验 1．背景知识 根据本章所学的模板和库的知识，并结合前面所学的网页编辑、网页排版技术，进行网站设计与制作。 2．实验准备工作
将网站的页面草图和网站的素材资料准备好，发送到学生主机，以供学生参考使用。 3．实验要求 （1）利用模板创建站点。 要求：根据给定的网页素材，结合网页草图，创建和编辑模板，并利用模板快速生成相同风格、相似结构的网站。 （2）在网页中添加库项目。 要求：在上一个实验的基础上，结合库项目独特优势，将多个网页中重复使用的网页元素存储为一个文件，即为库项目，然后在其他需要调用的网页或模板中调用，从而达到提高网页设计的效率，如图8.21所示。

33 上机实验 4．课时安排 上机实验课时安排2课时。 5．实验指导 （1）利用模板创建站点
1）首先根据草图进行网站结构分析。本网站多个网页的网站风格是保持一致的，在最上方是一个公司的标志（Logo）；第二行左侧是导航，右侧是每一个网页的主体内容（设置为可编辑区域）；第三行是广告横幅（设置为可编辑区域，用作插入库项目），最下方是一个版权信息。 2）打开“资源”面板，单击“模板”选项，单击“创建模板”按钮，命名模板。双击模板名称，进入模板编辑状态，模板的编辑与网页完全相同，采用表格或CSS+DIV排版的方式建立模板结构。 3）根据模板创建网页，编辑右侧的可编辑区域，输入公司简介的相关信息和插入图像，将网页保存为about.htm，保存路径为根文件夹下。 4）同理，建立另外几个页面，分别为用户注册、度假景点等，保存为about01.htm、about02.htm。

34 上机实验 （2）添加库项目。 1）首先分析前一个实验项目根据模板制作的网页是不完善的，第三行的广告横幅，由库来完成。
2）新建库项目，进行编辑，插入企业广告宣传横幅，保存库项目为bt.lbi。 3）应用库项目。打开前一个实验要求所建立的模板，光标放在左侧单元格可编辑区域中，打开“资源”面板，单击“库”选项，选中bt.lbi，单击“插入”按钮，将库应用于模板中。 4）保存该模板，此时会有一个更新提示，单击“更新”按钮，又会出现一个更新页面的对话框，更新完成，关闭对话框。

35 THANKS