网页设计教程-第8章

1、第8,（时间：3次课，6学时）,第8章 使用和制作插件,教学提示：本章首先介绍如何在dreamweaver 8中运用已经拥有的插件，然后详细介绍如何制作插件。这些讲解都将以实例的方式进行，使读者明白如何快捷、有效地使用这一强大的网页制作扩展功能。 教学目标：插件的使用，使得dreamweaver 8拥有无限的扩展性。,第8章 使用和制作插件,8.1 使用已有扩展插件 8.2 自己动手制作插件 8.3 上 机 实 战,8.1 使用已有扩展插件,8.1.1 插件的安装 8.1.2 利用插件实现网页背景颜色渐变效果 8.1.3 制作无边浏览器窗口 8.1.4 网页打印控制 8.1.5 实现滚动的文字

2、 8.1.6 使用扩展插件判断屏幕分辨率,8.1 使用已有扩展插件,扩展插件可以用于拓展dreamweaver的功能。dreamweaver中的扩展插件主要有3类。 【命令】类扩展插件。命令类扩展插件可以用于在网页编辑的时候实现一定的功能，例如设置表格的样式。 【对象】类扩展插件。对象类扩展插件用于在网页中插入元素，例如在网页中插入图片或者quicktime 电影。 【行为】类扩展插件。行为类扩展插件主要用于在网页上实现动态的交互功能，例如单击图片后，可以弹出窗口。 扩展插件还有一个最大的好处，就是基本上全部是免费的。下面就来探讨如何在dreamweaver中使用超强的扩展插件，领略第三方插件

3、的魅力。 扩展插件的安装在以往的dreamweaver版本中是比较麻烦的，要必须复制到dreamweaver 的相应目录中才可以，往往要在硬盘中找很长时间才能找到相应的目录。删除扩展插件也很麻烦，如果不知道扩展插件的文件名，就休想把扩展插件从目录里面“赶走”。现在，在dreamweaver中已经拥有了一个扩展插件的管理器extension manager。它可以实现扩展插件的全自动管理。这个管理器可以从macromedia免费下载得到。在dreamweaver中扩展插件的扩展名为“.mxp”。开发dreamweaver的macromedia 公司专门在自己的网页上开辟了macromedia e

4、xchange专栏专门供用户交流自己的扩展插件。用户可以上传自己的扩展插件，也可以下载别人的扩展插件。,8.1.1 插件的安装,下载安装了extension manager以后，用户可以选择【命令】|【扩展管理】命令，如图8.1所示，在dreamweaver中启动如图8.2所示的扩展管理器。 从图8.2中可以看出整个扩展管理器的操作界面分为3部分。 上面是菜单栏。 中间是相应的扩展插件名称。 下方是扩展插件相应的功能介绍。 该操作界面非常简洁，功能也很清楚。如果是从macromedia exchange 下载的扩展插件还会自动地进行安装。,8.1.1 插件的安装,图8.1 在dreamweav

5、er中打开扩展管理器,8.1.1 插件的安装,8.1.1 插件的安装,也可以下载其他扩展插件，在【macromedia扩展管理器】窗口中手动安装扩展插件的具体操作如下。 (1)在扩展管理器中单击【安装新扩展】按钮，或选择【文件】|【扩展管理】命令，如图8.3所示，这时会打开一个如图8.4所示的对话框。 (2)从文件夹中选择相应的.mxp文件，然后单击【安装】按钮安装扩展插件。这时会出现如图8.5所示的对话框。 (3)图8.5所示为安装“dw4 page background color changer”扩展插件时出现的说明对话框。用户可以仔细看一下安装说明书，然后单击【接受】按钮确定安装。 (

6、4)安装了扩展插件以后，系统会弹出一个如图8.6所示的提示对话框，告诉用户“网页背景颜色渐变”扩展插件已经安装好，并提示用户关闭并重起dreamweaver 8，单击【确定】按钮确定操作。 安装好扩展插件以后，在扩展管理器中，将多出一个扩展插件，并具有扩展插件的各项说明。而在dreamweaver中，命令类扩展插件会出现在【命令】菜单中；行为类扩展插件会出现在【行为】面板中。对象类扩展插件出现在【插入】面板中。,8.1.1 插件的安装,图8.3 安装扩展插件 图8.4 【选取要安装的扩展】对话框,8.1.1 插件的安装,图8.5 安装扩展插件说明,8.1.1 插件的安装,图8.6 安装完成提示

