网页设计教程-第8章ppt课件

.,第8章使用和制作插件,（时间：3次课，6学时）,.,第8章使用和制作插件,教学提示：本章首先介绍如何在Dreamweaver8中运用已经拥有的插件，然后详细介绍如何制作插件。这些讲解都将以实例的方式进行，使读者明白如何快捷、有效地使用这一强大的网页制作扩展功能。教学目标：插件的使用，使得Dreamweaver8拥有无限的扩展性。,.,第8章使用和制作插件,8.1使用已有扩展插件8.2自己动手制作插件8.3上机实战,.,8.1使用已有扩展插件,8.1.1插件的安装8.1.2利用插件实现网页背景颜色渐变效果8.1.3制作无边浏览器窗口8.1.4网页打印控制8.1.5实现滚动的文字8.1.6使用扩展插件判断屏幕分辨率,.,8.1使用已有扩展插件,扩展插件可以用于拓展Dreamweaver的功能。Dreamweaver中的扩展插件主要有3类。【命令】类扩展插件。命令类扩展插件可以用于在网页编辑的时候实现一定的功能，例如设置表格的样式。【对象】类扩展插件。对象类扩展插件用于在网页中插入元素，例如在网页中插入图片或者Quicktime电影。【行为】类扩展插件。行为类扩展插件主要用于在网页上实现动态的交互功能，例如单击图片后，可以弹出窗口。扩展插件还有一个最大的好处，就是基本上全部是免费的。下面就来探讨如何在Dreamweaver中使用超强的扩展插件，领略第三方插件的魅力。扩展插件的安装在以往的Dreamweaver版本中是比较麻烦的，要必须复制到Dreamweaver的相应目录中才可以，往往要在硬盘中找很长时间才能找到相应的目录。删除扩展插件也很麻烦，如果不知道扩展插件的文件名，就休想把扩展插件从目录里面“赶走”。现在，在Dreamweaver中已经拥有了一个扩展插件的管理器ExtensionManager。它可以实现扩展插件的全自动管理。这个管理器可以从Macromedia免费下载得到。在Dreamweaver中扩展插件的扩展名为“.mxp”。开发Dreamweaver的Macromedia公司专门在自己的网页上开辟了MacromediaExchange专栏专门供用户交流自己的扩展插件。用户可以上传自己的扩展插件，也可以下载别人的扩展插件。,.,8.1.1插件的安装,下载安装了ExtensionManager以后，用户可以选择【命令】|【扩展管理】命令，如图8.1所示，在Dreamweaver中启动如图8.2所示的扩展管理器。从图8.2中可以看出整个扩展管理器的操作界面分为3部分。上面是菜单栏。中间是相应的扩展插件名称。下方是扩展插件相应的功能介绍。该操作界面非常简洁，功能也很清楚。如果是从MacromediaExchange下载的扩展插件还会自动地进行安装。,.,8.1.1插件的安装,图8.1在Dreamweaver中打开扩展管理器,.,8.1.1插件的安装,.,8.1.1插件的安装,也可以下载其他扩展插件，在【Macromedia扩展管理器】窗口中手动安装扩展插件的具体操作如下。(1)在扩展管理器中单击【安装新扩展】按钮，或选择【文件】|【扩展管理】命令，如图8.3所示，这时会打开一个如图8.4所示的对话框。(2)从文件夹中选择相应的.mxp文件，然后单击【安装】按钮安装扩展插件。这时会出现如图8.5所示的对话框。(3)图8.5所示为安装“DW4PageBackgroundColorChanger”扩展插件时出现的说明对话框。用户可以仔细看一下安装说明书，然后单击【接受】按钮确定安装。(4)安装了扩展插件以后，系统会弹出一个如图8.6所示的提示对话框，告诉用户“网页背景颜色渐变”扩展插件已经安装好，并提示用户关闭并重起Dreamweaver8，单击【确定】按钮确定操作。安装好扩展插件以后，在扩展管理器中，将多出一个扩展插件，并具有扩展插件的各项说明。而在Dreamweaver中，命令类扩展插件会出现在【命令】菜单中；行为类扩展插件会出现在【行为】面板中。对象类扩展插件出现在【插入】面板中。,.,8.1.1插件的安装,图8.3安装扩展插件图8.4【选取要安装的扩展】对话框,.,8.1.1插件的安装,图8.5安装扩展插件说明,.,8.1.1插件的安装,图8.6安装完成提示对话框,.,8.1.2利用插件实现网页背景颜色渐变效果,认识了扩展管理器，接下来就可以使用精彩纷呈的第三方扩展插件了。在Dreamweaver中可以使用“改变页面背景颜色”扩展插件方便地实现网页背景颜色渐变效果。它的作用就是在一定的时间内，使浏览器的背景从一种颜色平滑地过渡到另一种颜色。要使用“改变页面背景颜色”扩展插件，其具体操作如下。(1)如前面所述在【扩展管理器】中安装“改变页面背景颜色”扩展插件。(2)重新启动Dreamweaver，打开【行为】面板，单击“+”按钮，就可以使用这个扩展插件了。在文档窗口中，选中整个文档附加行为，可以通过文档左下方状态行上的标记选择器选取标记。(3)如图8.7所示，选择【窗口】|【行为】命令，打开如图8.8所示的【行为】面板。这时，选定对象的HTML标签出现在【行为】面板的标题栏中。(4)单击【行为】面板上的“+”按钮，在如图8.9所示的动作菜单中选择StudioVII|DW4PageBackgroundColorChanger(改变页面背景颜色)命令。这时会出现如图8.10所示的对话框。,.,8.1.2利用插件实现网页背景颜色渐变效果,图8.7打开【行为】面板图8.8【行为】面板,.,8.1.2利用插件实现网页背景颜色渐变效果,图8.9设置PageBackgroundColorChanger动作,.,8.1.2利用插件实现网页背景颜色渐变效果,图8.10DW4PageBackgroundColorChanger对话框,.,8.1.2利用插件实现网页背景颜色渐变效果,(5)在SelectaNewColorforPageBackground(选择一个新的背景颜色)文本框中输入改变后的颜色。在这里选择“#FF00FF”。(6)单击【确定】按钮确定操作。查看默认事件是否是用户需要的事件。如果该事件不是用户所需的，可以从弹出的事件菜单中选择事件为“onClick”。在使用了PageBackgroundColorChanger扩展插件，并在扩展插件【属性】面板中设置好属性后，用户可以观看页面背景颜色改变的页面效果。保存文档后在浏览器中预览效果。再打开这个使用了PageBackgroundColorChanger扩展插件的网页时，用户可以观察到如图8.11所示的页面效果。单击这个网页中的任意位置，这时网页的背景颜色改变为如图8.12所示的背景颜色。,.,8.1.2利用插件实现网页背景颜色渐变效果,图8.11网页打开时的初始效果,.,8.1.2利用插件实现网页背景颜色渐变效果,图8.12网页背景颜色改变后的效果,.,8.1.3制作无边浏览器窗口,在Dreamweaver中可以使用OpenChromelessWindow(打开无边浏览器窗口)扩展插件方便地制作无边浏览器窗口。要使用OpenChromelessWindow(打开无边浏览器窗口)扩展插件，其具体操作如下。(1)从网上下载的chromelessWin.mxp文件，获得该扩展插件。启动扩展管理器，并安装chromelessWin.mxp扩展插件。(2)这是一个行为扩展插件，重新启动Dreamweaver，打开【行为】面板，单击“+”按钮，就可以使用这个扩展插件了。在文档窗口中，选中要附加行为的对象“信息反馈”。(3)如图8.7所示，选择【窗口】|【行为】命令，打开如图8.8所示的【行为】面板。这时，选定对象的HTML标记出现在【行为】面板的标题栏中。(4)单击【行为】面板上的“+”按钮，并从如图8.13所示的动作菜单中选择OpenChromelessWindow命令。这时会出现如图8.14所示的对话框。,.,8.1.3制作无边浏览器窗口,图8.13OpenChromelessWindow动作图8.14OpenChromelessWindow对话框,.,8.1.3制作无边浏览器窗口,(5)在UrltoDisplay(显示网页指针地址)文本框中，输入要在该浏览窗口中显示的htm文件的路径及文件名“Mail_shili.htm”，也可以单击后面的【浏览】按钮在文件夹中查找选择。(6)在WindowTitle(窗口标题)文本框中，输入所要显示文件的窗口的标题为“用户信息反馈”。在WindowName(窗口名称)文本框中，输入所要显示文件的窗口的名称为“email”。(7)在Windowwidth(窗口宽度)和WindowHeigth(窗口高度)两个文本框中，输入所要显示文件的窗口的宽度和窗口的高度分别为“433”和“336”。(8)选中Openwindowincenterscreen(ie5+win)(在屏幕中心打开窗口(IE5以上浏览器)复选框，则设置为使用InternetExplorer5以上浏览器时在屏幕中心自动使窗口居中。,.,8.1.3制作无边浏览器窗口,(9)在Colors选项组中设置边框的颜色，如图8.15所示。在TitleBarFont(标题栏字体)选项组中设置标题栏文本的格式。(10)单击【确定】按钮确定操作。查看默认事件是否是用户需要的事件。如果该事件不是用户所需的，可以从弹出的事件菜单中选择事件为“onclick”。为对象添加了OpenChromelessWindow(打开无边浏览器窗口)扩展插件，并在扩展插件的【属性】面板中设置好扩展插件的属性后，可以在浏览器中预览设置的无边浏览器窗口效果。单击添加有OpenChromelessWindow(打开无边浏览器窗口)扩展插件的实例网站主页中导航栏的【信息反馈】，可以观察到如图8.15所示的无边浏览器窗口效果。,.,8.1.3制作无边浏览器窗口,图8.15无边浏览器窗口预览效果,.,8.1.4网页打印控制,在Dreamweaver中可以使用CrossBrowserPrint(打印浏览器页面)扩展插件方便控制网页的打印。要使用CrossBrowserPrint(打印浏览器页面)扩展插件，其具体操作如下。(1)从网上下载PrintCrossBrowser.zip文件，获得该扩展插件。这个插件是一个超文本文件，我们不能使用插件管理器来安装这个插件。将它解压到Dreamweaver8的安装目录中的ConfigurationBehaviorsActions目录下。(2)这是一个行为扩展插件，重新启动Dreamweaver8，打开【行为】面板，单击“+”按钮，就可以使用这个插件了。在文档窗口中，选中要附加行为的对象，单击打开【行为】面板，单击“+”按钮，就可以使用这个扩展插件了。(3)在文档窗口中，选中要添加打印按钮的位置。如图8.7所示，选择【窗口】|【行为】命令，打开如图8.8所示的【行为】面板。单击【行为】面板上的“+”按钮，并在如图8.16所示的动作菜单中选择Print(打印)|CrossBrowserPrint(打印浏览器页面)命令。这时会出现如图8.17所示的对话框。,.,8.1.4网页打印控制,图8.16添加打印浏览器页面动作图8.17CrossBrowserPrint对话框,.,8.1.4网页打印控制,(4)单击【确定】按钮确定操作。查看默认事件是否是用户需要的事件。如果该事件不是用户所需的，可以从弹出的事件菜单中选择事件为“onclick”。在网页中添加了CrossBrowserPrint(打印浏览器页面)扩展插件，并在扩展插件的【属性】面板中设置好属性后，用户可以在浏览器中预览添加打印链接的效果。保存文档后在浏览器中预览效果如图8.18所示。单击添加有CrossBrowserPrint(打印浏览器页面)扩展插件的实例网站“网上书苑”网页中【打印】按钮，用户可以观察到如图8.19所示的对话框。,.,8.1.4网页打印控制,图8.18插入打印按钮的网页,.,8.1.4网页打印控制,图8.19打印文件,.,8.1.5实现滚动的文字,在Dreamweaver中可以使用Marquee(滚动文字)扩展插件方便地实现大屏幕文字的滚动。要使用Marquee(滚动文字)扩展插件，其具体操作如下。(1)从网上下载Marquee.mxp文件，获得该扩展插件。启动扩展管理器，并安装Marquee.mxp扩展插件。(2)这是一个对象扩展插件，重新启动Dreamweaver，打开【插入】面板，可以在【常用】插入面板中看到这个扩展插件了，如图8.20所示。(3)在文档窗口中，选中要添加滚动文字的位置。单击【插入】面板中的(Marquee滚动文字)按钮，这时会出现如图8.21所示的Marquee对话框。(4)在Text(文本)文本框中，输入需要具有滚动效果的文字为“最新Dreaweaver8入门指南”。在Font(字体)下拉列表中，选择滚动文字的字体。在Size(尺寸)下拉式列表中，选择滚动文字的字体大小。利用FontColor(字体颜色)颜色框可以设置滚动文字的字体颜色。利用BgColoru(背景颜色)颜色框可以设置滚动文字的背景颜色。(5)在Direction(方向)选项组中，设置滚动文字的滚动方向。在Speed(速度)选项组中，设置滚动文字的滚动速度。在Behaviour(运动方式)选项组中，设置滚动文字的运动方式。在Align(对齐方式)选项组中，设置滚动文字的对齐方式。,.,8.1.5实现滚动的文字,图8.20单击【滚动文字】按钮,.,8.1.5实现滚动的文字,图8.21Marquee对话框,.,8.1.5实现滚动的文字,(6)在Size(尺寸)选项组中，设置滚动文字的大小尺寸。选择Repeat(循环)选项，则滚动文字将永远循环下去。不选择Repeat(循环)选项，则在Continuously(重复次数)文本框中输入滚动文字滚动的重复次数。(7)单击【确定】按钮确定操作。在网页中添加了Marquee(滚动文字)扩展插件，并在扩展插件属性面板中设置好扩展插件的属性后，用户可以在浏览器中预览滚动文字的效果。保存文档后在浏览器中预览效果。在打开这个添加了Marquee(滚动文字)扩展插件的网页时，用户可以观察到如图8.25所示的网页页面效果。这个主页的【新书快讯】下面的内容就是利用Marquee(滚动文字)扩展插件制作的，滚动文字的方向是由下往上。在图8.22(a)中，滚动的文字刚出现在浏览器窗口中，而在图8.22(b)中，滚动的文字已经由下往上滚动到了这个滚动窗口的上边。,.,8.1.5实现滚动的文字,(a)(b),图8.22滚动文字页面效果,.,8.1.6使用扩展插件判断屏幕分辨率,在Dreamweaver中可以使用ResolutionRedirect(判断屏幕分辨率并转向不同的页面)扩展插件方便地实现根据访问者显示屏分辨率的不同而转向相应的页面。要使用ResolutionRedirect(判断屏幕分辨率并转向不同的页面)扩展插件，其具体操作如下。(1)从网上下载ResolutionRedirect.mxp文件，获得该扩展插件。启动扩展管理器，并安装ResolutionRedirect.mxp扩展插件。(2)这是一个命令扩展插件，重新启动Dreamweaver，即可在【命令】菜单中看见如图8.23所示的ResolutionRedirect(判断屏幕分辨率并转向不同的页面)命令。(3)选择【命令】|ResolutionRedirect(判断屏幕分辨率并转向不同的页面)命令。这时会出现如图8.24所示的ResolutionRedirect对话框。,.,8.1.6使用扩展插件判断屏幕分辨率,图8.23ResolutionRedirect命令图8.24判断屏幕分辨率并转向不同的页面对话框,.,8.1.6使用扩展插件判断屏幕分辨率,(4)在【640】后面的文本框中，输入在640480分辨率下转向页面的指针和地址为“index1.htm”，也可以单击Browse(浏览)按钮在文件夹中查找文件。在【800】后面的文本框中，输入在800600分辨率下转向页面的指针和地址为“index2.htm”，也可以单击Browse(浏览)按钮在文件夹中查找文件。在【1024】后面的文本框中，输入高于1024768分辨率时转向页面的指针和地址为“index3.htm”，也可以单击Browse(浏览)按钮在文件夹中查找文件。(5)单击AddScript(添加脚本)按钮确定操作。为页面添加了ResolutionRedirect(判断屏幕分辨率并转向不同的页面)扩展插件，并在扩展插件的【属性】面板中设置好属性后，用户可以在浏览器中测试不同分辨率下显示的页面是否正确。保存文档后在浏览器中预览效果。当在800600分辨率下打开网页时，浏览器窗口中显示的网页为如图8.25所示的页面。当在1024768分辨率下打开网页时，浏览器窗口中显示的网页为如图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制作对象类扩展插件,用户可以制作一个具有动态效果，或者需要用户输入自己的参数的【对象】扩展插件。这个扩展插件是一个用户可以定制的高级表格框架，该表格框架的宽度、背景颜色、活动颜色都是用户自己定制的。1.设计扩展插件的实际html代码本例的代码如下。tablewidth=100%border=0cellspacing=0cellpadding=1bgcolor=#000066onMouseover=this.style.backgroundColor=#ff0000onMouseOut=this.style.backgroundColor=#000066trtdtdtrtrtdtablewidth=100%border=0cellspacing=0cellpadding=0bgcolor=#FFFFFFtrtdtdtrtabletdtrtable,.,8.2.1制作对象类扩展插件,2.确定用户的输入参数大表格的宽度width=？大表格的背景颜色bgcolor=？大表格的动态颜色this.style.backgroundColor=？3.设计DhtmlTableTitle.js文件首先需要将上面的源代码转化为一个.js文件，它包含一个函数ObjectTag()即可，本例的具体代码如下。functionobjectTag()表格宽度参数varTTwidth=document.theForm.width.value;宽度单位varunitChoice=document.forms0.Units.selectedIndex;varTTunit=(unitChoice=0)?%:);表格背景颜色varTTbgcolor=document.theForm.bgcolor.value;表格动态背景颜色,.,8.2.1制作对象类扩展插件,varTTDbgcolor=document.theForm.Dbgcolor.value;插入的具体代码varTableTitle=;TableTitle+=tablewidth=+TTwidth+TTunit+border=0cellspacing=0cellpadding=1bgcolor=+TTbgcolor+onMouseover=this.style.backgroundColor=+TTDbgcolor+onMouseOut=this.style.backgroundColor=+TTbgcolor+;TableTitle+=tr;TableTitle+=tdtd;TableTitle+=tr;TableTitle+=tr;TableTitle+=td;TableTitle+=tablewidth=100%border=0cellspacing=0cellpadding=0bgcolor=#FFFFFF;TableTitle+=tr;TableTitle+=tdtd;TableTitle+=tr;TableTitle+=table;TableTitle+=td;TableTitle+=tr;TableTitle+=table;returnTableTitle;,.,8.2.1制作对象类扩展插件,4.设计DhtmlTableTitle.htm文件设计扩展插件还需要一个.htm文件，用于传递参数。DhtmlTableTitle.htm的源代码如下。htmlheadtitleTableTitletitlemetahttp-equiv=Content-Typecontent=texthtml;charset=gb2312scriptsrc=TableTitle.jsscriptheadbodyformname=theFormmethod=postaction=tablewidth=250border=0cellspacing=0cellpadding=0trtdwidth=81表格宽度：tdtdwidth=169inputtype=textname=widthsize=5maxlength=5selectname=Unitssize=1,.,8.2.1制作对象类扩展插件,optionselected%optionoption像素optionselecttdtrtrtdwidth=81表格背景：tdtdwidth=169inputtype=textname=bgcolorsize=8maxlength=8inputtype=mmcolorbuttonname=colorbutton1onChange=this.form.bgcolor.value=this.form.colorbutton1.valuetdtrtrtdwidth=81动态背景：tdtdwidth=169inputtype=textname=Dbgcolorsize=8maxlength=8inputtype=mmcolorbuttonname=colorbutton,.,8.2.1制作对象类扩展插件,onChange=this.form.Dbgcolor.value=this.form.colorbutton.valuetdtrtralign=righttdcolspan=2hrnoshadewidth=100%size=2fontface=Verdana,Arial,Helvetica,sans-serifsize=22001.1.15brDesignbymeiyingbrEmail:meiyingfonttdtrtableformbodyhtml,.,8.2.1制作对象类扩展插件,5.制作图标利用图像编辑工具(比如Fireworks)制作一个图标。该文件名必须与htm文件名相同，大小必须是18px18px(px表示像素单位)，如果没有.gif文件，Dreamweaver将给出一个默认的【？】图标，为了美观和方便，一般都要设计一个形象的图标。6.手动安装扩展插件【对象】扩展插件一般需要3个文件：.htm文件，.js文件和.gif文件。现在3个文件都已经制作完成，在没有封装以前，用户不能使用扩展管理器来安装这个扩展插件，但是可以按照下列步骤手动安装扩展插件。(1)将DhtmlTableTitle.js、DhtmlTableTitle.htm和DhtmlTableTitle.gif这3个文件复制到“Dreamweaver8安装目录ConfigurationObjectsHTML”目录下，重新装入扩展插件。(2)重新运行Dreamweaver8，即可在【插入】面板中的HTML类中看见DhtmlTableTitle按钮。如图8.27所示。,.,8.2.1制作对象类扩展插件,.,8.2.1制作对象类扩展插件,7.封装扩展插件虽然扩展插件是做成了，可是存在明显的不足之处：扩展插件没有封装，不方便共享，并且安装不方便。扩展插件在封装前，必须制作一个.mxi文件，用来定义扩展插件的几个安装特征：安装环境。如Dreamweaver4、DreamweaverMX、Dreamweaver8等。安装目录。安装时的需要的文件。定义扩展插件在菜单中的位置。扩展插件的说明。其实.mxi文件就是一个xml文件，只不过是按照Macromedia公司的规定的格式而已。在封装前面的扩展插件时，需要安装3个文件：DhtmlTableTitle.js、DhtmlTableTitle.htm和DhtmlTableTitle.gif，目录是“Dreamweaver8安装目录ConfigurationObjectsHTML”。,.,8.2.1制作对象类扩展插件,DhtmlTableTitle.mxi具体的代码如下。macromedia-extensionname=DhtmlTableTitleversion=1.1type=Object!-注释：安装的产品列表-productsproductname=Dreamweaverversion=8primary=trueproducts!-注释：作者描述-authorname=cigarliu!-注释：扩展插件描述-description!CDATA这是一个动态的表格框架扩展插件description!-注释：扩展插件的具体用法描述-ui-access!CDATA该扩展插件可以在Object浮动面板的HTML类的DhtmlTableTitle找到，也可以在Insert菜单中找到ui-access!-注释：安装文件定义-files,.,8.2.1制作对象类扩展插件,filename=DhtmlTableTitle.htmdestination=$dreamweaver8configurationObjectsHTMLfilename=DhtmlTableTitle.gifdestination=$dreamweaverconfigurationObjectsHTMLfilename=DhtmlTableTitle.jsdestination=$dreamweaverconfigurationObjectsHTMLfiles!-注释：配置Dreamweaver环境，例如插入菜单项等等-configuration-changesmenu-insertinsertAfter=DWMenu_Insert_HeadskipSeparator=truemenuitemname=DhtmlTableTitlefile=ObjectsFormsDhtmlTableTitle.htmid=DhtmlTableTitleseparatorid=DhtmlTableTitle_Separatormenu-insertconfiguration-changesmacromedia-extension,.,8.2.1制作对象类扩展插件,将上述文件存为DhtmlTableTitle.mxi，位置与DhtmlTableTitle.js、DhtmlTableTitle.htm、DhtmlTableTitle.gif在同一个目录里，这样在封装时就不会找不到文件。.mxi文件制作完毕后，就可以用扩展管理器封装了，其具体操作如下。(1)在Dreamweaver中，如图8.1所示，选择【命令】|【扩展管理】命令，启动如图8.2所示的扩展管理器。(2)在扩展管理器中选择【文件】|【将扩展打包】命令，如图8.28所示，这时会出现如图8.29所示的对话框。在这个对话框中选择“DhtmlTableTitle.mxi”。(3)单击【确定】按钮，完成封装，在同一目录里生成了一个DhtmlTableTitle.mxp文件，这样就制作完毕了。,.,8.2.1制作对象类扩展插件,图8.28【将扩展打包】命令图8.29【选取要打包的扩展】对话框,.,8.2.2制作命令类扩展插件,【命令】扩展插件的功能相当强大，可以操作当前文档、所有打开的文档，甚至所有驱动器上的Html文档，可以插入、删除、重排所有Html标记的属性以及处理注释和文本等强大功能。用户可以制作一个具有闪烁效果的状态栏的【命令】扩展插件。1.设计扩展插件的实际html代码具体Javascript代码如下。scriptlanguage=javascript!varFlashMsg=Command扩展插件编写实战;varspeed=700;varcontrol=1;functionflash()if(control=1),.,8.2.2制作命令类扩展插件,window.status=FlashMsg;control=0;elsewindow.status=;control=1;setTimeout(flash(),speed);window.onload=flash;-scriptb,.,8.2.2制作命令类扩展插件,2.源代码分析首先，确定定制参数，需要定制的参数以下几个。FlashMsg，状态栏的显示文本。speed，闪烁速度，单位毫秒。其次，有一个window.onload=flash事件，用户必须在网页的body标记中加上onload=flash()事件。3.设计FlashMessage.htm文件本文件要完成的任务是传递两个参数：一个文本参数和一个时间参数，所以需要一个form标记，两个input文本框，具体代码如下。htmlhead!-注释：扩展插件名称-titleFlashMessagetitlemetahttp-equiv=Content-Typecontent=texthtml;charset=gb2312!-Command扩展插件的javascript函数-scriptsrc=FlashNav.jsscriptheadbody!-注释：用于参数传递的form-formname=theFormmethod=postaction=tablewidth=300border=0cellspacing=0cellpadding=0trtdwidth=81显示字符串：tdtdwidth=169!-注释：字符串输入框-,.,8.2.2制作命令类扩展插件,inputtype=textname=myMsgsize=30tdtrtrtdwidth=81闪烁速度：tdtdwidth=169!-注释：闪烁速度输入框-inputtype=textname=mySpeedsize=6(单位：毫秒)tdtrtralign=righttdcolspan=2hrnoshadewidth=100%size=2!-注释：版权栏-fontface=Verdana,Arial,Helvetica,sans-serifsize=22001.1.15brDesignbymeiyingbrEmail:meiyingfonttdtrtableformbodyhtml,.,8.2.2制作命令类扩展插件,4.设计FlashMessage.js文件本文件要完成的任务是接受用户的参数，插入一段Javascript代码，然后给body标记加上onload=flash()事件。具体代码如下。注释：扩展插件对话框按钮设置，并且赋予每个按钮特定的执行函数functioncommandButtons()returnnewArray(确定,putRedIn(),取消,window.close()注释：确定按钮的执行函数functionputRedIn()InsertOnLoad();InsertRedScript();window.close();注释：执行插入javascript的函数,.,8.2.2制作命令类扩展插件,functionInsertRedScript()varMsg=+document.theForm.myMsg.value+;varSpeed=document.theForm.mySpeed.value;varRedScript=FlashMessagebymeiyingr;RedScript+=varFlashMsg=+Msg+;r;RedScript+=varspeed=+Speed+;r;RedScript+=varcontrol=1;r;RedScript+=functionflash()r;RedScript+=if(control=1)r;RedScript+=r;RedScript+=window.status=+Msg+;r;RedScript+=control=0;r;RedScript+=r;RedScript+=elser;RedScript+=r;RedScript+=window.status=;r;RedScript+=control=1;r;RedScript+=r;RedScript+=setTimeout(flash(),+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(FlashMessagebymeiying)!=-1;if(isThere)elseif(theScriptNodes=)RedHeadNode.item(0).innerHTML=RedHeadNode.item(0).innerHTML+scriptanguage=Javascriptr+RedScript+rs+cript;elsetheScriptNodes.item(0).innerHTML=theScriptNodes.item(0).innerHTML+RedScript+r;,.,8.2.2制作命令类扩展插件,注释：设置特定对象的事件句柄functionsetHandler(obj,eventName,fnCall,optStr)vareventStr,fnName,fnArray=newArray(),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.手动安装扩展插件命令扩展插件一般需要两个文件：.htm文件和.js文件。现在两个文件都已经制作完成，在没有封装前，用户不能使用扩展管理器来安装这个扩展插件，但是可以按照下列步骤手动安装扩展插件。(1)将FlashMessage.js和FlashMessage.htm这两个文件复制到“Dreamweaver8安装目录Configurationcommands”目录下，重新装入扩展插件。(2)重新运行Dreamweaver8，即可在【命令】菜单中看到FlashMessage命令。6.封装扩展插件在封装前面的扩展插件时，需要安装两个文件：FlashMessage.js和FlashMessage.htm，目录是“Dreamweaver8安装目录Configurationcommands”。FlashMessage.mxi具体的代码如下。macromedia-extensionname=FlashMessageversion=2.1type=Command!-注释：安装的产品列表-,.,8.2.2制作命令类扩展插件,productsproductname=Dreamweaverversion=8primary=trueproducts!-注释：作者描述-authorname=cigarliu!-注释：扩展插件描述-description!CDATA这是一个闪烁的状态栏扩展插件description!-注释：扩展插件的具体用法描述-ui-access!CDATA该扩展插件可以在Commands菜单中的FlashMessage找到ui-access!-注释：安装文件定义-filesfilename=FlashMessage.htmdestination=$dreamweaverconfigurationCommandsfilename=FlashMessage.jsdestination=$dreamweaverconfigurationCommandsfiles,.,8.2.2制作命令类扩展插件,!-注释：配置Dreamweaver环境，例如插入菜单项等等-configuration-changesmenu-insertinsertAfter=DWMenu_Insert_HeadskipSeparator=truemenuitemname=FlashMessagefile=CommandsFlashMessage.htmid=FlashMessageseparatorid=FlashMessage_Separatormenu-insertconfiguration-changesmacromedia-extension这样就设计了一个FlashMessage.mxi，然后将这个文件与FlashMessage.js和FlashMessage.htm保存在同一个目录里，这样在封装时就不会找不到文件，下一步开始封装。FlashMessage.mxi文件制作完毕后，就可以用扩展管理器封装了。其具体操作如下。(1)在Dreamweaver中如图8.1所示，选择【命令】|【扩展管理】命令，启动如图8.2所示的扩展管理器。(2)在扩展管理器中选择【文件】|【将扩展打包】命令，这时会出现如图8.29所示的对话框。在这个对话框中选择FlashMessage.mxi。(3)单击【确定】按钮，完成封装，同一目录里生成了一个FlashMessage.mxp文件，制作完毕。,.,8.2.3制作行为类扩展插件,行为扩展插件与事件扩展插件以及动作扩展插件是紧密结合的，实际上行为扩展插件的编写就是动作文件的编写，动作文件是.htm文件，存放在“Dreamweaver8安装目录ConfigurationBehaviorsAction”目录下，其结构可以划分为以下两种。head里是Javascript代码，用以处理用户输入的参数，并且将生成的代码插入到当前文档。body里包含form，提供给用户参数输入，定制behaviors的具体细节。用户可以制作一个全屏打开网页的【行为】扩展插件。,.,8.2.3制作行为类扩展插件,1.设计扩展插件的实际html代码源代码如下。HTMLHEADTITLEExampleTITLEscript!functionfullwin(targeturl)window.open(targeturl,fullscreen)-scriptHEADBODYBGCOLOR=#FFFFFFahref=#onClick=fullwin(http:)打开全屏窗口aBODYHTML,.,8.2.3制作行为类扩展插件,2.源代码分析在代码中，有一个fullwin()函数，另外“OpenFullWindow”(打开全屏窗口)链接有一个onClick事件。现在要完成的任务是，制作一个可以给任何链接赋予一个全屏打开的【动作】扩展插件。具体操作是，当选择一个链接时，在【动作】面板上可以直接调用该扩展插件。首先，必须插入一个fullwin()函数，其次，要给选中的链接加上一个onClick事件。3.设计OpenFullWindow.htm文件具体代码如下。HTMLHEADSCRIPTLANGUAGE=JavaScriptSRC=Open%20Full%20Wi