《Dreamweaver CS6 完全自学教程》笔记 第十五章:使用行为创建网页特效

本文主要是介绍《Dreamweaver CS6 完全自学教程》笔记 第十五章:使用行为创建网页特效,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

文章目录

  • 第十五章:使用行为创建网页特效
    • 15.1 行为简介
    • 15.2 行为面板
    • 15.3 使用行为
      • 15.3.1 交换图像
      • 15.3.2 恢复交换图像
      • 15.3.3 弹出信息
      • 15.3.4 改变属性
      • 15.3.5 拖动 AP 元素
      • 15.3.6 调用 JavaScript
      • 15.3.7 打开浏览器窗口
      • 15.3.8 转到 URL
      • 15.3.9 设置文本
    • 15.4 行为的管理与修改
      • 15.4.1 行为参数的修改
      • 15.4.2 行为的排序
      • 15.4.3 删除行为


第十五章:使用行为创建网页特效


15.1 行为简介

行为由 JavaScript 函数和事件处理程序组成。Dreamweaver 中的行为是将 JavaScript 代码放置在文档中,从而以多种方式更改页面或引起某些任务的执行。

行为由事件和触发该事件的动作组成。在 “行为” 面板中,可以先指定一个动作,然后指定触发该动作的事件,从而将行为添加到页面。

事件是浏览器生成的消息,指示该页的访问者执行了某种操作。
动作是由预先编写的 JavaScript 代码组成的,这些代码执行特定的任务。

把行为附加到对象上之后,在浏览器中只要对该元素发生了所指定的事件,浏览器就会调用与该事件关联的动作。单个事件可以触发多个不同的动作,可以指定这些动作发生的顺序,以不同时间来执行。




15.2 行为面板

点击 窗口 -> 行为 ,打开 “行为” 面板,或者按快捷键 Shift + F4 打开。

在 “行为” 面板上点击 “显示设置事件” 按钮,将显示已经设置了的行为。

在这里插入图片描述
点击 “显示所有事件” 按钮,将显示所有的事件。

在这里插入图片描述
点击 “添加行为” 按钮,为选定的对象加载动作,即自动生成 JavaScript 代码。

在这里插入图片描述



动作介绍:

  • 建议不再使用: 建议不再使用的一些过时的行为动作。
  • 交换图像: 通过改变 <img> 的 src 属性来改变图像,可用来创建活动按钮或其他图像效果。
  • 弹出信息: 显示带指定信息的 JS 警告,用户可嵌入任何有效的 JS 功能。
  • 恢复交换图像: 恢复交换图像为原图。
  • 打开浏览器窗口: 在新窗口中打开 URL ,可设置新窗口的尺寸等属性。
  • 拖动 AP 元素: 允许用户拖拽层。
  • 改变属性: 改变对象属性值。
  • 效果: 制作一些类似增大、搜索等效果。
  • 显示 - 隐藏元素: 显示、隐藏一个或多个层窗口,或者恢复默认。
  • 检查插件: 利用该动作可根据访问者所安装的插件,发送给不同的网页。
  • 检查表单: 检查输入框的内容,以确保用户输入的数据格式正确无误。
  • 设置导航栏图像: 将图片加入导航栏或改变导航栏的图片显示。
  • 设置文本: 设置层文本、设置文本域文字、设置框架文本、设置状态栏文本。
  • 调用 JavaScript: 执行 JS 代码。
  • 跳转菜单: 当用户创建了一个跳转菜单时,Dreamweaver 将创建一个菜单对象,并为其附加行为。在 “行为” 面板中双击 “跳转菜单” 动作可编辑跳转菜单。
  • **跳转菜单开始:**当用户已经创建了一个跳转菜单时,在其后面会添加一个行为动作按钮。
  • 转到 URL: 在当前窗口或指定框架打开新页面。
  • 预先载入图像: 该图像在页面载入浏览器缓冲区之后不会立即显示,它主要用于时间线、行为等,从而防止因下载引起的延迟。
  • 显示事件: 显示所适合的浏览器版本。
  • 获取更多行为: 从网站上获得更多的动作功能。



15.3 使用行为

15.3.1 交换图像

因为这个动作只影响 src 属性,所以变换图像的尺寸应该一致。否则显示时会压缩或扩展。

先插入图像,在 “属性” 面板中输入图像的名称,还可以插入多幅,将这些作为原始图像。
然后选择要附加替换图像行为的图像,点击 “行为” 面板上的加号,打开 “交换图像” 对话框。在 “图像” 列表框中选择原始图像,在 “设定原始档为” 文本框中输入替换后的图像文件的路径,可设置多个替换图像。



15.3.2 恢复交换图像

