《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数据验证神器Pydantic库的使用和实践中的避坑指南

《Python数据验证神器Pydantic库的使用和实践中的避坑指南》Pydantic是一个用于数据验证和设置的库,可以显著简化API接口开发,文章通过一个实际案例,展示了Pydantic如何在生产环... 目录1️⃣ 崩溃时刻:当你的API接口又双叒崩了!2️⃣ 神兵天降:3行代码解决验证难题3️⃣ 深度

Linux内核定时器使用及说明

《Linux内核定时器使用及说明》文章详细介绍了Linux内核定时器的特性、核心数据结构、时间相关转换函数以及操作API,通过示例展示了如何编写和使用定时器,包括按键消抖的应用... 目录1.linux内核定时器特征2.Linux内核定时器核心数据结构3.Linux内核时间相关转换函数4.Linux内核定时

python中的flask_sqlalchemy的使用及示例详解

《python中的flask_sqlalchemy的使用及示例详解》文章主要介绍了在使用SQLAlchemy创建模型实例时,通过元类动态创建实例的方式,并说明了如何在实例化时执行__init__方法,... 目录@orm.reconstructorSQLAlchemy的回滚关联其他模型数据库基本操作将数据添

Spring配置扩展之JavaConfig的使用小结

《Spring配置扩展之JavaConfig的使用小结》JavaConfig是Spring框架中基于纯Java代码的配置方式,用于替代传统的XML配置,通过注解(如@Bean)定义Spring容器的组... 目录JavaConfig 的概念什么是JavaConfig?为什么使用 JavaConfig?Jav

JavaWeb项目创建、部署、连接数据库保姆级教程(tomcat)

《JavaWeb项目创建、部署、连接数据库保姆级教程(tomcat)》:本文主要介绍如何在IntelliJIDEA2020.1中创建和部署一个JavaWeb项目,包括创建项目、配置Tomcat服务... 目录简介:一、创建项目二、tomcat部署1、将tomcat解压在一个自己找得到路径2、在idea中添加

Java使用Spire.Doc for Java实现Word自动化插入图片

《Java使用Spire.DocforJava实现Word自动化插入图片》在日常工作中,Word文档是不可或缺的工具,而图片作为信息传达的重要载体,其在文档中的插入与布局显得尤为关键,下面我们就来... 目录1. Spire.Doc for Java库介绍与安装2. 使用特定的环绕方式插入图片3. 在指定位

Springboot3 ResponseEntity 完全使用案例

《Springboot3ResponseEntity完全使用案例》ResponseEntity是SpringBoot中控制HTTP响应的核心工具——它能让你精准定义响应状态码、响应头、响应体,相比... 目录Spring Boot 3 ResponseEntity 完全使用教程前置准备1. 项目基础依赖(M

Java使用Spire.Barcode for Java实现条形码生成与识别

《Java使用Spire.BarcodeforJava实现条形码生成与识别》在现代商业和技术领域,条形码无处不在,本教程将引导您深入了解如何在您的Java项目中利用Spire.Barcodefor... 目录1. Spire.Barcode for Java 简介与环境配置2. 使用 Spire.Barco

Java利用Spire.Doc for Java实现在模板的基础上创建Word文档

《Java利用Spire.DocforJava实现在模板的基础上创建Word文档》在日常开发中,我们经常需要根据特定数据动态生成Word文档,本文将深入探讨如何利用强大的Java库Spire.Do... 目录1. Spire.Doc for Java 库介绍与安装特点与优势Maven 依赖配置2. 通过替换

Android使用java实现网络连通性检查详解

《Android使用java实现网络连通性检查详解》这篇文章主要为大家详细介绍了Android使用java实现网络连通性检查的相关知识,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录NetCheck.Java(可直接拷贝)使用示例(Activity/Fragment 内)权限要求