22 使用 Dreamweaver 开发 JavaScript 脚本

1. 22使用Dreamweaver开发JavaScript脚本 早期的Dreamweaver使用“行为”概念打包常用的JavaScript功能块，而对于JavaScript语言本身的支持基本上没有，仅能够分色显示JavaScript关键字。这种支持是非常可怜的。从Dreamweaver CS3版本开始，Adobe过多的把精力集中在Ajax框架的开发上，忽略了基础性技术支持。而Dreamweaver所开发的Spry框架虽然功能很强大，但是与jQUery、Prototype等基础性Ajax框架比起来，显得有点轻微。用Adobe官方解释，Spry技术是为Web设计师开发的Ajax框架，而不是为Web程序员开发的基础性架构，但是它与Ext JS和YUI等框架相比，界面效果和交互性功能方面又显得比较粗糙和弱小。升级到Dreamweaver CS4版本后，Adobe开始把精力放在JavaScript核心技术支持上，现在能够支持JavaScript代码核心智能提示，并提供几个实用工具。 《网页制作与网站开发从入门到精通》配套视频 样吧视频教室（www.css8.cn）

2. 22.1 Dreamweaver中的JavaScript 在CS4版本之前，Dreamweaver仅能够支持JavaScript代码的分色显示，且功能有限。升级到Dreamweaver CS4版本后，Adobe开始意识到JavaScript在Web开发中的重要性，并加大对其基础性技术支持。这主要包括三个方面支持服务。 《网页制作与网站开发从入门到精通》配套视频 样吧视频教室（www.css8.cn）

3. 22.1 Dreamweaver中的JavaScript 22.1.1 结构和逻辑的分离 在Web开发中，用户常常在页面内直接编写JavaScript脚本，有时甚至把JavaScript函数以属性事件的形式绑到标签中。但是它不标准设计的规范（即倡导结构、表现和逻辑的分离），同时也不便于JavaScript脚本管理和利用率，因此建议读者应养成在外部文件中开发JavaScript脚本，并外部文件中注册事件处理函数。 Dreamweaver考虑到部分用户已经形成的习惯，提供了将JavaScript外置的工具。 在Dreamweaver中选择【命令】|【将JavaScript外置】菜单命令，打开【将JavaScript外置】对话框。该对话框有两个选项： 一个是“仅将JavaScript外置”选项，它能够把文档内包含的脚本放置到外部文件中，并引入该文件。 22-1.html（原）、22-2.html（分离）、 《网页制作与网站开发从入门到精通》配套视频 样吧视频教室（www.css8.cn）

4. 22.1 Dreamweaver中的JavaScript 22.1.1 结构和逻辑的分离 另一个是“将JavaScript外置并以非侵入方式进行附加”选项，该选项除了能够把文档内包含的JavaScript脚本外置之后，还可以把标签内绑定的属性事件也移置到外部文件中，实现真正意义上的结构和逻辑的分离。这时Dreamweaver会自动为绑定属性事件的标签定义一个ID值，你也可以修改该ID值（如图22.2所示）。当然使用这个选项，就无法再使用【行为】面板，来查看或编辑当前位于文档中的任何Dreamweaver行为，不过它们在浏览器中仍会正常工作。 在【将JavaScript外置】对话框内的列表框中，列表显示了文档包含的所有JavaScript代码段（以<script>标签为分隔符）。你可以在该列表中选择要移置的代码段。 22-3.html（完全分离） 《网页制作与网站开发从入门到精通》配套视频 样吧视频教室（www.css8.cn）

5. 22.1 Dreamweaver中的JavaScript 22.1.2 JavaScript智能化提示 Dreamweaver一直没有重视对JavaScript技术的支持。如今作为一款比较成熟的JavaScript开发IDE（Integrated Development Environment，集成开发环境），Aptana对Dreamweaver霸主地位日益构成了威胁。从CS4版本开始，Dreamweaver加快了对JavaScript核心功能的支持，提供了如代码高亮和代码提示功能，虽然功能还比较弱，但是足以让用惯Dreamweaver的用户感到满意。 例如，当在文档的<script>标签中输入window时，会自动弹出提示列表框。这与HTML和CSS智能化提示一样，输入会感觉非常方便。 22-4.html 《网页制作与网站开发从入门到精通》配套视频 样吧视频教室（www.css8.cn）