当鼠标移出对象区域后,所有被替换显示的图像恢复为原始图像。若在添加 “交换图像” 动作时选择了 “鼠标划开时恢复图像” 选项,则不需要手动选择 “恢复交换图像” 动作。

选择添加了交换图像的对象。点击 “行为” 面板上的 “添加行为” 按钮,打开 “动作” 菜单,选择 “恢复交换图像” 命令,打开 “恢复交换图像” 对话框,点击 “确定”。



15.3.3 弹出信息

点击 “行为” 面板上的 “添加行为” 按钮,选择 “弹出信息” ,打开 “弹出信息” 对话框。在 “消息” 文本框中输入要弹出的文字信息。



15.3.4 改变属性

选中对象,点击 “行为” 面板上的 “添加行为” 按钮,选择 “改变属性” ,打开 “改变属性” 对话框。

  • 元素类型: 选择对象类型。
  • 元素 ID: 选择一种对象类型。
  • 属性: 选择一个属性,或输入准确的 JS 名称。
  • 新的值: 输入该属性的新值。


15.3.5 拖动 AP 元素

用此动作可以创建滑动控件、创建拼图游戏等。
由于访问者在拖拽层之前必须先调用 “拖动 AP 元素” 动作,所以请确保触发动作的事件发生在拖拽层之前。 最佳的方法是使用 onLoad 事件将 “拖动 AP 元素” 附加到 body 对象上,不过也可以使用 onMouseOver 事件将它附加到填满整个层的链接上。



15.3.6 调用 JavaScript

选择一个附加行为的对象,点击 “行为” 面板上的 “添加行为” 按钮,选择 “调用 JavaScript ” ,打开 “调用 JavaScript ” 对话框。在 JS 文本框中输入要触发的函数名称,如要创建一个关闭当前页面的按钮,可以输入 window.close() 。点击 “确定” 完成。在 “行为” 面板中选择相应的事件项,如 onClick。



15.3.7 打开浏览器窗口

打开一个页面文档,点击 “行为” 面板上的 “添加行为” 按钮,选择 “打开浏览器窗口” ,打开 “打开浏览器窗口” 对话框。

  • 要显示的 URL: 设置打开窗口的 URL。

  • 属性:

    • 导航工具栏:浏览器窗口的导航工具栏。
    • 菜单条:浏览器窗口的菜单。
    • 地址工具栏:地址栏。
    • 需要时使用滚动条:当页面内容过多时出现滚动条。
    • 状态栏:浏览器下方的状态栏。
    • 调整大小手柄:浏览器窗口大小可调整。
    • 窗口名称:如果浏览器按这个名字找到了一个窗口或框架,就在这个窗口中打开,否则生成新的窗口。


15.3.8 转到 URL

选择一个要附加行为的对象,点击 “行为” 面板上的 “添加行为” 按钮,选择 “转到 URL ” ,打开 “转到 URL ” 对话框。在 “打开在” 列表中选择打开链接的窗口。在 “ URL ” 中输入设置链接的 URL 地址。



15.3.9 设置文本

“设置文本” 动作中包含了 4 个选项,分别是 “设置容器的文本”、“设置文本域文字”、“设置框架文本”、“设置状态栏文本”。



设置容器的文本:

将页面上的现有容器(即可以包含文本或其他元素中的任何元素)的内容和格式替换为指定的内容,该内容包括任何有效的 HTML 源代码。

选中对象,点击 “行为” 面板上的 “添加行为” 按钮,选择 “设置文本 -> 设置容器的文本” ,打开 “设置容器的文本” 对话框。

  • 容器: 显示了该页面中可以包含的文本或其他元素中的任何元素。
  • 新建 HTML: 在该文本框中输入要在文本域中显示的文本。


设置文本域文字:

用户以指定的内容替换表单文本域的内容,可以在文本中嵌入任何有效的 JS 函数调用、属性、全局变量或其他表达式。若要嵌入 JS 表达式,必须将其放在 {} 中。

选择已经创建的文本域,点击 “行为” 面板上的 “添加行为” 按钮,选择 “设置文本 -> 设置文本域文字” ,打开 “设置文本域文字” 对话框。



设置框架文本:

允许用户动态设置框架的文本,以用户指定的内容替换框架的内容和格式,此内容可包含任何有效的 HTML 代码。使用 “设置框架文本” 动作可以动态显示信息。
尽管 “设置框架文本” 会替换框架的格式设置,但是仍可勾选 “保留背景颜色” 以保留网页背景和文本颜色属性。
可以在文本中嵌入任何有效的 JS 函数调用、属性、全局变量或其他表达方式。若要嵌入一个 JS 表达式,必须将其放在 {} 中。
点击 “行为” 面板上的 “添加行为” 按钮,选择 “设置文本 -> 设置框架文本” ,打开 “设置框架文本” 对话框。在 “框架” 下拉列表中选择目标框架。点击 “获取当前 HTML ” 可复制当前框架 body 部分的内容。



