《网页设计教程》第8章：使用和制作插件

1、（时间：3次课，6学时）n教学提示：教学提示：本章首先介绍如何在本章首先介绍如何在Dreamweaver 8中运中运用已经拥有的插件，然后详细介绍如何制作插件。这些用已经拥有的插件，然后详细介绍如何制作插件。这些讲解都将以实例的方式进行，使读者明白如何快捷、有讲解都将以实例的方式进行，使读者明白如何快捷、有效地使用这一强大的网页制作扩展功能。效地使用这一强大的网页制作扩展功能。n教学目标：教学目标：插件的使用，使得插件的使用，使得Dreamweaver 8拥有无拥有无限的扩展性。限的扩展性。 n8.1 使用已有扩展插件使用已有扩展插件n8.2 自己动手制作插件自己动手制作插件n8.3 上上 机

2、机 实实 战战 u8.1.1 插件的安装插件的安装u8.1.2 利用插件实现网页背景颜色渐变效果利用插件实现网页背景颜色渐变效果u8.1.3 制作无边浏览器窗口制作无边浏览器窗口u8.1.4 网页打印控制网页打印控制u8.1.5 实现滚动的文字实现滚动的文字u8.1.6 使用扩展插件判断屏幕分辨率使用扩展插件判断屏幕分辨率n扩展插件可以用于拓展扩展插件可以用于拓展Dreamweaver的功能。的功能。Dreamweaver中的扩展插件主要有中的扩展插件主要有3类。类。l【命令命令】类扩展插件。命令类扩展插件可以用于在网页编辑的时候实现一定的功能，例如类扩展插件。命令类扩展插件可以用于在网页编辑

3、的时候实现一定的功能，例如设置表格的样式。设置表格的样式。l【对象对象】类扩展插件。对象类扩展插件用于在网页中插入元素，例如在网页中插入图片或类扩展插件。对象类扩展插件用于在网页中插入元素，例如在网页中插入图片或者者Quicktime 电影。电影。l【行为行为】类扩展插件。行为类扩展插件主要用于在网页上实现动态的交互功能，例如单击类扩展插件。行为类扩展插件主要用于在网页上实现动态的交互功能，例如单击图片后，可以弹出窗口。图片后，可以弹出窗口。n扩展插件还有一个最大的好处，就是基本上全部是免费的。下面就来探讨如何在扩展插件还有一个最大的好处，就是基本上全部是免费的。下面就来探讨如何在Dreamw

4、eaver中使用超强的扩展插件，领略第三方插件的魅力。中使用超强的扩展插件，领略第三方插件的魅力。n扩展插件的安装在以往的扩展插件的安装在以往的Dreamweaver版本中是比较麻烦的，要必须复制到版本中是比较麻烦的，要必须复制到Dreamweaver 的相应目录中才可以，往往要在硬盘中找很长时间才能找到相应的目录。的相应目录中才可以，往往要在硬盘中找很长时间才能找到相应的目录。删除扩展插件也很麻烦，如果不知道扩展插件的文件名，就休想把扩展插件从目录里面删除扩展插件也很麻烦，如果不知道扩展插件的文件名，就休想把扩展插件从目录里面“赶走赶走”。现在，在。现在，在Dreamweaver中已经拥有了

5、一个扩展插件的管理器中已经拥有了一个扩展插件的管理器Extension Manager。它可以实现扩展插件的全自动管理。这个管理器可以从。它可以实现扩展插件的全自动管理。这个管理器可以从Macromedia免费下免费下载得到。在载得到。在Dreamweaver中扩展插件的扩展名为中扩展插件的扩展名为“.mxp”。开发。开发Dreamweaver的的Macromedia 公司专门在自己的网页上开辟了公司专门在自己的网页上开辟了Macromedia Exchange专栏专门供用户专栏专门供用户交流自己的扩展插件。用户可以上传自己的扩展插件，也可以下载别人的扩展插件。交流自己的扩展插件。用户可以上传

6、自己的扩展插件，也可以下载别人的扩展插件。n下载安装了下载安装了Extension Manager以后，用户可以选择以后，用户可以选择【命命令令】|【扩展管理扩展管理】命令，如图命令，如图8.1所示，在所示，在Dreamweaver中启动如图中启动如图8.2所示的扩展管理器。所示的扩展管理器。n从图从图8.2中可以看出整个扩展管理器的操作界面分为中可以看出整个扩展管理器的操作界面分为3部分。部分。l上面是菜单栏。上面是菜单栏。l中间是相应的扩展插件名称。中间是相应的扩展插件名称。l下方是扩展插件相应的功能介绍。下方是扩展插件相应的功能介绍。n该操作界面非常简洁，功能也很清楚。如果是从该操作界面

