网页设计与制作 第10章 层与时间轴.ppt

1、第10章,层与时间轴,本章导读,本章介绍了层与时间轴的相关知识，主要内容包括：如何创建和使用层；对层的基本操作；层与表格之间的互相转换；最后简单介绍了时间轴的使用。,本章要点,层的创建与使用 层的基本操作 层与表格的相互转换 时间轴的使用,层是CSS中的定位技术，在Dreamweaver中对其进行了可视化操作。文本、图像、表格等元素只能固定其位置，不能互相叠加在一起，而层可以放置在网页文档内的任何一个位置，层内可以放置网页文档中的其他构成元素，层可以自由移动，层与层之间还可以重叠。层体现了网页技术从二维空间向三维空间的一种延伸，综合层和行为的使用还可以制作出动画效果，而不必使用任何JavaSc

2、ript或HTML代码。,10.1 层的创建与使用,在Dreamweaver 8中，可以通过层来设计网页的布局，实现对隐藏和显示的控制。还可以在文档设计视图中移动层，以及在两个层中设置层的背景图像。利用层可以让位置的设置变得更加灵活和机动，同时还可以实现层和表格的相互转换。在网页中放置层时，代码以标签实现。,10.1.1 创建层,在网页中创建层的步骤如下： （1）在工具栏中选择“布局”分类，单击工具面板中的第3个按钮，如图1所示。,图1,（2）或选择菜单命令【插入布局对象层】，此时在文档中出现一个透明的矩形框，这样就创建了一个空白层。如图2所示。,图2,10.1.2 层面板的使用,利用层面板可

3、以设置层是否可见、是否可以重叠，还可以改变层的顺序。 （1）层的可见性 打开层的属性面板，在层的眼睛图标列内单击，可以更改对应层在“设计”视图中的可见性： 眼睛睁开表示该层是可见的。 眼睛闭合表示该层是不可见的。 如果没有眼睛图标，该层通常会继承其父级的可见性（如果层没有嵌套，父级就是文档正文，而文档正文始终是可见的）。单击眼睛图标列，可以同时改变所有层的可见性，如图3所示。,图3,（2）防止层重叠 有2种方法可防止层重叠： 选择菜单命令【修改】【排列顺序】【防止层重叠】。 打开层面板，选中【防止层重叠】复选框。 在文档中创建了多个层时，设置了防止层重叠，则在拖动层时，只能沿着已有层的边界拖动

4、，如图4所示。,图4,但如果是建立了重叠层之后才选中此复选框，以前发生的层重叠是不能改变的，此时，需要通过选中层来进行移动，把重叠的层分开。 在选择了本选项和吸附功能被启用的情况下，如果吸附会导致两个层重叠，此时层不是被吸附到网格，而是被吸附到最靠近的层边缘 （3）改变层的顺序 改变层的堆叠顺序方法如下：选择层面板中的Z列，单击后面的数字，可以让其处于可编辑状态。改变数字可以改变层的顺序，顺序的前后和数字的大小一致，数字小的靠前，数字大的靠后。,10.1.3 层的属性,除了可以使用层面板来设置一些属性以外，如果要精确地设定层的参数，就要借助层属性面板。选中层，可以在层【属性】面板中进行设置，属

5、性面板如图5所示。,图5,属性面板中各个参数含义如下： 层编号：设置层的名称。因为在一个页面可以插入多个层，所以要为每一个层定义一个不同的名字，以便进行标识识别； 左、上：用以设置层距离页面左上角的距离。层位置的控制皆为绝对位置，会随浏览器显示分辨率的不同而位置有所变化； 宽、高：指定层的宽度和高度。默认插入层的宽和高为200px和115px。也可以在插入别的网页元素以后，根据需要再设置其宽度和高度；,Z轴：用来设置层的Z轴，可为负值。此设置在一个页面存在多个层，重叠时根据Z轴值的大小来决定层的显示顺序，Z轴值最大的在最前面显示，将覆盖Z轴值小的； 可见性：在下拉列表框中设置层的可视属性。选择

