网页设计教程-第8章

第8章使用和制作插件（时间：3次课，6学时）第8章使用和制作插件教学提示：本章首先介绍如何在Dreamweaver8中运用已经拥有的插件，然后详细介绍如何制作插件。这些讲解都将以实例的方式进行，使读者明白如何快捷、有效地使用这一强大的网页制作扩展功能。教学目标：插件的使用，使得Dreamweaver8拥有无限的扩展性。第8章使用和制作插件8.1使用已有扩展插件8.2自己动手制作插件8.3上机实战使用已有扩展插件8.1.1插件的安装8.1.2利用插件实现网页背景颜色渐变效果8.1.3制作无边浏览器窗口8.1.4网页打印控制8.1.5实现滚动的文字8.1.6使用扩展插件判断屏幕分辨率使用已有扩展插件扩展插件可以用于拓展Dreamweaver的功能。Dreamweaver中的扩展插件主要有3类。【命令】类扩展插件。命令类扩展插件可以用于在网页编辑的时候实现一定的功能，例如设置表格的样式。【对象】类扩展插件。对象类扩展插件用于在网页中插入元素，例如在网页中插入图片或者Quicktime电影。【行为】类扩展插件。行为类扩展插件主要用于在网页上实现动态的交互功能，例如单击图片后，可以弹出窗口。扩展插件还有一个最大的好处，就是基本上全部是免费的。下面就来探讨如何在Dreamweaver中使用超强的扩展插件，领略第三方插件的魅力。扩展插件的安装在以往的Dreamweaver版本中是比较麻烦的，要必须复制到Dreamweaver的相应目录中才可以，往往要在硬盘中找很长时间才能找到相应的目录。删除扩展插件也很麻烦，如果不知道扩展插件的文件名，就休想把扩展插件从目录里面“赶走”。现在，在Dreamweaver中已经拥有了一个扩展插件的管理器——ExtensionManager。它可以实现扩展插件的全自动管理。这个管理器可以从Macromedia免费下载得到。在Dreamweaver中扩展插件的扩展名为“.mxp”。开发Dreamweaver的Macromedia公司专门在自己的网页上开辟了MacromediaExchange专栏专门供用户交流自己的扩展插件。用户可以上传自己的扩展插件，也可以下载别人的扩展插件。插件的安装下载安装了ExtensionManager以后，用户可以选择【命令】|【扩展管理】命令，如图8.1所示，在Dreamweaver中启动如图8.2所示的扩展管理器。从图8.2中可以看出整个扩展管理器的操作界面分为3部分。上面是菜单栏。中间是相应的扩展插件名称。下方是扩展插件相应的功能介绍。该操作界面非常简洁，功能也很清楚。如果是从MacromediaExchange下载的扩展插件还会自动地进行安装。插件的安装图8.1在Dreamweaver中打开扩展管理器插件的安装插件的安装也可以下载其他扩展插件，在【Macromedia扩展管理器】窗口中手动安装扩展插件的具体操作如下。(1)在扩展管理器中单击【安装新扩展】按钮，或选择【文件】|【扩展管理】命令，如图8.3所示，这时会打开一个如图8.4所示的对话框。(2)从文件夹中选择相应的.mxp文件，然后单击【安装】按钮安装扩展插件。这时会出现如图8.5所示的对话框。(3)图8.5所示为安装“DW4PageBackgroundColorChanger”扩展插件时出现的说明对话框。用户可以仔细看一下安装说明书，然后单击【接受】按钮确定安装。(4)安装了扩展插件以后，系统会弹出一个如图8.6所示的提示对话框，告诉用户“网页背景颜色渐变”扩展插件已经安装好，并提示用户关闭并重起Dreamweaver8，单击【确定】按钮确定操作。安装好扩展插件以后，在扩展管理器中，将多出一个扩展插件，并具有扩展插件的各项说明。而在Dreamweaver中，命令类扩展插件会出现在【命令】菜单中；行为类扩展插件会出现在【行为】面板中。对象类扩展插件出现在【插入】面板中。插件的安装图8.3安装扩展插件图8.4【选取要安装的扩展】对话框插件的安装图8.5安装扩展插件说明插件的安装图8.6安装完成提示对话框利用插件实现网页背景颜色渐变效果认识了扩展管理器，接下来就可以使用精彩纷呈的第三方扩展插件了。在Dreamweaver中可以使用“改变页面背景颜色”扩展插件方便地实现网页背景颜色渐变效果。它的作用就是在一定的时间内，使浏览器的背景从一种颜色平滑地过渡到另一种颜色。要使用“改变页面背景颜色”扩展插件，其具体操作如下。(1)如前面所述在【扩展管理器】中安装“改变页面背景颜色”扩展插件。(2)重新启动Dreamweaver，打开【行为】面板，单击“+”按钮，就可以使用这个扩展插件了。在文档窗口中，选中整个文档附加行为，可以通过文档左下方状态行上的标记选择器选取body标记。(3)如图8.7所示，选择【窗口】|【行为】命令，打开如图8.8所示的【行为】面板。这时，选定对象的HTML标签出现在【行为】面板的标题栏中。(4)单击【行为】面板上的“+”按钮，在如图8.9所示的动作菜单中选择StudioVII|DW4PageBackgroundColorChanger(改变页面背景颜色)命令。这时会出现如图8.10所示的对话框。利用插件实现网页背景颜色渐变效果图8.7打开【行为】面板图8.8【行为】面板利用插件实现网页背景颜色渐变效果图8.9设置PageBackgroundColorChanger动作利用插件实现网页背景颜色渐变效果图8.10DW4PageBackgroundColorChanger对话框利用插件实现网页背景颜色渐变效果(5)在SelectaNewColorforPageBackground(选择一个新的背景颜色)文本框中输入改变后的颜色。在这里选择“#FF00FF”。(6)单击【确定】按钮确定操作。查看默认事件是否是用户需要的事件。如果该事件不是用户所需的，可以从弹出的事件菜单中选择事件为“onClick”。在使用了PageBackgroundColorChanger扩展插件，并在扩展插件【属性】面板中设置好属性后，用户可以观看页面背景颜色改变的页面效果。保存文档后在浏览器中预览效果。再打开这个使用了PageBackgroundColorChanger扩展插件的网页时，用户可以观察到如图8.11所示的页面效果。单击这个网页中的任意位置，这时网页的背景颜色改变为如图8.12所示的背景颜色。利用插件实现网页背景颜色渐变效果图8.11网页打开时的初始效果利用插件实现网页背景颜色渐变效果图8.12网页背景颜色改变后的效果制作无边浏览器窗口在Dreamweaver中可以使用OpenChromelessWindow(打开无边浏览器窗口)扩展插件方便地制作无边浏览器窗口。要使用OpenChromelessWindow(打开无边浏览器窗口)扩展插件，其具体操作如下。(1)从网上下载的chromelessWin.mxp文件，获得该扩展插件。启动扩展管理器，并安装chromelessWin.mxp扩展插件。(2)这是一个行为扩展插件，重新启动Dreamweaver，打开【行为】面板，单击“+”按钮，就可以使用这个扩展插件了。在文档窗口中，选中要附加行为的对象——“信息反馈”。(3)如图8.7所示，选择【窗口】|【行为】命令，打开如图8.8所示的【行为】面板。这时，选定对象的HTML标记出现在【行为】面板的标题栏中。(4)单击【行为】面板上的“+”按钮，并从如图8.13所示的动作菜单中选择OpenChromelessWindow命令。这时会出现如图8.14所示的对话框。制作无边浏览器窗口图8.13OpenChromelessWindow动作图8.14OpenChromelessWindow对话框制作无边浏览器窗口(5)在UrltoDisplay(显示网页指针地址)文本框中，输入要在该浏览窗口中显示的htm文件的路径及文件名“Mail_shili.htm”，也可以单击后面的【浏览】按钮在文件夹中查找选择。(6)在WindowTitle(窗口标题)文本框中，输入所要显示文件的窗口的标题为“用户信息反馈”。在WindowName(窗口名称)文本框中，输入所要显示文件的窗口的名称为“email”。(7)在Windowwidth(窗口宽度)和WindowHeigth(窗口高度)两个文本框中，输入所要显示文件的窗口的宽度和窗口的高度分别为“433”和“336”。(8)选中Openwindowincenterscreen(ie5+win)(在屏幕中心打开窗口(IE5以上浏览器))复选框，则设置为使用InternetExplorer5以上浏览器时在屏幕中心自动使窗口居中。制作无边浏览器窗口(9)在Colors选项组中设置边框的颜色，如图8.15所示。在TitleBarFont(标题栏字体)选项组中设置标题栏文本的格式。(10)单击【确定】按钮确定操作。查看默认事件是否是用户需要的事件。如果该事件不是用户所需的，可以从弹出的事件菜单中选择事件为“onclick”。为对象添加了OpenChromelessWindow(打开无边浏览器窗口)扩展插件，并在扩展插件的【属性】面板中设置好扩展插件的属性后，可以在浏览器中预览设置的无边浏览器窗口效果。单击添加有OpenChromelessWindow(打开无边浏览器窗口)扩展插件的实例网站主页中导航栏的【信息反馈】，可以观察到如图8.15所示的无边浏览器窗口效果。制作无边浏览器窗口图8.15无边浏览器窗口预览效果网页打印控制在Dreamweaver中可以使用CrossBrowserPrint(打印浏览器页面)扩展插件方便控制网页的打印。要使用CrossBrowserPri