7、非常简洁，功能也很清楚。如果是从Macromedia Exchange 下载的扩展插件还会自动地进行下载的扩展插件还会自动地进行安装。安装。图8.1 在Dreamweaver中打开扩展管理器n也可以下载其他扩展插件，在也可以下载其他扩展插件，在【Macromedia扩展管理器扩展管理器】窗口中手动安装扩窗口中手动安装扩展插件的具体操作如下。展插件的具体操作如下。n(1)在扩展管理器中单击在扩展管理器中单击【安装新扩展安装新扩展】按钮，或选择按钮，或选择【文件文件】|【扩展管理扩展管理】命令，如图命令，如图8.3所示，这时会打开一个如图所示，这时会打开一个如图8.4所示的对话框。所示的对话框。n

8、(2)从文件夹中选择相应的从文件夹中选择相应的.mxp文件，然后单击文件，然后单击【安装安装】按钮安装扩展插件。按钮安装扩展插件。这时会出现如图这时会出现如图8.5所示的对话框。所示的对话框。n(3)图图8.5所示为安装所示为安装“DW4 Page Background Color Changer”扩展插件扩展插件时出现的说明对话框。用户可以仔细看一下安装说明书，然后单击时出现的说明对话框。用户可以仔细看一下安装说明书，然后单击【接受接受】按按钮确定安装。钮确定安装。n(4)安装了扩展插件以后，系统会弹出一个如图安装了扩展插件以后，系统会弹出一个如图8.6所示的提示对话框，告诉所示的提示对话框

9、，告诉用户用户“网页背景颜色渐变网页背景颜色渐变”扩展插件已经安装好，并提示用户关闭并重起扩展插件已经安装好，并提示用户关闭并重起Dreamweaver 8，单击，单击【确定确定】按钮确定操作。按钮确定操作。n安装好扩展插件以后，在扩展管理器中，将多出一个扩展插件，并具有扩展插安装好扩展插件以后，在扩展管理器中，将多出一个扩展插件，并具有扩展插件的各项说明。而在件的各项说明。而在Dreamweaver中，命令类扩展插件会出现在中，命令类扩展插件会出现在【命令命令】菜菜单中；行为类扩展插件会出现在单中；行为类扩展插件会出现在【行为行为】面板中。对象类扩展插件出现在面板中。对象类扩展插件出现在【插

10、插入入】面板中。面板中。图8.3 安装扩展插件 图8.4 【选取要安装的扩展】对话框图8.5 安装扩展插件说明图8.6 安装完成提示对话框n认识了扩展管理器，接下来就可以使用精彩纷呈的第三方扩展插件了。认识了扩展管理器，接下来就可以使用精彩纷呈的第三方扩展插件了。n在在Dreamweaver中可以使用中可以使用“改变页面背景颜色改变页面背景颜色”扩展插件方便地实现网页扩展插件方便地实现网页背景颜色渐变效果。它的作用就是在一定的时间内，使浏览器的背景从一种颜背景颜色渐变效果。它的作用就是在一定的时间内，使浏览器的背景从一种颜色平滑地过渡到另一种颜色。色平滑地过渡到另一种颜色。n要使用要使用“改变

11、页面背景颜色改变页面背景颜色”扩展插件，其具体操作如下。扩展插件，其具体操作如下。n(1)如前面所述在如前面所述在【扩展管理器扩展管理器】中安装中安装“改变页面背景颜色改变页面背景颜色”扩展插件。扩展插件。n(2)重新启动重新启动Dreamweaver，打开，打开【行为行为】面板，单击面板，单击“+”按钮，就可以使按钮，就可以使用这个扩展插件了。在文档窗口中，选中整个文档附加行为，可以通过文档左用这个扩展插件了。在文档窗口中，选中整个文档附加行为，可以通过文档左下方状态行上的标记选择器选取下方状态行上的标记选择器选取标记。标记。n(3)如图如图8.7所示，选择所示，选择【窗口窗口】|【行为行为

12、】命令，打开如图命令，打开如图8.8所示的所示的【行为行为】面板。这时，选定对象的面板。这时，选定对象的HTML标签出现在标签出现在【行为行为】面板的标题栏中。面板的标题栏中。n(4)单击单击【行为行为】面板上的面板上的“+”按钮，在如图按钮，在如图8.9所示的动作菜单中选择所示的动作菜单中选择Studio VII | DW4 Page Background Color Changer (改变页面背景颜色改变页面背景颜色)命令。这时会出现如图命令。这时会出现如图8.10所示的对话框。所示的对话框。图8.7 打开【行为】面板 图8.8 【行为】面板图8.9 设置Page Background C

13、olor Changer动作图8.10 DW4 Page Background Color Changer对话框n(5) 在在Select a New Color for Page Background (选择一个新的背选择一个新的背景颜色景颜色)文本框中输入改变后的颜色。在这里选择文本框中输入改变后的颜色。在这里选择“#FF00FF”。n(6) 单击单击【确定确定】按钮确定操作。查看默认事件是否是用户需要的事件。按钮确定操作。查看默认事件是否是用户需要的事件。如果该事件不是用户所需的，可以从弹出的事件菜单中选择事件为如果该事件不是用户所需的，可以从弹出的事件菜单中选择事件为“onClick”

