利用模板和库设计网页

利用模板和库设计网页

第七章利用模板和库设计网页

在创建网站时，需要创建大量的Web页面以便将信息传递给浏览者，这就难免要进行大量重复性的工作，从而使得设计工作变得枯燥乏味。有没有更好的办法呢？当然有Dreamweaver MX中的模板和库技术就能很轻松地解决这一问题。本章主要介绍利用模板和库快速创建网页的方法。通过本章的学习，读者应该掌握以下内容：

·模板原理

·创建、使用和管理模板的方法

·利用模板更新网页

·创建管理库项目

·利用库更新网页

7.1 利用模板创建网页

利用Dreamweaver MX的模板技术可以创建具有相同页面布局的一系列文件，同时模板最大的好处还在于后期维护方便，可以快速地改变整个站点的布局和外观。

7.1.1 模板原理

Dreamweaver模板是一种特殊类型的文档，也可以说是一种用来制作具有相同风格页面的“模子”，用户利用模板可以在短时间内设计大量风格相同或相近的页面。

模板由可编辑区域和不可编辑区域(又称锁定区域)两部分组成。不可编辑区域包含了在所有页面中共有的元素，即构成页面的基本框架；而可编辑区域是为添加相应的内容而设置的。在后期维护中通过改变模板的不可编辑区，可以快速地更新整个站点中所有使用了模板的页面布局。

7.1.2 创建模板

在Dreamweaver MX中，创建模板的方法有3种。

1.将现有的文档保存为模板

将现有的文档保存为模板的操作步骤如下。

(1)在Dreamweaver MX中打开现有文档。

(2)选择“文件”→“另存为模板”命令，或单击插入“模板”面板上(如图7-1所示)的“创建模板”按钮，打开“另存模板”对话框，如图7-2所示。

图7-1 插入“模板”面板

(3)在“站点”下拉列表框中选择站点名称，在“另存为”文本框中输入模板名称。如果选择“现存的模板”列表中的模板，则可用新的模板覆盖己有的模板。

(4)单击“保存”按钮，就把当前页面保存为模板。系统将自动在站点根目录下创建“Templates”文件夹，并将创建的模板文件保存在该文件夹中，扩展名为.dwt。

注意：不要将模板移动到Templates文件夹之外或者将任何非模板文件放在Templates文件夹中。此外，不要将Templates文件夹移动到本地根文件夹之外。这样做将在模板的路径中引起错误。

2.通过“资源”面板创建新模板

(1)选择“窗口”→“资源”命令或按F11键，打开“资源”模板。

(2)单击左边的“模板”按钮，打开“资源”面板的模板类别，如图7-3所示。面板的上方是模板的预览，下方是模板文件列表。

(3)单击“资源”面板上右下角的“新建模板”按钮，这时在模板列表框中添加了一个“无标题”的模板，如图7-4所示。

图7-3 “资源”面板的模板类别图7-4 新建面板

(4)输入模板名称，并保存模板，就创建了一个空白模板。

单击“资源”面板右下角的“编辑”按钮，就可在“文档”窗口中打开该模板文档。

3.创建嵌套模板

通过保存一个基于模板的文档，可以创建嵌套模板。嵌套模板是基本模板的变体。用户可以通过嵌套多个模板来定义更加精确的布局。创建嵌套模板的方法如下。

(1)执行下列操作之一，创建一个基于模板的文档。

·用鼠标右击“资源”面板的模板类别上想要创建新文档的模板，然后选择“从模板新建”命令。

·选择“文件”→“新建”命令，在“新建文档”对话框中，单击“模板”选项卡，选择包含使用模板的站点，然后在文档列表中双击该模板来创建新文档。

(2)选择“文件”→“另存为模板”命令，或单击插入“模板”面板上的“创建嵌套模板”按钮，打开“另存模板”对话框，将新文档另存为模板。

(3)在新模板中可编辑区域添加其他内容(参见7.1.3节)。

(4)保存该模板。

注意：在基于嵌套模板的文档中，可以添加或更改基本模板的可编辑区域的内容，也可更改在新模板中创建的可编辑区域中的内容。

7.1.3 定义可编辑区域

模板创建完成后，就要为模板定义可编辑区域，没有定义可编辑区域的模板是不能被使用的，因为它的所有部分都是锁定的。“可编辑区域”是指基于模板的页面中可以更改的内容，而基于模板的页面中不可更改的部分为“不可编辑区域”或“锁定区域”。

