Dreamweaver网页设计之：模板与库

1、第 8 章 模板与库,本章主要内容 认识模板 模板的创建与编辑 应用模板 库的创建和使用 小结,第 8 章 模板的使用,学习目标 了解模板的概念 掌握模板的创建与编辑 掌握模板的使用方法 了解库的概念 掌握库的创建与使用,认识模板,通常在一个网站中有成百上千的页面，有时有很多页面的布局常常相同，尤其是同一层次的页面，只有具体文字或图片内容不同。将这样的网页定义为模板后，相同的部分都被锁定，只有一部分内容可以编辑，避免了对无需改动部分的误操作。当创建新的网页时，只需将模板调出，在可编辑区插入内容即可。更新网页时，只需在可编辑区更换新内容即可。 在对网站进行改版时，因为网站的页面非常多，如果分别修

2、改每一页，工作量无疑非常大，但如果使用了模板，只要修改模板，则所有应用模板的页面都可以自动更新。 ,认识模板,模板就是网页的样板，它有可编辑区和不可编辑区。 不可编辑区的内容是不可以改变的，通常为标题栏、网页图标、框架结构、链接文字和导航栏等。 可编辑区的内容可以改变，通常为具体的文字和图像内容，如每日新闻、最新软件介绍、趣谈等。,认识模板,模板具有以下优点： （1）风格一致，看起来比较系统，也省去了重复劳动的麻烦。 （2）如果要修改共同的页面元素，则不必一个一个地修改，只要更改应用它们的模板就可以了。 （3）免除了以前没有此功能时还要常常“另存为”，否则一不小心容易覆盖重要文档的困扰。,模板

3、的创建与编辑,制作模板与制作普通页面完全相同，只是通常并不把页面的所有部分都完成，而只是制作导航栏和标题栏等各个页面的公有部分，这些部分一般在网页的四周，而把中间留给每页的具体内容。 模板可以自动保存在本地站点根目录下的Template目录内，如果没有该目录，则系统可自动创建此目录。模板文件的扩展名字为：.dwt。,模板的创建与编辑,1、创建模板 模板必须保存在站点中，因此在创建模板前应先创建站点，否则创建模板时系统会提示创建站点。 （1）将现有网页另存为模板 执行“文件/另存为模板”命令,弹出【另存为模板】对话框，保存模板文件。,【另存为模板】对话框,模板的创建与编辑,（2）新建空白模板文件

4、 执行“文件/新建”命令，在弹出的“新建文档”对话框中，类别列表框中选择“模板页”。 模板文件保存在Templates文件夹中，文件扩展名为.dwt。 注：模板不能移动到Templates文件夹之外，也不能将非模板文件放于Templates文件夹中。,模板的创建与编辑,（3）直接创建模板 打开“资源”面板，切换到模板子面板。,模板的创建与编辑,2、创建可编辑区域 模板包括两个区域类型： 可编辑区域、不可编辑区域（锁定区域） 可编辑区域是模板中的一个特殊的区域，通过模板创建的网页在该区域中可以进行添加、修改和删除等操作。,在模板中创建不同的区域,模板的创建与编辑,选择【插入】|【模板对象】|【可

5、编辑区域】命令，弹出【新建可编辑区域】对话框。在【名称】文本框中输入可编辑区域的名称，然后单击【确定】按钮。,【新建可编辑区域】对话框,一般而言，一个模板中至少应有一个可编辑区域，否则，由模板创建的文档不能被编辑。,模板的创建与编辑,在创建可编辑区域时,可以将整个表格或单独的表格单元格标记为可编辑的，但不能将多个表格单元格标记为单个可编辑区域； 可以将层标记为可编辑，也可以将层内容标记为可编辑。若将层标记为可编辑，则可更改层的位置和内容；若将层内容标记为可编辑，则只能更改层的内容而不能移动位置。,模板的创建与编辑,3、更改可编辑区域的名称 选择可编辑区域，在属性面板的名称文本框中修改。 4、锁

