Dreamweaver网页设计之：模板与库

第8章模板与库本章主要内容认识模板模板的创建与编辑应用模板库的创建和使用小结第8章模板的使用学习目标了解模板的概念掌握模板的创建与编辑掌握模板的使用方法了解库的概念掌握库的创建与使用认识模板通常在一个网站中有成百上千的页面，有时有很多页面的布局常常相同，尤其是同一层次的页面，只有具体文字或图片内容不同。将这样的网页定义为模板后，相同的部分都被锁定，只有一部分内容可以编辑，避免了对无需改动部分的误操作。当创建新的网页时，只需将模板调出，在可编辑区插入内容即可。更新网页时，只需在可编辑区更换新内容即可。在对网站进行改版时，因为网站的页面非常多，如果分别修改每一页，工作量无疑非常大，但如果使用了模板，只要修改模板，则所有应用模板的页面都可以自动更新。–=3118–=3094认识模板模板就是网页的样板，它有可编辑区和不可编辑区。不可编辑区的内容是不可以改变的，通常为标题栏、网页图标、框架结构、链接文字和导航栏等。可编辑区的内容可以改变，通常为具体的文字和图像内容，如每日新闻、最新软件介绍、趣谈等。认识模板模板具有以下优点：（1）风格一致，看起来比较系统，也省去了重复劳动的麻烦。（2）如果要修改共同的页面元素，则不必一个一个地修改，只要更改应用它们的模板就可以了。（3）免除了以前没有此功能时还要常常“另存为”，否则一不小心容易覆盖重要文档的困扰。模板的创建与编辑制作模板与制作普通页面完全相同，只是通常并不把页面的所有部分都完成，而只是制作导航栏和标题栏等各个页面的公有部分，这些部分一般在网页的四周，而把中间留给每页的具体内容。模板可以自动保存在本地站点根目录下的Template目录内，如果没有该目录，则系统可自动创建此目录。模板文件的扩展名字为：.dwt。模板的创建与编辑1、创建模板模板必须保存在站点中，因此在创建模板前应先创建站点，否则创建模板时系统会提示创建站点。（1）将现有网页另存为模板执行“文件/另存为模板”命令,弹出【另存为模板】对话框，保存模板文件。【另存为模板】对话框模板的创建与编辑（2）新建空白模板文件执行“文件/新建”命令，在弹出的“新建文档”对话框中，类别列表框中选择“模板页”。模板文件保存在Templates文件夹中，文件扩展名为.dwt。注：模板不能移动到Templates文件夹之外，也不能将非模板文件放于Templates文件夹中。模板的创建与编辑（3）直接创建模板打开“资源”面板，切换到模板子面板。模板的创建与编辑2、创建可编辑区域模板包括两个区域类型：可编辑区域、不可编辑区域（锁定区域）可编辑区域是模板中的一个特殊的区域，通过模板创建的网页在该区域中可以进行添加、修改和删除等操作。在模板中创建不同的区域模板的创建与编辑选择【插入】|【模板对象】|【可编辑区域】命令，弹出【新建可编辑区域】对话框。在【名称】文本框中输入可编辑区域的名称，然后单击【确定】按钮。【新建可编辑区域】对话框一般而言，一个模板中至少应有一个可编辑区域，否则，由模板创建的文档不能被编辑。模板的创建与编辑在创建可编辑区域时,可以将整个表格或单独的表格单元格标记为可编辑的，但不能将多个表格单元格标记为单个可编辑区域；可以将层标记为可编辑，也可以将层内容标记为可编辑。若将层标记为可编辑，则可更改层的位置和内容；若将层内容标记为可编辑，则只能更改层的内容而不能移动位置。模板的创建与编辑3、更改可编辑区域的名称选择可编辑区域，在属性面板的名称文本框中修改。4、锁定可编辑区域如果已经将模板文件的一个区域定义为可编辑区域，而现在想要再次锁定它，使其为不可编辑区域：选择该可编辑区域，执行“修改/模板/删除模板标记”命令。1、从模板新建网页执行“文件/新建”命令，在弹出的“新建文档”对话框中，选择“模板”选项卡，在“模板用于”列表框中选择所需站点，然后在右侧的列表框中选择所需的模板，单击【创建】按钮。应用模板【模板】选项卡2、为网页应用模板执行“修改/模板/套用模板到页”命令，在弹出的“选择模板”对话框中，选择要应用的模板。如果网页中有不能自动指定到模板区域的内容，便会弹出“不一致的区域名称”对话框。应用模板应用模板在该对话框中的“可编辑区域”列表中选择应用的模板中的可编辑区域。在“将内容移到新区域”下拉列表框中选择将现有内容移到新模板中的区域。如果选择“不在任何地方”选项，则表示将不一致的内容从新网页中删除。【不一致的匹配名称】对话框应用模板3、更新基于模板的页面修改模板后，Dreamweaver会自动提示用户更新基于该模板的文档，用户可以根据需要自动更新或手动更新当前文档或整个站点。【更新模板文件】对话框4、通过命令更新网页模板执行“修改/模板/更新页面”命令，将弹出的“更新页面”对话框中，在“查看”下拉列表框中选择“文件使用…”选项，在其后的下拉列表框中选择需要更新的模板，可更新应用了该模板的所有网页。单击开始,在更新页面对话框中的“查看”下拉列表框中选择“整个站点”选项，在其后的下拉列表框中选择需要更新站点，可更新选择的站点中所有应用了该模板的网页。应用模板将文档和模板分离将模板应用到页面上之后，可编辑区域的位置和所有的不可编辑区域都是不可更改的。如果想要修改它们，可以有两种方法：一种方法是更改该页面的模板；另一种方法是将页面和模板分离，这样就可以修改页面上的任何部分。但是，当页面和模板分离之后，如果模板被更新，由于页面和模板已经脱离了链接关系，所以页面将不被自动更新。将文档和模板分离要将页面和模板分离，只需打开文档，然后选择菜单栏中的“修改→模板→从模板中分离”命令，页面上所有的部分就都变成可编辑的了。但是需要注意的是，一旦一个文档和模板分离以后，当这个模板被更新时，文档也就不会自动更新了。库的概念库是一种特殊的Dreamweaver文件，可以用来存放诸如文本、图像等网页元素，这些元素通常被广泛用于整个站点，并且经常被重复使用或更新。Dreamweaver允许把网站中需要重复使用或需要经常更新的页面元素（如图像、文本或其他对象）存入库中，存入库中的元素称为“库项目”。所谓库项目，实际上就是文档内容的任意组合，可以将文档中的任意内容存储为库项目，使它在其它地方被重复使用。可以将文档body部分中的任意元素创建库项目，这些元素包括文本、表格、表单、Javaapplets、插件、ActiveX元素、导航条和图像。库的创建和使用库的创建和使用1、创建库项目选择【窗口】|【资源】命令，显示【资源】面板，单击面板左侧的【库】按钮，显示库类别。然后，将元素拖到库类别中，即可创建一个新的库项目。为新的库项目输入所需名称后按Enter键即可。库项目保存在站点本地根文件夹的Library文件夹中。每个库项目都保存为一个单独的文件，文件扩展名为*.lbi。2、应用库项目选择【窗口】|【资源】命令，显示【资源】面板，切换到库类别，在库项目列表中选择要插入的库项目，单击面板底部的【插入】按钮，即可将库项目应用到网页中。库的创建和使用【资源】面板的库类别库的创建和使用3、编辑库项目显示【资源】面板的库类别，从库列表中选择要进行编辑的库项目，然后单击面板底部的【编辑】按钮，或者直接双击库项目名称，系统会自动打开一个用于编辑该库项目的窗口。库项目的编辑窗口库的创建和使用4、更新应用库项目的页面选择【修改】|【库】|【更新页面】命令，弹出【更新页面】对话框，选择要更新的网页范围及所需站点或模板名称，并确保选择了【更新】选项组中的【库项目】复选框，单击【开始】按钮即可更新网站。【更新页面】对话框库项目与源文件分离如果想将库项目从源文件中分离出来，可按如下步骤操作。（1）选中要与文档分离的库项目。（2）选择菜单栏中的“窗口→属性”命令，打开“属性”面板，在“属性”面板中选择“从源文件中分离”一项，将会弹出警告信息对话框。小结库是一种用于放置在网页上的资源，而模板则是一种页面布局。它们有个共同点：库项目和模板都与应用它们的文档保持关联，在更改库项目和模板的内容时，可以同时更新所有与之关联的页面。模板和库的使用有利于网页风格的统一。