使用库、模板和行为

1、本章将介绍库、模板和行为的基本本章将介绍库、模板和行为的基本知识以及使用库和模板制作网页、使知识以及使用库和模板制作网页、使用行为完善网页功能的基本方法。用行为完善网页功能的基本方法。第9章 使用库、模板和行为学习目标了解库和模板的概念。了解库和模板的概念。掌握创建和应用库项目的方法。掌握创建和应用库项目的方法。掌握创建和应用模板的方法。掌握创建和应用模板的方法。掌握使用行为的方法。掌握使用行为的方法。9.1 创建库项目 创建空白库项目创建空白库项目 从已有的网页创建库项目从已有的网页创建库项目 修改库项目修改库项目 删除库项目删除库项目9.1.1 创建空白库项目创建空白库项目通常有两种方法。

2、创建空白库项目通常有两种方法。 通过【资源】面板通过【资源】面板9.1.1 创建空白库项目 通过菜单栏中的【文件】通过菜单栏中的【文件】/ /【新建】命令【新建】命令9.1.2 从已有的网页创建库项目选择要保存为库项目的对象，选择【修改】选择要保存为库项目的对象，选择【修改】/ /【库】【库】/ /【增加对【增加对象到库】命令。象到库】命令。9.1.3 修改库项目库项目创建以后，根据需要适时地修改其内容是不可避免的。如库项目创建以后，根据需要适时地修改其内容是不可避免的。如果要修改库项目，需要直接打开库项目进行修改。打开库项目的方果要修改库项目，需要直接打开库项目进行修改。打开库项目的方式通常

3、有两种，一种是在【资源】面板的库项目列表中双击，打开式通常有两种，一种是在【资源】面板的库项目列表中双击，打开要修改的库项目，或先选中库项目并单击面板底部的要修改的库项目，或先选中库项目并单击面板底部的 按钮打开库按钮打开库项目，另一种是在引用库项目的网页中选中库项目，然后在【属性】项目，另一种是在引用库项目的网页中选中库项目，然后在【属性】面板中单击面板中单击 按钮打开库项目。按钮打开库项目。9.1.4 删除库项目如果要删除库项目，其操作步骤如下。如果要删除库项目，其操作步骤如下。1.1.打开【资源】面板并切换至【库】分类。打开【资源】面板并切换至【库】分类。2.2.在库项目列表中选中要删除

4、的库项目。在库项目列表中选中要删除的库项目。3.3.单击【资源】面板右下角的单击【资源】面板右下角的 按钮或直接在键盘按钮或直接在键盘上按上按DeleteDelete键即可。键即可。如果删除一个库项目，将无法进行恢复，所以应特别小如果删除一个库项目，将无法进行恢复，所以应特别小心。心。9.2 应用库项目 插入库项目插入库项目 更新应用了库项目的文档更新应用了库项目的文档 从源文件中分离库项目从源文件中分离库项目9.2.1 插入库项目库项目是可以在多个页面中重复使用的页面元素。库项目是可以在多个页面中重复使用的页面元素。1.1. 将光标置于文档中。将光标置于文档中。2.2. 打开【资源】面板并切

5、换至【库】分类，在列表框打开【资源】面板并切换至【库】分类，在列表框中选中要插入的库文件。中选中要插入的库文件。3.3. 单击【资源】面板底部的【插入】按钮（或者单击单击【资源】面板底部的【插入】按钮（或者单击鼠标右键，在弹出的快捷菜单中选择【插入】命令），将鼠标右键，在弹出的快捷菜单中选择【插入】命令），将库项目插入到网页文档中。库项目插入到网页文档中。9.2.2 更新应用了库项目的文档在库项目被修改且保存后，通常引用该库项目的网页会在库项目被修改且保存后，通常引用该库项目的网页会进行自动更新。如果没有进行自动更新，可以选择【修改】进行自动更新。如果没有进行自动更新，可以选择【修改】/ /【

6、库】【库】/ /【更新当前页】命令，对应用库项目的当前网页进【更新当前页】命令，对应用库项目的当前网页进行更新，或选择【更新页面】命令，打开【更新页面】对话行更新，或选择【更新页面】命令，打开【更新页面】对话框，进行参数设置后更新相关页面。框，进行参数设置后更新相关页面。9.2.3 从源文件中分离库项目一旦在网页文档中应用了库项目，如果希望其成为网页一旦在网页文档中应用了库项目，如果希望其成为网页文档的一部分，这就需要将库项目从源文件中分离出来。分文档的一部分，这就需要将库项目从源文件中分离出来。分离后，就可以对这部分内容进行编辑了，因为它已经是网页离后，就可以对这部分内容进行编辑了，因为它已

