信息系统设计基础09

1、与行为1内容提要层的创建与基本操作 层的其它操作 时间轴概述 使用时间轴创建动画 Dreamweaver中的行为 2层的创建与基本操作 什么是层？层提供一种对网页对象进行有效控制的手段，层可以包含文本、图像、表单等所有可直接用于文档的元素，层中还可以包含插件或其它层（嵌套使用）。层提供了精确定位页面元素的方法，通过将页面元素放置在层中，用户可控制对象的叠放顺序、显示或隐藏，甚至可利用时间轴同时在屏幕上移动一个或多个层。在Dreamweaver CS3中将层称之为AP元素 3层参数设置选择菜单 “编辑”|“首选参数”，打开“首选参数”对话框，在左侧的分类列表中选择“AP元素”选项 4创建层 若要

2、创建层，请执行以下操作之一。若要绘制层，请单击插入栏上的“绘制AP Div”按钮，然后在文档窗口的设计视图中通过拖动来绘制层。 若要在文档中的特定位置插入层的代码，请将插入点放入文档窗口，然后依次选择菜单“插入记录”|“布局对象”|“AP Div”。若要连续绘制多个层，请执行以下操作。（1）单击“插入”工具栏上的“绘制AP Div”按钮。（2）通过按住 Ctrl 键并拖动鼠标来绘制各个层。只要不松开 Ctrl键，就可以继续绘制新的层。 5层面板 通过层面板可以管理文档中的层。若要打开层面板，请选择“窗口”|“AP元素”。层显示为按z轴顺序排列的名称列表，首先创建的层出现在列表的底部，最新创建的

3、层出现列表的顶部。嵌套的层显示为连接到父层的名称。单击加号 (+) 或减号 (-) 图标显示或隐藏嵌套的层。 6层的可见性层的可见性分为以下三种：（1）睁开的眼睛表示层可见（2）闭上的眼睛表示层不可见（3）如果没有眼睛图标，表示该层继承其父层的可见性。7改变层的名称和叠放顺序 在打开的层面板中，名称为层的标识名，Z表示层的索引号。任意单击管理器中的某一层，即选中该层，按Delete键可以删除它。按住Shift键可同时选择多个层，然后可同时移动或删除它们。双击名称项可为层更改标识名。在层面板中用鼠标拖动层的上下位置，可以改变层的叠放顺序，也可以双击层面板中某层的Z选项，直接输入新值以修改该层的位

4、置顺序。当输入比当前值大的数值时，该层将向上移动，如果输入比当前值小的数值时，该层将向下移动。8对齐层 当页面中存在多个层时，可以使用层对齐命令对齐层。使用层对齐，可使多个层和最后选定的层在某一方向上对齐。操作步骤如下：（1）按住Shift键选取多个层。（2）选择菜单命令“修改”|“排列顺序”，出现“排列顺序”子菜单，如下图所示。9层的属性设置 在进行属性设置之前必须先选定层，常用选定层的方法有以下几种。（1）单击层边框，如果想选择多个层，需按住Shift键的同时单击层的边缘。（2）在“AP元素”面板中单击层的名称，选择相应的层。如要多选，同样需按住Shift键。 10层属性面板的使用 选定层

5、后，在Dreamweaver的底部会出现层的属性面板。在层属性面板上可以显示和设置以下属性：层编号：该文本框设置当前层的名称。层的名称只能由标准的字母和数字表示，不能使用空格、连字符、斜杠符等。左：设置层左边边框相对于页面的左边界或父层左边界的距离。上：设置层上边边框相对于页面的上边界或父层顶端的距离。宽：该域用于设置层的宽度值，默认单位是像素。高：该域用于设置层的高度值，默认单位是像素。11层属性面板的使用Z轴：在该文本框中输入层在Z方向上的索引值。显示：该下拉列表框设置层的可见性。 背景图像：设置层的背景图像。背景颜色：设置层的背景色。单击颜色框按钮，在色盘中选取合适的颜色，或者在文本框中