7、对话框,8.1.2 利用插件实现网页背景颜色渐变效果,认识了扩展管理器，接下来就可以使用精彩纷呈的第三方扩展插件了。 在dreamweaver中可以使用“改变页面背景颜色”扩展插件方便地实现网页背景颜色渐变效果。它的作用就是在一定的时间内，使浏览器的背景从一种颜色平滑地过渡到另一种颜色。 要使用“改变页面背景颜色”扩展插件，其具体操作如下。 (1)如前面所述在【扩展管理器】中安装“改变页面背景颜色”扩展插件。 (2)重新启动dreamweaver，打开【行为】面板，单击“+”按钮，就可以使用这个扩展插件了。在文档窗口中，选中整个文档附加行为，可以通过文档左下方状态行上的标记选择器选取标记。 (

8、3)如图8.7所示，选择【窗口】|【行为】命令，打开如图8.8所示的【行为】面板。这时，选定对象的html标签出现在【行为】面板的标题栏中。 (4)单击【行为】面板上的“+”按钮，在如图8.9所示的动作菜单中选择studio vii | dw4 page background color changer (改变页面背景颜色)命令。这时会出现如图8.10所示的对话框。,8.1.2 利用插件实现网页背景颜色渐变效果,图8.7 打开【行为】面板 图8.8 【行为】面板,8.1.2 利用插件实现网页背景颜色渐变效果,图8.9 设置page background color changer动作,8.1.

9、2 利用插件实现网页背景颜色渐变效果,图8.10 dw4 page background color changer对话框,8.1.2 利用插件实现网页背景颜色渐变效果,(5)在select a new color for page background (选择一个新的背景颜色)文本框中输入改变后的颜色。在这里选择“#ff00ff”。 (6)单击【确定】按钮确定操作。查看默认事件是否是用户需要的事件。如果该事件不是用户所需的，可以从弹出的事件菜单中选择事件为“onclick”。 在使用了page background color changer扩展插件，并在扩展插件【属性】面板中设置好属性后，

10、用户可以观看页面背景颜色改变的页面效果。保存文档后在浏览器中预览 效果。再打开这个使用了page background color changer扩展插件的网页时，用户可以观察到如图8.11所示的页面效果。单击这个网页中的任意位置，这时网页的背景颜色改变为如图8.12所示的背景颜色。,8.1.2 利用插件实现网页背景颜色渐变效果,图8.11 网页打开时的初始效果,8.1.2 利用插件实现网页背景颜色渐变效果,图8.12 网页背景颜色改变后的效果,8.1.3 制作无边浏览器窗口,在dreamweaver中可以使用open chromeless window(打开无边浏览器窗口)扩展插件方便地制作

11、无边浏览器窗口。 要使用open chromeless window(打开无边浏览器窗口)扩展插件，其具体操作如下。 (1)从网上下载的chromelesswin.mxp文件，获得该扩展插件。启动扩展管理器，并安装chromelesswin.mxp扩展插件。 (2)这是一个行为扩展插件，重新启动dreamweaver，打开【行为】面板，单击“+”按钮，就可以使用这个扩展插件了。在文档窗口中，选中要附加行为的对象“信息 反馈”。 (3)如图8.7所示，选择【窗口】|【行为】命令，打开如图8.8所示的【行为】面板。这时，选定对象的html标记出现在【行为】面板的标题栏中。 (4)单击【行为】面板上

12、的“+”按钮，并从如图8.13所示的动作菜单中选择open chromeless window命令。这时会出现如图8.14所示的对话框。,8.1.3 制作无边浏览器窗口,图8.13 open chromeless window动作 图8.14 open chromeless window对话框,8.1.3 制作无边浏览器窗口,(5)在url to display(显示网页指针地址)文本框中，输入要在该浏览窗口中显示的htm文件的路径及文件名“mail_shili.htm”，也可以单击后面的【浏览】按钮在文件夹中查找选择。 (6)在window title(窗口标题)文本框中，输入所要显示文件的

