web程序设计第9章

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