6、直接输入背景颜色的十六进制数值。类：将某种CSS样式应用到层中。溢出：设置当层中的内容超出层的范围后产生的效果。 12层的其它操作 吸附层到网格 在文档窗口中，显示网格有助于精确定位层和调整层的大小。如果吸附功能被启用，在移动或调整层大小时，该层被自动定位到最近的吸附位置。不管网格是否可见，吸附功能均起作用。13层和表格的转换将层转换为表格选择菜单命令“修改”|“转换”|“将AP Div转换为表格”， 打开如图所示对话框。14层转换为表格示例15将表格转换为层 （1）选择菜单命令“修改”|“转换”|“将表格转换为AP Div”，打开如图所示对话框。（2）设置好选项后，单击“确定”按钮，即可将表

7、格转换为层。 16嵌套层嵌套层是将一个层建立在另一层中。通过层嵌套，可以将层组合在一起，更便于控制。创建嵌套层有以下三种方法：1插入法：把插入点放置于页面上已有层内，然后选择“插入记录”|“布局对象”|“AP Div”菜单命令插入一个嵌套层。2拖放法：从“插入”工具栏布局面板中拖动“绘制AP Div”按钮，然后把它放到页面上已有层中，便可新建一个该层的子层。3描绘法：单击“插入”工具栏布局面板中的“绘制AP Div”按钮，然后在一个已有层中拖动，即画出一个嵌套层。如果在层的参数设置中关闭了层嵌套，请按住Ctrl键在已有层中描绘其子层。 17关于嵌套层关于嵌套层，需要特别注意的是嵌套层并不是页面

8、上一层位于另一层内。嵌套层的本质应该是一层的HTML代码嵌套在另一层的HTML代码之内。从图中可以看出，层“david1”的代码嵌套在层“david3”的HTML代码之内，所以它是嵌套层。反过来，即使在页面上看，一个层位于另一层之内，如果它们的HTML代码互不包含，它们就不是嵌套层。 18在层中插入内容 在层中可以插入多种页面元素，包括文本、表格、图像、插件、按钮等。方法是先在某层内单击鼠标，将光标插入点置于层内，然后就可以采用与在页面中插入元素的相同方法将各种元素插入到层中。19时间轴概述 时间轴是Dreamweaver提供用于设计网页动态效果的工具，它通过设置不同时间段层的大小、位置、和可

9、见性来创建动态网页。在时间轴上显示的每一幅图片或文字称为一帧，整个时间轴由许多帧组成。播放时所有的帧按照设置好的时间和运动方式依次显示出来，好像放电影一样，一段动态效果画面就呈现在浏览者面前。20时间轴面板 时间轴面板提供了操作时间轴的便捷通道，在面板中可以查看和设置对象在各个时间点的属性。打开时间轴面板的方法有两种：选择菜单命令“窗口”“时间轴”或Alt+F9。 21时间轴面板时间轴面板中各对象作用说明如下：（1）时间轴名称：该下拉列表框用于选择要操作的时间轴。一个网页中可以定义多条时间轴，每条时间轴的名称都不一样。（2）首帧：返回到时间轴的第一帧位置。（3）后退：将播放头向左后退一帧。单击

10、后退按钮并按住鼠标左键不放，可以反向播放时间轴。（4）当前帧：显示时间轴中当前位置的帧编号。22时间轴面板（5）播放：将播放头向右移动一帧，如果按住该按钮不放可以预览动画。（6）Fps：设置每秒单位时间内播放动画帧的数量。默认设置为每秒播放15帧。（7）自动播放：选中该复选框，设置在浏览器加载页面时自动播放时间轴。自动播放实际上是给页面的Body标签附加一种行为，使页面在载入时执行播放时间轴动作。（8）循环：选中该复选框，设置在浏览器中可以循环播放当前时间轴。实际上是在动画末帧之后的行为通道中加入跳到第一帧的行为。双击行为通道中的标记可以编辑行为参数和改变循环次数，这将在后面的部分中进行介绍。