13、窗口的标题为“用户信息反馈”。在window name(窗口名称)文本框中，输入所要显示文件的窗口的名称为“email”。 (7)在window width(窗口宽度)和window heigth(窗口高度)两个文本框中，输入所要显示文件的窗口的宽度和窗口的高度分别为“433”和“336”。 (8)选中open window in center screen(ie5+win)(在屏幕中心打开窗口(ie 5以上浏览器)复选框，则设置为使用internet explorer 5以上浏览器时在屏幕中心自动使窗口居中。,8.1.3 制作无边浏览器窗口,(9)在colors选项组中设置边框的颜色，如图8

14、.15所示。在title bar font(标题栏字体)选项组中设置标题栏文本的格式。 (10)单击【确定】按钮确定操作。查看默认事件是否是用户需要的事件。如果该事件不是用户所需的，可以从弹出的事件菜单中选择事件为“onclick”。 为对象添加了open chromeless window(打开无边浏览器窗口)扩展插件，并在扩展插件的【属性】面板中设置好扩展插件的属性后，可以在浏览器中预览设置的无边浏览器窗口效果。 单击添加有open chromeless window(打开无边浏览器窗口)扩展插件的实例网站主页中导航栏的【信息反馈】，可以观察到如图8.15所示的无边浏览器窗口效果。,8.1

15、.3 制作无边浏览器窗口,图8.15 无边浏览器窗口预览效果,8.1.4 网页打印控制,在dreamweaver中可以使用cross browser print(打印浏览器页面)扩展插件方便控制网页的打印。要使用cross browser print(打印浏览器页面)扩展插件，其具体操作如下。 (1)从网上下载printcrossbrowser.zip文件，获得该扩展插件。这个插件是一个超文本文件，我们不能使用插件管理器来安装这个插件。将它解压到dreamweaver 8的安装目录中的 configuration behaviors actions目录下。 (2)这是一个行为扩展插件，重新启动

16、dreamweaver 8，打开【行为】面板，单击“+”按钮，就可以使用这个插件了。在文档窗口中，选中要附加行为的对象，单击打开【行为】面板，单击“+”按钮，就可以使用这个扩展插件了。 (3)在文档窗口中，选中要添加打印按钮的位置。如图8.7所示，选择【窗口】|【行为】命令，打开如图8.8所示的【行为】面板。单击【行为】面板上的“+”按钮，并在如图8.16所示的动作菜单中选择print(打印) | cross browser print(打印浏览器页面)命令。这时会出现如图8.17所示的对话框。,8.1.4 网页打印控制,图8.16 添加打印浏览器页面动作 图8.17 cross browse

17、r print对话框,8.1.4 网页打印控制,(4)单击【确定】按钮确定操作。查看默认事件是否是用户需要的事件。如果该事件不是用户所需的，可以从弹出的事件菜单中选择事件为“onclick”。 在网页中添加了cross browser print(打印浏览器页面)扩展插件，并在扩展插件的【属性】面板中设置好属性后，用户可以在浏览器中预览添加打印链接的效果。保存文档后在浏览器中预览效果如图8.18所示。 单击添加有cross browser print(打印浏览器页面)扩展插件的实例网站“网上书苑”网页中【打印】按钮，用户可以观察到如图8.19所示的对话框。,8.1.4 网页打印控制,图8.18

18、 插入打印按钮的网页,8.1.4 网页打印控制,图8.19 打印文件,8.1.5 实现滚动的文字,在dreamweaver中可以使用marquee(滚动文字)扩展插件方便地实现大屏幕文字的 滚动。 要使用marquee (滚动文字)扩展插件，其具体操作如下。 (1)从网上下载marquee.mxp文件，获得该扩展插件。启动扩展管理器，并安装marquee.mxp扩展插件。 (2)这是一个对象扩展插件，重新启动dreamweaver，打开【插入】面板，可以在【常用】插入面板中看到这个扩展插件了，如图8.20所示。 (3)在文档窗口中，选中要添加滚动文字的位置。单击【插入】面板中的(marquee

19、滚动文字)按钮，这时会出现如图8.21所示的marquee对话框。 (4)在text(文本)文本框中，输入需要具有滚动效果的文字为“最新 dreaweaver 8入门指南”。在font(字体)下拉列表中，选择滚动文字的字体。在size(尺寸)下拉式列表中，选择滚动文字的字体大小。利用font color(字体颜色)颜色框可以设置滚动文字的字体颜色。利用bg coloru(背景颜色)颜色框可以设置滚动文字的背景颜色。 (5)在direction(方向)选项组中，设置滚动文字的滚动方向。在speed(速度)选项组中，设置滚动文字的滚动速度。在behaviour(运动方式)选项组中，设置滚动文字的运

20、动方式。在align(对齐方式)选项组中，设置滚动文字的对齐方式。,8.1.5 实现滚动的文字,图8.20 单击【滚动文字】按钮,8.1.5 实现滚动的文字,图8.21 marquee对话框,8.1.5 实现滚动的文字,(6)在size(尺寸)选项组中，设置滚动文字的大小尺寸。选择repeat(循环)选项，则滚动文字将永远循环下去。不选择repeat(循环)选项，则在continuously(重复次数)文本框中输入滚动文字滚动的重复次数。 (7)单击【确定】按钮确定操作。 在网页中添加了marquee(滚动文字)扩展插件，并在扩展插件属性面板中设置好扩展插件的属性后，用户可以在浏览器中预览滚动

21、文字的效果。保存文档后在浏览器中预览效果。 在打开这个添加了marquee(滚动文字)扩展插件的网页时，用户可以观察到如图8.25所示的网页页面效果。这个主页的【新书快讯】下面的内容就是利用marquee(滚动文字)扩展插件制作的，滚动文字的方向是由下往上。在图8.22(a)中，滚动的文字刚出现在浏览器窗口中，而在图8.22(b)中，滚动的文字已经由下往上滚动到了这个滚动窗口的上边。,8.1.5 实现滚动的文字,(a) (b),图8.22 滚动文字页面效果,8.1.6 使用扩展插件判断屏幕分辨率,在dreamweaver中可以使用resolution redirect(判断屏幕分辨率并转向不同

22、的页面)扩展插件方便地实现根据访问者显示屏分辨率的不同而转向相应的页面。 要使用resolution redirect(判断屏幕分辨率并转向不同的页面)扩展插件，其具体操作如下。 (1)从网上下载resolutionredirect.mxp文件，获得该扩展插件。启动扩展管理器，并安装resolutionredirect.mxp扩展插件。 (2)这是一个命令扩展插件，重新启动dreamweaver，即可在【命令】菜单中看见如图8.23所示的resolution redirect (判断屏幕分辨率并转向不同的页面)命令。 (3)选择【命令】| resolution redirect (判断屏幕分辨

23、率并转向不同的页面)命令。这时会出现如图8.24所示的resolution redirect对话框。,8.1.6 使用扩展插件判断屏幕分辨率,图8.23 resolution redirect命令 图8.24 判断屏幕分辨率并转向不同的页面对话框,8.1.6 使用扩展插件判断屏幕分辨率,(4)在【640】后面的文本框中，输入在640480分辨率下转向页面的指针和地址为“index1.htm”，也可以单击browse(浏览)按钮在文件夹中查找文件。在【800】后面的文本框中，输入在800600分辨率下转向页面的指针和地址为“index2.htm”，也可以单击browse(浏览)按钮在文件夹中查找

24、文件。在【1024】后面的文本框中，输入高于1024768分辨率时转向页面的指针和地址为“index3.htm”，也可以单击browse(浏览)按钮在文件夹中查找文件。 (5)单击add script(添加脚本)按钮确定操作。 为页面添加了resolution redirect(判断屏幕分辨率并转向不同的页面)扩展插件，并在扩展插件的【属性】面板中设置好属性后，用户可以在浏览器中测试不同分辨率下显示的页面是否正确。保存文档后在浏览器中预览效果。 当在800600分辨率下打开网页时，浏览器窗口中显示的网页为如图8.25所示的 页面。当在1024768分辨率下打开网页时，浏览器窗口中显示的网页为如

25、图8.26所示的页面。,8.1.6 使用扩展插件判断屏幕分辨率,图8.25 在800600分辨率下打开网页 图8.26 在1024768分辨率下打开网页,8.2 自己动手制作插件,8.2.1 制作对象类扩展插件 8.2.2 制作命令类扩展插件 8.2.3 制作行为类扩展插件,8.2 自己动手制作插件,前面介绍了利用网上现有插件实现网页中各种特效的方法，在这一节中我们将讲述如何动手制作扩展插件。,8.2.1 制作对象类扩展插件,用户可以制作一个具有动态效果，或者需要用户输入自己的参数的【对象】扩展插件。这个扩展插件是一个用户可以定制的高级表格框架，该表格框架的宽度、背景颜色、活动颜色都是用户自己

26、定制的。 1. 设计扩展插件的实际html代码 本例的代码如下。 table width=100% border=0 cellspacing=0 cellpadding=1 bgcolor=#000066 onmouseover=this.style.backgroundcolor=#ff0000 onmouseout=this.style.backgroundcolor=#000066 tr tdtd tr tr td table width=100% border=0 cellspacing=0 cellpadding=0 bgcolor=#ffffff tr tdtd tr table

27、td tr table,8.2.1 制作对象类扩展插件,2. 确定用户的输入参数 大表格的宽度width=？ 大表格的背景颜色bgcolor=？ 大表格的动态颜色this.style.backgroundcolor=？ 3. 设计dhtmltabletitle.js文件 首先需要将上面的源代码转化为一个.js文件，它包含一个函数objecttag()即可，本例的具体代码如下。 function objecttag() 表格宽度参数 var ttwidth=document.theform.width.value; 宽度单位 var unitchoice = document.forms0.un

28、its.selectedindex; var ttunit=(unitchoice = 0)? % : ); 表格背景颜色 var ttbgcolor=document.theform.bgcolor.value; 表格动态背景颜色,8.2.1 制作对象类扩展插件,var ttdbgcolor=document.theform.dbgcolor.value; 插入的具体代码 var tabletitle=; tabletitle+=table width= + ttwidth + ttunit + border=0 cellspacing=0 cellpadding=1 bgcolor= +

