《Dreamweaver网页设计》第9章

Dreamweaver网页设计第9章层、行为与时间轴【学习概述】层、行为、时间轴可以说是网页设计中革命性的技术。搭配使用层、行为、时间轴可以制作出活泼多样的动态页面以及效果惊人的互动网页。本章内容包括：建立层、编辑层、层与表格的相互转化、行为、时间轴等。重点是如何综合运用层、行为、时间轴。9.1【课堂讲解】层、行为与时间轴概述概述9.1.1层层是指一种用DIV和SPAN标记描述的HTML页面元素。层可以用来定位，可以包含文本、图像、动画等元素。层还可以嵌套层。层源代码为：divid=Layer1/div。在默认情况下，Dreamweaver使用DIV标记创建层。选择层后，对应的属性面板如图9-1所示。图9-1层属性面板在层属性面板中：•层编号：用于指定一个名称，用于识别不同的层。•左和上：指定层的左上角相对于页面（如果嵌套，则为父层）左上角的位置。•宽和高：指定层的宽度和高度。•Z轴：确定层的z轴顺序（即堆叠顺序）。•可见性：指定该层最初是否是可见的，有4个选项：•“默认”：不指定可见性属性，默认为“继承”。•“继承”：使用该层父级的可见性属性。•“可见”：显示这些层的内容。•“隐藏”：隐藏这些层的内容。•背景图像：指定层的背景图像。•背景颜色：指定层的背景颜色。•溢出：控制当层的内容超过层的指定大小时如何在浏览器中显示层。•“可见”：指示在层中显示额外的内容。•“隐藏”：指定不在浏览器中显示额外的内容。•“滚动”：指定浏览器应在层上添加滚动条，而不管是否需要滚动条。•“自动”：使浏览器仅在需要时才显示层的滚动条。•剪辑：定义层的可见区域。指定左侧、顶部、右侧和底边坐标可在层的坐标空间中定义一个矩形。层经过“剪辑”后，只有指定的矩形区域才是可见的。层面板层面板是一个可视化管理层的工具。执行【窗口】-【层】命令打开层面板，如图9-2所示。在Dreamweaver中使用层面板使得对层的操作变得十分方便和简单。图9-2层面板9.1.2行为行为（behaviors）实际上就是JavaScript产生器，以前网页设计者要设计互动效果的网页必须学习JavaScript脚步语言。现在有了Dreamweaver这个强大的网页设计工具，不用写一句代码就可以创建互动式网页。行为是事件和动作的组合，浏览器响应用户的动作产生事件。行为面板使用行为面板能够为对象添加行为或修改已有的行为。对同一个对象可以添加多个动作，如果同一事件有多个动作，动作将按执行的顺序进行排列。执行【窗口】-【行为】命令打开行为面板，如图9-3所示。图9-3行为面板9.1.3动作动作是由预先编写的JavaScript代码组成的，这些代码能够执行某种特定的任务，如弹出信息，打开浏览器窗口等。单击行为面板中的按钮，弹出如图9-4所示的内置动作（灰色显示的动作表示作用对象不可用或所选的【显示事件】项中浏览器版本较低）。图9-4动作菜单交换图像：“交换图像”动作通过更改img标签的src属性将一个图像和另一个图像进行交换。弹出消息：“弹出消息”动作显示一个带有指定消息的JavaScript警告。恢复图像交换：“恢复交换图像”动作将最后一组交换的图像恢复为它们以前的源•文件。•打开浏览器窗口：使用“打开浏览器窗口”动作在一个新的窗口中打开URL。•拖动层：“拖动层”动作允许访问者拖动层。•控制Shockwave或Flash：使用“控制Shockwave或Flash”动作来播放、停止、倒带或转到MacromediaShockwave或MacromediaFlashSWF文件中的帧。•播放声音：使用“播放声音”动作来播放声音。•改变属性：使用“改变属性”动作更改对象某个属性（例如层的背景颜色或表单的动作）的值。•时间轴：使用“时间轴”动作可以停止时间轴、播放时间轴、转到时间轴帧。•显示－隐藏层：“显示－隐藏层”动作显示、隐藏或恢复一个或多个层的默认可见性。此动作用于在用户与页进行交互时显示信息。•显示弹出菜单：使用“显示弹出菜单”行为来创建或编辑Dreamweaver弹出式菜单，或者打开并修改已插入Dreamweaver文档的Fireworks弹出式菜单。•检查插件：使用“检查插件”动作根据访问者是否安装了指定的插件这一情况将他们转到不同的页。•检查浏览器：使用“检查浏览器”动作可根据访问者不同类型和版本的浏览器将他们转到不同的页。•检查表单：“检查表单”动作检查指定文本域的内容以确保用户输入了正确的数据类型。•设置导航条图像：使用“设置导航条图像”动作将某个图像变为导航条图像，或更改导航条中图像的显示和动作。•设置文本：包括以下几项：（1）设置框架文本：“设置框架文本”动作允许读者动态设置框架的文本，用读者指定的内容替换框架的内容和格式设置。（2）设置层文本：“设置层文本”动作用读者指定的内容替换页上现有层的内容和格式设置。该内容可以包括任何有效的HTML源代码。（3）设置状态栏文本：“设置状态栏文本”动作在浏览器窗口底部左侧的状态栏中显示消息。（4）设置文本域文本：“设置文本域文本”动作用读者指定的内容替换表单文本域的内容。•调用JavaScript：“调用JavaScript”动作允许读者使用“行为”面板指定当发生某个事件时应该执行的自定义函数或JavaScript代码行。•跳转菜单：创建一个菜单对象并向其附加一个“跳转菜单”（或“跳转菜单转到”）行为。•转到URL：“转到URL”动作在当前窗口或指定的框架中打开一个新页。•预先载入图像：“预先载入图像”动作将不会立即出现在页上的图像载入浏览器缓存中。9.1.4事件事件是浏览器生成的消息，用于表明浏览器用户执行了某种操作。Dreamweaver提供了许多常用的能够触发的动作的事件：•onAbort：当浏览器用户中断浏览器正在载入图像的操作时产生。•onAfterUpdate：当网页中的数据元素已经完成源数据的更新时产生该事件。•onBeforeUpdate：当网页中的数据元素已经改变并且就要和浏览器用户失去交互时产生该事件。•onBlur：当指定元素不再被浏览器用户交互时产生。•onBounce：当字幕（Marquee）中的内容移动到该字幕边界时产生。•onChange：当浏览器用户改变网页中的某个值时产生。•onClick：当浏览器用户在指定的元素上单击时产生。•onDblClick：当浏览器用户在指定的元素上双击时产生。•onError：当浏览器在网页或图像载入产生错误时产生。•onFinish：当字幕（Marquee）中的内容完成一次循环时产生。onFocus：当指定元素被浏览器用户交互时产生。•onHelp：当浏览器用户单击浏览器帮助按钮或选择浏览器菜单中的帮助菜单项时产生。•onKeyDown：当按下任意键的同时产生。•onKeyPress：当按下和松开任意键时产生。•onKeyUp：当按下的键松开时产生。•onLoad：当一图像或网页载入完成时产生。•onMouseDown：当浏览器用户按下鼠标时产生。•onMouseMove：当浏览器用户将鼠标在指定元素上移动时产生。•onMouseOut：当鼠标从指定元素上移开时产生。•onMouseOver：当鼠标移动到指定元素时产生。•onMouseUp：当鼠标弹起时产生。•onMove：当窗体或框架移动时产生。•onReadyStateChange：当指定元素的状态改变时产生。•onReset：当表单内容被重新设置为缺省值时产生。•onResize：当浏览器用户调整浏览器或框架大小时产生。•onRowEnter：当数据源的当前记录指针已经改变时产生。•onRowExit：当数据源的当前记录指针将要改变时产生。•onScroll：当浏览器用户使用滚动条向上或向下滚动时产生。•onSelect：当浏览器用户选择文本框中的文本时产生。•onStart：当字幕（Marquee）内容开始循环时产生。•onSubmit：当浏览器用户提交表格时产生。•onUnload：当浏览器用户离开网页时产生。将行为作用于网页元素的顺序为：【选择对象】-【选择行为动作】-【指定事件】。操作例子如下：（1）选择按钮，在弹出菜单中执行【弹出信息】命令，打开“弹出信息”对话框，如图9-5所示。图9-5“弹出信息”对话框（2）在“弹出信息”对话框的消息文本框中输入文字“欢迎光临本站！”。（3）在行为面板中把事件改为“onLoad”。（4）保存，按快捷键【F12】预览，当加载网页时，触发“onLoad”事件，弹出一个信息框，如图9-6所示。图9-6弹出信息效果因为本例触发的是“onLoad”事件，所以省去了【选择对象】这个步骤。时间轴Dreamweaver中的时间轴是指通过随时间的变化改变层的位置、大小、可见性等属性来创建动画效果。时间轴只有配合层来使用才能发挥其强大功能，因此想让flash、图像、文本等对象移动，就须先创建层，然后在层中插入对象。执行【窗口】-【时间轴】命令，打开时间轴面板如图9-7所示。图9-7时间轴在时间轴面板中：时间轴选单：显示目前所编辑的时间轴名称。播放头：红色的播放头指示在网页中显示的是哪一帧。动画条：即图中的Layer11，Layer12，可显示每个层对象的持续时间。关键帧：动画条中的小圆圈是关键帧。帧数：显示播放头的位置。：回转，可将播放头移到时间轴的初始帧。：后退，将播放头往左移动一帧。：前进，将播放头往右移动一帧。FPS：播放速度。每秒种播放的帧数。自动播放：当网页载入到浏览器时使当前时间轴自动播放。循环：当网页载入到浏览器时使当前时间轴循环播放。创建层可以使用插入、拖动等方法创建层或嵌套层。创建层步骤如下：（1）建立站点“ceng”，创建新文档index.html，在“插入”栏的“布局”类别中单击“绘制层”按钮。（2）在文档中拖动以绘制一个层。如要要绘制多个层，可以按住【Ctrl】键并拖动。只要不松开【Ctrl】键，就可以继续绘制新的层。（3）定位光标后，执行【插入】-【布局对象】-【层】命令可以在光标位置插入一个层。（4）插入层后，可以看到一个矩形框出现在文档中，如图9-9所示。图9-9插入层9.2.2选择层要对层进行编辑，必须先选择层。可以选择一个或多个层进行操作或更改它们的属性。步骤如下：（1）若要在“文档”窗口中选择一个层：移动鼠标到层的边框上，当鼠标变成状时，同时层的边框变成红色，单击即可选择该层；或在层面板中单击需要选取的层名称，如图9-10所示。此时文档中层就处于选中状态。图9-10选择层（2）若要在“文档”窗口中选择多个层：在文档中，在两个或多个层的边框内（或边框上）按快捷键【Shift】并单击，或在层面板中，按快捷键【Shift】并单击两个或更多的层名称。9.4实践检验理论巩固填空题行为（behaviors）是指__________。动作是指__________。事件是指__________。简答题（1）简述如何在Dreamweaver中实现层与表之间的转换。（2）简述如何调用JavaScript实现“打印”、“前进”、“后退”、“设为首页”、“收藏本站”功能。上机操作（1）使用层和时间轴制作循环滚动的图片效果。（2）使用层和行为制作下拉菜单。Dreamweaver网页设计第9章层、行为与时间轴【学习概述】层、行为、时间轴可以说是网页设计中革命性的技术。搭配使用层、行为、时间轴可以制作出活泼多样的动态页面以及效果惊人的互动网页。本章内容包括：建立层、编辑层、层与表格的相互转化、行为、时间轴等。重点是如何综合运用层、行为、时间轴。