11、23时间轴动画时间轴通过改变层的位置、大小、可见性以及叠放次序来创建动画。需要特别说明的是，时间轴只能移动层，如果要移动图像或文本，必须先在页面中添加层，然后将图像或文本放置在层中，通过移动层来移动这些元素。24使用关键帧创建动画 使用关键帧创建层动画的具体步骤如下：（1）在页面中添加层，并在层中插入要漂移的文本或图像，然后将层放置在动画的起点位置。（2）打开时间轴面板，并选中要创建动画的层。（3）将层放入到时间轴面板中。 25使用关键帧创建动画 （4）单击动画栏的末帧，将此关键帧拖动到第60帧位置，然后将层移动到动画结束的位置。此时我们会发现在文档窗口中显示有一条从层起始位置到结束位置的连接

12、线，这就是层的运动轨迹。 26使用关键帧创建动画（5）可以通过添加关键帧的方法，创建曲线运动轨迹。选择动画栏，执行下面操作之一：单击动画栏中的某一帧，选择菜单命令“修改”|“时间轴”|“增加关键帧”。用鼠标右键单击动画栏中的某一帧，然后从快捷菜单中选择“增加关键帧”命令。按住Ctrl键并单击动画栏中某一帧，在该处添加关键帧。如果要移除某一关键帧，右键单击该帧，然后从快捷菜单中选择“移除关键帧”命令。27使用关键帧创建动画（6）单击增加的关键帧，拖动层使其运动轨迹呈曲线状。重复添加多个关键帧，可创建更复杂的曲线路径。 28通过拖动路径创建动画如果要创建具有复杂路径的动画，采用添加关键帧的方法比较

13、麻烦，此时通过记录层拖动时的路径来创建动画要简便得多。具体操作方法如下：（1）选择要创建动画的层。（2）将层移动到动画开始的位置。（3）选择“修改”|“时间轴”|“记录AP元素的路径”菜单命令或者在时间轴快捷菜单中选择该命令。需要说明的是，如果没有层被选择，此菜单项不可用。29通过拖动路径创建动画 （4）在页面中拖动层，创建想要的运动路径。拖运层时鼠标所经过的路径即为层动画的运动轨迹。（5）释放鼠标后，Dreamweaver将自动向时间轴中添加一个动画栏，同时添加一批相应的关键帧。 30时间轴的其它操作 （1）改变动画长度和关键帧位置通过拖动结束帧标记，可以动态调整动画播放时间。拖动时所有关键

14、帧发生移位，保持相互之间的相对位置不变，动画将均匀调整。如果不希望调整其他关键帧，可在拖动时按住Ctrl键。（2）改变动画的起始位置在时间轴面板中选择一个或多个动画栏（按住Shift键可选择多栏），然后左右拖动可调整动画的起始位置。拖动时注意可以参考动画栏上面的时间轴刻度。需要特别注意的是，拖动时不要把鼠标放置在关键帧位置，否则变为移动关键帧，而不是移动整个动画位置。 31时间轴的其它操作 3移动整个动画路径如果想移动整个动画路径，可单击动画栏上任意非关键帧位置，选中整个动画栏，然后单击层控制柄并拖动，系统将调整所有关键帧的位置。需要说明的是，这种操作的结果是使整个运动路径移位，但并不改变运动

15、轨迹的形状。4增加或移除对象增加对象的最简单方法是选中某个层或图像后直接将其拖动到时间轴面板中，也可在选中对象之后通过快捷菜单命令“添加对象”完成。如果想从时间轴移除某个对象，首先选中动画栏，然后右击时间轴面板，在弹出的快捷菜单中选择“移除对象”命令即可。注意移除对象并不会删除层或图像，只是从时间轴中删除动画栏。 32时间轴的其它操作5添加或删除帧选择“修改”|“时间轴”|“添加帧”或“修改”|“时间轴”|“移除帧”菜单命令可以在时间轴上添加或者删除帧。6设置循环播放次数当我们选择时间轴面板中的“循环”复选框时，Dreamweaver会自动在动画最后一帧后，插入跳转至第一帧的行为，使时间轴动画