14、。n在使用了在使用了Page Background Color Changer扩展插件，并在扩展插件扩展插件，并在扩展插件【属性属性】面板中设置好属性后，用户可以观看页面背景颜色改变的页面面板中设置好属性后，用户可以观看页面背景颜色改变的页面效果。保存文档后在浏览器中预览效果。保存文档后在浏览器中预览 效果。再打开这个使用了效果。再打开这个使用了Page Background Color Changer扩展插件的网页时，用户可以观察到如图扩展插件的网页时，用户可以观察到如图8.11所示的页面效果。单击这个网页中的任意位置，这时网页的背景颜所示的页面效果。单击这个网页中的任意位置，这时网页的背景

15、颜色改变为如图色改变为如图8.12所示的背景颜色。所示的背景颜色。 图8.11 网页打开时的初始效果图8.12 网页背景颜色改变后的效果n在在Dreamweaver中可以使用中可以使用Open Chromeless Window(打开无边打开无边浏览器窗口浏览器窗口)扩展插件方便地制作无边浏览器窗口。扩展插件方便地制作无边浏览器窗口。n要使用要使用Open Chromeless Window(打开无边浏览器窗口打开无边浏览器窗口)扩展插件，扩展插件，其具体操作如下。其具体操作如下。n(1) 从网上下载的从网上下载的chromelessWin.mxp文件，获得该扩展插件。启动文件，获得该扩展插件

16、。启动扩展管理器，并安装扩展管理器，并安装chromelessWin.mxp扩展插件。扩展插件。n(2) 这是一个行为扩展插件，重新启动这是一个行为扩展插件，重新启动Dreamweaver，打开，打开【行为行为】面板，单击面板，单击“+”按钮，就可以使用这个扩展插件了。在文档窗口中，选按钮，就可以使用这个扩展插件了。在文档窗口中，选中要附加行为的对象中要附加行为的对象“信息信息 反馈反馈”。n(3) 如图如图8.7所示，选择所示，选择【窗口窗口】|【行为行为】命令，打开如图命令，打开如图8.8所示的所示的【行为行为】面板。这时，选定对象的面板。这时，选定对象的HTML标记出现在标记出现在【行为

17、行为】面板的标面板的标题栏中。题栏中。n(4) 单击单击【行为行为】面板上的面板上的“+”按钮，并从如图按钮，并从如图8.13所示的动作菜单所示的动作菜单中选择中选择Open Chromeless Window命令。这时会出现如图命令。这时会出现如图8.14所示的所示的对话框。对话框。图8.13 Open Chromeless Window动作 图8.14 Open Chromeless Window对话框 n(5) 在在Url to Display(显示网页指针地址显示网页指针地址)文本框中，输入要在该浏览文本框中，输入要在该浏览窗口中显示的窗口中显示的htm文件的路径及文件名文件的路径及文

18、件名“Mail_shili.htm”，也可以单，也可以单击后面的击后面的【浏览浏览】按钮在文件夹中查找选择。按钮在文件夹中查找选择。n(6) 在在Window Title(窗口标题窗口标题)文本框中，输入所要显示文件的窗口文本框中，输入所要显示文件的窗口的标题为的标题为“用户信息反馈用户信息反馈”。在。在Window Name(窗口名称窗口名称)文本框中，文本框中，输入所要显示文件的窗口的名称为输入所要显示文件的窗口的名称为“email”。n(7) 在在Window width(窗口宽度窗口宽度)和和Window Heigth(窗口高度窗口高度)两个两个文本框中，输入所要显示文件的窗口的宽度和