1.定义可编辑区域

定义可编辑区域有两种方法。一种是选择已有的一部分页面内容将它指定为可编辑区域，另一种是在当前光标处插入一个空的可编辑区域。

定义可编辑区域方法如下。

(1)在“文档”窗口中，执行下列操作之一选择区域。

·选择想要设置为可编辑区域的文本或内容。

·将插入点放在想要插入可编辑区域的地方。

(2)执行下列操作之一打开如图7-5所示的“新建可编辑区域”对话框。

图7-5 “新建可编辑区域”对话框

·选择“插入”→“模板对象”→“可编辑区域”命令。

·右击所选文本或对象，然后从弹出的菜单中选择“模板”→“新建可编辑区域”命令。

·单击在插入“模板”面板上的“可编辑区域”按钮。

(3)在“名称”文本框中输入该区域名称，注意不能对特定模板中的多个可编辑区域使用相同的名称，也不要在“名称”域中使用特殊字符，如：双引号、

单引号、尖括号和符号&等。Dmamnweaver MX默认的区域名称为EditRegion1、EditRegion2、……

(4)单击“确定”按钮。

可编辑区域在模板中由高亮显示的矩形边框围绕，该区域左上角的选项卡显示该区域的名称。如果在文档中插入空白的可编辑区域，则该区域的名称会出现在该区域内部。如图7-6所示。

图7-6中高亮显示的颜色可以修改。选择“编辑”→“参数选择”命令，打开“参数选择”对话框，在“分类”列表中选择“标记色彩”，如图7-7所示。在该对话框中可以对各个标记颜色进行修改。

图7-7 “参数选择”对话框

注意：

(1)将已有内容转换为可编辑区时，必须选择成对的标签，例如常用的

、。

(2)可以将整个表格或单个单元格定义为可编辑区域，但不能将多个单元格定义为一个可编辑区域。

(3)层和层内容是两个独立的元素，定义层为可编辑区域时，可以更改层的位置及其内容，而定义层的内容为可编辑区域时，只能更改层的内容而不能更改层的位置。若要选择层的内容，可在该层内羊击并选择“编辑”→“全选”

命令；若要选择该层，首先确保显示了不可见元素，然后单击代表层位置的图标。

2.删除可编辑区域

如果已经将模板文件的一个区域定义为可编辑区域，而现在想要再次锁定它，使其为不可编辑区域，可执行“删除模板标记”操作。

(1)在文档或标签选择器中，选择想要更改的可编辑区域。

(2)按Delete键，即可删除该可编辑区域。如果选择“修改”→“模板”→“删除模板标记”命令，可以删除可编辑区域的标记，但区域还保留。

7.1.4 使用模板

创建模板只是为了以后使用模板打下良好的基础，用户可以在此基础上分别添加内容，从而创建一系列具有相同外观的页面。

1.创建基于模板新页面

创建基于模板新页面的方法是：选择“文件”→“新建”命令，打开“新建文档”对话框，选择“模板”标签，打开“从模板新建”对话框，在对话框中选择需要的模板，单击“创建”按钮即可(详见2.3.4节)。

在创建的新页面中，前面定义的不可编辑区域中鼠标不可用，而在可编辑区鼠标可用，可以直接在其中输入特定的内容。这不但保证了系列页面风格的一致性，也保证了锁定区域内容不受破坏，从而大大提高了设计效率。

2.将模板应用到现有文档

在很多时候，己经有了大量未使用模板的页面，现在想要将其转换为统一的外观，此时就可以利用将模板应用到现有文档的方法来统一这些页面的风格。

将模板应用到现有文档的具体步骤如下。

(1)选择"文件"→"打开"命令，打开想要应用模板的文档。

(2)执行下列操作之一。

·在"文档"窗口中单击，然后选择“修改”→“模板”→“套用模板到页”菜单命令。打开如图7-8所示的“选择模板”对话框。选择所需站点，并从“模板”列表中选择一个模板并单击“选择”按钮。

·在“资源”面板的“模板”类别中(如图7-3所示)选择模板，然后单击面板底部的“应用”按钮。

·将模板从“资源”面板的“模板”类别拖动到“文档”窗口的设计视图。

(3)如果文档中有不能自动指定到模板区域的内容，则会出现“不一致的区域名称“对话框，如图7-9所示。对话框中列出了可以应用到模板中的所有可编辑区域，可以通过这些可编辑区域来为内容选择目标。