7、经是网页的一部分，与库项目再没有联系。的一部分，与库项目再没有联系。选中库项目，此时显示库项目的【属性】面板，在【属选中库项目，此时显示库项目的【属性】面板，在【属性】面板中单击性】面板中单击 按钮从源文件中分离库按钮从源文件中分离库项目。项目。9.3 创建模板创建空白模板创建空白模板添加模板对象添加模板对象将现有网页保存为模板将现有网页保存为模板删除模板删除模板9.3.1创建空白模板创建空白模板通常有两种方法：一种是通过【资源】面板；创建空白模板通常有两种方法：一种是通过【资源】面板；另一种是通过菜单栏中的【文件】另一种是通过菜单栏中的【文件】/【新建】命令。【新建】命令。9.3.2添加模板

8、对象在模板中，比较常用的模板对象有可编辑区域、重复表在模板中，比较常用的模板对象有可编辑区域、重复表格和重复区域。格和重复区域。可编辑区域是指可以对其进行添加、修改和删除网页元可编辑区域是指可以对其进行添加、修改和删除网页元素等操作的区域。素等操作的区域。选择【插入记录】选择【插入记录】/【模板对象】【模板对象】/【可编可编辑区域辑区域】命令可以插入可编辑区域】命令可以插入可编辑区域. 可编辑区域在模板中由高亮显示的矩形边框围绕，该边可编辑区域在模板中由高亮显示的矩形边框围绕，该边框使用在首选参数中设置的高亮颜色。该区域左上角的选项框使用在首选参数中设置的高亮颜色。该区域左上角的选项卡显示该区

9、域的名称。卡显示该区域的名称。9.3.2添加模板对象重复表格是指包含重复行的表格格式的可编辑区域，可重复表格是指包含重复行的表格格式的可编辑区域，可以定义表格的属性并设置哪些单元格可编辑。重复表格可以以定义表格的属性并设置哪些单元格可编辑。重复表格可以被包含在重复区域内，但不能被包含在可编辑区域内。另外，被包含在重复区域内，但不能被包含在可编辑区域内。另外，不能将选定的区域变成重复表格，只能插入重复表格。选择不能将选定的区域变成重复表格，只能插入重复表格。选择【插入记录】【插入记录】/【模板对象】【模板对象】/【重复表格】命令，打开【重【重复表格】命令，打开【重复表格】对话框复表格】对话框可以

10、插入可以插入重复表格重复表格. 9.3.2添加模板对象重复区域是指可以在模板中复制任意次数的指定区域。重复区域是指可以在模板中复制任意次数的指定区域。重复区域不是可编辑区域，若要使重复区域中的内容可编辑，重复区域不是可编辑区域，若要使重复区域中的内容可编辑，必须在重复区域内插入可编辑区域或重复表格。重复区域可必须在重复区域内插入可编辑区域或重复表格。重复区域可以包含整个表格或单独的表格单元格。如果选定以包含整个表格或单独的表格单元格。如果选定“”标标签，则重复区域中包括单元格周围的区域，如果未选定，则签，则重复区域中包括单元格周围的区域，如果未选定，则重复区域将只包括单元格中的内容。在一个重复

11、区域内可以重复区域将只包括单元格中的内容。在一个重复区域内可以继续插入另一个重复区域。整个被定义为重复区域的部分都继续插入另一个重复区域。整个被定义为重复区域的部分都可以被重复使用。选择【插入记录】可以被重复使用。选择【插入记录】/【模板对象】【模板对象】/【重复【重复区域】命令，区域】命令，可以插入可以插入重复区域重复区域。9.3.3将现有网页保存为模板除了直接创建模板外，也可以将现有网页保存为模板。方法是，除了直接创建模板外，也可以将现有网页保存为模板。方法是，首先打开一个已有内容的网页文档，根据实际需要在网页中选择首先打开一个已有内容的网页文档，根据实际需要在网页中选择网页元素，并将其转

12、换为模板对象，然后选择【文件】网页元素，并将其转换为模板对象，然后选择【文件】/【另存为【另存为模板】命令将文档保存为模板。模板】命令将文档保存为模板。 9.3.4 删除模板在【资源】面板的【模板】分类中选择要删除在【资源】面板的【模板】分类中选择要删除的模板，然后单击面板右下角的的模板，然后单击面板右下角的 按钮，或在键盘按钮，或在键盘上按上按Delete键即可将模板删除。键即可将模板删除。9.4 应用模板使用模板创建网页使用模板创建网页更新应用了模板的文档更新应用了模板的文档将网页从模板中分离将网页从模板中分离9.4.1 使用模板创建网页选择【文件】选择【文件】/【新建】命令，打开【新建文

