网页制作与开发教程 第8章模板与库.ppt

《网页制作与开发教程 第8章模板与库.ppt》由会员分享，可在线阅读，更多相关《网页制作与开发教程 第8章模板与库.ppt（56页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、库库 8.2模模 板板8.1小结小结 使用模板创建文档可以使网站和网页具使用模板创建文档可以使网站和网页具有统一的结构和外观，如果有多个网页想有统一的结构和外观，如果有多个网页想要用统一风格来制作，用要用统一风格来制作，用“模板模板”是一种是一种有效便捷的方法。有效便捷的方法。模板实质上就是作为创建其他文档的基模板实质上就是作为创建其他文档的基础文档。在创建模板时，可以决定哪些网础文档。在创建模板时，可以决定哪些网页元素应该长期保留，不可编辑，哪些元页元素应该长期保留，不可编辑，哪些元素可以编辑和修改。然后通过模板创建出素可以编辑和修改。然后通过模板创建出风格相同的网页来。风格相同的网页来。8

2、.1 模模 板板 模板和库是模板和库是Dreamweaver 8中提供的中提供的一种机制，能够帮助网页设计师快速制作一种机制，能够帮助网页设计师快速制作大量布局相似的网页。这在建设网站时十大量布局相似的网页。这在建设网站时十分重要。分重要。通常在一个网站中，可能有几十甚至几通常在一个网站中，可能有几十甚至几百个页面，然而并非每个页面的布局都不百个页面，然而并非每个页面的布局都不相同。一般来说，页面被分为若干级。首相同。一般来说，页面被分为若干级。首页是第一级，它是网站的门户，因此一般页是第一级，它是网站的门户，因此一般是独一无二的。跟首页相链接的页面就是是独一无二的。跟首页相链接的页面就是二级

3、页面，二级页面中一般分为若干个栏二级页面，二级页面中一般分为若干个栏目，与每一个栏目相链接的页面就是三级目，与每一个栏目相链接的页面就是三级页面。当然还可以有更多的层次，这样内页面。当然还可以有更多的层次，这样内容相似的页面往往使用相同的布局，各页容相似的页面往往使用相同的布局，各页面之间不同的部分只是具体内容。面之间不同的部分只是具体内容。8.1.1 认识模板认识模板 模板具有以下优点。模板具有以下优点。（1）风格一致，看起来比较系统，也省去）风格一致，看起来比较系统，也省去了重复劳动的麻烦。了重复劳动的麻烦。（2）如果要修改共同的页面元素，则不必）如果要修改共同的页面元素，则不必一个一个地

4、修改，只要更改应用它们的模一个一个地修改，只要更改应用它们的模板就可以了。板就可以了。（3）免除了以前没有此功能时还要常常）免除了以前没有此功能时还要常常“另存为另存为”；否则一不小心容易覆盖重要档；否则一不小心容易覆盖重要档案的困扰。案的困扰。（a a）首页）首页（b b）不同的二级页面）不同的二级页面图图8-1 8-1 网页的不同页面网页的不同页面图图8-2 8-2 模板页面模板页面8.1.2 制作模板制作模板 制作模板与制作普通页面完全相同，只制作模板与制作普通页面完全相同，只是通常并不把页面的所有部分都完成，而是通常并不把页面的所有部分都完成，而只是制作导航栏和标题栏等各个页面的公只是

5、制作导航栏和标题栏等各个页面的公有部分，这些部分一般在网页的四周，而有部分，这些部分一般在网页的四周，而把中间留给每页的具体内容。把中间留给每页的具体内容。例如这里已经制作了一个页面，如图例如这里已经制作了一个页面，如图8-3所示。页面的大部分已经完成了，如导航所示。页面的大部分已经完成了，如导航栏等，因为这些部分对很多页面是相同的。栏等，因为这些部分对很多页面是相同的。还有还有6个部位是空白的，在图中用线框表示。个部位是空白的，在图中用线框表示。这些区域在模板中是空白的，将来基于模这些区域在模板中是空白的，将来基于模板创建出一个个页面以后，在各个页面中板创建出一个个页面以后，在各个页面中放置