(4)单击“取消“按钮，可以取消将模板应用到文档的操作。如果用户对站点中的模板比较熟悉，可以通过将要应用的模板中的区域名称与文档中的模板区域进行比较来解决不一致性，然后再添加与新模板文件中的区域同名的新区域。方法如下。

在“不一致的区域”对话框中选择未解析的区域。在“将内容移到新区域”弹出式菜单中，选择新模板中的区域，或者选择“不在任何地方”，将该内容从文档中删除(如图7-10所示)。若要将所有未解决的内容移到选定的区域，请单击“用于所有内容”。最后单击“确定”按钮。

7.1.5 管理模板

1.重命名模板

在进行站点维护时，经常要重新命名模板，其方法如下。

(1)打开“资源”面板的模板类别，选中要重命名的模板，在模板名称上再单击一次，即可激活其文本编辑状态。右击要重命名的模板，在打开的快捷菜单中选择“重命名”命令，同样可以激活其文本编辑状态。

(2)输入模板的新名称。

(3)单击模板名称区域外的任何位置，或按回车键，即可修改模板名称。

除上述方法外，也可单击“资源”面板上的“站点”选项，在站点管理器窗口(如图2-3所示)中找到模板所在的文件夹，如Templates文件夹，打开文件夹找到所需的模板，再对其进行重命名。

2.删除模板

在进行模板管理时，对于已经毫无用处的模板，应该及时删除。删除模板的操作如下。

(1)打开“资源”面板的模板类别，选中要删除的模板。

(2)执行下列操作之一。

·按Delete键。

·直接单击“资源”面板右下角的“删除”按钮。

·右击该模板，从弹出的快捷菜单中选择“删除”命令。

(3)这时会打开一个询问对话框，提示是否删除模板，单击“是”按钮即可删除模板。

与重命名模板一样，也可在站点管理器窗口(如图2-3所示)中删除模板。

注意：

(1)模板被删除后，将无法恢复，一定要慎重考虑。

(2)删除模板后，基于该模板的页面中所有可编辑区域和不编辑区域仍然保留，如果想将该页面转换为普通文档，还需要将文档与模板分离。

3.将文档与模板分离

如果要将文档与模板分离，可进行如下操作。

(1)打开使用了模板的文档。

(2)选择“修改”→“模板”→“从模板中分离”命令，就可以将文档与模板分离。

文档与模板分离后，文档中再没有锁定区域，所有的地方都是可编辑的。一旦文档与模板分离，就再不能按模板进行更新了。

7.2 利用模板更新网页

网页创建好以后，如果觉得这些基于模板的系列页面的锁定区域内容需要修改，可以修改模板并更新基于这个模板的页面，甚至整个网站。

基于模板创建的页面与模板是一个整体，我们称模板为页面附着的模板，而称这些文档为附着模板的文档。要修改这样的文档，如果是单一的页面，用

一般的方法就可以了。如果是修改所有的页面，可以先修改这些页面所应用的模板，然后再用新的模板更新所有基于模板的页面。

7.2.1 修改页面附着的模板

修改页面附着的模板的步骤如下。

(1)打开基于模板的文档，选择“修改”→“模板”→“打开附加模板”菜单命令，打开页面附着的模板。(2)根据需要修改模板内容。

(3)修改完毕，选择“文件”→“保存”菜单命令保存模板。弹出“更新模板文件”对话框，询问是否更新基于该模板的页面，如图7-11所示。

(4)单击“不更新”按钮，则只保存模板，不更新基于模板的页面。单击“更新”按钮，弹出“更新页面”对话框(如图7-7所示)，更新完毕，单击“关闭”按钮，则更新所有基于模板的页面。也可从中选择部分页面进行更新。

7.2.2 更新附着模板的页面

修改完模板后，就可以完成附着模板的文档的更新工作，步骤如下。

(1)打开附着模板的页面，选择“修改”→“模板”→“更新页面”菜单命令，打开“更新页面”对话框，如图7-7所示。

(2)在“更新”选项中选定“模板”。

(3)在“查看”弹出式菜单中执行下列操作之一。

·选择“整个站点”，然后从相邻的弹出式菜单中选择站点名称，将所选站点中的所有页面更新到相应的模板，如图7-13所示。