6、“Default”，为默认值，默认层可见；选择“Inherit”，表示继承父层的可视属性；选择“Visible”，表示设置层为显示，并且不受父层属性的影响；选择“Hidden”，表示设置层为隐藏，不受父层属性的影响； 背景图像：用来设置层的背景图像； 背景颜色：用来设置层的背景颜色；,溢出：当层中插入元素的大小超过层的设置大小时，显示层中内容的方式有4种。“Visible”表示当层中的内容超过层的大小时，层将自动扩展，直到可以容纳当前内容；“Hidden”表示当层中的内容超过层的大小时，超过部分将被隐藏；“Scroll”表示当层中的内容超过层的大小时，层中将出现滚动条，拖动滚动条，可以看到层中

7、的全部内容；“auto”表示当层中的内容不超过层的大小时，滚动条不显示，超出时，自动显示滚动条； 剪辑：用来设置层的可见属性。经过剪辑的层只有指定的区域才可见，左、右、上、下后面的文本框用来设置可见区域的左边界距离左右、上下的距离。,10.1.4 在层中插入图片,层的使用让网页在排版方面更灵活。因为操作简单，层可以方便地将网页中任何一个元素进行定位，但是层也不能随意地摆放位置，需要和表格等元素进行配合，这样排版出来的网页才会更为科学、合理。在文档的层中插入图片的步骤如下： （1）切换到工具栏的类别为【布局】，单击“绘制层”按钮，如图6所示，即可在文档中创建一个空白层。,图6,（2）将光标置于层

8、中，再切换工具栏类别到【常用】，单击“插入图像”按钮，打开“选择图像源文件”对话框，选择需要的图像文件，如图7所示。,图7,（3）单击【确定】按钮，弹出“图像标签辅助功能属性”对话框，设置替换文本为“风景图片”，再单击【确定】按钮，就将图像插入到层中，如图8所示。,图8,10.1.5层的溢出,上一小节中插入到层中的图片不超过层的大小设置，下面考察当插入内容超过层大小时的效果。具体步骤如下： （1）在文档中创建一个空白层，选中层后在其【属性】面板中设置属性，让溢出的滚动条在内容超过层大小时自动显示，如图9所示。,图9,（2）在层中插入文本，并且让文本的内容超过层的高度，然后保存文档，按F12键在

9、浏览器中进行浏览，发现层中的内容没有完全显示，需要借助右侧的滚动条才能完成阅读，如图10所示。,图10,10.2层的基本操作,要正确的运用层来设计页面的布局，必须熟悉层的相关基本操作，包括层的激活、选中、移动、大小调整等。,10.2.1层的激活与选中,在层中进行网页元素的插入时，必须先激活层才可以进行操作。将鼠标移到层中任意位置单击，即可激活该层，如图11所示。,图11,要对层进行移动、调整大小等操作，必须先选中层，单击层的边框或手柄，此时图的边框会出现控制点，此时层为选中状态，可以进行移动、删除等操作，如图12所示。,图12,如果要选定多个层，有以下2种方法： （1）在选中一个层以后，按住S

10、hift 键不放，然后再单击其他层，即可实现。 （2）利用层面板，先单击一个层的名字，然后同时按住Shift键，再单击其他要选中的层的名字，如图13所示。,图13,10.2.2 层的移动,选中层以后，当光标变为4个箭头的形状，或直接点击层的控制手柄，同时按住鼠标的左键不放，对层进行水平或者垂直方向的移动，如图14所示。,图14,移动前后【属性】面板中发生的变化就是层距离左上角的距离，如图15和16所示。,图15,图16,10.2.3 调整层的大小,选中层以后，层的四周出现了控制点，可以进行调整大小： 垂直调整：当鼠标移到上下边框的控制点时，鼠标变成上下箭头状，向上或向下拖动鼠标，可以实现对层垂