13、档】对话框，【新建】命令，打开【新建文档】对话框，选择【模板中的页】选择【模板中的页】/【chap11】/【index-1】选项】选项.9.4.1 使用模板创建网页在已存在页面中应用模板。方法是：首先打开要应用模板在已存在页面中应用模板。方法是：首先打开要应用模板的网页文档，然后选择【修改】的网页文档，然后选择【修改】/【模板】【模板】/【应用模板到页】【应用模板到页】命令，或在【资源】面板的模板列表框中选中要应用的模板，命令，或在【资源】面板的模板列表框中选中要应用的模板，再单击面板底部的再单击面板底部的 按钮，即可应用模板。如果已打开的按钮，即可应用模板。如果已打开的文档是一个空白文档，文

14、档将直接应用模板；如果打开的文档文档是一个空白文档，文档将直接应用模板；如果打开的文档是一个有内容的文档，这时通常会打开一个【不一致的区域名是一个有内容的文档，这时通常会打开一个【不一致的区域名称】对话框，该对话框会提示读者将文档中的已有内容移到模称】对话框，该对话框会提示读者将文档中的已有内容移到模板的相应区域。板的相应区域。9.4.2 更新应用了模板的文档通过模板生成的网页，在更新模板时可以通过模板生成的网页，在更新模板时可以对站点中所有应用同一模板的网页进行批量更对站点中所有应用同一模板的网页进行批量更新，这就要求在【从模板新建】对话框中勾选新，这就要求在【从模板新建】对话框中勾选【当模

15、板改变时更新页面】复选框。如果页面【当模板改变时更新页面】复选框。如果页面没有更新，可以选择【修改】没有更新，可以选择【修改】/【模板】菜单中【模板】菜单中的【更新当前页】或【更新页面】命令，对由的【更新当前页】或【更新页面】命令，对由模板生成的网页进行更新。模板生成的网页进行更新。9.4.3 将网页从模板中分离如果一个文档应用了模板，而又想在文档中直接修改属于如果一个文档应用了模板，而又想在文档中直接修改属于模板部分的内容，就必须先将文档与模板分离。但是将它们分模板部分的内容，就必须先将文档与模板分离。但是将它们分离后，再更新模板时，文档不会再随之更新了。选择【修改】离后，再更新模板时，文档

16、不会再随之更新了。选择【修改】/【模板】【模板】/【从模板中分离】命令，将网页脱离模板。脱离模板【从模板中分离】命令，将网页脱离模板。脱离模板后，模板中的内容将自动变成网页中的内容，网页与模板不再后，模板中的内容将自动变成网页中的内容，网页与模板不再有关联，用户可以在文档中的任意区域进行编辑。有关联，用户可以在文档中的任意区域进行编辑。9.5 使用行为 弹出信息弹出信息 打开浏览器窗口打开浏览器窗口 调用调用JavaScriptJavaScript 改变属性改变属性 交换图像交换图像 拖动拖动APAP元素元素 SprySpry效果效果9.5 使用行为行为是行为是Dreamweaver CS3D

17、reamweaver CS3的特色功能之一，使用行为可以允许浏览的特色功能之一，使用行为可以允许浏览者与网页进行简单的交互，从而以多种方式修改页面或引发某些任者与网页进行简单的交互，从而以多种方式修改页面或引发某些任务的执行。行为是由事件（务的执行。行为是由事件（EventEvent）触发的动作（）触发的动作（ActionAction），因此行），因此行为的基本元素有两个：事件和动作。事件是浏览器产生的有效信息，为的基本元素有两个：事件和动作。事件是浏览器产生的有效信息，也就是访问者对网页进行的操作。例如，当访问者将鼠标光标移到也就是访问者对网页进行的操作。例如，当访问者将鼠标光标移到一个链接

18、上，浏览器就会为这个链接产生一个一个链接上，浏览器就会为这个链接产生一个“onMouseOver”onMouseOver”（鼠（鼠标经过）事件。然后，浏览器会检查当事件为这个链接产生时，是标经过）事件。然后，浏览器会检查当事件为这个链接产生时，是否有一些代码需要执行，如果有就执行这段代码，这就是动作。动否有一些代码需要执行，如果有就执行这段代码，这就是动作。动作是由作是由JavaScriptJavaScript代码组成的，这些代码执行特定的任务。代码组成的，这些代码执行特定的任务。9.5 使用行为在文档窗口中，选择【窗口】在文档窗口中，选择【窗口】/ /【行为】命令，可以打开【行为】【行为】命

