Dreamweaver网页设计之：模板与库.

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

2、工作量无疑非常大，但如果使用了模板，只 要修改模板，则所有应用模板的页面都可以自动更新。-http:/nba SDorts sina com cn/Dlaver phD?id=3118- http:/ 区。不可编辑区的内容是不可以改变的，通常为标题 栏、网页图标、框架结构、链接文字和导航栏等。可编辑区的内容可以改变，通常为具体的文字和 图像内容，如每日新闻、最新软件介绍、趣谈等。认识模板模板具有以下优点：(1)(1)风格一致，看起来比较系统，也省去了重复劳动 的麻烦。(2)(2)如果要修改共同的页面元素，则不必一个一个地 修改，只要更改应用它们的模板就可以了。(3)(3)免除了以前没有此功能时

3、还要常常“另存为”， 否则一不小心容易覆盖重要文档的困扰。模板的创建与编辑制作模板与制作普通页面完全相同，只是通常并不 把页面的所有部分都完成，而只是制作导航栏和标 题栏等各个页面的公有部分， 这些部分一般在网页 的四周，而把中间留给每页的具体内容。模板可以自动保存在本地站点根目录下的 TemplateTemplate 目录内，如果没有该目录，则系统可自动创建此目 录。模板文件的扩展名字为:.dwt.dwto o模板的创建与编辑模板的创建与编辑(2)新建空白模板文件执行“文件/新建”命令，在弹出的“新建文档”对话框中，类 别列表框中选择“模板页”。模板文件保存在Templates文件夹中，文件

4、扩展名为.dwt。注：模板不能移动到Templates文件夹之外，也不能将非模板文 件放于Templates文件夹中。1、创建模板模板必须保存在站点中，因此在创建模板前应先创建站点，否则创建模板时系统会提示创建站点。(1)将现有网页另存为模板执行“文件/另存为模板”命令，弹出【另存为模板】对话框， 保存模板文件。【另模板的创建与编辑模板的创建与编辑2、创建可编辑区域模板包括两个区域类型： 可编辑区域、不可编辑区域（锁定区域）可编辑区域是模板中的一个 特殊的区域，通过模板创建 的网页在该区域中可以进行 添加.修改和删除等操作。（3）直接创建模板打开“资源”面板，切换到模板子面板。卞辑模板按钮钉加

5、模板按钮W新站点列表L代词片轡删除模板技钮一扩展按钮愧板预览区模板的创建与编辑在模板中创建不同的区域选择【插入】丨【模板对象】I【可编辑区域】命令，弹出【新建 可编辑区域】对话框。在【名称】文本框中输入可编辑区域的名 称，然后单击【确定】按钮。【新建可编辑区域】 对话框模板的创建与编辑在创建可编辑区域时，可以将整个表格或单独的表格单元格标记 为可编辑的，但不能将多个表格单元格标一般而言，一个模 板中至少应有一个 可编辑区域，否则,由模板创建的文档不能被编辑。模板的创建与编辑记为单个可编辑区域；可以将层标记为可编辑，也可以将层内容标记为可编辑。若将层 标记为可编辑，则可更改层的位置和内容；若将层

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

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

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

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

10、以将文档body部分中的任意元素创建库项目，这些元素包括文本.表格、表单、Java applets.插件.ActiveX元素、导航条和 图像。库的创建和使用1、创建库项目选择【窗口】I【资源】命令，显示【资源】面板，单击面板左 侧的【库】按钮，显示库类别。然后，将元素拖到库类别中，即 可创建一个新的库项目。为新的库项目输入所需名称后按Enter键即可。库项目保存在站点本地根文件夹的Library文件夹中。每个库项 目都保存为一个单独的文件，文件扩展名为*.lbio2、应用库项目选择【窗口】I【资源】命令, 显示【资源】面板，切换到 库类别，在库项目列表中选 择要插入的库项目，单击面 板底部的【

11、插入】按钮，即 可将库项目应用到网页中。【资源】面板的库类别库库的创建和使用3、编辑库项目显示【资源】面板的库类别，从库列表中选择要进行编辑的库项 目，然后单击面板底部的【编辑】按钮，或者直接双击库项目 名称，系统会自动打开一个用于编辑该库项目的窗口。库项目的编辑窗口库的创建和使用4、更新应用库项目的页面选择【修改】I【库】丨【更新页 面】命令，弹出【更新页面】对 话框，选择要更新的网页范围及 所需站点或模板名称，并确保选 择了【更新】选项组中的 【库项 目】 复选框， 单击 【开始】按钮 即可更新网站。【更新页面】对话框库项目与源文件分离如果想将库项目从源文件中分离出来， 可按 如下步骤操作。(1)(1)选中要与文档分离的库项目。(2)(2)