29、ttbgcolor + onmouseover=this.style.backgroundcolor= + ttdbgcolor + onmouseout=this.style.backgroundcolor= + ttbgcolor + ; tabletitle+= tr; tabletitle+= tdtd; tabletitle+= tr; tabletitle+= tr; tabletitle+= td; tabletitle+= table width=100% border=0 cellspacing=0 cellpadding=0 bgcolor=#ffffff; tableti

30、tle+= tr; tabletitle+= tdtd; tabletitle+= tr; tabletitle+= table; tabletitle+= td; tabletitle+= tr; tabletitle+=table; return tabletitle; ,8.2.1 制作对象类扩展插件,4. 设计dhtmltabletitle.htm文件 设计扩展插件还需要一个.htm文件，用于传递参数。dhtmltabletitle.htm 的源代码如下。 html head titletabletitletitle meta http-equiv=content-type conte

31、nt=texthtml; charset=gb2312 script src=tabletitle.jsscript head body form name=theform method=post action= table width=250 border=0 cellspacing=0 cellpadding=0 tr td width=81表格宽度：td td width=169 input type=text name=width size=5 maxlength=5 select name=units size=1,8.2.1 制作对象类扩展插件,option selected%op

32、tion option像素option select td tr tr td width=81表格背景：td td width=169input type=text name=bgcolor size=8 maxlength=8input type=mmcolorbutton name=colorbutton1 onchange=this.form.bgcolor.value=this.form.colorbutton1.value td tr tr td width=81动态背景：td td width=169input type=text name=dbgcolor size=8 maxl