11、直方向的尺寸调整，如图17所示； 水平调整：当鼠标移到左右边框控制点时，鼠标变成左右箭头的形状，向左或向右移动鼠标，可以实现对层水平方向的尺寸调整，如图18所示； 等比例缩放：当鼠标移到边框的四个角的控制点时，鼠标变成斜的双向箭头，向对角线的方向拉伸鼠标，即可实现对层的等比例缩放，如图19所示。,图17,图18,图19,10.2.4 层的复制,（1）选中一个层，按快捷键Ctrl+C，将层复制到剪切版中。 （2）按快捷键Ctrl+V，将层粘贴到文档中，如图20和21所示为文档中复制层前后的变化。,图20,图21,（3）通过图21可以发现复制后的层和原来的层有部分是重叠的，可以通过移动新层让两个层

12、进行分离，如图22所示。,图22,10.2.5 层的删除,层的删除方法有两种： （1）选中层，选择菜单命令【编辑清除】，可以将该层删除。 （2）选中层，直接单击键盘的Delete键，也可将层删除。,10.2.6 层的对齐与排序,在一个文档中可能出现多个层，仅用层的移动达不到页面的整齐，还需要对层进行有序的排列，有时需要实现对齐的设置，具体的操作步骤如下： （1）选中多个需要对齐或排序的层。 （2）选择菜单命令【修改排列顺序】，在弹出的二级菜单中有8个选项，含义如表所示。,移动到最上层-将选中层移动到文档的最上层，显示时在页面的最前面 移动到最下层-将选中层移动到文档的最下层，显示时在页面的最后

13、面左对齐设置所有选中的层 左对齐-以最后一个选中的层为基准 右对齐-设置所有选中的层右对齐，以最后一个选中的层为基准 对齐上缘-设置所有选中的层上边缘对齐，以最后一个选中的层为基准 对齐下缘-设置所有选中的层下边缘对齐，以最后一个选中的层为基准 设成高度相同-设置所有选中的层高度相同，以最后一个选中的层为基准 设成宽度相同-设置所有选中的层宽度相同，以最后一个选中的层为基准,10.2.7 创建嵌套层,在一个层中插入另外一个层就形成了嵌套层，嵌套通常用于随其父层一起移动，并且可以设置为继承其父层的可见性，它可通过插入、拖动的方法创建，操作步骤如下： （1）在文档中选中已有的层，如图23所示。,图

14、23,（2）在图层Layer1中，用创建图层的方法再创建一个层，输入文字“智能家居图片”，如图24所示。,图24,（3）从图24可以看出，第二个层在第一个层的范围之内，但是查看【层】面板时发现两个层依然是并列状态，如图25所示。,图25,（4）切换到代码视图，查看层layer2的代码如图26所示：,图26,（5）将层layer2的代码剪切，然后粘贴在层layer1的标记之内，修改后的代码如图27所示：,图27,（6）再查看层面板，这时可以看到layer2为layer1的子层呈树状显示，如图28所示：,图28,10.3 层与表格的相互转换,10.3.1 层转换为表格 由于层在网页布局上非常方便，

15、因此也可以使用层来创建布局，然后再将层转换为表格，但是在转换之前，应该确保层没有重叠。将层转换成表格的步骤如下： （1）选中要转换的层，如图29所示。,图29,（2）选择菜单命令【修改转换层到表格】，弹出【转换层为表格】对话框，如图30所示。,图30,（3）在对话框中的各项设置如下：,表格布局 : 最精确-严格按照层的排版生成表格，为每一层建立一个表格单元，为保持层与层之间的间隔必须附加单元格，缺点是表格会比较复杂 最小：合并空白单元 -可以删除宽度小于1px的单元格，可以设置像素宽度，指定如果几个层被定位在指定像素之内，这些层的边缘应该对齐。选中此单选按钮生成的表格的空行、空列最少,使用透明

16、GIF -用透明GIF图像填充表格的最后一行，这样可以确保表格在所有的浏览器中的显示相同 置于页面中央 -选中此复选框可以让转换的表格在页面居中；如果不选复选框，表格左对齐,布局工具 : 防治层重叠 -层转换为表格后，层必须不重叠，选中此复选框可以防止层重叠 显示层面板 -选中此复选框，将打开层面板组 显示到网络 -选中此复选框在文档中显示网络 靠齐到网络 -选中此复选框启用媳妇到网络功能,（4）设置完成，单击【确定】按钮，层就转换成表格，如图31所示。,图31,10.3.2 表格转换为层,表格同样也可以转换为层，将表格转换为层的步骤如下： （1）选中表格，如图32所示。,图32,（2）选择菜