19、窗口的高度分别为文本框中，输入所要显示文件的窗口的宽度和窗口的高度分别为“433”和和“336”。n(8) 选中选中Open window in center screen(ie5+win)(在屏幕中心打在屏幕中心打开窗口开窗口(IE 5以上浏览器以上浏览器)复选框，则设置为使用复选框，则设置为使用Internet Explorer 5以上浏览器时在屏幕中心自动使窗口居中。以上浏览器时在屏幕中心自动使窗口居中。n(9) 在在Colors选项组中设置边框的颜色，如图选项组中设置边框的颜色，如图8.15所示。在所示。在Title Bar Font(标题栏字体标题栏字体)选项组中设置标题栏文本的格式

20、。选项组中设置标题栏文本的格式。n(10)单击单击【确定确定】按钮确定操作。查看默认事件是否是用户需要的事件。按钮确定操作。查看默认事件是否是用户需要的事件。如果该事件不是用户所需的，可以从弹出的事件菜单中选择事件为如果该事件不是用户所需的，可以从弹出的事件菜单中选择事件为“onclick”。n为对象添加了为对象添加了Open Chromeless Window(打开无边浏览器窗口打开无边浏览器窗口)扩展扩展插件，并在扩展插件的插件，并在扩展插件的【属性属性】面板中设置好扩展插件的属性后，可以面板中设置好扩展插件的属性后，可以在浏览器中预览设置的无边浏览器窗口效果。在浏览器中预览设置的无边浏览

21、器窗口效果。n单击添加有单击添加有Open Chromeless Window(打开无边浏览器窗口打开无边浏览器窗口)扩展插扩展插件的实例网站主页中导航栏的件的实例网站主页中导航栏的【信息反馈信息反馈】，可以观察到如图，可以观察到如图8.15所示所示的无边浏览器窗口效果。的无边浏览器窗口效果。图8.15 无边浏览器窗口预览效果n在在Dreamweaver中可以使用中可以使用Cross Browser Print(打印浏览器页面打印浏览器页面)扩展插件方便控制网页的打印。要使用扩展插件方便控制网页的打印。要使用Cross Browser Print(打印浏览打印浏览器页面器页面)扩展插件，其具体

22、操作如下。扩展插件，其具体操作如下。n(1) 从网上下载从网上下载PrintCrossBrowser.zip文件，获得该扩展插件。这个文件，获得该扩展插件。这个插件是一个超文本文件，我们不能使用插件管理器来安装这个插件。将插件是一个超文本文件，我们不能使用插件管理器来安装这个插件。将它解压到它解压到Dreamweaver 8的安装目录中的的安装目录中的 Configuration Behaviors Actions目录下。目录下。n(2) 这是一个行为扩展插件，重新启动这是一个行为扩展插件，重新启动Dreamweaver 8，打开，打开【行为行为】面板，单击面板，单击“+”按钮，就可以使用这个

23、插件了。在文档窗口中，选中要按钮，就可以使用这个插件了。在文档窗口中，选中要附加行为的对象，单击打开附加行为的对象，单击打开【行为行为】面板，单击面板，单击“+”按钮，就可以使用按钮，就可以使用这个扩展插件了。这个扩展插件了。n(3) 在文档窗口中，选中要添加打印按钮的位置。如图在文档窗口中，选中要添加打印按钮的位置。如图8.7所示，选择所示，选择【窗口窗口】|【行为行为】命令，打开如图命令，打开如图8.8所示的所示的【行为行为】面板。单击面板。单击【行行为为】面板上的面板上的“+”按钮，并在如图按钮，并在如图8.16所示的动作菜单中选择所示的动作菜单中选择Print(打印打印) | Cros

24、s Browser Print(打印浏览器页面打印浏览器页面)命令。这时会出命令。这时会出现如图现如图8.17所示的对话框。所示的对话框。图8.16 添加打印浏览器页面动作 图8.17 Cross Browser Print对话框n(4) 单击单击【确定确定】按钮确定操作。查看默认事件是否是用户按钮确定操作。查看默认事件是否是用户需要的事件。如果该事件不是用户所需的，可以从弹出的事需要的事件。如果该事件不是用户所需的，可以从弹出的事件菜单中选择事件为件菜单中选择事件为“onclick”。n在网页中添加了在网页中添加了Cross Browser Print(打印浏览器页面打印浏览器页面)扩扩展插

25、件，并在扩展插件的展插件，并在扩展插件的【属性属性】面板中设置好属性后，用面板中设置好属性后，用户可以在浏览器中预览添加打印链接的效果。保存文档后在户可以在浏览器中预览添加打印链接的效果。保存文档后在浏览器中预览效果如图浏览器中预览效果如图8.18所示。所示。n单击添加有单击添加有Cross Browser Print(打印浏览器页面打印浏览器页面)扩展插扩展插件的实例网站件的实例网站“网上书苑网上书苑”网页中网页中【打印打印】按钮，用户可以按钮，用户可以观察到如图观察到如图8.19所示的对话框。所示的对话框。图8.18 插入打印按钮的网页 图8.19 打印文件n在在Dreamweaver中可

26、以使用中可以使用Marquee(滚动文字滚动文字)扩展插件方便地实现大屏幕文字的扩展插件方便地实现大屏幕文字的 滚滚动。动。n要使用要使用Marquee (滚动文字滚动文字)扩展插件，其具体操作如下。扩展插件，其具体操作如下。n(1)从网上下载从网上下载Marquee.mxp文件，获得该扩展插件。启动扩展管理器，并安装文件，获得该扩展插件。启动扩展管理器，并安装Marquee.mxp扩展插件。扩展插件。n(2)这是一个对象扩展插件，重新启动这是一个对象扩展插件，重新启动Dreamweaver，打开，打开【插入插入】面板，可以在面板，可以在【常用常用】插入面板中看到这个扩展插件了，如图插入面板中

27、看到这个扩展插件了，如图8.20所示。所示。n(3)在文档窗口中，选中要添加滚动文字的位置。单击在文档窗口中，选中要添加滚动文字的位置。单击【插入插入】面板中的面板中的(Marquee滚滚动文字动文字)按钮，这时会出现如图按钮，这时会出现如图8.21所示的所示的Marquee对话框。对话框。n(4)在在Text(文本文本)文本框中，输入需要具有滚动效果的文字为文本框中，输入需要具有滚动效果的文字为“最新最新 Dreaweaver 8入入门指南门指南”。在。在Font(字体字体)下拉列表中，选择滚动文字的字体。在下拉列表中，选择滚动文字的字体。在Size(尺寸尺寸)下拉式列表中，下拉式列表中，选

28、择滚动文字的字体大小。利用选择滚动文字的字体大小。利用Font Color(字体颜色字体颜色)颜色框可以设置滚动文字的字体颜颜色框可以设置滚动文字的字体颜色。利用色。利用Bg Coloru(背景颜色背景颜色)颜色框可以设置滚动文字的背景颜色。颜色框可以设置滚动文字的背景颜色。n(5)在在Direction(方向方向)选项组中，设置滚动文字的滚动方向。在选项组中，设置滚动文字的滚动方向。在Speed(速度速度)选项组选项组中，设置滚动文字的滚动速度。在中，设置滚动文字的滚动速度。在Behaviour(运动方式运动方式)选项组中，设置滚动文字的运动选项组中，设置滚动文字的运动方式。在方式。在Ali

29、gn(对齐方式对齐方式)选项组中，设置滚动文字的对齐方式。选项组中，设置滚动文字的对齐方式。图8.20 单击【滚动文字】按钮图8.21 Marquee对话框n(6) 在在Size(尺寸尺寸)选项组中，设置滚动文字的大小尺寸。选择选项组中，设置滚动文字的大小尺寸。选择Repeat(循环循环)选项，则滚动文字将永远循环下去。不选择选项，则滚动文字将永远循环下去。不选择Repeat(循循环环)选项，则在选项，则在Continuously(重复次数重复次数)文本框中输入滚动文字滚动的文本框中输入滚动文字滚动的重复次数。重复次数。n(7) 单击单击【确定确定】按钮确定操作。按钮确定操作。n在网页中添加了

30、在网页中添加了Marquee(滚动文字滚动文字)扩展插件，并在扩展插件属性面板扩展插件，并在扩展插件属性面板中设置好扩展插件的属性后，用户可以在浏览器中预览滚动文字的效果。中设置好扩展插件的属性后，用户可以在浏览器中预览滚动文字的效果。保存文档后在浏览器中预览效果。保存文档后在浏览器中预览效果。n在打开这个添加了在打开这个添加了Marquee(滚动文字滚动文字)扩展插件的网页时，用户可以观扩展插件的网页时，用户可以观察到如图察到如图8.25所示的网页页面效果。这个主页的所示的网页页面效果。这个主页的【新书快讯新书快讯】下面的内下面的内容就是利用容就是利用Marquee(滚动文字滚动文字)扩展插

31、件制作的，滚动文字的方向是由扩展插件制作的，滚动文字的方向是由下往上。在图下往上。在图8.22(a)中，滚动的文字刚出现在浏览器窗口中，而在图中，滚动的文字刚出现在浏览器窗口中，而在图8.22(b)中，滚动的文字已经由下往上滚动到了这个滚动窗口的上边。中，滚动的文字已经由下往上滚动到了这个滚动窗口的上边。 (a) (b)图8.22 滚动文字页面效果n在在Dreamweaver中可以使用中可以使用Resolution Redirect(判断屏幕分辨率并判断屏幕分辨率并转向不同的页面转向不同的页面)扩展插件方便地实现根据访问者显示屏分辨率的不同扩展插件方便地实现根据访问者显示屏分辨率的不同而转向相

32、应的页面。而转向相应的页面。n要使用要使用Resolution Redirect(判断屏幕分辨率并转向不同的页面判断屏幕分辨率并转向不同的页面)扩展扩展插件，其具体操作如下。插件，其具体操作如下。n(1) 从网上下载从网上下载ResolutionRedirect.mxp文件，获得该扩展插件。启文件，获得该扩展插件。启动扩展管理器，并安装动扩展管理器，并安装ResolutionRedirect.mxp扩展插件。扩展插件。n(2) 这是一个命令扩展插件，重新启动这是一个命令扩展插件，重新启动Dreamweaver，即可在，即可在【命令命令】菜单中看见如图菜单中看见如图8.23所示的所示的Resol

33、ution Redirect (判断屏幕分辨率并判断屏幕分辨率并转向不同的页面转向不同的页面)命令。命令。n(3) 选择选择【命令命令】| Resolution Redirect (判断屏幕分辨率并转向不判断屏幕分辨率并转向不同的页面同的页面)命令。这时会出现如图命令。这时会出现如图8.24所示的所示的Resolution Redirect对对话框。话框。图8.23 Resolution Redirect命令 图8.24 判断屏幕分辨率并转向不同的页面对话框n(4) 在在【640】后面的文本框中，输入在后面的文本框中，输入在640480分辨率下转向页面分辨率下转向页面的指针和地址为的指针和地址

34、为“index1.htm”，也可以单击，也可以单击Browse(浏览浏览)按钮在文按钮在文件夹中查找文件。在件夹中查找文件。在【800】后面的文本框中，输入在后面的文本框中，输入在800600分辨分辨率下转向页面的指针和地址为率下转向页面的指针和地址为“index2.htm”，也可以单击，也可以单击Browse(浏浏览览)按钮在文件夹中查找文件。在按钮在文件夹中查找文件。在【1024】后面的文本框中，输入高后面的文本框中，输入高于于1024768分辨率时转向页面的指针和地址为分辨率时转向页面的指针和地址为“index3.htm”，也，也可以单击可以单击Browse(浏览浏览)按钮在文件夹中查找

35、文件。按钮在文件夹中查找文件。n(5) 单击单击Add Script(添加脚本添加脚本)按钮确定操作。按钮确定操作。n为页面添加了为页面添加了Resolution Redirect(判断屏幕分辨率并转向不同的页面判断屏幕分辨率并转向不同的页面)扩展插件，并在扩展插件的扩展插件，并在扩展插件的【属性属性】面板中设置好属性后，用户可以在面板中设置好属性后，用户可以在浏览器中测试不同分辨率下显示的页面是否正确。保存文档后在浏览器浏览器中测试不同分辨率下显示的页面是否正确。保存文档后在浏览器中预览效果。中预览效果。n当在当在800600分辨率下打开网页时，浏览器窗口中显示的网页为如图分辨率下打开网页时

36、，浏览器窗口中显示的网页为如图8.25所示的所示的 页面。当在页面。当在1024768分辨率下打开网页时，浏览器窗分辨率下打开网页时，浏览器窗口中显示的网页为如图口中显示的网页为如图8.26所示的页面。所示的页面。图8.25 在800600分辨率下打开网页 图8.26 在1024768分辨率下打开网页 u8.2.1 制作对象类扩展插件制作对象类扩展插件u8.2.2 制作命令类扩展插件制作命令类扩展插件u8.2.3 制作行为类扩展插件制作行为类扩展插件n前面介绍了利用网上现有插件实现网页中各前面介绍了利用网上现有插件实现网页中各种特效的方法，在这一节中我们将讲述如何种特效的方法，在这一节中我们将

37、讲述如何动手制作扩展插件。动手制作扩展插件。n用户可以制作一个具有动态效果，或者需要用户输入自己的参数的用户可以制作一个具有动态效果，或者需要用户输入自己的参数的【对象对象】扩展插件。这个扩展插件是一个用户可以定扩展插件。这个扩展插件是一个用户可以定制的高级表格框架，该表格框架的宽度、背景颜色、活动颜色都是用户自己定制的。制的高级表格框架，该表格框架的宽度、背景颜色、活动颜色都是用户自己定制的。n1. 设计扩展插件的实际html代码n本例的代码如下。本例的代码如下。ntable width=100% border=0 cellspacing=0 cellpadding=1 bgcolor=#0

38、00066 onMouseover=this.style.backgroundColor=#ff0000 onMouseOut=this.style.backgroundColor=#000066ntrntd tdntrntrntdntable width=100% border=0 cellspacing=0 cellpadding=0 bgcolor=#FFFFFFntrntd tdntrntablentdntrntablen2. 确定用户的输入参数n大表格的宽度大表格的宽度width=？n大表格的背景颜色大表格的背景颜色bgcolor=？n大表格的动态颜色大表格的动态颜色this.sty

39、le.backgroundColor=？n3. 设计DhtmlTableTitle.js文件n首先需要将上面的源代码转化为一个首先需要将上面的源代码转化为一个.js文件，它包含一个函数文件，它包含一个函数ObjectTag()即可，本例即可，本例的具体代码如下。的具体代码如下。nfunction objectTag()n表格宽度参数表格宽度参数nvar TTwidth=document.theForm.width.value;n宽度单位宽度单位nvar unitChoice = document.forms0.Units.selectedIndex;nvar TTunit=(unitChoic

40、e = 0)? % : );n表格背景颜色表格背景颜色nvar TTbgcolor=document.theForm.bgcolor.value;n表格动态背景颜色表格动态背景颜色nvar TTDbgcolor=document.theForm.Dbgcolor.value;n插入的具体代码插入的具体代码nvar TableTitle=;nTableTitle+=table width= + TTwidth + TTunit + border=0 cellspacing=0 cellpadding=1 bgcolor= + TTbgcolor + onMouseover=this.style.