·选择“文件使用”，然后从相邻的弹出式菜单中选择模板名称，将更新当前站点中使用所选模板的所有页面，如图7-14所示。

(4)单击“开始”按钮。

(5)如果选择了“显示记录”选项，Dreamweaver MX将提供关于更新页面文件的信息，包括是否成功更新等信息，在“显示记录”栏显示完成情况，在“状

态”栏中显示详细的更新结果，如图7-15所示。如果不选择“显示记录”复选框，更新页面结束后，只显示完成情况，而在“状态”栏中不显示任何内容。

(6)单击“关闭”按钮，更新完毕。

7.3 利用库项目维护网页

7.3.1 创建库项目

1.什么是库项目

站点中除了具有相同外观的许多页面外，还有一些需要经常更新的页面元素，例如版权声明、站点导航条等，这些内容与模板不同，只是页面中的一小部分，在各个页面中的摆放位置可能不同，但内容却是一致的。可以将此种内容保存为一个库文件，在需要的地方插入，在需要的时间快速更新。

库是一种特殊的Dreamweaver文件，其中包含己创建的单独的网页“资源”或资源拷贝的集合。如果只是想让页面具有相同的标题和脚注，而又具有不同的页面布局，可使用库项目存储标题和脚注。库项目是可以在多个页面中重复使用的存储页面元素，每当更改某个库项目的内容时，都可以更新所有使用该项目的页面。

可以在库中存储各种各样的页面元素，如图像、表格、声音和Flash影片。

库项目的使用比模板更加灵活，可以放置在页面的任意位置，而不是固定在同一位置。

2.创建库项目

可以将文档body部分中的任意元素创建库项目，这些元素包括文本、表格、表单、Javaapplets、插件、ActiveX元素、导航条和图像。也可以创建空白的库项目。

将文档中的部分元素创建为库项目的方法如下。

(1)打开要创建库项目的网页文档，从中选择需要保存为库项目的内容。

(2)执行如下操作之一。

·选择“窗口”→“资源”菜单命令，打开“资源”面板，单击“资源”面板上“库”按钮，打开库类别(如图7-16所示)，将选定内容拖动到“资源”面板的“库”类别中。

·单击“资源”面板“库”类别底部的“新建库项目”按钮。

·选择“修改”→“库”→“增加对象到库”菜单命令。

(3)为新建的库项目输入名称，然后单击名称区域之外的任意位置或按回车键，即可完成一个新库项目的创建。

新建的库项目呈高亮显示，高亮显示的颜色同样可以在图7-7所示的“参数选择”对话框中设置。

每个库项目都在站点本地根文件夹的“库”文件夹中保存为一个单独的文件(扩展名为.lbi)，通常保存在本地站点的Library文件夹下。打开“资源”面板的站点选项可以查看库项目，如图7-17所示。

图7-16 “资源”面板的库类别图7-17 在站点面板中查看库项目

除了可以把文档中的部分元素创建为库项目外，还可以创建空白的库项目，方法如下。

单击“资源”面板“库”类别右下角的“新建库项目”按钮髓，在“资源”面板库项目列表中，出现一个新的未命名库项目，如图7-18所示。

图7-18 创建空白库项目

7.3.2 在文档中插入库项目

当向页面添加库项目时，将把实际内容以及对该库项目的引用一起插入到文档中。

在文档中插入库项目的方法如下。

(1)将插入点放在文档窗口中想要插入库项目的地方。

(2)打开“资源”面板的库类别，执行以下操作之一。

·选择一个库项目并用鼠标拖到光标所在处。

·选择一个库项目，单击面板底部的“插入”按钮。

·右击所选的库项目，从弹出的菜单中选择“插入”命令。

此时在光标所在处出现插入的库项目，库项目呈高亮显示，如图7-19所示。高亮显示的颜色可以在图7-7所示的“参数选择”对话框中设置。

单击插入文本中的库项目内容，属性面板显示“库项目”属性，如图7-20所示，用户可以在属性面板上对库项目进行操作。

7.3.3 库项目的管理

1.编辑库项目

(1)打开“资源”面板的库类别。

(2)选择库项目，库项目的预览出现在“资源”面板的顶部，但不能在预览中进行任何编辑。

(3)单击面板底部的“编辑”按钮，或双击库项目。

此时，Dreamweaver MX将打开一个用于编辑该库项目的新窗口。此窗口类似于“文档”窗口，用户可以重新编辑库项目。编辑完毕保存更改，系统会弹出“更新库项目”对话框，如图7-21所示。