19、令，可以打开【行为】面板。面板。9.5.1 弹出信息【弹出信息】行为将显示一个指定的【弹出信息】行为将显示一个指定的JavaScriptJavaScript提示信提示信息框。息框。9.5.2 打开浏览器窗口使用【打开浏览器窗口】行为将打开一个新的浏览器窗使用【打开浏览器窗口】行为将打开一个新的浏览器窗口，在其中显示所指定的网页文档。设计者可以指定这个新口，在其中显示所指定的网页文档。设计者可以指定这个新窗口的属性，包括窗口尺寸、是否可以调节大小、是否有菜窗口的属性，包括窗口尺寸、是否可以调节大小、是否有菜单栏等。单栏等。9.5.3 调用JavaScript【调用【调用JavaScriptJav

20、aScript】行为能够让设计者使用【行为】面】行为能够让设计者使用【行为】面板指定一个自定义功能，或者当一个事件发生时执行一段板指定一个自定义功能，或者当一个事件发生时执行一段JavaScriptJavaScript代码。设计者可以自己编写代码。设计者可以自己编写JavaScriptJavaScript代码。代码。9.5.4 改变属性【改变属性】行为用来改变网页元素的属性值，如文本【改变属性】行为用来改变网页元素的属性值，如文本的大小、字体，层的可见性，背景色，图片的来源以及表单的大小、字体，层的可见性，背景色，图片的来源以及表单的执行等。的执行等。9.5.5 交换图像【交换图像】行为可以将

21、一个图像替换为另一个图像，【交换图像】行为可以将一个图像替换为另一个图像，这是通过改变图像的这是通过改变图像的“src”src”属性来实现的。在前一节中可属性来实现的。在前一节中可以通过为图像添加【改变属性】行为来改变图像的以通过为图像添加【改变属性】行为来改变图像的“src”src”属性，不过【交换图像】行为更加复杂一些，可以使用这个属性，不过【交换图像】行为更加复杂一些，可以使用这个行为来创建翻转的按钮及其他图像效果（包括同时替换多个行为来创建翻转的按钮及其他图像效果（包括同时替换多个图像）。图像）。9.5.6 拖动AP元素如果使用了【拖动如果使用了【拖动APAP元素】行为，就可以制作出能

22、让浏元素】行为，就可以制作出能让浏览者任意拖动的对象。不过，在开始制作前，需要在页面中览者任意拖动的对象。不过，在开始制作前，需要在页面中先添加先添加AP DivAP Div，并在其中添加图像或文本。，并在其中添加图像或文本。9.5.7 Spry效果“Spry“Spry效果效果”是视觉增强功能，几乎可以将它们应用于使用是视觉增强功能，几乎可以将它们应用于使用JavaScriptJavaScript的的HTMLHTML页面上的所有元素。设置该效果通常可以在一段页面上的所有元素。设置该效果通常可以在一段时间内高亮显示信息、创建动画过渡或者以可视方式修改页面元素。时间内高亮显示信息、创建动画过渡或者

23、以可视方式修改页面元素。可以将效果直接应用于可以将效果直接应用于HTMLHTML元素，而无需其他自定义标签。元素，而无需其他自定义标签。要使某个元素应用效果，该元素必须处于当前选定状态，或者要使某个元素应用效果，该元素必须处于当前选定状态，或者必须具有一个必须具有一个IdId。例如，如果要向当前未选定的。例如，如果要向当前未选定的DivDiv标签应用高亮标签应用高亮显示效果，该显示效果，该DivDiv必须具有一个有效的必须具有一个有效的IdId值。如果该元素尚且没有值。如果该元素尚且没有有效的有效的IdId值，需要在值，需要在HTMLHTML代码中添加一个。代码中添加一个。利用该效果可以修改元素的不透明度、缩放比例、位置和样式利用该效果可以修改元素的不透明度、缩放比例、位置和样式属性（如背景颜色），也可以组合两个或多个属性来创建有趣的视属性（如背景颜色），也可以组合两个或多个属性来创建有趣的视觉效果。觉效果。 由于这些效果都基于由于这些效果都基于SprySpry，因此，当用户单击应用了效果的，因此，当用户单击应用了效果的对象