41、backgroundColor= + TTDbgcolor + onMouseOut=this.style.backgroundColor= + TTbgcolor + ;nTableTitle+= tr;nTableTitle+= td td;nTableTitle+= tr;nTableTitle+= tr;nTableTitle+= td; nTableTitle+= table width=100% border=0 cellspacing=0 cellpadding=0 bgcolor=#FFFFFF;nTableTitle+= tr;nTableTitle+= td td;nTab

42、leTitle+= tr;nTableTitle+= table;nTableTitle+= td;nTableTitle+= tr;nTableTitle+=table;nreturn TableTitle;nn4. 设计DhtmlTableTitle.htm文件n设计扩展插件还需要一个.htm文件，用于传递参数。DhtmlTableTitle.htm 的源代码如下。nhtmlnheadntitleTableTitletitlenmeta http-equiv=Content-Type content=texthtml; charset=gb2312nscript src=TableTitl

43、e.jsscriptnheadnbodynform name=theForm method=post action=ntable width=250 border=0 cellspacing=0 cellpadding=0ntrntd width=81表格宽度：tdntd width=169 ninput type=text name=width size=5 maxlength=5nselect name=Units size=1noption selected%optionnoption像素像素optionnselectntdntrntr ntd width=81表格背景：表格背景：tdn

