web信息系统设计基础第9章层与行为

第九章 层与行为,内容提要,9.1 使用层 9.2 Dreamweaver中的时间轴 9.3 行为,什么是层？ 层是网页上层次独立的可以重叠或嵌套的元素，其标签为div，如图中蓝框。在Dreamweaver CS3中，把层称为“AP元素”（绝对定位元素）。 层提供一种对网页对象进行有效控制的手段，层可以包含文本、图像、表单等所有可直接用于文档的元素，层中还可以包含插件或其它层（嵌套使用）。 层提供了精确定位页面元素的方法，通过将页面元素放置在层中，用户可控制对象的叠放顺序、显示或隐藏，甚至可利用时间轴同时在屏幕上移动一个或多个层。 将层添加到时间轴的动画通道中，可建立动画。例如：在网页上漂浮移动的广告。,9.1 使用层,层参数设置,选择菜单“编辑”|“首选参数”，打开“首选参数”对话框，在左侧分类列表中选择“AP元素”选项。,创建层,若要创建层，请执行以下操作之一。 若要绘制层，请单击插入栏上的“绘制 AP Div”按钮，在文档窗口的设计视图中拖动即可绘制层。 若要在文档中的特定位置插入层的代码，请将插入点放入文档窗口，然后选择“插入记录”|“布局对象”|“AP Div”。 若要连续绘制多个层，请执行以下操作。 （1）单击“插入记录”栏上的“绘制 AP Div”按钮。 （2）通过按住 Ctrl 键并拖动鼠标来绘制各个层。 只要不松开 Ctrl键，就可以继续绘制新的层。,层面板,若要打开层面板，请选择“窗口”|“AP元素”。层显示为按z轴顺序排列的名称列表；首先创建的层出现在列表的底部，最新创建的层出现列表的顶部。 嵌套的层显示为连接到父层的名称。单击加号 (+) 或减号 (-) 图标显示或隐藏嵌套的层。,层的可见性,层的可见性分为以下三种： （1）睁开的眼睛表示层可见 （2）闭上的眼睛表示层不可见 （3）如果没有眼睛图标，表示该层继承其父层的可见性。,改变层的名称和叠放顺序,在打开的层面板中，名称为层的标识名，Z表示层的索引号。任意单击管理器中的某一层，即选中该层，按Delete键可以删除它。按住Shift键可同时选择多个层，然后可同时移动或删除它们。双击名称项可为层更改标识名。 在层面板中用鼠标拖动层的上下位置，可以改变层的叠放顺序，也可以双击层面板中某层的Z选项，直接输入新值以修改该层的位置顺序。当输入比当前值大的数值时，该层将向上移动，如果输入比当前值小的数值时，该层将向下移动。,对齐层,当页面中存在多个层时，可以使用层对齐命令对齐层。使用层对齐，可使多个层和最后选定的层在某一方向上对齐。操作步骤如下： （1）按住Shift键选取多个层。 （2）选择菜单命令“修改”|“排列顺序”，出现“排列顺序”子菜单，如图所示。,层属性面板,选定层后，在Dreamweaver的底部会出现层的属性面板。,在层属性面板上可以显示和设置以下属性： CSS-P元素（层名称）：该文本框设置层名称。层的名称只能由标准的字母和数字表示，不能使用空格、连字符、斜杠符等。 左：设置层左边边框相对于页面左边界或父层左边界的距离。 上：设置层上边边框相对于页面的上边界或父层顶端的距离。 宽：该域用于设置层的宽度值，默认单位是像素。 高：该域用于设置层的高度值，默认单位是像素。,层属性面板,Z轴：在该文本框中输入层在Z方向上的索引值。 显示：该下拉列表框设置层的可见性。 背景图像：设置层的背景图像。 背景颜色：设置层的背景色。单击颜色框按钮，在色盘中选取合适的颜色，或在文本框中直接输入背景颜色的十六进制数值。 类：将某类CSS样式应用到层中。 溢出：设置当层的内容超出层的范围后产生的效果。 剪辑： 设置层中可见区域，相对于层的四边的距离（像素）。,层和表格的转换,将层转换为表格 选择菜单命令“修改”|“转换”|“将AP Div转换为表格”，打开其对话框。,层转换为表格示例,将表格转换为层,（1）选择菜单命令“修改”|“转换”|“将表格转换为AP Div”，打开其对话框，如下图所示。 （2）设置好选项后，单击“确定”按钮，即可将表格转换为层。,嵌套层,1插入法：把插入点放置于页面上已有层内，然后选择“插入记录” |“布局对象”|“AP Div”菜单命令，即插入一个嵌套层。 2描绘法：单击“插入”工具栏“布局”面板中的“绘制 AP Div”按钮，然后在一个已有层中拖动，即画出一个嵌套层。如果在层的参数设置中关闭了层嵌套，请按住Ctrl键在已有层中描绘其子层。,关于嵌套层,关于嵌套层，需要特别注意的是嵌套层并不是页面上一层位于另一层内。嵌套层的本质应该是一层的HTML代码嵌套在另一层的HTML代码之内。 从图中可以看出，层“sub”的代码嵌套在层“main”的HTML代码之内，所以它是嵌套层。反过来，即使在页面上看，一个层位于另一层之内，如果它们的HTML代码互不包含，它们就不是嵌套层。当然最直观的方法还是通过层面板查看层间是不是存在嵌套关系。,在层中插入内容,在层中可以插入多种页面元素，包括文本、表格、图像、插件、按钮等。方法是先在某层内单击鼠标，将光标插入点置于层内，然后就可以采用与在页面中插入元素的相同方法将各种元素插入到层中。,9.2 时间轴,时间轴是Dreamweaver提供用于设计网页动态效果的工具，它通过设置不同时间段层的大小、位置、和可见性来创建动态网页。 在时间轴上显示的每一幅图片或文字称为一帧，整个时间轴由许多帧组成。播放时所有的帧按照设置好的时间和运动方式依次显示出来，好像放电影一样，一段动态效果画面就呈现在浏览者面前。,时间轴面板,时间轴面板提供了操作时间轴的便捷通道，在面板中可以查看和设置对象在各个时间点的属性。打开时间轴面板的方法有两种： 选择菜单命令“窗口”|“时间轴” Alt+F9。,时间轴面板,播放栏表示当前在“文档”窗口中显示时间轴的哪一帧。,关键帧是动画条中已经为对象指定属性（如位置）的帧。Dreamweaver 会计算关键帧之间帧的中间值。小圆标记表示关键帧。通常，在起、止和转折点创建关键帧。,“动画”通道显示用于制作层和图像动画的条。,“行为”通道是在时间轴中特定帧处要执行的行为的通道。,动画条显示每个对象的动画的持续时间。一个行可以包含表示不同对象的多个条。,时间轴下拉列表框用于选择要操作的时间轴名。,时间轴面板,时间轴面板中各对象作用说明如下： （1）时间轴名称：该下拉列表框用于选择要操作的时间轴。一个网页中可定义多条时间轴，各时间轴名称不一样。 （2）首帧：返回到时间轴的第一帧位置。 （3）后退：将播放头向左后退一帧。单击后退按钮并按住鼠标左键不放，可以反向播放时间轴。 （4）当前帧：显示时间轴中当前位置的帧编号。,时间轴面板,（5）播放：将播放头向右移动一帧，如果按住该按钮不放可以预览动画。 （6）Fps：设置每秒单位时间内播放动画帧的数量。默认设置为每秒播放15帧。 （7）自动播放：选中该复选框，设置在浏览器加载页面时自动播放时间轴。自动播放实际上是给页面的Body标签附加一种行为，使页面在载入时执行播放时间轴动作。 （8）循环：选中该复选框，设置在浏览器中可以循环播放当前时间轴。实际上是在动画末帧之后的行为通道中加入跳到第一帧的行为。双击行为通道中的标记可以编辑行为参数和改变循环次数，这将在后面的部分中进行介绍。,时间轴动画,时间轴通过改变层的位置、大小、可见性以及叠放次序来创建动画。需要特别说明的是，时间轴只能移动层，如果要移动图像或文本，必须先在页面中添加层，然后将图像或文本放置在层中，通过移动层来移动这些元素。,通过拖动路径创建动画,如果要创建具有复杂路径的动画，采用手工添加关键帧的方法比较麻烦，而通过记录层拖动时的路径来创建动画，自动添加关键帧要简便得多。具体操作方法如下： （1）选择要创建动画的层。 （2）将层拖到“动画条”的开始位置。 （3）选择“修改”|“时间轴”|“记录AP元素的路径”菜单命令。如果没有层被选择，此菜单项不可用。,通过拖动路径创建动画,（4）在页面中拖动层，创建想要的运动路径。拖运层时鼠标所经过的路径即为层动画的运动轨迹。 （5）释放鼠标后，Dreamweaver将自动向时间轴中添加一个动画栏，同时添加一批相应的关键帧。 然后，保存和浏览。,通过插入关键帧创建动画,（1）将层拖到“动画条”的开始位置；把末端关键帧拖到终点，例如帧编号为200处；把层拖到网页上动画终止处（若起终点重合，则不用拖动），即创建一直线路径的动画。 （2）如图，在首、末帧之间，每隔若干帧反复做：先“添加关键帧”，后拖动层到下一处。自始至终，即得到一曲线路径的动画。 可见，此做法的关键帧由人工添加。关键帧之间的动画自动生成，称为补间动画。若每一帧都是关键帧，则称为逐帧动画。,时间轴的其它操作,（1）改变动画长度和关键帧位置 通过拖动结束帧标记，可以动态调整动画播放时间。拖动时所有关键帧发生移位，保持相互之间的相对位置不变，动画将均匀调整。如果不希望调整其他关键帧，可在拖动时按住Ctrl键。 （2）改变动画的起始位置 在时间轴面板中选择一个或多个动画栏（按住Shift键可选择多栏），然后左右拖动可调整动画的起始位置。拖动时注意可以参考动画栏上面的时间轴刻度。需要特别注意的是，拖动时不要把鼠标放置在关键帧位置，否则变为移动关键帧，而不是移动整个动画位置。,时间轴的其它操作,3移动整个动画路径 如果想移动整个动画路径，可单击动画栏上任意非关键帧位置，选中整个动画栏，然后单击层控制柄并拖动，系统将调整所有关键帧的位置。需要说明的是，这种操作的结果是使整个运动路径移位，但并不改变运动轨迹的形状。 4增加或移除对象 增加对象的最简单方法是选中某个层或图像后直接将其拖动到时间轴面板中，也可在选中对象之后通过快捷菜单命令“添加对象”完成。 如果想从时间轴移除某个对象，首先选中动画栏，然后右击时间轴面板，在弹出的快捷菜单中选择“移除对象”命令即可。注意移除对象并不会删除层或图像，只是从时间轴中删除动画栏。,时间轴的其它操作,5添加或删除帧 选择“修改”|“时间轴”|“添加帧”或“修改”|“时间轴”|“移除帧”菜单命令可以在时间轴上添加或者删除帧。 6设置循环播放次数 当我们选择时间轴面板中的“循环”复选框时，Dreamweaver会自动在动画最后一帧后，插入跳转至第一帧的行为，使时间轴动画可以不断循环播放。 如果希望动画循环若干次而为是无限循环，则可以通过编辑该行为参数来设定循环次数。方法是双击行为通道中的行为标志，打开行为面板进行设置。,图像变换动画示例,时间轴只能改变图像的源属性，如果要使图像的位置发生变化，需要先将图像放置在层中，然后将层加入时间轴。,9.3 行为,行为是事件和动作的组合，它允许用户改变网页内容以及执行特定的任务。利用Dreamweaver的行为，可以轻松制作出动态的网页效果，从而使网页更具吸引力。,关于行为,行为是事件和由该事件触发的动作的组合，用户可以利用“行为”面板来将行为添加到页面中。 行为面板 选择“窗口” “行为”，打开“行为”面板， “行为”面板分为上下两个部分，上部为6个按钮，下部为行为列表，如下图所示。,控制按钮,行为列表,控制按钮：从左至右各按钮的含义如下图所示：,关于行为,控制按钮：从左至右各按钮的含义如下图所示：,关于行为,控制按钮：从左至右各按钮的含义如下图所示：,关于行为,控制按钮：从左至右各按钮的含义如下图所示：,关于行为,控制按钮：从左至右各按钮的含义如下图所示：,关于行为,控制按钮：从左至右各按钮的含义如下图所示：,关于行为,行为列表：用户可以在其中为某行为项选择不同的事件，如下图所示：,关于行为,动作和事件,动作和事件 动作是由JavaScript和HTML代码组成的，该代码能执行各种特殊任务，如弹出一个信息框、播放一段音乐等。用户可以使用“行为”面板直接向页面中添加动作。 事件是浏览器生成的消息，指示该页的用户执行了某种操作。如果用户预先设置了某个动作，则事件将触发相应的动作发生，如弹出一个信息框等。,动作和事件,可产生的事件,根