6、具体内容。放置具体内容。图图8-3 8-3 制作模板网页制作模板网页图图8-4 8-4 “资源资源”面板面板 现在回到刚才制作好的那个网页，选择现在回到刚才制作好的那个网页，选择菜单栏中的菜单栏中的“文件文件另存为模板另存为模板”命令，命令，这时会打开如图这时会打开如图8-5所示的对话框。首先在所示的对话框。首先在最上面的下拉列表框中确定要为哪个站点最上面的下拉列表框中确定要为哪个站点制作模板，当然目前只有一个站点。然后制作模板，当然目前只有一个站点。然后在最下面的文本框中为这个模板起一个名在最下面的文本框中为这个模板起一个名字，最后单击字，最后单击“保存保存”按钮，这个页面就按钮，这个页面就

7、保存为模板了。现在再观察保存为模板了。现在再观察“资源资源”面板面板的的“模板模板”列表框，如图列表框，如图8-6所示，其中已所示，其中已经列出了刚才保存的模板。经列出了刚才保存的模板。图图8-5 8-5 “另存模板另存模板”对话框对话框 图图8-6 8-6 刷新后的刷新后的“资源资源”面板面板 8.1.3 使用模板使用模板 上面创建了一个模板，并保存好了，现上面创建了一个模板，并保存好了，现在来尝试使用这个模板。首先来学习用这在来尝试使用这个模板。首先来学习用这个模板创建一个新的网页。个模板创建一个新的网页。图图8-7 8-7 “从模板新建从模板新建”对话框对话框图图8-8 8-8 非设置可

8、编辑区域的非设置可编辑区域的“temptemp”模板模板图图8-9 8-9 设定可编辑区域设定可编辑区域8.1.4 修改模板以更新文档修改模板以更新文档 前面介绍了使用模板的基本步骤，概括前面介绍了使用模板的基本步骤，概括起来就是先制作一个普通的页面，但是这起来就是先制作一个普通的页面，但是这个页面的某些部分是空白的，然后把它保个页面的某些部分是空白的，然后把它保存为模板，并进行编辑，主要的工作就是存为模板，并进行编辑，主要的工作就是为它设定若干个可编辑区域，这样模板就为它设定若干个可编辑区域，这样模板就建好了。在使用的时候，先由模板创建网建好了。在使用的时候，先由模板创建网页，然后在可编辑区

9、域里面添加上适当的页，然后在可编辑区域里面添加上适当的内容就可以了。内容就可以了。模板的作用还不仅于此，它还有更大的模板的作用还不仅于此，它还有更大的作用。事实上，建立网站并不是一劳永逸作用。事实上，建立网站并不是一劳永逸的事，网页可能会更新，甚至栏目也有可的事，网页可能会更新，甚至栏目也有可能要增加，如果很多网页不是使用同一个能要增加，如果很多网页不是使用同一个模板创建的，那么手工逐个修改页面使新模板创建的，那么手工逐个修改页面使新旧页面保持一致将是十分烦琐的事。旧页面保持一致将是十分烦琐的事。Dreamweaver 8提供的自动更新所有网页提供的自动更新所有网页的功能解决了这个问题。的功能

10、解决了这个问题。图图8-10 8-10 修改模板以更新文档修改模板以更新文档 图图8-11 8-11 “更新模板文件更新模板文件”对话框对话框 8.1.5 将文档和模板分离将文档和模板分离 使用模板创建文档，或对一个已经存在使用模板创建文档，或对一个已经存在的文档应用了模板之后，该模板和所有使的文档应用了模板之后，该模板和所有使用了该模板的文档之间就建立了一种链接用了该模板的文档之间就建立了一种链接关系。当模板的内容被更改之后，所有应关系。当模板的内容被更改之后，所有应用该模板的文档也会被自动更新，而不用用该模板的文档也会被自动更新，而不用将这些文档一一打开加以编辑。将这些文档一一打开加以编辑