33、ength=8 input type=mmcolorbutton name=colorbutton,8.2.1 制作对象类扩展插件,onchange=this.form.dbgcolor.value=this.form.colorbutton.value td tr tr align=right td colspan=2hr noshade width=100% size=2font face=verdana, arial, helvetica, sans-serif size=22001.1.15br design by meiyingbr email:fonttd tr table for

34、m body html,8.2.1 制作对象类扩展插件,5. 制作图标 利用图像编辑工具(比如fireworks)制作一个图标。该文件名必须与htm文件名相同，大小必须是18px18px(px表示像素单位)，如果没有.gif文件，dreamweaver将给出一个默认的【？】图标，为了美观和方便，一般都要设计一个形象的图标。 6. 手动安装扩展插件 【对象】扩展插件一般需要3个文件：.htm文件，.js文件和.gif文件。现在3个文件都已经制作完成，在没有封装以前，用户不能使用扩展管理器来安装这个扩展插件，但是可以按照下列步骤手动安装扩展插件。 (1)将dhtmltabletitle.js、dh

35、tmltabletitle.htm和dhtmltabletitle.gif这3个文件复制到“dreamweaver 8安装目录configurationobjectshtml”目录下，重新装入扩展插件。 (2)重新运行dreamweaver 8，即可在【插入】面板中的html类中看见dhtmltabletitle按钮。如图8.27所示。,8.2.1 制作对象类扩展插件,8.2.1 制作对象类扩展插件,7. 封装扩展插件 虽然扩展插件是做成了，可是存在明显的不足之处：扩展插件没有封装，不方便共享，并且安装不方便。 扩展插件在封装前，必须制作一个.mxi文件，用来定义扩展插件的几个安装特征： 安装

