Dreamweaver插件应用简明手册

附录

钟峰

一、插件概述

Dreamweaver插件类似于Photoshop中滤镜的概念，它们用于拓展Dreamweaver的功能，由第三方公司或个人开发出来，大大地增强了Dreamweaver的可用性。

1.插件实现的原理

Dreamweaver是基本XML的，它被设计成了一个可扩展的程序，包括JavaScript编辑器。这样它就可以读取和执行JavaScript代码，也提供了一个程序编程界面(API)，一大套 JavaScript 函数，这些函数允许开发者用来扩展Dreamweaver的性能。Dreamweaver 同时提供一个文档对象模型(DOM)，文档对象模型允许扩展项对文档结构和内容进行检查和修改。通过JavaScript API(Application Programming Interface)，可以创建对象、行为Actions、命令、属性面板、浮动面板和数据编译器 (所有这些被统称为扩展项)。
你也可以在不用熟悉任何编程知识的情况下创建新的对象和简单的命令。但是对于许多的高级用途来讲，要想增强Dreamweaver的性能，就必须编写扩展项，或者用JavaScript，或者用C。
在Dreamweaver菜单中的所有命令，包括使用历史面板创建和保存的命令，都可以在JavaScript中执行。这个JavaScript代码通常都是对Dreamweaver可扩展性 API 提供的函数的调用。如果你熟悉JavaScript，了解Dreamweaver的扩展 API，就可以对JavaScript进行编辑，从而改变Dreamweaver命令的作用了。

2.插件的格式和分类

网上提供的插件大部分是ZIP或MXP格式，后面我们会讲到如何安装和使用。从出现的位置来说，Dreamweaver插件可分为四种：Behaviors(行为类)、Objects(对象类)、Command(命令类)、Inspector(检查类)；而从功能上说，又可分为服务器类、浏览器类、导航类、表格类、文字类等等多种。

二、插件的版本与管理

1.插件的版本

随着Dreamweaver的不断升级，插件也产生了新老两种不同的版本。在3.0版本之前，我们下载的插件都是压缩好的ZIP包，实际上是一些HML和配置文件。而从4.0开始，Macromedia公司推出的扩展管理器Exetensions Manager开始普遍使用起来，这时候的插件也开始使用MXP封装，插件的安装与管理都变得非常地方便了。当然低版本的插件也能在高版本的Dreamweaver中使用。

2.插件的下载与安装方法