11、。将模板应用到页面上之后，可编辑区域将模板应用到页面上之后，可编辑区域的位置和所有的不可编辑区域都是不可更的位置和所有的不可编辑区域都是不可更改的。如果想要修改它们，可以有两种方改的。如果想要修改它们，可以有两种方法：一种方法是更改该页面的模板；另一法：一种方法是更改该页面的模板；另一种方法是将页面和模板分离，这样就可以种方法是将页面和模板分离，这样就可以修改页面上的任何部分。但是，当页面和修改页面上的任何部分。但是，当页面和模板分离之后，如果模板被更新，由于页模板分离之后，如果模板被更新，由于页面和模板已经脱离了链接关系，所以页面面和模板已经脱离了链接关系，所以页面将不被自动更新。将不被自动

12、更新。要将页面和模板分离，只需打开文档，要将页面和模板分离，只需打开文档，然后选择菜单栏中的然后选择菜单栏中的“修改修改模板模板从模从模板中分离板中分离”命令，页面上所有的部分就都命令，页面上所有的部分就都变成可编辑的了。变成可编辑的了。但是需要注意的是，一旦一个文档和模但是需要注意的是，一旦一个文档和模板分离以后，当这个模板被更新时，文档板分离以后，当这个模板被更新时，文档也就不会自动更新了。也就不会自动更新了。8.1.6 将模板应用到已经存在的文档将模板应用到已经存在的文档 Dreamweaver还提供了一个非常有用还提供了一个非常有用的功能，就是可以把模板应用到已经存在的功能，就是可以把

13、模板应用到已经存在的网页文档中，当然这要求该文档要符合的网页文档中，当然这要求该文档要符合一定的要求。一定的要求。要将模板应用到已经存在的文档，可以要将模板应用到已经存在的文档，可以用下面用下面3种方式之一。种方式之一。（1）打开已经存在的文档，选择菜单栏中）打开已经存在的文档，选择菜单栏中的的“修改修改模板模板应用模板到页应用模板到页”命令，命令，这样会弹出这样会弹出“选择模板选择模板”对话框，在对话对话框，在对话框的框的“模板模板”列表中选择一个模板，然后列表中选择一个模板，然后单击单击“选定选定”按钮。按钮。（2）打开已经存在的文档和）打开已经存在的文档和“资源资源”面板面板的模板项，在

14、面板中选择模板并将它拖放的模板项，在面板中选择模板并将它拖放到到“文档文档”窗口中。窗口中。（3）打开已经存在的文档和）打开已经存在的文档和“资源资源”面板面板的模板项，在面板中选择模板并单击按钮，的模板项，在面板中选择模板并单击按钮，将模板应用到文档中。将模板应用到文档中。图图8-12 8-12 制作一个简单的页面制作一个简单的页面 图图8-13 8-13 提示这个文档将被转换为模板提示这个文档将被转换为模板 图图8-14 8-14 转换成模板后的文档转换成模板后的文档图图8-15 8-15 将模板应用到网页将模板应用到网页图图8-16 8-16 “不一致的区域名称不一致的区域名称”对话框对

15、话框8.2 库库 除了模板之外，除了模板之外，Dreamweaver 8还提还提供了另外一种网页元素重复使用的机制，供了另外一种网页元素重复使用的机制，称为称为“库库”。Dreamweaver 8允许把网站允许把网站中需要重复使用或需要经常更新的页面元中需要重复使用或需要经常更新的页面元素（如图像、文本或其他对象）存入库中，素（如图像、文本或其他对象）存入库中，存入库中的元素称为存入库中的元素称为“库项目库项目”。需要时，可以把库项目拖放到文档中。需要时，可以把库项目拖放到文档中。这时，这时，Dreamweaver 8会在文档中插入该会在文档中插入该库项目的库项目的HTML源代码的一份拷贝，并