36、环境。如dreamweaver 4、dreamweaver mx、dreamweaver 8等。 安装目录。 安装时的需要的文件。 定义扩展插件在菜单中的位置。 扩展插件的说明。 其实.mxi文件就是一个xml文件，只不过是按照macromedia公司的规定的格式而已。 在封装前面的扩展插件时，需要安装3个文件：dhtmltabletitle.js、dhtmltabletitle.htm和dhtmltabletitle.gif，目录是“dreamweaver 8安装目录configurationobjects html”。,8.2.1 制作对象类扩展插件,dhtmltabletitle.mxi

37、具体的代码如下。 macromedia-extension name=dhtmltabletitle version=1.1 type=object !- 注释：安装的产品列表 - products product name=dreamweaver version=8 primary=true products !- 注释：作者描述 - author name= cigarliu !- 注释：扩展插件描述 - description !cdata这是一个动态的表格框架扩展插件 description !- 注释：扩展插件的具体用法描述 - ui-access !cdata该扩展插件可以在obj

38、ect浮动面板的html类的dhtmltabletitle找到，也可以在insert菜单中找到 ui-access !- 注释：安装文件定义 - files,8.2.1 制作对象类扩展插件,file name=dhtmltabletitle.htm destination=$dreamweaver8 configuration objects html file name=dhtmltabletitle.gif destination=$dreamweaverconfigurationobjects html file name=dhtmltabletitle.js destination=$

39、dreamweaverconfigurationobjects html files !- 注释：配置dreamweaver环境，例如插入菜单项等等 - configuration-changes menu-insert insertafter=dwmenu_insert_head skipseparator=true menuitem name=dhtmltabletitle file=objectsformsdhtmltabletitle.htm id=dhtmltabletitle separator id=dhtmltabletitle_separator menu-insert co

40、nfiguration-changes macromedia-extension,8.2.1 制作对象类扩展插件,将上述文件存为dhtmltabletitle.mxi，位置与dhtmltabletitle.js、dhtmltable title.htm、dhtmltabletitle.gif在同一个目录里，这样在封装时就不会找不到文件。 .mxi文件制作完毕后，就可以用扩展管理器封装了，其具体操作如下。 (1)在dreamweaver中，如图8.1所示，选择【命令】|【扩展管理】命令，启动如 图8.2所示的扩展管理器。 (2)在扩展管理器中选择【文件】|【将扩展打包】命令，如图8.28所示，这

41、时会出现如图8.29所示的对话框。在这个对话框中选择“dhtmltabletitle.mxi”。 (3)单击【确定】按钮，完成封装，在同一目录里生成了一个dhtmltabletitle.mxp文件，这样就制作完毕了。,8.2.1 制作对象类扩展插件,图8.28 【将扩展打包】命令 图8.29 【选取要打包的扩展】对话框,8.2.2 制作命令类扩展插件,【命令】扩展插件的功能相当强大，可以操作当前文档、所有打开的文档，甚至所有驱动器上的html文档，可以插入、删除、重排所有html标记的属性以及处理注释和文本等强大功能。 用户可以制作一个具有闪烁效果的状态栏的【命令】扩展插件。 1. 设计扩展插

