网站建设与管理之层、时间轴、行为和布局

《网站建设与管理之层、时间轴、行为和布局》由会员分享，可在线阅读，更多相关《网站建设与管理之层、时间轴、行为和布局（81页珍藏版）》请在金锄头文库上搜索。

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

2、 若要绘制层，请单击插入栏上的“描绘层”按钮，然后在文档窗口的设计视图中通过拖动来绘制层。 若要在文档中的特定位置插入层的代码，请将插入点放入文档窗口，然后选择“插入”“布局对象”“层”。 若要连续绘制多个层，请执行以下操作。 （1）单击“插入”栏上的“绘制层”按钮。 （2）通过按住 Ctrl 键并拖动鼠标来绘制各个层。 只要不松开 Ctrl键，就可以继续绘制新的层。, 演示,6,层面板,若要打开层面板，请选择“窗口”“其他”“层”。层显示为按z轴顺序排列的名称列表；首先创建的层出现在列表的底部，最新创建的层出现列表的顶部。 嵌套的层显示为连接到父层的名称。单击加号 (+) 或减号 (-) 图

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

4、前值小的数值时，该层将向下移动。,9,对齐层,当页面中存在多个层时，可以使用层对齐命令对齐层。使用层对齐，可使多个层和最后选定的层在某一方向上对齐。操作步骤如下： （1）按住Shift键选取多个层。 （2）选择菜单命令“修改”|“排列顺序”，出现“排列顺序”子菜单，如图所示。, 演示,10,层属性面板,选定层后，在Dreamweaver的底部会出现层的属性面板。,在层属性面板上可以显示和设置以下属性： 层编号：该文本框设置当前层的名称。层的名称只能由标准的字母和数字表示，不能使用空格、连字符、斜杠符等。 左：设置层左边边框相对于页面的左边界或父层左边界的距离。 上：设置层上边边框相对于页面的上

5、边界或父层顶端的距离。 宽：该域用于设置层的宽度值，默认单位是像素。 高：该域用于设置层的高度值，默认单位是像素。,11,层属性面板,Z轴：在该文本框中输入层在Z方向上的索引值。 显示：该下拉列表框设置层的可见性。 背景图像：设置层的背景图像。 背景颜色：设置层的背景色。单击颜色框按钮，在色盘中选取合适的颜色，或者在文本框中直接输入背景颜色的十六进制数值。 类：将某种CSS样式应用到层中。 溢出：设置当层中的内容超出层的范围后产生的效果。,12,层属性面板,溢出：设置当层中的内容超出层的范围后产生的效果。 Visible当层中的内容超出层的范围时，层会自动扩展大小以显示其中的内容。 Hidde

6、n当层中的内容超出层的范围时，层的大小保持不变，超出的内容不被显示。 Scroll无论层中的内容是否超出层的范围，在层的右边和下边出现滚动条。 Auto当层中的内容超出层的范围时，层的大小保持不变。在层的右边和下边出现滚动条，拖动滚动条显示超出部分内容。当层中内容没有超出时，不显示滚动条。 剪辑：在该域中定义层中可见区域的大小。在上、下、左、右四个文本框中分别设置层中显示区域相对于四边的距离，单位为像素。 如果在页面中选择多个层，可以通过层属性面板同时修改多个层的属性，这样使我们的设计过程更方便快捷。,13,层和表格的转换,将层转换为表格 选择菜单命令“修改”“转换”“层到表格”，打开“转换层

7、为表格”对话框。,14,层和表格的转换,在该对话框中可进行以下设置： 最精确：选中该项，将层转换为表格，如果层之间有间距，则插入适当的单元格。 最小：选中该项后，如果层之间的距离很小，会将这些层转换为相邻的单元格，转换后的表格具有最少的行列。 使用透明GIFs：选中该复选框，会在转换后的表格最后一行中填充透明的GIF图像 （），目的是为了在所有的浏览器中，使表格都具有一样的显示效果。 置于页面中央：选中该复选框，转换后的表格在页面中居中对齐，否则表格为左对齐方式。,15,层转换为表格示例, 演示,16,将表格转换为层,（1）选择菜单命令“修改”“转换”“表格到层”，打开“转换表格为层”对话框，

8、如下图所示。 （2）设置好选项后，单击“确定”按钮，即可将表格转换为层。,17,嵌套层,1插入法：把插入点放置于页面上已有层内，然后选择“插入”“层”菜单命令插入一个嵌套层。 2描绘法：单击“插入”工具栏布局面板中的层按钮，然后在一个已有层中拖动，即画出一个嵌套层。如果在层的参数设置中关闭了层嵌套，请按住Ctrl键在已有层中描绘其子层。, 演示,18,关于嵌套层,关于嵌套层，需要特别注意的是嵌套层并不是页面上一层位于另一层内。嵌套层的本质应该是一层的HTML代码嵌套在另一层的HTML代码之内。 从图中可以看出，层“sub”的代码嵌套在层“main”的HTML代码之内，所以它是嵌套层。反过来，即