16、可以不断循环播放。如果希望动画循环若干次而为是无限循环，则可以通过编辑该行为参数来设定循环次数。方法是双击行为通道中的行为标志，打开行为面板进行设置。33图像变换动画示例时间轴只能改变图像的源属性，如果要使图像的位置发生变化，需要先将图像放置在层中，然后将层加入时间轴。34Dreamweaver中的行为 行为是事件和动作的组合，它允许用户改变网页内容以及执行特定的任务。利用Dreamweaver的行为，可以轻松制作出动态的网页效果，从而使网页更具吸引力。35关于行为行为是事件和由该事件触发的动作的组合，用户可以利用“行为”面板来将行为添加到页面中。行为面板 选择“窗口” “行为”，打开“行为”

17、面板， “行为”面板分为上下两个部分，上部为6个按钮，下部为行为列表，如下图所示。控制按钮行为列表36控制按钮：从左至右各按钮的含义如下图所示：“显示设置事件”按钮：显示当前选择对象已经设置的事件当前选择对象关于行为37控制按钮：从左至右各按钮的含义如下图所示：“显示所有事件”按钮：显示当前选择对象可设置的所有事件关于行为38控制按钮：从左至右各按钮的含义如下图所示：“添加行为”按钮：单击该按钮，将弹出如左图所示的动作菜单，用户可从中选择一个动作来响应特定的事件。菜单中灰显的动作不可选择。关于行为39控制按钮：从左至右各按钮的含义如下图所示：“删除事件”按钮：删除选中的动作及其相关的事件关于行

18、为40控制按钮：从左至右各按钮的含义如下图所示：“增加事件值”按钮：向上移动选中的动作及其相关的事件关于行为41控制按钮：从左至右各按钮的含义如下图所示：“降低事件值”按钮：向下移动选中的动作及其相关的事件关于行为42行为列表：用户可以在其中为某行为项选择不同的事件，如下图所示：关于行为43动作和事件动作和事件 动作是由JavaScript和HTML代码组成的，该代码能执行各种特殊任务，如弹出一个信息框、播放一段音乐等。用户可以使用“行为”面板直接向页面中添加动作。事件是浏览器生成的消息，指示该页的用户执行了某种操作。如果用户预先设置了某个动作，则事件将触发相应的动作发生，如弹出一个信息框等。

19、44动作和事件事件动作动作源代码事件触发动作执行源码，产生动态效果45可产生的事件根据所选择对象和指定浏览器的不同，显示在事件下拉列表中的事件也有所不同。当前选择对象可产生的事件指定浏览器(默认)当前选择对象可产生的事件指定浏览器46添加行为 下面以“弹出信息”动作为例介绍如何向页面元素添加行为：1. 选中要附加行为的对象，选择元素，打开行为面板。2. 单击“添加行为”按钮并从动作弹出式菜单中选择“弹出信息”，在打开的“弹出信息”对话框中输入信息。这里我们输入“欢迎来到Dreamweaver的奇妙天地！”，用户也可以在输入文本中嵌入任何有效的JavaScript函数、属性、全局变量或其它表达式

20、，用来实现更复杂的特性。3. 单击“确定”按钮，完成设置，并使用默认事件“onLoad”触发该动作。4. 保存后按下快捷键F12预览该页面 47更改行为 用户可以执行下列操作之一对行为进行更改：1. 若要编辑动作的参数，则双击该行为名称或将其选中并按Enter键，然后更改对话框中的参数并单击“确定”按钮。2. 若要更改给定事件的多个动作的顺序，请选择某个动作然后单击“增加事件值”/“降低事件值”按钮；或者选择该动作然后剪切它，并将它粘贴到其他动作中所需的位置。3. 若要删除某个行为，请将其选中然后单击“删除事件”按钮或按Delete键。 48打开浏览器窗口使用“打开浏览器窗口”动作可以在一个新