17、单命令【修改转换表格到层】，弹出【转换表格为层】的对话框，如图33所示。,图33,对话框中的【布局工具】选项组有4个复选框，一般只选第一个即可，各复选框的具体含义如下： 防止层重叠：选中此复选框可以在建立、移动层和调整层大小时防止层互相重叠； 显示层面板：在转换完成时显示层面板； 显示网络：转换完成在页面显示网络； 靠齐到网络：启用网络吸附功能。 （3）单击【确定】按钮，表格就被成功转换为层，如图34所示，原表格的每一行转换后都成了一个层。,图34,10.4 时 间 轴,时间轴一般都是和层配合使用的，用来制作网页中常见的图片浮动效果。在Dreamweaver 8中，如果不熟悉脚本编程语言，也可

18、以制作出图片的浮动效果，但需要与行为配合使用。,10.4.1 时间轴检查器,使用时间轴，首先要先了解时间轴检查器，利用它可以制作出非常炫的动画效果，按Alt+F9键或选择菜单命令【窗口】时间轴】，打开【时间轴检查器】面板，如图35所示。,图35,时间轴中的面板和Flash软件中的时间轴基本相似，面板中各控制选项的说明如下： （1）时间轴弹出菜单：表示当前时间轴的名称； （2）回首帧：将播放头移至时间轴的第一帧； （3）后退：将播放头向左移动一帧。单击【后退】按钮并按住鼠标左键不放，可以反向播发时间轴； （4）当前播放帧：该处的文本框中显示当前帧的序号；,（5）播放：将播放头向右移动一帧。单击【

19、播放】按钮并按住鼠标左键不放，可以连续播发时间轴； （6）每秒播放帧数：设置动画的速度，可以在该文本框中输入具体的数值； （7）自动播放：选中复选框，当前页载入时自动开始播放时间轴； （8）循环：选中此复选框，使当前时间轴可以无限循环播放。双击此帧中的标记可以编辑行为参数和改变循环的次数；,（9）行为频道：在指定帧中选择要运行的行为； （10）播放头：之时时间的当前帧，也称为时间轴指针； （11）动画频道：制作和显示层图像的动画区域； （12）帧数：同Flash软件中的帧数一样，设置总帧数和每秒帧数，可以控制动画的持续时间。默认的设置是每秒15帧。,10.4.2 创建时间轴动画,下面通过制作一

20、个在网页中漂浮的Flash动画来操作如何使用时间轴，具体步骤如下： （1）先在文档中插入一个空白层，然后在层中插入一个Flash动画，如图36所示。,图36,（2）选择插入对象的层，并在该层的手柄上按下鼠标左键，然后将该层拖动到时间轴 动画通道中。可以看到插入的动画长度默认为 15 帧，相应的层名(Layer1)显示在该动画条 中，并且在动画条两端自动加入了两个关键帧，如图37所示。,图37,（3）单击动画条中的某个关键帧(例如默认时的第15 帧)，此时播放头也相应地移动到该处。创建直线动画时，在【时间轴】面板中选择最后一个关键帧第 15 帧，再在文档窗口中选择该层，并拖动该层移动一定的距离后

21、，松开鼠标左键。可以看到动画起始位置到结束位置之间有一条线，这就是层的运动轨迹，如图38所示。,图38,（4）如果需要层按曲线移动，则在【时间轴】面板中选择该动画条，在需要增加关键帧的位置按住 Ctrl 键并单击，则可以看到在该位置处添加了一个圆圈，表示增加了一个关键帧，如图39所示。,图39,（5）在文档窗口中移动该动画对应的层的位置，使轨迹呈现曲线状，如图40所示。,图40,（6）重复第（4）、（5）步，就可以制作出运动路线比较复杂的动画。 （7）选中【时间轴】面板中的【自动播放】、【循环】两个复选框，如图41所示。,图41,（8）按F12进行预览，会播放出用户录制的路径动画。 如果需要创建比较复杂的动画，可以通过 “录制层路径”来创建时间轴动画，具体操作步骤