42、件的实际html代码 具体javascript代码如下。 script language=javascript ! var flashmsg = command扩展插件编写实战; var speed = 700; var control = 1; function flash() if (control = 1) ,8.2.2 制作命令类扩展插件,window.status=flashmsg; control=0; else window.status=; control=1; settimeout(flash(),speed); window.onload=flash; - scriptb,

43、8.2.2 制作命令类扩展插件,2. 源代码分析 首先，确定定制参数，需要定制的参数以下几个。 flashmsg，状态栏的显示文本。 speed，闪烁速度，单位毫秒。 其次，有一个window.onload=flash事件，用户必须在网页的body标记中加上onload=flash()事件。 3. 设计flashmessage.htm文件 本文件要完成的任务是传递两个参数：一个文本参数和一个时间参数，所以需要一个form标记，两个input文本框，具体代码如下。 html head !-注释：扩展插件名称- titleflash messagetitle meta http-equiv=con

44、tent-type content=texthtml; charset=gb2312 !-command扩展插件的javascript函数- script src=flashnav.jsscript head body !-注释：用于参数传递的form- form name=theform method=post action= table width=300 border=0 cellspacing=0 cellpadding=0 tr td width=81显示字符串：td td width=169 !-注释：字符串输入框-,8.2.2 制作命令类扩展插件,input type=text

45、name=mymsg size=30 td tr tr td width=81闪烁速度：td td width=169 !-注释：闪烁速度输入框- input type=text name=myspeed size=6 (单位：毫秒) td tr tr align=right td colspan=2 hr noshade width=100% size=2 !-注释：版权栏- font face=verdana, arial, helvetica, sans-serif size=22001.1.15br design by meiyingbr email:fonttd tr table f