44、td width=169input type=text name=bgcolor size=8 maxlength=8input type=mmcolorbutton name=colorbutton1 onChange=this.form.bgcolor.value=this.form.colorbutton1.valuentdntrntr ntd width=81动态背景：动态背景：tdntd width=169input type=text name=Dbgcolor size=8 maxlength=8ninput type=mmcolorbutton name=colorbutton

45、 nonChange=this.form.Dbgcolor.value=this.form.colorbutton.valuentdntrntr align=rightntd colspan=2hr noshade width=100% size=2font face=Verdana, Arial, Helvetica, sans-serif size=22001.1.15brnDesign by meiyingbrnEmail:fonttdntrntablenformnbodynhtmln5. 制作图标n利用图像编辑工具利用图像编辑工具(比如比如Fireworks)制作一个图标。该文件名必须

46、与制作一个图标。该文件名必须与htm文件名相同，大小必须是文件名相同，大小必须是18px18px(px表示像素单位表示像素单位)，如果没，如果没有有.gif文件，文件，Dreamweaver将给出一个默认的将给出一个默认的【？】图标，为了美观图标，为了美观和方便，一般都要设计一个形象的图标。和方便，一般都要设计一个形象的图标。n6. 手动安装扩展插件n【对象对象】扩展插件一般需要扩展插件一般需要3个文件：个文件：.htm文件，文件，.js文件和文件和.gif文件。文件。现在现在3个文件都已经制作完成，在没有封装以前，用户不能使用扩展管个文件都已经制作完成，在没有封装以前，用户不能使用扩展管理器

