《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

相关文章

vue使用docxtemplater导出word

《vue使用docxtemplater导出word》docxtemplater是一种邮件合并工具,以编程方式使用并处理条件、循环,并且可以扩展以插入任何内容,下面我们来看看如何使用docxtempl... 目录docxtemplatervue使用docxtemplater导出word安装常用语法 封装导出方

Linux换行符的使用方法详解

《Linux换行符的使用方法详解》本文介绍了Linux中常用的换行符LF及其在文件中的表示,展示了如何使用sed命令替换换行符,并列举了与换行符处理相关的Linux命令,通过代码讲解的非常详细,需要的... 目录简介检测文件中的换行符使用 cat -A 查看换行符使用 od -c 检查字符换行符格式转换将

使用Jackson进行JSON生成与解析的新手指南

《使用Jackson进行JSON生成与解析的新手指南》这篇文章主要为大家详细介绍了如何使用Jackson进行JSON生成与解析处理,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录1. 核心依赖2. 基础用法2.1 对象转 jsON(序列化)2.2 JSON 转对象(反序列化)3.

使用Python实现快速搭建本地HTTP服务器

《使用Python实现快速搭建本地HTTP服务器》:本文主要介绍如何使用Python快速搭建本地HTTP服务器,轻松实现一键HTTP文件共享,同时结合二维码技术,让访问更简单,感兴趣的小伙伴可以了... 目录1. 概述2. 快速搭建 HTTP 文件共享服务2.1 核心思路2.2 代码实现2.3 代码解读3.

Elasticsearch 在 Java 中的使用教程

《Elasticsearch在Java中的使用教程》Elasticsearch是一个分布式搜索和分析引擎,基于ApacheLucene构建,能够实现实时数据的存储、搜索、和分析,它广泛应用于全文... 目录1. Elasticsearch 简介2. 环境准备2.1 安装 Elasticsearch2.2 J

使用C#代码在PDF文档中添加、删除和替换图片

《使用C#代码在PDF文档中添加、删除和替换图片》在当今数字化文档处理场景中,动态操作PDF文档中的图像已成为企业级应用开发的核心需求之一,本文将介绍如何在.NET平台使用C#代码在PDF文档中添加、... 目录引言用C#添加图片到PDF文档用C#删除PDF文档中的图片用C#替换PDF文档中的图片引言在当

Linux系统中卸载与安装JDK的详细教程

《Linux系统中卸载与安装JDK的详细教程》本文详细介绍了如何在Linux系统中通过Xshell和Xftp工具连接与传输文件,然后进行JDK的安装与卸载,安装步骤包括连接Linux、传输JDK安装包... 目录1、卸载1.1 linux删除自带的JDK1.2 Linux上卸载自己安装的JDK2、安装2.1

Java中List的contains()方法的使用小结

《Java中List的contains()方法的使用小结》List的contains()方法用于检查列表中是否包含指定的元素,借助equals()方法进行判断,下面就来介绍Java中List的c... 目录详细展开1. 方法签名2. 工作原理3. 使用示例4. 注意事项总结结论:List 的 contain

C#使用SQLite进行大数据量高效处理的代码示例

《C#使用SQLite进行大数据量高效处理的代码示例》在软件开发中,高效处理大数据量是一个常见且具有挑战性的任务,SQLite因其零配置、嵌入式、跨平台的特性,成为许多开发者的首选数据库,本文将深入探... 目录前言准备工作数据实体核心技术批量插入:从乌龟到猎豹的蜕变分页查询:加载百万数据异步处理:拒绝界面

Android中Dialog的使用详解

《Android中Dialog的使用详解》Dialog(对话框)是Android中常用的UI组件,用于临时显示重要信息或获取用户输入,本文给大家介绍Android中Dialog的使用,感兴趣的朋友一起... 目录android中Dialog的使用详解1. 基本Dialog类型1.1 AlertDialog(