21、的窗口中打开指定的URL，同时用户还可以指定新窗口的属性，包括它的大小、特性和名称。操作步骤选中要附加行为的对象；打开“行为”面板，单击 按钮并从动作菜单中选择“打开浏览器窗口”，弹出如下图所示的对话框；49打开浏览器窗口在“打开浏览器窗口”对话框中设置新窗口的各项属性；单击“确定”按钮，完成设置，并使用指定事件触发该动作。50播放声音使用“播放声音”动作可以播放音乐或其它音频片断。操作步骤选中要附加行为的对象；打开“行为”面板，单击 按钮并从动作菜单中选择“播放声音”，弹出如下图所示的对话框；51在“播放声音”对话框中设置要播放的音频文件；单击“确定”按钮，完成设置，并使用指定事件触发该动作

22、。注意事项“播放声音”行为并不支持网上最流行的mp3格式文件，目前只支持wav、midi等少数格式。浏览器可能需要用某种附加的音频支持（例如音频插件）来播放声音。播放声音52显示-隐藏层使用“显示-隐藏层”动作可以显示、隐藏或恢复一个或多个层的默认可见性。操作步骤选中要附加行为的对象；打开“行为”面板，单击 按钮并从动作菜单中选择“显示-隐藏层”，弹出如下图所示的对话框；53设置“显示-隐藏层”对话框在“命名的层”列表中选择要更改其可见性的层；单击“显示”按钮以显示该层，单击“隐藏”按钮以隐藏该层，单击“默认”按钮以恢复该层的默认可见性。单击“确定”按钮，完成设置，并使用指定事件触发该动作。注

23、意事项如果在动作菜单中“显示-隐藏层”不可用，则可能是因为浏览器不接受事件，选择动作菜单中“显示事件”中IE4.0以后的版本或者选择Netscape6.0，重新选择菜单命令，此时“显示隐藏层”将可用。 显示-隐藏层54显示-隐藏层Image对象产生onMouseOver事件时显示Layer1层Image对象产生onMouseOut事件时隐藏Layer1层55转到URL使用“转到URL”动作可以在当前窗口或指定的框架中打开一个新的网页。这个动作对于想单击一次便改变两个或多个框架中的内容特别有用。操作步骤选中要附加行为的对象；打开“行为”面板，单击 按钮并从动作菜单中选择“转到URL”，弹出如下图

24、所示的对话框；56设置“转到URL”对话框打开在：设置在主窗口或指定的框架中打开新网页；URL：设置要打开的新网页的路径和名称。单击“确定”按钮，完成设置，并使用指定事件触发该动作。转到URL57交换图像“交换图像”动作可以通过更改img标签的src属性，将一个图像和另一个图像进行交换。操作步骤选中要附加行为的原始图像；打开“行为”面板，单击 按钮并从动作菜单中选择“交换图像”，弹出如下图所示的对话框；58设置“交换图像”对话框设定原始档为：设置新图像，用来替换原始图像；预先载入图像：防止新图像加载时发生延迟；鼠标滑开时恢复图像：鼠标离开图像时，图像自动恢复为原始图像。单击“确定”按钮，完成设置，并使用默认事件触发该动作。交换图像59交换图像注意事项因为只有图像的src属性受此动作的影响，所以应该换入一个与原始图像具有相同尺寸的图像；否则，换入的图像显示时会被压缩或扩展，以使其适应原始图像的大小。60拖动层 使用“拖动层”动作，可以使页面的层跟随用户的鼠标移动，从而实现某些特殊的页面效果，比如创建拼图游戏、滑块控件和其他可移动的页面元素。下面以实例的形式介绍该行为