47、来安装这个扩展插件，但是可以按照下列步骤手动安装扩展插件。理器来安装这个扩展插件，但是可以按照下列步骤手动安装扩展插件。n(1) 将将DhtmlTableTitle.js、DhtmlTableTitle.htm和和DhtmlTableTitle.gif这这3个文件复制到个文件复制到“Dreamweaver 8安装目录安装目录ConfigurationObjectsHTML”目录下，重新装入扩展插件。目录下，重新装入扩展插件。n(2) 重新运行重新运行Dreamweaver 8，即可在，即可在【插入插入】面板中的面板中的HTML类中类中看见看见DhtmlTableTitle按钮。如图按钮。如图8

48、.27所示。所示。n7. 封装扩展插件n虽然扩展插件是做成了，可是存在明显的不足之处：扩展插件没有封装，不方虽然扩展插件是做成了，可是存在明显的不足之处：扩展插件没有封装，不方便共享，并且安装不方便。便共享，并且安装不方便。n扩展插件在封装前，必须制作一个扩展插件在封装前，必须制作一个.mxi文件，用来定义扩展插件的几个安装特文件，用来定义扩展插件的几个安装特征：征：l安装环境。如安装环境。如Dreamweaver 4、Dreamweaver MX、Dreamweaver 8等。等。l安装目录。安装目录。l安装时的需要的文件。安装时的需要的文件。l定义扩展插件在菜单中的位置。定义扩展插件在菜单

49、中的位置。l扩展插件的说明。扩展插件的说明。n其实其实.mxi文件就是一个文件就是一个xml文件，只不过是按照文件，只不过是按照Macromedia公司的规定的格公司的规定的格式而已。式而已。n在封装前面的扩展插件时，需要安装在封装前面的扩展插件时，需要安装3个文件：个文件：DhtmlTableTitle.js、DhtmlTableTitle.htm和和DhtmlTableTitle.gif，目录是，目录是“Dreamweaver 8安安装目录装目录ConfigurationObjects HTML”。nDhtmlTableTitle.mxi具体的代码如下。具体的代码如下。nmacromedi

50、a-extension name=DhtmlTableTitle version=1.1 type=Objectn!- 注释：安装的产品列表注释：安装的产品列表 -nproductsnproduct name=Dreamweaver version=8 primary=true nproducts n!- 注释：作者描述注释：作者描述 -nauthor name= cigarliu n!- 注释：扩展插件描述注释：扩展插件描述 -ndescriptionn!CDATA这是一个动态的表格框架扩展插件这是一个动态的表格框架扩展插件ndescriptionn!- 注释：扩展插件的具体用法描述注释：扩

51、展插件的具体用法描述 -nui-accessn!CDATA该扩展插件可以在该扩展插件可以在Object浮动面板的浮动面板的HTML类的类的DhtmlTableTitle找到，也可以在找到，也可以在Insert菜单中找到菜单中找到nui-accessn!- 注释：安装文件定义注释：安装文件定义 -nfilesnfile name=DhtmlTableTitle.htm destination=$dreamweaver8 configuration Objects HTML nfile name=DhtmlTableTitle.gif destination=$dreamweaverconfigu