46、orm body html,8.2.2 制作命令类扩展插件,4. 设计flashmessage.js文件 本文件要完成的任务是接受用户的参数，插入一段javascript代码，然后给body标记加上onload=flash()事件。具体代码如下。 注释：扩展插件对话框按钮设置，并且赋予每个按钮特定的执行函数 function commandbuttons() return new array(确定,putredin(),取消,window.close() 注释：确定按钮的执行函数 function putredin() insertonload(); insertredscript(); wi

47、ndow.close(); 注释：执行插入javascript的函数,8.2.2 制作命令类扩展插件,function insertredscript() var msg= + document.theform.mymsg.value +; var speed=document.theform.myspeed.value; var redscript=flash message by meiying r; redscript+=var flashmsg =+ msg + ;r; redscript+=var speed =+ speed + ; r; redscript+=var contro

48、l = 1; r; redscript+=function flash()r; redscript+= if (control = 1)r; redscript+= r; redscript+= window.status= + msg +;r; redscript+= control=0;r; redscript+= r; redscript+= else r; redscript+= r; redscript+= window.status=; r; redscript+= control=1; r; redscript+= r; redscript+= settimeout(flash(

49、),+ speed +); r; redscript+= r; 注释：获得javascript代码的插入位置,8.2.2 制作命令类扩展插件,redpagedom=dreamweaver.getdocumentdom(document); thescriptnodes=redpagedom.getelementsbytagname(script); redheadnode=redpagedom.getelementsbytagname(head); isthere=redheadnode.item(0).innerhtml.indexof(flash message by meiying)!=

50、-1; if (isthere) else if(thescriptnodes=) redheadnode.item(0).innerhtml=redheadnode.item(0).innerhtml+script anguage=javascript r+redscript+rs+cript; else thescriptnodes.item(0).innerhtml=thescriptnodes.item(0).innerhtml+redscript+r; ,8.2.2 制作命令类扩展插件,注释：设置特定对象的事件句柄 function sethandler(obj,eventname,

51、fncall, optstr) var eventstr,fnname,fnarray=new array(),i=0; eventstr = obj.getattribute(eventname); if (eventstr) fnname = fncall.substring(0,fncall.indexof(); fnarray = dreamweaver.gettokens(eventstr,;); for (i; ifnarray.length; i+ if (fnarrayi.indexof(fnname+() != -1 ,8.2.2 制作命令类扩展插件,5. 手动安装扩展插件

52、命令扩展插件一般需要两个文件：.htm文件和.js文件。现在两个文件都已经制作完成，在没有封装前，用户不能使用扩展管理器来安装这个扩展插件，但是可以按照下列步骤手动安装扩展插件。 (1)将flashmessage.js和flashmessage.htm这两个文件复制到“dreamweaver 8安装目录configurationcommands”目录下，重新装入扩展插件。 (2)重新运行dreamweaver 8，即可在【命令】菜单中看到flash message命令。 6. 封装扩展插件 在封装前面的扩展插件时，需要安装两个文件：flashmessage.js和flashmessage.ht

53、m，目录是“dreamweaver 8安装目录configuration commands ”。 flash message.mxi具体的代码如下。 macromedia-extension name= flash message version=2.1 type=command !- 注释：安装的产品列表 -,8.2.2 制作命令类扩展插件,products product name=dreamweaver version=8 primary=true products !- 注释：作者描述 - author name= cigarliu !- 注释：扩展插件描述 - description

54、 !cdata这是一个闪烁的状态栏扩展插件 description !- 注释：扩展插件的具体用法描述 - ui-access !cdata该扩展插件可以在commands菜单中的flashmessage找到 ui-access !- 注释：安装文件定义 - files file name= flashmessage.htm destination=$dreamweaverconfigurationcommands file name= flashmessage.js destination=$dreamweaverconfigurationcommands files,8.2.2 制作命令类

55、扩展插件,!- 注释：配置dreamweaver环境，例如插入菜单项等等 - configuration-changes menu-insert insertafter=dwmenu_insert_head skipseparator=true menuitem name= flashmessage file= commands flashmessage.htm id= flash message separator id= flashmessage _separator menu-insert configuration-changes macromedia-extension 这样就设计了

56、一个flashmessage.mxi，然后将这个文件与flashmessage.js和flashmessage.htm保存在同一个目录里，这样在封装时就不会找不到文件，下一步开始 封装。 flashmessage.mxi文件制作完毕后，就可以用扩展管理器封装了。其具体操作如下。 (1)在dreamweaver中如图8.1所示，选择【命令】|【扩展管理】命令，启动如图8.2所示的扩展管理器。 (2)在扩展管理器中选择【文件】|【将扩展打包】命令，这时会出现如图8.29所示的对话框。在这个对话框中选择flashmessage.mxi。 (3)单击【确定】按钮，完成封装，同一目录里生成了一个flas

57、hmessage.mxp文件，制作完毕。,8.2.3 制作行为类扩展插件,行为扩展插件与事件扩展插件以及动作扩展插件是紧密结合的，实际上行为扩展插件的编写就是动作文件的编写，动作文件是.htm文件，存放在“dreamweaver 8安装目录configurationbehaviorsaction”目录下，其结构可以划分为以下两种。 head里是javascript代码，用以处理用户输入的参数，并且将生成的代码插入到当前文档。 body里包含form，提供给用户参数输入，定制behaviors的具体细节。 用户可以制作一个全屏打开网页的【行为】扩展插件。,8.2.3 制作行为类扩展插件,1. 设

58、计扩展插件的实际html代码 源代码如下。 html head titleexampletitle script ! function fullwin(targeturl) window.open(targeturl,fullscreen) - script head body bgcolor=#ffffff a href=# onclick=fullwin(http:)打开全屏窗口a body html,8.2.3 制作行为类扩展插件,2. 源代码分析 在代码中，有一个fullwin()函数，另外“open full window”(打开全屏窗口)链接有一个onclick事件。 现在要完成的

59、任务是，制作一个可以给任何链接赋予一个全屏打开的【动作】扩展插件。具体操作是，当选择一个链接时，在【动作】面板上可以直接调用该扩展插件。首先，必须插入一个fullwin()函数，其次，要给选中的链接加上一个onclick事件。 3. 设计open full window.htm文件 具体代码如下。 html head script language=javascript src=open%20full%20window.js/script script language=javascript var url_nomsg = 请输入网页地址，或者点击取消按钮.; var url_badbraces = 该地址不合法，不能为空值.; /script titleopen full window/title meta http-equiv=content-type content=text/html /head body onload=initializeui(),8.2.3 制作行为类扩展插件,form name=theform div align=center table borde