6、定可编辑区域 如果已经将模板文件的一个区域定义为可编辑区域，而现在想要再次锁定它，使其为不可编辑区域：选择该可编辑区域，执行“ 修改/模板/删除模板标记”命令。,1、从模板新建网页 执行“文件/新建”命令，在弹出的“新建文档”对话框中，选择“模板”选项卡，在“模板用于”列表框中选择所需站点，然后在右侧的列表框中选择所需的模板，单击【创建】按钮。,应用模板,【模板】选项卡,2、为网页应用模板 执行“修改/模板/套用模板到页”命令，在弹出的“选择模板”对话框中，选择要应用的模板。 如果网页中有不能自动指定到模板区域的内容，便会弹出“不一致的区域名称”对话框。,应用模板,应用模板,在该对话框中的“可

7、编辑区域”列表中选择应用的模板中的可编辑区域。在“将内容移到新区域”下拉列表框中选择将现有内容移到新模板中的区域。如果选择“不在任何地方”选项，则表示将不一致的内容从新网页中删除。,【不一致的匹配名称】对话框,应用模板,3、更新基于模板的页面 修改模板后，Dreamweaver会自动提示用户更新基于该模板的文档，用户可以根据需要自动更新或手动更新当前文档或整个站点。,【更新模板文件】对话框,4、通过命令更新网页模板 执行“修改/模板/更新页面”命令，将弹出的“更新页面”对话框中，在“查看”下拉列表框中选择“文件使用”选项，在其后的下拉列表框中选择需要更新的模板，可更新应用了该模板的所有网页。单

8、击开始,在更新页面对话框中的“查看”下拉列表框中选择“整个站点”选项，在其后的下拉列表框中选择需要更新站点，可更新选择的站点中所有应用了该模板的网页。,应用模板,将文档和模板分离,将模板应用到页面上之后，可编辑区域的位置和所有的不可编辑区域都是不可更改的。如果想要修改它们，可以有两种方法： 一种方法是更改该页面的模板； 另一种方法是将页面和模板分离，这样就可以修改页面上的任何部分。 但是，当页面和模板分离之后，如果模板被更新，由于页面和模板已经脱离了链接关系，所以页面将不被自动更新。,将文档和模板分离,要将页面和模板分离，只需打开文档，然后选择菜单栏中的“修改模板从模板中分离”命令，页面上所有

9、的部分就都变成可编辑的了。 但是需要注意的是，一旦一个文档和模板分离以后，当这个模板被更新时，文档也就不会自动更新了。,库的概念,库是一种特殊的Dreamweaver文件，可以用来存放诸如文本、图像等网页元素，这些元素通常被广泛用于整个站点，并且经常被重复使用或更新。 Dreamweaver允许把网站中需要重复使用或需要经常更新的页面元素（如图像、文本或其他对象）存入库中，存入库中的元素称为“库项目”。,所谓库项目，实际上就是文档内容的任意组合，可以将文档中的任意内容存储为库项目，使它在其它地方被重复使用。可以将文档body部分中的任意元素创建库项目，这些元素包括文 本、表格、表单、Java

10、applets、插件、ActiveX元素、导航条和图像。,库的创建和使用,库的创建和使用,1、创建库项目 选择【窗口】|【资源】命令，显示【资源】面板，单击面板左侧的【库】按钮，显示库类别。然后，将元素拖到库类别中，即可创建一个新的库项目。为新的库项目输入所需名称后按Enter键即可。 库项目保存在站点本地根文件夹的Library文件夹中。每个库项目都保存为一个单独的文件，文件扩展名为*.lbi。,2、应用库项目 选择【窗口】|【资源】命令，显示【资源】面板，切换到库类别，在库项目列表中选择要插入的库项目，单击面板底部的【插入】按钮，即可将库项目应用到网页中。,库的创建和使用,【资源】面板的库类别,库的创建和使用,3、编辑库项目 显示【资源】面板的库类别，从库列表中选择要进行编辑的库项目，然后单击面板底部的【编辑】按钮，或者直接双击库项目名称，系统会自动打开一个用于编辑该库项目的窗口。,库项目的编辑窗口,库的创建和使用,4、更新应用库项目的页面 选择【修改】|【库】|【更新页面】命令，弹出【更新页面】对话框，选择要更新的网页范围及所需站点或模板名称，并确保选择了【更新】选项组中的【库项目】复选框，单击【开始】按钮即可更新网站。,【更新页面】对话框,库项目与源文件分离,如果想将库项目从源文件中分离出来，可按如下步骤操作。 （1）选中要与文档分离的库项目。 （