9、使在页面上看，一个层位于另一层之内，如果它们的HTML代码互不包含，它们就不是嵌套层。当然最直观的方法还是通过层面板查看层间是不是存在嵌套关系。,19,在层中插入内容,在层中可以插入多种页面元素，包括文本、表格、图像、插件、按钮等。方法是先在某层内单击鼠标，将光标插入点置于层内，然后就可以采用与在页面中插入元素的相同方法将各种元素插入到层中。, 演示 Example/test14.html,20,9.2 时间轴,时间轴是Dreamweaver提供用于设计网页动态效果的工具，它通过设置不同时间段层的大小、位置、和可见性来创建动态网页。 在时间轴上显示的每一幅图片或文字称为一帧，整个时间轴由许多帧

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

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

12、havior）标志，用来设置时间轴中某个特定帧应该执行的行为动作。 （10）播放头：面板中的红色方块，指示页面上当前显示的是时间轴中哪一帧。 （11）动画通道：显示层和图像的通道，共有32个这样的通道。 （12）动画栏：显示对象的动画轨迹。 （13）关键帧：动画栏中用小圆圈标识的帧就是关键键，通过关键帧可以设置对象在该时刻的属性。Dreamweaver可以自动生成两个关键帧之间的过渡动画帧。,25,时间轴动画,时间轴通过改变层的位置、大小、可见性以及叠放次序来创建动画。需要特别说明的是，时间轴只能移动层，如果要移动图像或文本，必须先在页面中添加层，然后将图像或文本放置在层中，通过移动层来移动这

13、些元素。,26,使用关键帧创建动画,使用关键帧创建层动画的具体步骤如下： （1）在页面中添加层，并在层中插入要漂移的文本或图像，然后将层放置在动画的起点位置。 （2）打开时间轴面板，并选中要创建动画的层。 （3）将层放入到时间轴面板中。,27,使用关键帧创建动画,（4）单击动画栏的末帧，将此关键帧拖动到第60帧位置，然后将层移动到动画结束的位置。此时我们会发现在文档窗口中显示有一条从层起始位置到结束位置的连接线，这就是层的运动轨迹。,28,使用关键帧创建动画,（5）可以通过添加关键帧的方法，创建曲线运动轨迹。 选择动画栏，执行下面操作之一： 单击动画栏中的某一帧，选择菜单命令“修改”|“时间轴

14、”|“增加关键帧”。 用鼠标右键单击动画栏中的某一帧，然后从快捷菜单中选择“增加关键帧”命令。 按住Ctrl键并单击动画栏中某一帧，在该处添加关键帧。 如果要移除某一关键帧，右键单击该帧，然后从快捷菜单中选择“移除关键帧”命令。,29,使用关键帧创建动画,（6）单击增加的关键帧，拖动层使其运动轨迹呈曲线状。重复添加多个关键帧，可创建更复杂的曲线路径。, 演示,30,通过拖动路径创建动画,如果要创建具有复杂路径的动画，采用添加关键帧的方法比较麻烦，此时通过记录层拖动时的路径来创建动画要简便得多。具体操作方法如下： （1）选择要创建动画的层。 （2）将层移动到动画开始的位置。 （3）选择“修改”|

15、“时间轴”|“录制层路径”菜单命令或者在时间轴快捷菜单中选择该命令。需要说明的是，如果没有层被选择，此菜单项不可用。,31,通过拖动路径创建动画,（4）在页面中拖动层，创建想要的运动路径。拖运层时鼠标所经过的路径即为层动画的运动轨迹。 （5）释放鼠标后，Dreamweaver将自动向时间轴中添加一个动画栏，同时添加一批相应的关键帧。, 演示,32,时间轴的其它操作,（1）改变动画长度和关键帧位置 通过拖动结束帧标记，可以动态调整动画播放时间。拖动时所有关键帧发生移位，保持相互之间的相对位置不变，动画将均匀调整。如果不希望调整其他关键帧，可在拖动时按住Ctrl键。 （2）改变动画的起始位置 在时

16、间轴面板中选择一个或多个动画栏（按住Shift键可选择多栏），然后左右拖动可调整动画的起始位置。拖动时注意可以参考动画栏上面的时间轴刻度。需要特别注意的是，拖动时不要把鼠标放置在关键帧位置，否则变为移动关键帧，而不是移动整个动画位置。, 演示,33,时间轴的其它操作,3移动整个动画路径 如果想移动整个动画路径，可单击动画栏上任意非关键帧位置，选中整个动画栏，然后单击层控制柄并拖动，系统将调整所有关键帧的位置。需要说明的是，这种操作的结果是使整个运动路径移位，但并不改变运动轨迹的形状。 4增加或移除对象 增加对象的最简单方法是选中某个层或图像后直接将其拖动到时间轴面板中，也可在选中对象之后通过快捷菜单命令“添加对象”完成。 如果想从时间轴移除某个对象，首先选中动画栏，然后右击时间轴面板，在弹出的快捷菜单中选择“移除对象”命令即可。注意移除对象并不会删除层或图像，只是从时间轴中删除动画栏。, 演示,34,时间轴的其它操作,5添加或删除帧 选择“修改”|“时间轴”|“添加帧”或“修改”|“时间轴”|“移除帧”菜单命令可以在时间轴上添加或