(1)下载：
大部分的插件我们都可以从网上免费下载。国外最好的地方当然是官方网站Macromedia Exchange (http://www.macromedia.com/exchange)，这里的插件最权威和丰富。你需要先注册，在登录网站后才可以下载它的插件；并且因为是英文网站，所以英文不好的朋友可能不太容易找到自己需要的插件。
国内网站中，有风的日子(http://www.windstudio.net/dw/default.asp)和一号工作室(http://www.1studio.net/dreamweaver/index.asp)，这两个网站都收集了比较完整的精品插件，每个插件都附有简单的功能说明。
(2)安装：
插件版本不同，安装的方法也不同。
老版本：采用ZIP方式封装的老版本插件安装比较麻烦。前面我们谈到过Dreamweaver插件分为四种：Behaviors、Objects、Command、Inspector。对于这四种插件在Dreaweaver的安装目录Configuration下分别建立有相应的目录。安装插件，需要先下载相关种类的插件，然后解压到相关目录即可。比如，如果你下载了Objects插件，那么解压它到Dacromedia\Dreamweaver 3\Configuration\Objects目录下，你也可以在Objects里建立一个文件夹，然后再把插件解压到这个新建立的文件夹里。解压完毕，重新启动Dreamweaver，你就会在相关面板上看到你新添加的插件了。老版本的插件在ZIP包中，通常会附有安装和使用的说明文件，告诉你应该安装到哪一个目录下，安装好后在Dreamweaver中哪个菜单调用。安装好后，我们还需要重新打开Dreamweaver才能使用这个插件。
下面我们给出了不同类型插件的安装与调用位置：
Objects插件：解压缩到dreamweaver\configuration\objects目录下，你可以新建一个目录，也可以把它解压到其他目录(如Common)中。如果是新建的目录，你就可以在Objects类别选项中看到它；如果是解压到其他目录中，那就可以在该组中见到它的图标。
Behavior插件：解压缩到dreamweaver\configuration\behaviorsctions目录下，安装后，就可以在Behavior面板上的Action列表中单击"+"按钮看到它。
Command插件：解压缩到dreamweaver\configuration\commands目录下，就可以在Command菜单中看到它。
Inspector插件：解压缩到dreamweaver\configuration\inspetors目录下，该插件可能出现在"Insert"菜单里，也可能出现在属性面板上。
新版本：MXP格式封装的新版本插件安装起来就非常简单了，下载好插件后，双击它就会自动安装到相应目录下，当然前提是你已经安装了扩展管理器。在以往的插件安装过程中，要启用新安装的插件，需要重新启动Dreamweaver或重新载入扩充插件，而MXP格式的插件大部分无须重新启动即可直接使用。如果你忘记了某个插件的功能，可以使用“命令→扩展管理”命令打开扩展管理器，选择你要查看的插件，然后参看它的说明，一般情况下都会告诉用户该插件的基本功能以及在Dreamweaver中的何处可以找到它。具体的安装和使用方案我们在下一部分介绍。

三、十大精品插件

我们挑选了十款经常被用到的插件推荐给大家，并介绍它们的功能和具体使用方法。

1.DHTML Scrollable Area

简介：插入一个可自动滚动的文本区域，适用于制作公告栏、新闻、提醒等。
类别：Object
下载地址：http://www.windstudio.net/dw/files/dhtml_scrollable_area.mxp
大小：13,207KB
原理：此插件实际上是在页面中插入一个只可显示自身某部分区域的层，层内可供用户输入自定义的文字或代码；然后应用DHTML两段文字响应鼠标的单击事件，来控制这个层向上或向下移动。
使用方法：安装好此插件后，在Dreamweaver的“插入”面板上会增加一个goodies选项卡，点开它，我们会发现有（图1）按钮，单击它就弹出具体设置窗口。

图1
图1

DHTML Scrollable Area的设置参数：
(1)Positioning(定位)：
Pixel Top of Scrollable Area: 设置滚动区域离页面顶部的距离，单位为像素。
Pixel Left of Scrollable Area: 设置滚动区域离页面左边的距离，单位为像素。
Pixel Width of Scrollable Area: 设置滚动区域的宽度，单位为像素。
Pixel Height of Scrollable Area: 设置滚动区域的高度，单位为像素。
Scroll Speed: 设置此区域的滚动速度，这是一个下拉选框，你可以选择Slow(慢)、Medium(中)、Fast(快)。
(2)Content(内容)：
这里可填入需要出现在滚动区域的内容，可以是文字、图片、动画等任何HTML格式的代码。实际上，我们在完成之后再修改此内容会更为方便，因为那时可以在可视界面下插入文字或图片而无须在此手工输入代码。
提示：插入这一可滚动区域后，内容所在层的位置是之前我们在参数中定义好的，如果你想改变这个层出现的位置，你不能拖动这个层，而只能到代码状态下去修改原来设置的Pixel Top和Pixel Left。
我们可以修饰美化这个滚动区域，如控制上下滚动的文字scroll up和scroll down我们可以改成图片，滚动层加上漂亮的背景等。

2.Scrolling Status Bar

简介：让状态栏滚动出现的自定义的文字。
类别：Object
下载地址：http://www.windstudio.net/dw/files/scrolling_status_bar.mxp
大小：4,294KB
原理：此插件的基本原理是在短时间内不断地重写状态栏出现的文字，这样连续起来不断重写，看起来就像是在状态栏逐个出现文字。
使用方法：安装好此插件后，我们可以从菜单栏的“插入”下找到“Rig Technologies”项，单击它打开设置窗口。此插件的设置十分简单，我们只需要填入要出现在状态栏中的文字即可，它提供我们输入五条文字，逐一填好就可以了。
提示：在源代码状态下，我们还可以调节两个参数，更灵活的使用这个插件。找到var speed = 50，这是设置每个文字出现的速度；这一句下面还有一个var pause = 2500，这是设置第一句文字之间停顿的时间，它们的单位都是毫秒。

3.Chromeless Window

简介：这个插件可以打开一个没有边框的小窗口，这个窗口在前段时间广为流传，许多网站都采用这种形式，虽然有点过滥，并不可否认这种窗口是非常漂亮的。
类别：Behavior
下载地址：http://www.windstudio.net/dw/files/chromeless_win_wind.mxp
大小：18,136KB
原理：此插件的基本原理就是用window.open()方法打开一个全屏的窗口，然后再用resize方法改变窗口到适合的大小，这样形成的窗口就没有边框。然后加上一些变换边框、背景颜色和拖动窗口的效果，就形成了上面演示地址中的无边框窗口。
使用方法：此插件与前面的插件不同，安装后，它出现在Dreamweaver的行为面板中，按Shift+F3打开行为面板，点加号按钮，就能看到最前面增加了一个“Open Chromeless Window”选项，单击它打开设置窗口。设置参数如下：
(1)窗口属性设置：
Url To Display：无边窗口要打开的网页地址。
Window Name：窗口名。
Window Height：窗口的高度。
Window Title：窗口的标题。
Window Width：窗口的宽度。
(2)窗口位置设置：
Open window in center screen (IE 5+ Win)：勾选框，设置无边窗口是否位于屏幕的中央。
Window PosX：窗口的横座标。
Window PosY：窗口的纵座标。
(3)颜色设置：
Border Color：边框的颜色。
Title Color：标题的背景色。
Selected Border Color：被选中时边框的颜色。
Selected Title Color：被选中时标题的背景色。
(4)标题栏字体设置：
Font：下拉选框，列出不同的字体组合。它与你的Dreamweaver中的字体设置一致。
Size：字体大小，单位为磅pt。
Font Color：字体颜色。
提示：添加成功后会在行为面板中出现一条纪录，如果要修改原来的参数，可双击这一记录，则会重新打开设置窗口。
此行为的默认触发事件是onLoad，即在网页打开时执行。如果想用单击链接或图片来打开无边窗口，要先在页面中选择某一链接或图片后，再在行为面板中添加Open Chromeless Window。这样会自动设置触发现件为onClick。

4.Flash Image

简介：响应鼠标事件的图片渐显渐隐效果，常用于导航条和栏目插图。
类别：Object
下载地址：http://www.windstudio.net/dw/files/flash_image.mxp
大小：3,913KB
原理：此插件的原理是将CSS(层叠样式表)的alpha(透明度)滤镜和Javascript结合运用。开始时图片是半透明的，当鼠标移上图片时，逐渐减小图片的透明度，这样图片就渐渐变清楚；当鼠标移出图片时，又逐渐增大图片的透明度，这样图片就渐渐变模糊。
使用方法：此插件安装好后，会在插入面板的“常用”标签下增加一个（图2）按钮，当然你也可以在“插入”菜单下找到Flash Image项，单击它弹出设置窗口，参数如下：

图2
图2

Image：浏览框，用来选择目标图片。
Original Image Transparency Level：原始状态下图像的透明度值，值取为0～100之间。
When Clicked, Go To URL：当单击图片时，页面跳转到的URL地址。
OnMouseOver Status：鼠标移上图片时的状态设置。
Transparency Level：鼠标移上时的透明度值，值取为0～100之间。
Time between Transparency Changes：透明度变化的时间单位，单位为毫秒。
Amount of Change each Time：总的变化时间长度，单位为秒。
OnMouseOut Status：鼠标移出图片时的状态设置。
Transparency Level：鼠标移出时的透明度值，值取为0～100之间。
Time between Transparency Changes：透明度变化的时间单位，单位为毫秒。
Amount of Change each Time：总的变化时间长度，单位为秒。

5.DHTML Tooltip

简介：为页面或链接增加一个DHTML的脚注，可加在任意图片和文字上，类似于图片的ALT效果，但更加漂亮和灵活。
类别：Behavior
下载地址：http://www.windstudio.net/dw/files/dhtml_tooltips.mxp
大小：13,507KB
原理：此插件的原理是通过调用Dreamweaver本身自带的行为“显示隐藏层”，来实现当鼠标移上和移出对象时，出现或隐藏被包含在一个层内的自定义提示。
使用方法：此插件安装好后，会在插入面板的“常用”标签下增加一个（图3）按钮，单击它弹出设置窗口，它的参数设置很简单，只有两个：一是“Footnote Number”，按字面意思理解，是填入脚注的数字，实际上我们可以把它当成标题；另一个是“FootNote Text”，这里输入脚注的内容。

图3
图3

提示：有一个不足之处就是此插件添加的脚注标题默认是上标形式的，如果我们不想使用上标，则需要到源代码状态下将包含标题的sub标记去掉。标题字体的大小默认是-1，一般中文的话我们也需要进行修改。
我们还可以更改脚注内容的外观，也就是层的外观。比如更改背景颜色、文字颜色、加上边框等。这些都与对普通层的操作相同。

6.IE5.5 Custom Scrollbars

简介：你一定已经看厌了IE一成不变的灰色滚动条，有了这个插件，我们可以让滚动条变得五彩缤纷。
类别：Object
下载地址：http://www.windstudio.net/dw/files/ie55_scrollbar.mxp
大小：4,627KB
原理：此插件的原理很简单，只是在页面中加入一段CSS代码，这段代码可以控制IE滚动条的颜色属性。
使用方法：此插件安装好，会在插入面板的“常用”标签下增加一个（图4）按钮，你也可以在菜单“插入”下找到“IE5.5 Custom Scrollbars...”项。在Dreamweaver中将视图先切换到代码模式，将光标放在标记前，然后单击插入面板上的（图5）按钮，弹出设置窗口。如果不按这样的步骤而在视图模式下直接使用，刚CSS代码会被加入到标记内，虽然大部分情况下IE也能正常解释，但这毕竟不合语法规则，所以我们推荐按前面的方法来使用引插件。

图4
图4
图5
图5

插件设置参数如下：
Scrollbar face color：设置滚动条3D表面(ThreedFace)的颜色。
Scrollbar highlight color：设置滚动条3D界面的亮边(ThreedHighlight)颜色。
Scrollbar shadow color：设置滚动条3D界面的暗边(ThreedShadow)颜色。
Scrollbar 3d light color：设置滚动条亮边框颜色。
Scrollbar arrow color：设置滚动条方向箭头的颜色。当滚动条出现但不可用时，此属性失效。
Scrollbar track color：设置滚动条的拖动区域(TrackBar)颜色。
Scrollbar darkshoadow color：设置滚动条暗边框(ThreedDarkShadow)颜色。
提示：此插件只支持IE5.5或更高版本的浏览器，不支持NS。

7.Marquee

简介：Dreamweaver不能直接插入Marquee，有了这个插件就OK啦，并且可以详细地设置maruqee的每一个参数。适用于新闻、公告等，以吸引浏览者的目光。
类别：Object
下载地址：http://www.windstudio.net/dw/files/marquee.mxp
大小：4,438KB
原理：此插件实际上是在页面中插入一个标记，这个标记的作用是在页面中插入一个滚动的广西框。目前Dreamweaver并不支持可视化地插入marquee标记，而此插件就提供了各种marquee的各种属性设置，用直观的方式弥补了Dreamweaver只能手写代码插入maruqee的缺憾。
使用方法：此插件安装完成之后，会在Dreamweaver的插入面板“常用”标签下增加一个（图6）按钮，你也可以在菜单“插入”下找到“Marquee”项。单击它打开插入设置窗口，设置参数如下：
图6
图6

Text：滚动文字设置。
Font：文字字体设置，字体列表是读取Dreamweaver本身的字体设置列表。
Size：字体大小，可选择1到7号字。
Font Color：字体颜色。
BG Color：滚动文本框的背景颜色。
Direction：滚动方向设置，可选择Left(左)和Right(右)。
Speed：滚动的速度设置，分两个子参数。
Delay：每轮滚动之间的延迟时间。
Amount：一次滚动总的时间量。
Behaviour：滚动的方式设置，分三个子参数。
Scroll：循环滚动。
Slide：单次滚动。
Alternate：来回滚动。
Align：文字的对齐方式设置。可选择Middle(居中)、Bottom(居下)还是Top(居上)。
Width：滚动文本框的宽度，输入一个数值后从后面的单选框选择in Pixels(按像素)或是in Percent(按百分比)。
Height：滚动文本框的高度，输入一个数值后从后面的单选框选择in Pixels(按像素)或是in Percent(按百分比)。
Repeat：滚动是否重复的设置。
Continuously：不断滚动，即循环。
Times：重复的次数。

8.Page Transitions

简介：设置页面转场效果(IE4.0及以上版本支持)，它的效果就是在页面打开或离开时，类似于电影不同镜头之间的切换效果。
类别：Command
下载地址：http://www.windstudio.net/dw/files/page_transitions.mxp
大小：4,291KB
原理：此插件实际上也是在网页中插入一段HTML代码，它插入的是标记内的一种标记，这种meta可以控制在页面被载入或卸载时，IE产生什么样的转场效果以及这种效果发生的时间长短。
使用方法：此插件安装完成之后，会在Dreamweaver的“命令”菜单下新增一条选项“Page Transitions”。单击它打开设置窗口(（图7）)：

图7
图7

图中我们可以选择打开页面(Page Enter)或离开页面(Page Exit)时是否要加入转场效果，后面的下拉菜单可以从下拉菜单中选择某一种效果，然后设置转换的时间值。转场效果菜单中的每一项说明如下：
Random Transition：随机显示二十三种转场效果中的一种。
Box In：盒状收缩。
Box Out：盒状放射。
Circle In：圆形收缩。
Circle Out：圆形放射。
Wipe Up：向上擦去。
Wipe Down：向下擦去。
Wipe Right：向右擦去。
Wipe Left：向左擦去。
Vertical Blinds：垂直百叶窗。
Horizontal Blinds：水平百叶窗。
Checkerboard Across：水平棋盘式。
Checkerboard Down：垂直棋盘式。
Random Dissolve：随机溶解。
Split Vertical In：上下向中间收缩。
Split Vertical Out：上下向中间放射。
Split Horizontal In：左右向中间收缩。
Split Horizontal Out：左右向中间放射。
Strips Left Down：阶梯向左下放射。
Strips Left Up：阶梯向左上放射。
Strips Right Down：阶梯向右下放射。
Strips Right Up：阶梯向右上放射。
Random Bars Horizontal：随机水平线条。
Random Bars Vertical：随机垂直线条。

9.Floating Image

简介：可以在页面中添加一个随机飘浮的图片，也就是各大网站上常见的效果了。因为会不断飘动，很容易吸引浏览者的目光，所以常用来作为广告、提醒之类。
类别：Object
下载地址：http://www.yesky.com/20010228/floatimg.mxp
大小：4,438KB
原理：此插件实际上是将图片放入一个浮动定位的层内，用Javascript不断地随机改变这个层的坐标，在网页上看起来就是为断飘动的效果了
使用方法：此插件安装完成之后，在菜单“命令”下将出现一个“Floating Image”选项，单击它弹出设置窗口，参数如下：
Max：设定随机度的最大值。
Min：设定随机度的最小值。
Area：浮动区域的范围值。
Image：图片路径。
Href：图片的链接地址。

10.Preload Images with Status Bar and Redirect

简介：你一点见过很多软件安装时和游戏读取进度时的进度条吧？有了这个插件，我们也能在网页上实现同样的效果。进度条随网页的不断载入而变长，直到最后到达100%，这时就完整地打开目标网页，免去了直接打开目标网页后要等待网页一点一点地显示出来。
类别：Object
下载地址：http://www.windstudio.net/dw/files/preload_status.mxp
大小：4, 920KB
原理：此插件实际上是读取页面中的图片，比如一个页面中有10张图片，那么就把进度条分成若干份，读取一个图片进度条就增加一点，全部读取完毕后进入页面，而当在网页中所占体积最大的图片都下载完毕，页面打开就非常快了。
使用方法：此插件安装完成之后，在菜单“插入”下多了一项“Preload Suatus”项，单击它弹出设置窗口，参数如下：
Redirect Location：页面重定向后的跳转地址。
Background GIF：选择进度条的背景图片。
Frontground GIF：选择进度条的前景图片。
Progress Bar Length：设定进度条的长度。
Progress Bar Height：设定进度条的高度。
Images：选择进度条需要预先读入的图片文件。
上面的参数都设置好后，单击“Add Image”按钮，可把“Images”框中选好图片添加到下面的图片列表框中，再次选择图片，再单击“Add Image”按钮，可添加新的需要预载入的图片。

返回本期目录 | 返回总目录

完毕

software-archive.tifan.la

关于本站