详解DW模板和库

第十二章模板和库当用户创建网站时，经常会有大量的重复操作，如在每一个网页上方插入同样的图片，在网页下方输入同样的版权声明等，从而浪费了很多时间。在Dreamweaver中，使用模板和库就可以解决这个问题。模板是一种特殊类型的文档，利用它可以一次更新多个页面，达到统一页面的目的；库是一种用来存储在网站上经常重复使用或更新的页面元素的方法，这些元素通常被称为库项目。本章将介绍模板和库的使用方法。本章内容12.1模板12.2库12.3上机实践12.1模板在创建网站时，为体现其专业性，要求创建的各网页的风格必须一致。例如，在某一特定位置显示网站主题，在某一位置显示网站图标等。这样做可以使网页的主题更加明了，从而加深用户对网页的印象。但这个过程会包含大量的重复性操作，为解决之一问题，Dreamweaver提供了模板功能，使用它能一次更新多个页面，达到统一页面格式的目的。模板是带有固定特征和共同格式的文档，是用户批量产生文档的起点。模板是一种比较特殊的文档，扩展名为.dwt。模板可以由专业设计人员设计生成，也可以自行定义。定义的模板中，相同部分为不可编辑状态，而不同部分为可编辑状态。12.1.1创建模板创建模板由两种形式，一种是直接创建空白模板，另一种是将当前网页保存为模板文件。1.创建空白模板创建空白模板的操作步骤如下：1.选择【窗口】-【资源】命令，打开“资源”面板。单击“资源”面板左侧的模板按钮，打开“模板”面板。3.“模板”面板的空白区域被分割为两部分，上面的区域为模板预览区，用于预览当前所选择的模板内容；下面的区域为模板列表区，显示所有已经创建的模板。4.单击“模板”面板上右上角的下拉菜单，在弹出的下拉菜单中选择“新建模板”命令，或单击面板右下角的“新建模板”按钮。5.此时，“模板”面板下方即创建了一个无标题的空白模板。6.在“名称”上单击，使其处于可编辑状态，输入新模板名称，按Enter键即可创建一个空白文档。Tips:创建模板后，系统会自动在本地站点目录中添加一个名为Templates的新目录，然后将模板文件保存到此目录中。注意不要将模板移动到Templates文件夹之外，或者将任何非模板文件放在Templates文件夹中；也不要将Templates文件夹移动到本地根文件夹之外，否则会引起模板路径错误。2.将文件保存为模板将当前文件保存为模板的操作步骤如下：1.打开要保存为模板的网页11-1.html素材见：光盘\素材及效果\web\11\11-1.html2.选择【文件】-【另存为模板】命令，在弹出的“另存模板”对话框的“站点”下拉列表中选择一个站点名称；在“现存的模板”列表框中显示的是当前系统中存在的模板；在“另存为”文本框中输入新建的模板名称。3.单击“保存”按钮，即可创建一个模板，并且在窗口的左上角出现模板的名称，如图。11.1.2设计模板创建模板后，还可对其进行编辑操作或页面设置。1.打开资源面板，单击其中的“模板”按钮，打开“模板”面板。在其中选择要进行编辑的空白模板。2.单击右下角的“编辑”按钮，打开模板编辑窗口。3.此时即可在窗口中想设计网页一样设计模板，然后保存设计好的模板。设计好的模板修改后的效果2.设置模板文档的页面属性创建了一个模板后，可以设置其页面属性，操作步骤如下：1.打开模板文档。选择【修改】-【页面属性】命令，打开“页面属性”对话框，如图。2.设置模板文档页面属性的方法与设置普通网页文档属性的方法相同。3.设置完成后，单击“确定”按钮即可。12.1.3创建可编辑区域在Dreamweaver中，一开始定义的模板是不可编辑的，需要在制作模板时进行设定才能进行编辑。1.模板区域类型在一个模板中，可定义的区域分为4种，即可编辑区域、可选区域、重复区域和可编辑标记属性。其中，后3种区域在实际工作中并不经常使用。可编辑区域：指用户可以进行编辑的区域。在模板中，可以把图像、文本、表格和层等任何元素设置为可编辑区域。要让模板生效，它应该至少包含一个可编辑区域，否则该模板的页面将无法编辑。可选区域：用来保存有可能在基于模板的文档中出现的内容，如文本或图像。可选区域有设计者在模板中定义，应用时则通常由内容编辑器控制内容是否显示。可编辑区域重复区域：是可以根据需要在基于模板的页面中复制多次的部分，通常应用于表格，但也可以为其他页面元素定义重复区域。可编辑标记属性：使用户可以在模板中解锁标记属性。以该属性可以在基于模板的页面中编辑。2.定义可编辑区域可编辑区域是指在一个页面中可以更改的部分。定义可编辑区的操作步骤如下：1.将光标置于要插入可编辑区的位置。2.选择【插入】-【模板对象】-【可编辑区域】命令，打开“新建可编辑区域”对话框。3.在“名称”文本框中输入有关可编辑区域的说明。4.设置完成后，单击“确定”按钮，即可将选择的区域设为可编辑区域，如图所示5.创建可编辑区域后，状态栏上将出现标签项，如图所示。在其上单击可编辑区域按Delete键可以删除可编辑区域。另外，选择【修改】-【模板】-【删除模板标记】命令，也可删除可编辑区域。12.1.4应用模板创建并设置了模板后，即可应用模板。应用模板有两种方式，一种是从模板新建一个网页，另一种是将模板应用到有内容的文档中。1.从模板新建网页通过模板新建网页的具体操作步骤如下：（1）选择【文件】-【新建】命令，打开“新建文档”对话框。（2）在左侧的列表框中选择“模板中的页”选项，在“站点”列表框中选择模板所在的站点，在“站点的模板”列表框中选择用于创建文档的模板，如图所示。（3）单击“创建”按钮，即可创建一个应用此模板的页面。在模板中的可编辑区域输入内容后，保存网页即可。如图所示即为应用模板得到的页面效果。2.应用到有内容的文档将模板直接应用于已编辑了内容的文档的操作步骤如下：（1）选择【文件】-【新建】命令，打开“新建文档”对话框，新建一个HTML文档，输入文本或打开一个含有文本的文档（2）打开“模板”面板，在其中选择要应用的模板文件，然后单击左下角的“应用”按钮，弹出如图所示的“不一致区域名称”对话框。（3）在“将内容移到新区域”下拉列表中选择文档所插入的位置，单击“确定”按钮。3.页面与模板脱离使用了模板的文档总会收到模板的限制，这样对网页的制作会产生一定的显示。如果页面与模板脱离，用户可以任意修改可编辑区域和不可编辑区域的内容。如果要让使用了模板的文档脱离模板的控制，可按以下方法操作。（1）打开应用了模板的文档（2）选择【修改】-【模板】-【从模板冲分离】命令，则当前文档与模板分离。（3）此时文档中的不可编辑区域将自动变为可编辑区域。文档实际上已变为了普通文档，用户可以对文档的任何部分进行编辑。11.1.5管理模板在Dreamweaver中，可以对模板进行重命名、删除等操作。（1）重命名模板对模板文件进行重命名操作的方法有：在模板列表框中，单击要重新命名的模板项名称，使其处于可编辑状态，输入文本即可单击面板右上角的下拉按钮，在弹出的下拉菜单中选择【重命名】命令。选择要重新命名的模板项名称，单击鼠标右键，在弹出的快捷菜单选择【重命名】命令。2.删除模板删除模板的方法有：在模板列表框中，单击要删除的模板项，单击面板右下角的【删除】按钮。单击面板右上角的下拉按钮，在弹出的下拉菜单中选择【删除】命令。选择要删除的模板项名称，单击鼠标右键，在弹出的快捷菜单选择【删除】命令。12.2库如果说应用模板是为了避免重复创建网页的框架，那么应用库项目则是为了避免重复输入网页中的内容。所谓库项目，实际上就是文档中的某些内容的组合，如版权的声明、邮箱、地址、电话等。在dreamweaver中，可以将文档中的任意内容存储为库项目，在网页中定义了库项目后，它就可以在其他网页的任意位置被调用。12.2.1创建库项目在Dreamweaver中，库项目可以是文本、表格、表单等任意元素。创建库项目的操作步骤：在网页中选定要创建成库项目的元素，如图选择【修改】-【库】-【增加对象到库】命令，活在“资源”面板中单击“库”按钮，打开设置库属性的界面。单击“新建库项目”按钮，即可在“库”面板中辛苦库项目，如图。3.在“名称”列下输入库项目的名称，按enter键即可。12.2.2编辑库项目创建库项目后，还可以对库项目进行更新、重命名、删除等操作。下面分别介绍。1.库项目的更新（1）选择【修改】-【库】-【更新页面】命令，打开“更新页面”对话框，如图所示。（2）在“查看”下拉列表中选择需要的选项。（3）选择“库项目”复选框，可以更新站点中的所有库项目。（4）选择“模板”复选框，可以更新站点中的所有模板。（5）设置完成后，单击“开始”按钮即可更新库项目2.重命名库项目重命名库项目重命名库项目名称的操作：（1）在“库”面板上选择要重命名的库项目。（2）执行下列操作之一，输入新名称即可单击鼠标右键，在弹出的快捷菜单中选择【重命名】命令。单击“库”面板右上角的下拉按钮，从中选择【重命名】命令。单击库项目，库项目可变成可编辑状态。3.删除库项目删除库项目：在“库”面板上选择要删除的库项目单击面板右下角的“删除”按钮。12.2.3应用库项目创建好库项目后，即可在网页制作过程中对其进行应用。（1）打开一个网页，在“资源”面板中选择要应用的库项目，如图。（2）单击“库”面板左下角的“插入”按钮，即可将库项目应用到网页上。这时库元素以高亮显示，如图。2.脱离库项目在实际应用中，有时为了方便对库元素进行编辑，在其“属性”面板中单击“从源文件中分离”按钮，即可将库元素与库脱离，并且可以在文档中对库元素进行修改，如图所示。12.3上机实践-模板和库元素应用实例素材见：光盘\素材及效果\web\11\11-3.dwt效果见：光盘\素材及效果\web\11\11-4.dwt课堂作业：利用所学知识创建一个主题为“美图”的模板。