• 1.4.8 转到URL
• “转到URL”动作可以在当前窗口或指定的框架中打开一个新页面。
• 1.4.9 拖动AP 元素
• 如果使用了拖动AP 元素行为，那么用户就可以制作出能让浏览者任意拖动的对 象。甚至可以利用AP Div 元素在网页中制作拼图游戏。
拖动AP元素
AP（Absolute Position）元素是指绝对定位 的元素,拖动AP元素行为可以让访问者拖动绝 对定位的AP元素。
在添加“拖动AP元素”行为之前，首先要在 文档中插入AP元素，单击“插入”面板“布局” 类的“绘制AP DIV”按钮，如图7所示。
在网页的“设计”视图中拖动鼠标绘制AP元 素。然后在AP元素内部插入图像或输入文本内 容等。
12
在网页的“设计”视图中任意位置单击，使焦
点离开AP元素，单击“行为”面板中的按钮， 在弹出的快捷菜单中选择“拖动AP元素”命令， 打开“拖动AP元素”对话框，如图所示，单击 “确定”按钮
1.2 应用行为
• 用户可以将行为添加到整个文档（即 添加到<body> 标签），还可以添加到链 接、图像、表单元素或其他HTML 元素 中的任何一种。
1.3 修改行为
•在添加了行为之后，用户可以修改 触发动作的事件，添加或删除动作 以及修改动作的参数。
1.4 设置行为
• 在“行为”面板中有多种行为设置项，每一种行为都会有自己的设置方式和 适用效果。
• 1.插入菜单栏构件 • 在网页中，单击“插入”面板“布局”分类中的
“Spry菜单栏”按钮，如图7所示。在弹出的 “Spry菜单栏”对话框中选择“水平”或“垂 直”，如图10所示，单击“确定”按钮。在网页 “设计”视图中显示了插入的菜单栏构件，如图 11所示。
20
图10 “Spry菜单栏”
图11 “Spry菜单栏”和“属性”面
15
什么是Spry控件？
• Spry控件是一组基于Spry框架的常用用户界面组 件
• 使用Spry控件可以快速的在网页上添加具有动态 效果的组件如菜单、选项卡等。
• 可以使用CSS来自定义这些组件的外观 • 这些构件包括XML驱动的列表和表格、折叠构件、
选项卡式界面和具有验证功能的表单元素。
2.1Spry 效果
“拖动元素”对话框
13
设置完成后在浏览器中浏览网页，单击并 拖动AP元素中的图像，可以发现该图像能 够被移动到任意位置，释放鼠标后，该图 像将停留在新位置上。此功能可用来制作 拼图游戏等。
14
2 Spry框架
2.1Spry 效果 2.2Spry菜单栏 2.3Spry选项卡式面板 2.4Spry折叠式 2.5Spry可折叠面板
• 1.4.5 检查插件
• 使用“检查插件”动作可以根据浏览者是否安装了指定的插件转到不同的网 页。
• 1.4.6 预先载入图像
• “预先载入图像”动作可以将不会立即出现在页上的图像（例如，通过 行为或JavaScript 换入的图像）载入浏览器缓存中。
• 1.4.7 交换图像
• “交换图像”动作可以通过修改<img> 标签的src 属性将一个图像和另 一个图像进行交换。
网页交互和特效
1
1 网页交互行为 2 Spry框架
2
使用行为
• 1.1 什么是行为 • 1.2 应用行为 • 1.3 修改行为 • 1.4 设置行为
1.1 什么是行为
• 行为用来动态响应用户操作、改变 当前页面效果或执行特定任务。行为 是事件和由该事件触发的动作的组合 。行为代码是客户端JavaScript 代码 ，它运行于浏览器中，而不是服选择要删除的主菜单项或后两列的子菜单
项的名称，然后单击“上移项”或“下移项”按钮 即可。 • 5.保存构件脚本和层叠样式表 • 按Ctrl+S快捷键保存，会弹出“复制相关文件”对 话框，里面有扩展名为.css、.js、.gif的文件， 单击“确定”按钮。这些文件自动被保存在了站点 “SpryAssets”文件夹下。 • Spry框架中的每个构件都与唯一的CSS和 JavaScript文件相关联（还包含一些图片，起到美 化作用）。CSS文件设置构件样式，JavaScript赋 予控件功能，当使用Dreamweaver插入这些控件时， Dreamweaver会自动将这些文件连接到网页中，第 一次保存时，会提示保存这些文件到站点中。
• 使用“改变属性”动作修改对象某个属性值。用户可以修改的属性是由浏览器 决定的。
• 1.4.4 检查表单
• “检查表单”动作主要是检查指定文本域的内容以确保用户输入了正确的数 据类型。
使用onBlur 事件将此动作分别添加到各文本域，在用户填写表单时对域进行检查； 使用onSubmit 事件将其添加到表单，在用户单击“提交”按钮时对多个文本域进行检查以确保数据的 有效性。
21
板
• 2.添加菜单项 • 在“设计”视图中选择菜单栏构件，在“属性”面
板中单击第1列（主菜单项）上方的“添加菜单项” 按钮，即可添加一个新的菜单项，然后在最右侧的 “文本”文本框中可以重命名该菜单项，在“链接” 文本框总可输入或选择要链接到的页面。 • 选中第1列某个主菜单项名称（例如，项目1），单 击第2列上方的按钮，即可向该主菜单项中添加一 个子菜单项。在右侧的“文本”文本框中可以重命 名该子菜单项。，在“链接”文本框总可输入或选 择要链接到的页面。 • 使用同样的方法，可以在第3列中添加子菜单的下 一级菜单项。 • 3.删除菜单项 • 在第1列选择要删除的主菜单项或后两列的子菜单 项的名称，然后单击“删除菜单项”按钮即可。 22
• 1.4.1 弹出消息
• 弹出消息”动作会显示一个带有指定消息的JavaScript 警告窗口。
• 1.4.2 打开浏览器窗口
• 使用“打开浏览器窗口”动作在一个新的窗口中打开URL。用户可以指定新窗 口的属性（包括其大小）、特性（是否可以调整大小、是否具有菜单栏等）和名称 。
• 1.4.3 改变属性
• Spry效果具有视觉增强功能，可以将其应 用于页面上几乎所有HTML的元素。效果通 常用于在一段时间内高亮显示信息，创建 动画过渡或者以可视化方式修改页面元素。
• 选中某个元素，单击“行为”面板中的按 钮，在弹出的快捷菜单中选择“效果”命 令，弹出下级子菜单，如图9所示。
17
图9 Spry效果
单击某一个效果，弹出相应的对话框，设置后，单击“确定”按钮， 在浏览器中单击这个元素，即可看到效果。可以组合两个或多个效果来 创建有趣的视觉效果。
18
• 利用Spry效果实现一个具有动态效果的相册
提示：为取得较好的效果，可将效果的持续时间缩小到100ms以下
2.2 Spry菜单栏
• 菜单栏构件是一组可导航的菜单按钮，当站点访 问者将鼠标悬停在其中的某个按钮上时，将显示 相应的子菜单。