16、创建源代码的一份拷贝，并创建一个对外部库项目的引用。这样，通过修一个对外部库项目的引用。这样，通过修改库项目，然后使用菜单栏中的改库项目，然后使用菜单栏中的“修改修改库库”命令子菜单上的更新命令，即可实现命令子菜单上的更新命令，即可实现整个网站各页面上与库项目相关内容的一整个网站各页面上与库项目相关内容的一次性更新，既快捷又方便。次性更新，既快捷又方便。8.2.1 创建库项目创建库项目图图8-17 8-17 “库库”面板面板 图图8-18 8-18 选择库项目的内容选择库项目的内容 图图8-19 8-19 创建库项目创建库项目 图图8-20 8-20 定制后的定制后的“库库”面板面板 8.2.

17、2 操作库项目操作库项目1重命名库项目重命名库项目2编辑库项目编辑库项目图图8-21 8-21 “更新文件更新文件”对话框对话框 图图8-22 8-22 库项目库项目“属性属性”面板面板 图图8-23 8-23 打开库项目打开库项目 图图8-24 8-24 “更新库项目更新库项目”对话框对话框图图8-25 8-25 “更新页面更新页面”对话框对话框 图图8-26 8-26 更新库项目后的页面效果更新库项目后的页面效果 3.更新整个站点或所有使用特定库项目的文档更新整个站点或所有使用特定库项目的文档图图8-27 8-27 “更新页面更新页面”对话框对话框4删除库项目删除库项目 若要从库中删除库项

18、目，操作方法如下。若要从库中删除库项目，操作方法如下。（1）在）在“资源资源”面板中，单击面板左侧的面板中，单击面板左侧的“库库”按钮（）。按钮（）。（2）选择要删除的库项目，单击底部的）选择要删除的库项目，单击底部的“删除删除”按钮（），或者按按钮（），或者按“Delete”键，键，然后确认要删除的库项目。然后确认要删除的库项目。8.2.3 插入库项目插入库项目 对于创建好的库项目，可以插入到其他对于创建好的库项目，可以插入到其他文档中使用，具体的操作方法如下。文档中使用，具体的操作方法如下。（1）打开需要插入库项目的文档，或者新建）打开需要插入库项目的文档，或者新建一个空文档。一个空文档。

19、（2）将光标置于需要插入库项目的位置。）将光标置于需要插入库项目的位置。（3）在）在“库库”面板中选中需要插入到文档面板中选中需要插入到文档中的库项目。中的库项目。（4）单击）单击“库库”面板左下方的面板左下方的“插入插入”按按钮，如图钮，如图8-28所示，或者直接将选中的库所示，或者直接将选中的库项目拖曳到文档中。项目拖曳到文档中。图图8-28 8-28 单击单击“插入插入”按钮按钮8.2.4 将库项目与源文件分离将库项目与源文件分离 如果想将库项目从源文件中分离出来，如果想将库项目从源文件中分离出来，可按如下步骤操作。可按如下步骤操作。（1）选中要与文档分离的库项目。）选中要与文档分离的库

20、项目。（2）选择菜单栏中的）选择菜单栏中的“窗口窗口属性属性”命令，命令，打开打开“属性属性”面板，在面板，在“属性属性”面板中选面板中选择择“从源文件中分离从源文件中分离”一项，将会弹出警一项，将会弹出警告信息对话框，如图告信息对话框，如图8-29所示。所示。图图8-29 8-29 警告信息警告信息小小 结结 本章介绍了本章介绍了Dreamweaver 8提供的两提供的两种网页元素重复使用的机制，它们的作用种网页元素重复使用的机制，它们的作用都是在制作规模比较大的网站时能够提高都是在制作规模比较大的网站时能够提高制作的效率。除了学会使用这两种功能以制作的效率。除了学会使用这两种功能以外，希望读者能够更深入地理解这两种机外，希望读者能够更深入地理解这两种机制的原理，以及它们之间的相同点和不同制的原理，以及它们之间的相同点和不同点，这样在实际工作中才能够更好地利用点，这样在实际工作中才能够更好地利用适当的工具，最快捷高效地完成工作。适当的工具，最快捷高效地完成工作。