Dreamweaver网页设计与制作教程课件第11章 模板和库的应用

第11章模板和库的应用第11章模板和库的应用第11章模板和库的应用内容提要模板和库的定义创建模板和库项目的方法模板和库项目的应用第11章模板和库的应用11.1模板模板是Dreamweaver中一种特殊类型的网页文档，扩展名为dwt，是用来设计具有固定布局的页面。模板组成：可编辑区域和不可编辑区域

可编辑区域：能根据个人的喜好进行编辑的区域。不可编辑区域：不可由用户更改的区域。第11章模板和库的应用11.1模板11.1.1创建模板两种方法：创建空白模板和直接将现有网页另存为模板1.创建空白模板（1）在某个站点中通过执行“窗口”→“资源”命令（或按快捷键F11），打开资源管理面板，如图11.1所示。（2）单击资源面板左侧名称列表中的“模板”项，打开模板面板。模板面板的空白区域被分隔为两部分，上面的区域为资源预览区，用于预览当前所选择的模板内容；下面的区域为资源列表区，显示所有已创建的模板资源。第11章模板和库的应用11.1模板11.1.1创建模板1.创建空白模板（3）在模板面板的最下方找到（新建模板）按钮，单击即可新建一个模板文件，文件名称为可编辑状态。（4）为该文件命名，按Enter键确定。

