Dreamweaver网页设计 第9章层、行为与时间轴
Dreamweaver 网页设计 第9章 层、行为与时间轴
【学习概述】 层、行为、时间轴可以说是网页设计中 革命性的技术。搭配使用层、行为、时间 轴可以制作出活泼多样的动态页面以及效 果惊人的互动网页。本章内容包括:建立 层、编辑层、层与表格的相互转化、行为 时间轴等。重点是如何综合运用层、行为、 时间轴
【学习概述】 层、行为、时间轴可以说是网页设计中 革命性的技术。搭配使用层、行为、时间 轴可以制作出活泼多样的动态页面以及效 果惊人的互动网页。本章内容包括：建立 层、编辑层、层与表格的相互转化、行为、 时间轴等。重点是如何综合运用层、行为、 时间轴
9.1【课堂讲解】层、行为与时间轴 概述概述 91.1层 层是指一种用DⅣ和SPAN标记描述的HTML页面元素。层可以用来定位, 可以包含文本、图像、动画等元素。层还可以嵌套层。 层源代码为:。 在默认情况下, Dreamweaver使用DⅣ标记创建层。选择层后,对应的 属性面板如图9-1所示。 类心无 益出辑左□右□ 图9-1层属性面板
9.1 【课堂讲解】层、行为与时间轴 概述概述 9.1.1 层 层是指一种用DIV和SPAN标记描述的HTML页面元素。层可以用来定位， 可以包含文本、图像、动画等元素。层还可以嵌套层。 层源代码为：。 在默认情况下，Dreamweaver使用DIV标记创建层。选择层后，对应的 属性面板如图9-1所示。 图 9-1 层属性面板
在层属性面板中: 层编号:用于指定一个名称,用于识别不同的层 左和上:指定层的左上角相对于页面(如果嵌套,则为父层)左上角的位 宽和高:指定层的宽度和高度 Z轴:确定层的z轴顺序(即堆叠顺序)。 可见性:指定该层最初是否是可见的,有4个选项 “默认”:不指定可见性属性,默认为“继承”。 “继承”:使用该层父级的可见性属性。 “可见”:显示这些层的内容。 ·“隐藏”:隐藏这些层的内容。 背景图像:指定层的背景图像。 背景颜色:指定层的背景颜色。 溢出:控制当层的内容超过层的指定大小时如何在浏览器中显示层。 “可见”:指示在层中显示额外的内容。 “隐藏”:指定不在浏览器中显示额外的内容。 “滚动”:指定浏览器应在层上添加滚动条,而不管是否需要滚动条。 “自动”:使浏览器仅在需要时才显示层的滚动条 辑:定义层的可见区域。指定左侧、顶部、右侧和底边坐标可在层的 觉的文形、具指定的是可
在层属性面板中： • 层编号：用于指定一个名称，用于识别不同的层。 • 左和上：指定层的左上角相对于页面（如果嵌套，则为父层）左上角的位 置。 • 宽和高：指定层的宽度和高度。 • Z 轴：确定层的z轴顺序（即堆叠顺序）。 • 可见性：指定该层最初是否是可见的，有4个选项： • “默认”：不指定可见性属性，默认为“继承”。 • “继承”：使用该层父级的可见性属性。 • “可见”：显示这些层的内容。 • “隐藏”：隐藏这些层的内容。 • 背景图像：指定层的背景图像。 • 背景颜色：指定层的背景颜色。 • 溢出：控制当层的内容超过层的指定大小时如何在浏览器中显示层。 • “可见”：指示在层中显示额外的内容。 • “隐藏”：指定不在浏览器中显示额外的内容。 • “滚动”：指定浏览器应在层上添加滚动条，而不管是否需要滚动条。 • “自动”：使浏览器仅在需要时才显示层的滚动条。 • 剪辑：定义层的可见区域。指定左侧、顶部、右侧和底边坐标可在层的坐 标空间中定义一个矩形。层经过“剪辑”后，只有指定的矩形区域才是可 见的
层面板 层面板是一个可视化管理层的工具。执行【窗口】>【层】命令打开层 面板,如图9-2所示。在 Dreamweaver中使用层面板使得对层的操作 变得十分方便和简单。 Css样式层 回防止重叠 〖』名称 图9-2层面板 9.12行为 行为( behaviors)实际上就是 JavaScript产生器,以前网页设计者要设计互动 效果的网页必须学习 JavaScript脚步语言。现在有了 Dreamweaver这个强大的 网页设计工具,不用写一句代码就可以创建互动式网页。行为是事件和动作的 组合,浏览器响应用户的动作产生事件。 行为面板 使用行为面板能够为对象添加行为或修改已有的行为。对同一个对象可以添加 多个动作,如果同一事件有多个动作,动作将按执行的顺序进行排列。执行 【窗口】->【行为】命令打开行为面板,如图93所示
层面板 层面板是一个可视化管理层的工具。执行【窗口】->【层】命令打开层 面板，如图9-2所示。在Dreamweaver中使用层面板使得对层的操作 变得十分方便和简单。 图 9-2 层面板 9.1.2 行为 行为（behaviors）实际上就是JavaScript产生器，以前网页设计者要设计互动 效果的网页必须学习JavaScript脚步语言。现在有了Dreamweaver这个强大的 网页设计工具，不用写一句代码就可以创建互动式网页。行为是事件和动作的 组合，浏览器响应用户的动作产生事件。 行为面板 使用行为面板能够为对象添加行为或修改已有的行为。对同一个对象可以添加 多个动作，如果同一事件有多个动作，动作将按执行的顺序进行排列。执行 【窗口】->【行为】命令打开行为面板，如图9-3所示
v标签ody 属性[行为 mOan 开浏览器窗口 图93行为面板 在行为面板中 :显示设置事件。 :显示所有事件。 +:显示可以发生的动作的列表。从中选择一个动作将打开该 框 从行为控制器的动作列表中删除选中的动作及其相关的事 (向上)和·(向下)按钮:移动上下箭头按钮能改变行 顺序 事件(如图9-3所示中的 on Click和 onload):显示能触发动作的所 对象,将出现不同的事件。选择动作后才会出现相应的事件, 9.13动作 动作是由预先编写的 JavaScript代码组成的,这些代码能够执行某种特定 的任务,如弹出信息,打开浏览器窗口等。单击行为面板中的按钮,弹 出如图9-4所示的内置动作(灰色显示的动作表示作用对象不可用或所选 的【显示事件】项中浏览器版本较低)
图 9-3 行为面板 9.1.3 动作 动作是由预先编写的JavaScript代码组成的，这些代码能够执行某种特定 的任务，如弹出信息，打开浏览器窗口等。单击行为面板中的按钮 ，弹 出如图9-4所示的内置动作（灰色显示的动作表示作用对象不可用或所选 的【显示事件】项中浏览器版本较低）
交换图像 弹出信息 恢复交换图像 打开浏览器窗囗 拖动层 控制 Shockwave或Fash 播放声音 改变属性 时间轴 显示隐藏层 显示弹出式菜单 检查插件 检查浏览器 检查表单 设置导航栏图像 设置文本 调用 JavaScript 跳转菜单 跳转菜单开始 转到URL 预先载入图像 显示事件 图9-4动作菜单 交换图像:“交换图像”动作通过更改mg标签的src属性将一个图像和 另一个图像进行交换。 弹出消息:“弹出消息”动作显示一个带有指定消息的 JavaScript警 告。 恢复图像交换:“恢复交换图像”动作将最后一组交换的图像恢复为它
图 9-4 动作菜单 交换图像：“交换图像”动作通过更改img标签的src属性将一个图像和 另一个图像进行交换。 弹出消息：“弹出消息”动作显示一个带有指定消息的 JavaScript 警 告。 恢复图像交换：“恢复交换图像”动作将最后一组交换的图像恢复为它 们以前的源
文件 ·打开浏览器窗口:使用“打开浏览器窗口”动作在一个新的窗口中打开 URL 拖动层:“拖动层”动作允许访问者拖动层 ·控制 Shockwave或 Flash:使用“控制Shocκ wave或Fash'动作来播放 停止、倒带或转到 Macromedia shockwave或 Macromedia flash swf 文件中的帧。 播放声音:使用“播放声音”动作来播放声音。 改变属性:使用“改变属性”动作更改对象某个属性(例如层的背景颜色 或表单的动作)的值 时间轴:使用“时间轴”动作可以停止时间轴、播放时间轴、转到时间轴 呗。 显示 层:“显示一隐藏层”动作显 隐藏或恢复一个或多个层的 默认可见 此动作用于在角与页进行交互时显示 显示弹出菜单:使用“显示弹出菜单”行为来创建或编辑 Dreamweaver 弹出式菜单,或者打开并修改已插入 Dreamweaver文档的 Fireworks弹 出式菜单。 查插件;使用“检套插件”动作根据访问者是否安装了指定的插件这 况将他们转到不同的页。 槍盒浏览置;用“检浏览器”动作可根据访问者不同类型和版本的浏
• 文件。 • 打开浏览器窗口：使用“打开浏览器窗口”动作在一个新的窗口中打开 URL。 • 拖动层：“拖动层”动作允许访问者拖动层。 • 控制 Shockwave 或 Flash：使用“控制 Shockwave 或 Flash”动作来播放、 停止、倒带或转到 Macromedia Shockwave 或 Macromedia Flash SWF 文件中的帧。 • 播放声音：使用“播放声音”动作来播放声音。 • 改变属性：使用“改变属性”动作更改对象某个属性（例如层的背景颜色 或表单的动作）的值。 • 时间轴：使用“时间轴”动作可以停止时间轴、播放时间轴、转到时间轴 帧。 • 显示－隐藏层：“显示－隐藏层”动作显示、隐藏或恢复一个或多个层的 默认可见性。此动作用于在用户与页进行交互时显示信息。 • 显示弹出菜单：使用“显示弹出菜单”行为来创建或编辑 Dreamweaver 弹出式菜单，或者打开并修改已插入 Dreamweaver 文档的 Fireworks 弹 出式菜单。 • 检查插件：使用“检查插件”动作根据访问者是否安装了指定的插件这一 情况将他们转到不同的页。 • 检查浏览器：使用“检查浏览器”动作可根据访问者不同类型和版本的浏 览器将他们转到不同的页
检查表单:“检查表单”动作检查指定文本域的内容以确保用户输入 了是确的数据类。 紧图江金俊导果4模杀和像作动作将某个图像变为导航 设置文本:包括以下几项: (1)设置框架文本:“设置框架文本”动作允许读者动态设置框架的文本,用 读者指定的内容替换框架的内容和格式设置 2)设置层文本:“设置层文本”动作用读者指定的内容替换页上现有层的内 容和格式设置。该内容可以包括任何有效的HTML源代码。 (3)设置状态栏文本:“设置状态栏文本”动作在浏览器窗口底部左侧的状态 栏中显示消息。 (4)设置文本域文本:“设置文本域文本”动作用读者指定的内容替换表单文 本域的内容。 调用 JavaScript:“调用 JavaScript动作允许读者使用“行为”面板指定当 发生某个事件时应该执行的自定义函数或 JavaScript代码行。 求单右知建一个菜单对象并向其附加一个“跳转菜单”(或“跳转菜单 转到URL:“转到URL"动作在当前窗口或指定的框架中打开一个新页 预先载入图像:“预先载入图像”动作将不会立即出现在页上的图像载入浏 览器缓存中
• 检查表单：“检查表单”动作检查指定文本域的内容以确保用户输入 了正确的数据类型。 • 设置导航条图像：使用“设置导航条图像”动作将某个图像变为导航 条图像，或更改导航条中图像的显示和动作。 • 设置文本：包括以下几项： （1）设置框架文本：“设置框架文本”动作允许读者动态设置框架的文本，用 读者指定的内容替换框架的内容和格式设置。 （2）设置层文本：“设置层文本”动作用读者指定的内容替换页上现有层的内 容和格式设置。该内容可以包括任何有效的 HTML 源代码。 （3）设置状态栏文本：“设置状态栏文本”动作在浏览器窗口底部左侧的状态 栏中显示消息。 （4）设置文本域文本：“设置文本域文本”动作用读者指定的内容替换表单文 本域的内容。 • 调用 JavaScript：“调用 JavaScript”动作允许读者使用“行为”面板指定当 发生某个事件时应该执行的自定义函数或 JavaScript 代码行。 • 跳转菜单：创建一个菜单对象并向其附加一个“跳转菜单”（或“跳转菜单 转到”）行为。 • 转到 URL：“转到 URL”动作在当前窗口或指定的框架中打开一个新页。 • 预先载入图像：“预先载入图像”动作将不会立即出现在页上的图像载入浏 览器缓存中
9.14事件 事件是浏览器生成的消息,用于表明浏览器用户执行了某种操作。 Dreamweaver提供了许多常用的能够触发的动作的事件 onabort:当浏览器用户中断浏览器正在载入图像的操作时产生 on AfterUpdate:当网页中的数据元素已经完成源数据的更新时产生 该事件 onBeforeUpdate:当网页中的数据元素已经改变并且就要和浏览器用 户失去交互时产生该事件。 · on blur:当指定元素不再被浏览器用户交互时产生。 on Bounce:当字幕( Marquee)中的内容移动到该字幕边界时产生 on Change:当浏览器用户改变网页中的某个值时产生。 onC|ck:当浏览器用户在指定的元素上单击时产生 onDb|Cick:当浏览器用户在指定的元素上双击时产生。 on error:当浏览器在网页或图像载入产生错误时产生。 on Finish:当字幕( Marquee)中的内容完成一次循环时产生 on Focus:当指定元素被浏览器用户交互时产生。 phElp:当浏览器用户单击浏览器帮助按钮或选择浏览器菜单中的帮 助菜单项时产生
9.1.4 事件 事件是浏览器生成的消息，用于表明浏览器用户执行了某种操作。 Dreamweaver提供了许多常用的能够触发的动作的事件： • onAbort：当浏览器用户中断浏览器正在载入图像的操作时产生。 • onAfterUpdate：当网页中的数据元素已经完成源数据的更新时产生 该事件。 • onBeforeUpdate：当网页中的数据元素已经改变并且就要和浏览器用 户失去交互时产生该事件。 • onBlur：当指定元素不再被浏览器用户交互时产生。 • onBounce：当字幕（Marquee）中的内容移动到该字幕边界时产生。 • onChange：当浏览器用户改变网页中的某个值时产生。 • onClick：当浏览器用户在指定的元素上单击时产生。 • onDblClick：当浏览器用户在指定的元素上双击时产生。 • onError：当浏览器在网页或图像载入产生错误时产生。 • onFinish：当字幕（Marquee）中的内容完成一次循环时产生。 onFocus：当指定元素被浏览器用户交互时产生。 • onHelp：当浏览器用户单击浏览器帮助按钮或选择浏览器菜单中的帮 助菜单项时产生