第10章-网页交互和特效杨晓.pptVIP

第10章 网页交互和特效 10.1 网页交互行为10.2 Spry框架10.3 上机练习：制作导航条10.4 上机练习：制作可隐藏的产品信息 10.1网页交互行为 10.1.1交换图像10.1.2弹出信息10.1.3打开浏览器窗口10.1.4拖动AP元素 10.1.1交换图像 交换图像行为时通过改变img标签的src属性将一个图像和另一个图像进行交换，或者交换多个图像。 如果要添加“交换图像”行为，首先要在文档中插入一个图像，然后选择该图像，单击“标签检查器”面板中的“行为”面板，如图10-1所示，然后单击“添加行为”按钮，在弹出的快捷菜单中选择“交换图像”命令，如图10-2所示，在弹出的“交换图像”对话框中，如图10-3所示，单击“浏览”按钮选择另外一张要交换的图像。 图10-1 “标签检查器”面板中的“行为” 在“行为”面板中会显示已设置的两个行为，如图10-4所示。 左边一列是事件，单击可以进行选择其他事件。右边一列是Dreamweaver内置的行为，如果想编辑某个行为可双击右边一列中的某个行为。 图10-4表示为img标签的onMouseOut（鼠标移出）事件添加了“恢复交换图像”行为，为onMouseOver（鼠标滑过）事件添加了“交换图像”行为，当img标签这两个事件被触发时，执行相应的行为。 如果想删除某个行为，先选中一行，然后单击 “删除行为”按钮。 在网页“代码”视图中scrip/script标签括起来的内容就是JavaScript脚本语言 10.1.2弹出信息 弹出信息行为是用于弹出一个显示预设信息的Javascript警告框，该警告框只有一个“确定”按钮，所以使用此行为可以为用户提供信息，但不能提供选择操作。 选择文档中的一个标签，单击“行为”面板中的按钮，在弹出的快捷菜单中选择“弹出信息”命令，如图10-2所示，然后在弹出的对话框中输入文字信息，如图10-5所示。单击“确定”按钮。 10.1.3打开浏览器窗口 打开浏览器窗口可以在一个新的窗口中打开页面。同时，还可以指定该新窗口的属性、特性和名称。 选择文档中的某一标签，单击“行为”面板中的按钮，在弹出的快捷菜单中选择“打开浏览器窗口”命令，如图10-2所示，然后，在弹出的“打开浏览器窗口”对话框，如图10-6所示。 10.1.4拖动AP元素 10.2.1Spry 效果 Spry效果具有视觉增强功能，可以将其应用于页面上几乎所有HTML的元素。效果通常用于在一段时间内高亮显示信息，创建动画过渡或者以可视化方式修改页面元素。 选中某个元素，单击“行为”面板中的按钮，在弹出的快捷菜单中选择“效果”命令，弹出下级子菜单，如图10-9所示。 10.2.2 Spry菜单栏 菜单栏构件是一组可导航的菜单按钮，当站点访问者将鼠标悬停在其中的某个按钮上时，将显示相应的子菜单。 1.插入菜单栏构件 在网页中，单击“插入”面板“布局”分类中的“Spry菜单栏”按钮，如图10-7所示。在弹出的“Spry菜单栏”对话框中选择“水平”或“垂直”，如图10-10所示，单击“确定”按钮。在网页“设计”视图中显示了插入的菜单栏构件，如图10-11所示。 2.添加菜单项 在“设计”视图中选择菜单栏构件，在“属性”面板中单击第1列（主菜单项）上方的“添加菜单项”按钮，即可添加一个新的菜单项，然后在最右侧的“文本”文本框中可以重命名该菜单项，在“链接”文本框总可输入或选择要链接到的页面。 选中第1列某个主菜单项名称（例如，项目1），单击第2列上方的按钮，即可向该主菜单项中添加一个子菜单项。在右侧的“文本”文本框中可以重命名该子菜单项。，在“链接”文本框总可输入或选择要链接到的页面。 使用同样的方法，可以在第3列中添加子菜单的下一级菜单项。 3.删除菜单项 在第1列选择要删除的主菜单项或后两列的子菜单项的名称，然后单击“删除菜单项”按钮即可。 4.排序菜单项 在第1列选择要删除的主菜单项或后两列的子菜单项的名称，然后单击“上移项”或“下移项”按钮即可。 5.保存构件脚本和层叠样式表 按Ctrl+S快捷键保存，会弹出“复制相关文件”对话框，里面有扩展名为.css、.js、.gif的文件，单击“确定”按钮。这些文件自动被保存在了站点“SpryAssets”文件夹下。 Spry框架中的每个构件都与唯一的CSS和JavaScript文件相关联（还包含一些图片，起到美化作用）。CSS文件设置构件样式，JavaScript赋予控件功能，当使用Dreamweaver插入这些控件时，Dreamweaver会自动将这些文件连接到网页中，第一次保存时，会提示保存这些文件到站点中。 10.2.3 Spry选项卡式面板 Spry选项卡式面板构件是一组面板，用户可以通过单击面板上的选项