6. 22.1 Dreamweaver中的JavaScript 22.1.2 JavaScript智能化提示 如果在输入代码时没有显示提示列表，可以选择【编辑】|【显示代码提示】菜单命令，强制显示代码提示，或者按快捷键（Ctrl+Space），由于在一般系统中默认使用Ctrl+Space组合键来切换中英文输入状态，你可以在Dreamweaver中选择【编辑】|【快捷键】菜单命令，来更改代码提示的快捷键。 除此以外，Dreamweaver还提供了代码错误提示。当输入代码出现错误，则编辑窗口顶端显示黄色的提示条，同时在代码左侧行号处标识显示。 《网页制作与网站开发从入门到精通》配套视频 样吧视频教室（www.css8.cn）

7. 22.1 Dreamweaver中的JavaScript 22.1.3 支持第三方Ajax框架和技术库 借鉴Aptana经验，Dreamweaver增加了对第三方Ajax框架和JavaScript技术库的支持功能，如Prototype、jQuery、YUI、ExtJS等。例如，在文档中先导入jQuery框架，代码如下： <script type="text/javascript" language="javascript" src="images/jquery-1.2.6.js"></script> 然后在<script>标签中调用jQuery的成员，此时Dreamweaver会自动弹出代码提示列表，如图22.5所示。这样就可以方便用户加快输入。不过Dreamweaver对第三方技术的支持还不是很友好，存在很多不完善的地方。如果在输入中没有弹出提示，可以选择【编辑】|【显示代码提示】菜单命令或者按快捷键（Ctrl+Space），强制显示代码提示。 22-5.html 《网页制作与网站开发从入门到精通》配套视频 样吧视频教室（www.css8.cn）

8. 22.1 Dreamweaver中的JavaScript 22.1.4 JavaScript行为特效 早期的JavaScript技术并没有现在这么受重视，作为网页特效的一种开发工具，大家都认为它是一种无足轻重的脚本语言，所以Dreamweaver也仅把它视为一个小把戏，并提出了“行为”概念，用来支持JavaScript开发的网页特效。 在Dreamweaver的【行为】面板中收集了十几个常用的网页控制效果，并通过一种可视化操作的方法提供给用户进行快速应用。选择【窗口】|【行为】菜单命令，将打开【标签检查器】面板，【行为】仅作为该面板的一个选项卡而存在（如图22.6所示）。在以前版本中，Dreamweaver把【行为】作为独立的面板进行设计。而在CS4版本中，Dreamweaver认为行为和属性都应该属性标签的一部分（标签元素的成员），所以就把它们收容在一起。 22-6.html 《网页制作与网站开发从入门到精通》配套视频 样吧视频教室（www.css8.cn）

9. 22.1 Dreamweaver中的JavaScript 22.1.5 JavaScript代码片段 除了【行为】选项卡之外，Dreamweaver还提供一个比较实用的小工具，它就是【代码片段】面板（如图22.10所示）。如果简单了解JavaScript，个人认为【代码片段】面板的作用要大于【行为】选项卡。因为它们都是JavaScript代码段，但是【代码片段】所包含的网页特效更多，更为重要的是你可以随时把自己使用的代码片段保存在【代码片段】中，其实用性要远远大于【行为】选项卡所提供的几个固定的网页特效，当然你也可以借助插件扩展的方式从网上获取更多的行为插件，但是它显得复杂和僵硬。 22-7.html 《网页制作与网站开发从入门到精通》配套视频 样吧视频教室（www.css8.cn）

10. 22.1 Dreamweaver中的JavaScript 22.1.5 JavaScript代码片段 你还可以把网页文档中常用脚本保存到【代码片段】面板中，这样下次使用时可以随时调用，而不再手动输入代码。方法是：先在文档中【代码】视图下选中要保存的代码片段，然后在【代码片段】面板中单击【新建代码片段】按钮（），将打开设置保存信息的对话框，最后按要求操作即可。当然，你还可以利用【代码片段】面板管理默认的和自己收集的代码片段。使用【代码片段】比较方便，但是你应该初步掌握JavaScript的使用，否则所插入的脚本将显示为无效。 《网页制作与网站开发从入门到精通》配套视频 样吧视频教室（www.css8.cn）

11. 22.2 使用Dreamweaver的Spry技术框架 • 随着Ajax技术大潮风起云涌，各种Ajax框架和JavaScript技术库不断涌现。Dreamweaver在CS3版本开始开发了一套功能强大的Ajax技术框架——Spry。Spry技术框架是建立在JavaScript技术基础之上，它提供了四部分核心服务： • HTML和XML动态数据绑定和显示。 • 一组实用的JavaScript界面组件。 • 一组表单验证组件。 • 一组动态显示效果。 《网页制作与网站开发从入门到精通》配套视频 样吧视频教室（www.css8.cn）

