《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中注释使用方法举例详解

《Python中注释使用方法举例详解》在Python编程语言中注释是必不可少的一部分,它有助于提高代码的可读性和维护性,:本文主要介绍Python中注释使用方法的相关资料,需要的朋友可以参考下... 目录一、前言二、什么是注释?示例:三、单行注释语法:以 China编程# 开头,后面的内容为注释内容示例:示例:四

Go语言数据库编程GORM 的基本使用详解

《Go语言数据库编程GORM的基本使用详解》GORM是Go语言流行的ORM框架,封装database/sql,支持自动迁移、关联、事务等,提供CRUD、条件查询、钩子函数、日志等功能,简化数据库操作... 目录一、安装与初始化1. 安装 GORM 及数据库驱动2. 建立数据库连接二、定义模型结构体三、自动迁

ModelMapper基本使用和常见场景示例详解

《ModelMapper基本使用和常见场景示例详解》ModelMapper是Java对象映射库,支持自动映射、自定义规则、集合转换及高级配置(如匹配策略、转换器),可集成SpringBoot,减少样板... 目录1. 添加依赖2. 基本用法示例:简单对象映射3. 自定义映射规则4. 集合映射5. 高级配置匹

Spring 框架之Springfox使用详解

《Spring框架之Springfox使用详解》Springfox是Spring框架的API文档工具,集成Swagger规范,自动生成文档并支持多语言/版本,模块化设计便于扩展,但存在版本兼容性、性... 目录核心功能工作原理模块化设计使用示例注意事项优缺点优点缺点总结适用场景建议总结Springfox 是

嵌入式数据库SQLite 3配置使用讲解

《嵌入式数据库SQLite3配置使用讲解》本文强调嵌入式项目中SQLite3数据库的重要性,因其零配置、轻量级、跨平台及事务处理特性,可保障数据溯源与责任明确,详细讲解安装配置、基础语法及SQLit... 目录0、惨痛教训1、SQLite3环境配置(1)、下载安装SQLite库(2)、解压下载的文件(3)、

使用Python绘制3D堆叠条形图全解析

《使用Python绘制3D堆叠条形图全解析》在数据可视化的工具箱里,3D图表总能带来眼前一亮的效果,本文就来和大家聊聊如何使用Python实现绘制3D堆叠条形图,感兴趣的小伙伴可以了解下... 目录为什么选择 3D 堆叠条形图代码实现:从数据到 3D 世界的搭建核心代码逐行解析细节优化应用场景:3D 堆叠图

Springboot如何正确使用AOP问题

《Springboot如何正确使用AOP问题》:本文主要介绍Springboot如何正确使用AOP问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录​一、AOP概念二、切点表达式​execution表达式案例三、AOP通知四、springboot中使用AOP导出

Navicat数据表的数据添加,删除及使用sql完成数据的添加过程

《Navicat数据表的数据添加,删除及使用sql完成数据的添加过程》:本文主要介绍Navicat数据表的数据添加,删除及使用sql完成数据的添加过程,具有很好的参考价值,希望对大家有所帮助,如有... 目录Navicat数据表数据添加,删除及使用sql完成数据添加选中操作的表则出现如下界面,查看左下角从左

深度解析Spring AOP @Aspect 原理、实战与最佳实践教程

《深度解析SpringAOP@Aspect原理、实战与最佳实践教程》文章系统讲解了SpringAOP核心概念、实现方式及原理,涵盖横切关注点分离、代理机制(JDK/CGLIB)、切入点类型、性能... 目录1. @ASPect 核心概念1.1 AOP 编程范式1.2 @Aspect 关键特性2. 完整代码实

python如何创建等差数列

《python如何创建等差数列》:本文主要介绍python如何创建等差数列的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录python创建等差数列例题运行代码回车输出结果总结python创建等差数列import numpy as np x=int(in