在对话框中，选择是否更新本地站点上那些使用编辑过库项目的文档。

·选择“更新”，将更新本地站点中所有包含编辑过的库项目的文档。

·选择“不更新”，将不更改任何文档。

2.重命名库项目

(1)打开“资源”面板的库类别，选中要重新命名的库项目。

(2)执行以下操作之一，激活其文本编辑状态。

·在选中的库项目上再次单击。

·右击该库项目，在弹出的快捷菜单中选择“重命名”命令。

(3)为库项目重新输入一个新名称，保存更改。同样会弹出如图7-21所示的“更新库项目”对话框，询问是否要更新使用该项目的文档，处理方法同上。

3.删除库项目

(1)打开“资源”面板的库类别，选中要删除的库项目。

(2)执行以下操作之一。

·单击面板底部的“删除”按钮，并确认想要删除该项目。

·按下Delete键。

·右击该库项目，从弹出的快捷菜单中选择“删除”命令，并确认想要删除该项目。

注意：

(1)删除一个库项目后，将无法使用“撤消”来恢复，但可以重新创建。

(2)库项目被删除后，不会更改任何使用该项目的文档的内容。

4.重新创建库项目

如果误删了有用的库项目，可以利用插入到文档中的库项目内容来重新创建库项目，方法如下。

(1)在文档中选中插入库项目的内容。

(2)右击文档内容，从弹出的快捷菜单中选择“重建”命令，或单击库项目属性面板上的“重新创建”按钮，即可完成重建库项目，而且库项目仍以原来的名字命名。

5.将项目从源文件中分离

如果已经在文档中添加了库项目，又想在该文档中编辑此部分内容J则必须断开文档中的项目和库之间的连接，即将文档项目从源文件中分离。

将项目从源文件中分离的步骤如下。

(1)在当前文档中选择库项目内容。

(2)执行下列操作之一。

·单击库项目属性面板上的“从源文件中分离”按钮。

·右击库项目内容，从弹出的快捷菜单中选择“从源文件中分离”命令。| 系统会弹出一个警告对话框，如图7-22所示。确认之后，即可将项目从源文件中分离。

将项目从源文件中分离后，所选的库项目将不再高亮显示，并且当原始库项目更改时，它也不会再更新。

7.3.4 更新网页

当应用了库项目的文档内容需要修改时，可以先修改库项目然后再更新网页，从而实现文档风格的统一更新。更新网页可以在修改库项目后，保存库项目时，系统弹出的“更新库项目”对话框(如图7-21所示)中进行，也可通过菜单命令进行。

通过菜单命令更新网页的操作，分为更新当前网页和更新整个站点或所有使用特定库项目的文档两种。

1.灵新当前网页

更新当前网页的方法是：在当前网页窗口选择“修改”→“库”→“更新当前页”菜单命令，系统出现一个如图7-23所示的确认窗口，单击“确定”按钮，完成当前网页的更新工作。

2.更新整个站点或所有使用特定库项目的文档

(1)选择“修改”→“库”→“更新页面”菜单命令，打开“更新页面”对话框，如图7-24所示。

(2)在“更新”选项中选择“库项目”，如果要同时更新模板，也要选择“模板”选项。

(3)在“查看”弹出式菜单中执行下列操作之一。

·选择“整个站点”，然后从相邻的弹出式菜单中选择站点名称。这会更新所选站点中的所有页面，使其使用所有库项目的当前版本。

·选择“文件使用”，然后从相邻的弹出式菜单中选择库项目名称。这会更新当前站点中所有使用所选库项目的页面。

(4)单击“开始”按钮。同使用模板更新网页一样，如果选择了“显示记录”复选框，Dreamweaver MX将提供关于更新页面文件的信息，包括是否成功更新等信息，并在“状态”中显示更新的详细情况。如果不选择“显示记录”选项，在更新页面结束后，只显示完成情况，而在“状态”栏中没有任何内容。

习题

1.如何创建网页模板？如何创建模板的可编辑区域？

2.如何创建基于模板的网页？

3.在编辑基于模板的网页时，为什么要将文档与模板分离？如何进行分离？

4.如何利用模板快速更新网页？

5.如何利用已有文档创建库项目？如何在网页中插入库项目？

6.如果要通过修改库项目来更新所有应用该库项目的网页，应如何操作？