12. 22.2 使用Dreamweaver的Spry技术框架 22.2.1 定义Spry数据集 Spry技术框架最有价值的地方应该是它的动态数据显示功能了。当然这里的动态数据与利用后台服务器技术生成的动态数据不同。Spry能够读取指定HTML或XML文档中的指定元素包含的数据，并把这些数据按要求动态显示在另一个网页中。从本质上将，Spry动态数据实际上就是利用节点遍历功能，把指定节点下包含的文本信息读取出来，并在另一个页面中按规律显示出来。 要使用Spry显示动态数据，读者必须先定义数据集，即把指定文档中的数据绑定到当前文档中。例如，新建一个HTML文档，在该文档中存放一个简单的数据表格（如图22.12所示）。在插入表格时，必须为该表格的table元素定义唯一的ID属性值。 打开需要绑定上面页面中数据表格的文档，选择【插入】|【Spry】|【Spry数据集】菜单命令，打开【Spry数据集】向导 22-8.html（表格数据），22-8.xml（XML格式数据） 《网页制作与网站开发从入门到精通》配套视频 样吧视频教室（www.css8.cn）

13. 22.2 使用Dreamweaver的Spry技术框架 22.2.2 绑定Spry数据集 定义数据集和绑定数据集是两个不同的过程，定义数据集相当于服务器中的建立与数据库的连接，并定义记录集，而绑定数据集就是把数据显示在网页中。在上面一节示例中实际上利用向导把已经定义和绑定数据全部完成，不需要读者再去进行绑定。如果要手动绑定数据集，你需要在第三步向导中选择最后一个选项，即不插入HTML文档。绑定Spry数据集需要三步走来实现： 第一步，先要定义Spry区域，只有在Spry区域内所绑定的数据集记录才能够正常显示。 第二步，设计了Spry区域后，就可以在【绑定】面板中进行操作。 第三步，利用Spry重复区域功能，为所有数据指定重复显示的行数。 22-9.html、22-10.html、22-11.html 《网页制作与网站开发从入门到精通》配套视频 样吧视频教室（www.css8.cn）

14. 22.2 使用Dreamweaver的Spry技术框架 22.2.3 Spry构件 Spry构件实际上就是可视页面元素，主要由HTML、CSS和JavaScript三部分代码组成。通过增加用户交互接口，Spry构件提供了丰富的用户体验。大部分Spry构件都是HTML元素的增强版，主要包括：Spry菜单栏、Spry选项卡式面板、Spry折叠式、Spry可折叠面板和Spry工具提示。这些构件使用比较简单，操作步骤基本相同，下面我们以插入一个Spry选项卡式面板为例进行讲解。 在前面章节中我们曾经讲解了选项卡的设计方法，而使用Dreamweaver插入Spry构件就比较简单、快捷。 22-12.html 《网页制作与网站开发从入门到精通》配套视频 样吧视频教室（www.css8.cn）

15. 22.2 使用Dreamweaver的Spry技术框架 22.2.4 Spry表单验证 在Spry技术框架中还包含一组表单验证构件，这些构件能够为文本框、密码域、复选框、单选按钮等表单域提供不同形式的验证服务，减轻设计师为了验证表单值而必须手工编写代码的繁琐。Spry表单验证构建主要包括：Spry验证文本域、Spry验证文本区域、Spry验证复选框、Spry验证选择、Spry验证密码、Spry验证确认、Spry验证单选按钮组。 在这些验证构件中，Spry验证文本区域是最实用，功能也最为丰富，其他验证构件就相对比较简单，下面我们就以示例的形式讲解Spry验证文本区域的使用，其他构件的插入操作由于相同就不再详细介绍。 22-13.html 《网页制作与网站开发从入门到精通》配套视频 样吧视频教室（www.css8.cn）

16. 22.2 使用Dreamweaver的Spry技术框架 22.2.5 Spry特效 • Spry框架还提供了一组Spry特殊动态效果，这些效果包括动态过渡和内容高亮显示。利用这些动态效果可以定义元素以动态方式进行显示或隐藏。Spry特效主要包括： • 增大/收缩：使元素变大或变小。 • 挤压：使元素向左上角挤压，只到消失。 • 显示/渐隐：使元素显示或渐隐。 • 晃动：为元素模拟晃动效果。 • 滑动：根据指定方向和方式移动元素。 • 高亮颜色：更改元素的背景颜色。 • Spry效果放置在【行为】面板中，Dreamweaver把作为一种网页特效来使用。下面我们以图像缩放显示特效为例介绍Spry效果的使用方法。 • 22-14.html 《网页制作与网站开发从入门到精通》配套视频 样吧视频教室（www.css8.cn）