第11章模板和库的应用11.1模板11.1.1创建模板2.将现有网页另存为模板（1）打开需要将其另存为模板的网页。（2）清除网页中需要重新输入内容的区域，保留固定不变的区域。（3）选择“文件”→“另存为模板”命令，打开如图11.2所示的对话框。第11章模板和库的应用11.1模板11.1.1创建模板（4）在对话框中打开“站点”下拉列表，选择用来保存模板的站点。“现有的模板”列表中列出了所有站点内已经存在的模板。“描述”文本框中可以输入对当前模板的说明性文字。（5）在“另存为”文本框中为模板命名。（6）单击“保存”按钮完成模板的创建，系统会在站点的根目录下自动建立一个名为Templates的文件夹，专门用来存放模板文件，每个模板文件的扩展名都为dwt。如图11.3所示。第11章模板和库的应用11.1模板11.1.2编辑模板利用表格或布局表格和布局单元格对模板网页进行布局设置，并确定哪些区域为可编辑区域或不可编辑区域等。模板区域分为4种，分别是可编辑区域、可选区域、重复区域和可编辑标记属性，下面就分别介绍它们的创建。第11章模板和库的应用11.1模板11.1.2编辑模板1.创建可编辑区域（1）将光标定位到模板中要创建可编辑区的位置。（2）执行“插入”→“模板对象”→“可编辑区域”命令，打开“新建可编辑区域”对话框，如图所示。（3）在“名称”文本框中输入可编辑区域的名字。（4）单击“确定”按钮，即可在光标位置插入可编辑区域，如图11.5所示。第11章模板和库的应用11.1模板11.1.2编辑模板2.创建可编辑区域（1）将光标定位在要插入可选区域的位置，或在模板中选中想要成为可选区域的对象。（2）执行“插入”→“模板对象”→“可选区域”或“可编辑的可选区域”命令，弹出“新建可选区域”对话框，如图11.6所示。（3）单击对话框上的“基本”标签，在“名称”框中输入名称，选择“默认显示”则表示在文档中显示选定区域，否则表明在文档中该区域不显示。（4）单击对话框上的“高级”标签，选择“输入表达式”，在文本框中输入显示条件的表达式。如图11.7所示。（5）单击“确定”按钮，完成可选区域的创建。如图11.8所示，ke1为正常的可选区域，ke2为可编辑的可选区域。第11章模板和库的应用11.1模板2.创建可编辑区域第11章模板和库的应用11.1模板可选区域插入完成后，可将该模板应用在某一网页中，通过“修改”→“模板属性”命令打开“模板属性”对话框，如图11.9所示，在对话框中选择某个可选区域名称，设置对话框下方的复选框来设置该区域的内容是否可显示在网页中。第11章模板和库的应用11.1模板11.1.2编辑模板3.创建重复区域重复区域是模板中进行重复添加的区域，使用重复区域可以在模板中复制任意次数的指定区域。它是不可编辑区域，若要使重复区域中的内容可编辑，必须在重复区域中插入可编辑区域。创建重复区域分为创建正常重复区域和创建重复表格两种。第11章模板和库的应用11.1模板11.1.2编辑模板3.创建重复区域创建正常重复区域（1）将光标定位到要插入重复区域的模板中。（2）执行“插入”→“模板对象”→“重复区域”命令，打开“新建重复区域”对话框，如图11.10所示。（3）在“名称”对话框中为重复区域命名，单击“确定”按钮，即可在模板中插入一个重复区域，如图11.11所示。第11章模板和库的应用11.1模板11.1.2编辑模板3.创建重复区域创建重复表格（1）打开一个模板，将光标定位在要插入重复表格的位置。（2）执行“插入”→“模板对象”→“重复表格”命令，弹出如图11.13所示的对话框。根据模板设计者需要来设置对话中的具体参数，其中：起始行：用于指定重复表格的重复起始行。结束行：用于指定重复表格的重复结束行。区域名称：用于为重复表格中重复区域命名。（3）设置完成后单击“确定”按钮即可在模板中插入一个可重复表格第11章模板和库的应用11.1模板11.1.2编辑模板4.创建可编辑标记属性可编辑标记属性用于指定使用模板创建的网页文件中用户可以修改元素的哪些属性。创建可编辑标记属性的具体操作步骤如下：（1）选中要设置可编辑标记属性的对象。（2）执行“修改”→“模板”→“令属性可编辑”命令，打开如图11.15所示的对话框。（3）单击对话框中的“属性”下拉列表框，选择要编辑的属性，若没有需要的属性，则单击“添加”按钮，打开如图11.16所示对话框，在其文本框中输入要添加的属性名称，单击“确定”按钮。选中“属性可编辑”复选框。（4）在“标签”栏中输入要设置的标签名称。可编辑属性支持的数据类型有：文本、布尔值、颜色、URL和数字。（5）设置完成后单击“确定”按钮即可。第11章模板和库的应用11.1模板11.1.3应用模板1.使用模板创建新网页方法一：使用“新建”命令(1)执行“文件”→“新建”命令，打开如图11.17所示的对话框，选择“模板”选，项卡，从中选择要应用的模板。（2）在“模板用于”列表中选择要使用的模板所在的站点。（3）在“站点”列表中选择该站点内要使用的模板。（4）单击“创建”按钮，生成一个基于所选模板的新网页。第11章模板和库的应用11.1模板11.1.3应用模板1.使用模板创建新网页方法二：使用资源面板（1）执行“窗口”→“资源”命令，打开资源管理面板。在名称列表中选择“模板”项。（2）在面板中选择要应用的模板。（3）右键单击该模板，在弹出的快捷菜单中选择“从模板新建”命令。第11章模板和库的应用11.1模板11.1.3应用模板2.对现有网页套用模板（1）打开要套用模板的网页。（2）执行“修改”→“模板”→“套用模板到页”命令，弹出如图所示的对话框。(3)在“站点”下拉列表中选择要套用的模板所在的站点。(4)在“模板”列表中选择要套用的模板。选中“当模板改变时更新页面”复选框。(5)单击“选定”按钮，即可将选中的模板套用到当前网页。第11章模板和库的应用11.1模板11.1.4更新基于模板的网页文档（1）在Dreamweaver中打开需要修改的模板。（2）对模板进行修改后，执行“文件”→“保存”命令，或按组合键【Ctrl+S】，弹出“更新模板文件”对话框，如图11.19所示。第11章模板和库的应用11.1模板11.1.4更新基于模板的网页文档（3）单击“更新”按钮，Dreamweaver会弹出“更新页面”对话框，如图11.20所示，当对话框中的“显示记录”列表显示为“完成”时，单击“关闭”按钮即完成了更新基于模板的网页文件。如果在“更新模板文件”对话框中单击了“不更新”按钮则只保存修改后的模板而不更新基于模板的网页文件。第11章模板和库的应用11.2库库主要包括需要重复使用或经常需要对整个站点进行更新的网页元素，在Dreamweaver中库项目一般都放在站点根目录下的库文件夹“Library”中，库项目的文件扩展名为lbi。11.2.1创建库项目有两种方法创建库项目：创建新的库项目和把现有网页对象转化为库项目。1.创建新的库项目（1）执行“窗口”→“资源”命令，打开资源面板，在名称列表中选择“库”项按钮。（2）单击资源面板下方的按钮（新建库项目按钮），在资源列表区中出现一个新的库项目，名称为可编辑状态，如图11.21所示。第11章模板和库的应用11.2库（3）在“名称”下输入库项目的名称，按Enter键即可。2.把现有网页对象转化为库项目（1）在网页中，选定要创建成库项目的元素。（2）执行“修改”→“库”→“增加对象到库”命令，该对象将自动转换为一个新的库项目出现在“库”面板中。（3）在资源管理面板中为该库项目命名即可。第11章模板和库的应用11.2库11.2.2编辑库项目1.修改库项目（1）打开“资源”面板，单击“库”按钮，将库列表显示出来，在“名称”下方选中某个库项目双击，或选中某个库项目后，单击面板中的“编辑”按钮，这样库项目文件就可被打开。（2）在文档窗口中，对打开的库项目进行编辑。（3）编辑完成后，保存该库项目文件即可。第11章模板和库的应用11.2库2.重命名库项目（1）选中“库”面板上要重命名的局项目。（2）执行下列操作之一，即可为库项目重新命名：单击鼠标右键，在弹出的快捷菜单中选择“重命名”选项。单击“库”面板右上角的下拉按钮，从中选择“重命名”选项。单击库项目，库项目变成可编辑状态，直接输入新名称。第11章模板和库的应用11.2库3.删除库项目（1）选中“库”面板上要删除的库项目。（2）执行下列操作之一，即可删除某个库项目：单击鼠标右键，在弹出的快捷菜单中选择“删除”命令。单击面板右下角的“删除”按钮。第11章模板和库的应用11.2库11.2.3应用库项目创建完库项目后，就可将库项目应用到网页中，具体操作步骤如下：（1）打开要插入库项目的网页，将光标定位到网页中适当的位置。（2）打开“资源”面板，在名称列表中选择“库”项。（3）在资源列表区找到要插入的库项目，单击面板中的“插入”按钮，即可将库项目插入到网页中。如果对库项目插入的位置不满意，可对其进行剪切、复制、粘贴等操作。第11章模板和库的应用11.2库11.2.4更新基于库项目的网页文档若库项目进行了编辑修改，用户可以选择是否对用了该库项目的所有网页进行更新。具体操作如下：（1）对“库”面板中的某个库项目进行修改。（2）执行“文件”→“保存”命令，或按组合键“Ctrl+S”保存修改后的库项目，弹出如图11.22所示的对话框，提示用户对于所有使用该库项目的文件是否需要更新。（3）在对话框中决定是否更新网页文件中的库项目。第11章模板和库的应用11.2库11.2.4更新基于库项目的网页文档通过上面的介绍，了解到库项目的