52、rationObjects HTML nfile name=DhtmlTableTitle.js destination=$dreamweaverconfigurationObjects HTML nfilesn!- 注释：配置注释：配置Dreamweaver环境，例如插入菜单项等等环境，例如插入菜单项等等 -nconfiguration-changesnmenu-insert insertAfter=DWMenu_Insert_Head skipSeparator=truenmenuitem name=DhtmlTableTitle file=ObjectsFormsDhtmlTableTi

53、tle.htm id=DhtmlTableTitle nseparator id=DhtmlTableTitle_Separator nmenu-insertnconfiguration-changesnmacromedia-extensionn将上述文件存为将上述文件存为DhtmlTableTitle.mxi，位置与，位置与DhtmlTableTitle.js、DhtmlTable Title.htm、DhtmlTableTitle.gif在同一个目录里，这样在同一个目录里，这样在封装时就不会找不到文件。在封装时就不会找不到文件。n.mxi文件制作完毕后，就可以用扩展管理器封装了，其具体操作

54、如下。文件制作完毕后，就可以用扩展管理器封装了，其具体操作如下。n(1) 在在Dreamweaver中，如图中，如图8.1所示，选择所示，选择【命令命令】|【扩展管理扩展管理】命令，启动如命令，启动如 图图8.2所示的扩展管理器。所示的扩展管理器。n(2) 在扩展管理器中选择在扩展管理器中选择【文件文件】|【将扩展打包将扩展打包】命令，如图命令，如图8.28所所示，这时会出现如图示，这时会出现如图8.29所示的对话框。在这个对话框中选择所示的对话框。在这个对话框中选择“DhtmlTableTitle.mxi”。n(3) 单击单击【确定确定】按钮，完成封装，在同一目录里生成了一个按钮，完成封装，

55、在同一目录里生成了一个DhtmlTableTitle.mxp文件，这样就制作完毕了。文件，这样就制作完毕了。图8.28 【将扩展打包】命令 图8.29 【选取要打包的扩展】对话框n【命令命令】扩展插件的功能相当强大，可以操作当前文档、所有打开的文档，甚扩展插件的功能相当强大，可以操作当前文档、所有打开的文档，甚至所有驱动器上的至所有驱动器上的Html文档，可以插入、删除、重排所有文档，可以插入、删除、重排所有Html标记的属性以标记的属性以及处理注释和文本等强大功能。及处理注释和文本等强大功能。n用户可以制作一个具有闪烁效果的状态栏的用户可以制作一个具有闪烁效果的状态栏的【命令命令】扩展插件。

56、扩展插件。n1. 设计扩展插件的实际html代码n具体具体Javascript代码如下。代码如下。nscript language=javascriptn!nvar FlashMsg = Command扩展插件编写实战扩展插件编写实战;nvar speed = 700;nvar control = 1;nfunction flash()nnif (control = 1)nnwindow.status=FlashMsg;ncontrol=0;n nelsennwindow.status=;ncontrol=1;nnsetTimeout(flash(),speed);nnwindow.onloa

57、d=flash;n -nscriptbn2. 源代码分析n首先，确定定制参数，需要定制的参数以下几个。首先，确定定制参数，需要定制的参数以下几个。nFlashMsg，状态栏的显示文本。，状态栏的显示文本。nspeed，闪烁速度，单位毫秒。，闪烁速度，单位毫秒。n其次，有一个其次，有一个window.onload=flash事件，用户必须在网页的事件，用户必须在网页的body标记中加上标记中加上onload=flash()事件。事件。n3. 设计FlashMessage.htm文件n本文件要完成的任务是传递两个参数：一个文本参数和一个时间参数，所以需要一个本文件要完成的任务是传递两个参数：一个文

58、本参数和一个时间参数，所以需要一个form标记，两个标记，两个input文本框，具体代码如下。文本框，具体代码如下。nhtmlnheadn!-注释：扩展插件名称注释：扩展插件名称-ntitleFlash Messagetitlenmeta http-equiv=Content-Type content=texthtml; charset=gb2312n!-Command扩展插件的扩展插件的javascript函数函数-nscript src=FlashNav.jsscriptnheadnbodyn!-注释：用于参数传递的注释：用于参数传递的form-nform name=theForm met

59、hod=post action=ntable width=300 border=0 cellspacing=0 cellpadding=0ntr ntd width=81显示字符串：显示字符串：tdntd width=169n!-注释：字符串输入框注释：字符串输入框-ninput type=text name=myMsg size=30ntdntrntr ntd width=81闪烁速度：闪烁速度：tdntd width=169n!-注释：闪烁速度输入框注释：闪烁速度输入框-ninput type=text name=mySpeed size=6n(单位：毫秒单位：毫秒) tdntrntr a

60、lign=right ntd colspan=2nhr noshade width=100% size=2n!-注释：版权栏注释：版权栏-nfont face=Verdana, Arial, Helvetica, sans-serif size=22001.1.15brnDesign by meiyingbrnEmail:fonttdntrntablenformnbodynhtmln4. 设计FlashMessage.js文件n本文件要完成的任务是接受用户的参数，插入一段本文件要完成的任务是接受用户的参数，插入一段Javascript代码，然代码，然后给后给body标记加上标记加上onload