设置状态栏文本:

用于在浏览器状态栏中显示信息。弹出式消息框多用来显示一些重要信息,而状态栏文本多用来显示提示性信息。




15.4 行为的管理与修改

15.4.1 行为参数的修改

点击 窗口 -> 行为 或按快捷键 Shift + F4 ,打开 “行为” 面板。选择已设置的行为对象,双击,打开参数设置对话框进行修改。



15.4.2 行为的排序

单击选择动作,然后通过上下按钮进行排序。

在这里插入图片描述
或通过剪切、粘贴进行移动。



15.4.3 删除行为

选择行为对象,按减号进行删除。

在这里插入图片描述
或按 Delete 键即可。




返回

这篇关于《Dreamweaver CS6 完全自学教程》笔记 第十五章:使用行为创建网页特效的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/650747

相关文章

python使用库爬取m3u8文件的示例

《python使用库爬取m3u8文件的示例》本文主要介绍了python使用库爬取m3u8文件的示例,可以使用requests、m3u8、ffmpeg等库,实现获取、解析、下载视频片段并合并等步骤,具有... 目录一、准备工作二、获取m3u8文件内容三、解析m3u8文件四、下载视频片段五、合并视频片段六、错误

HTML5 getUserMedia API网页录音实现指南示例小结

《HTML5getUserMediaAPI网页录音实现指南示例小结》本教程将指导你如何利用这一API,结合WebAudioAPI,实现网页录音功能,从获取音频流到处理和保存录音,整个过程将逐步... 目录1. html5 getUserMedia API简介1.1 API概念与历史1.2 功能与优势1.3

gitlab安装及邮箱配置和常用使用方式

《gitlab安装及邮箱配置和常用使用方式》:本文主要介绍gitlab安装及邮箱配置和常用使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录1.安装GitLab2.配置GitLab邮件服务3.GitLab的账号注册邮箱验证及其分组4.gitlab分支和标签的

SpringBoot3应用中集成和使用Spring Retry的实践记录

《SpringBoot3应用中集成和使用SpringRetry的实践记录》SpringRetry为SpringBoot3提供重试机制,支持注解和编程式两种方式,可配置重试策略与监听器,适用于临时性故... 目录1. 简介2. 环境准备3. 使用方式3.1 注解方式 基础使用自定义重试策略失败恢复机制注意事项

nginx启动命令和默认配置文件的使用

《nginx启动命令和默认配置文件的使用》:本文主要介绍nginx启动命令和默认配置文件的使用,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录常见命令nginx.conf配置文件location匹配规则图片服务器总结常见命令# 默认配置文件启动./nginx

在Windows上使用qemu安装ubuntu24.04服务器的详细指南

《在Windows上使用qemu安装ubuntu24.04服务器的详细指南》本文介绍了在Windows上使用QEMU安装Ubuntu24.04的全流程:安装QEMU、准备ISO镜像、创建虚拟磁盘、配置... 目录1. 安装QEMU环境2. 准备Ubuntu 24.04镜像3. 启动QEMU安装Ubuntu4

使用Python和OpenCV库实现实时颜色识别系统

《使用Python和OpenCV库实现实时颜色识别系统》:本文主要介绍使用Python和OpenCV库实现的实时颜色识别系统,这个系统能够通过摄像头捕捉视频流,并在视频中指定区域内识别主要颜色(红... 目录一、引言二、系统概述三、代码解析1. 导入库2. 颜色识别函数3. 主程序循环四、HSV色彩空间详解

Windows下C++使用SQLitede的操作过程

《Windows下C++使用SQLitede的操作过程》本文介绍了Windows下C++使用SQLite的安装配置、CppSQLite库封装优势、核心功能(如数据库连接、事务管理)、跨平台支持及性能优... 目录Windows下C++使用SQLite1、安装2、代码示例CppSQLite:C++轻松操作SQ

Python常用命令提示符使用方法详解

《Python常用命令提示符使用方法详解》在学习python的过程中,我们需要用到命令提示符(CMD)进行环境的配置,:本文主要介绍Python常用命令提示符使用方法的相关资料,文中通过代码介绍的... 目录一、python环境基础命令【Windows】1、检查Python是否安装2、 查看Python的安

Python并行处理实战之如何使用ProcessPoolExecutor加速计算

《Python并行处理实战之如何使用ProcessPoolExecutor加速计算》Python提供了多种并行处理的方式,其中concurrent.futures模块的ProcessPoolExecu... 目录简介完整代码示例代码解释1. 导入必要的模块2. 定义处理函数3. 主函数4. 生成数字列表5.