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

《网页设计与制作 第10章 层与时间轴.ppt》由会员分享，可在线阅读，更多相关《网页设计与制作 第10章 层与时间轴.ppt（102页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

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

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

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

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

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

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

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

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

9、文本的内容超过层的高度，然后保存文档，按F12键在浏览器中进行浏览，发现层中的内容没有完全显示，需要借助右侧的滚动条才能完成阅读，如图10所示。图图1010.2层的基本操作层的基本操作l要正确的运用层来设计页面的布局，必须熟悉层的相关基本操作，包括层的激活、选中、移动、大小调整等。10.2.1层的激活与选中层的激活与选中l在层中进行网页元素的插入时，必须先激活层才可以进行操作。将鼠标移到层中任意位置单击，即可激活该层，如图11所示。图图11l要对层进行移动、调整大小等操作，必须先选中层，单击层的边框或手柄，此时图的边框会出现控制点，此时层为选中状态，可以进行移动、删除等操作，如图12所示。图图

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

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

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

13、将选中层移动到文档的最上层，显示时在页面的最前面l移动到最下层-将选中层移动到文档的最下层，显示时在页面的最后面左对齐设置所有选中的层l左对齐-以最后一个选中的层为基准l右对齐-设置所有选中的层右对齐，以最后一个选中的层为基准l对齐上缘-设置所有选中的层上边缘对齐，以最后一个选中的层为基准l对齐下缘-设置所有选中的层下边缘对齐，以最后一个选中的层为基准l设成高度相同-设置所有选中的层高度相同，以最后一个选中的层为基准l设成宽度相同-设置所有选中的层宽度相同，以最后一个选中的层为基准10.2.7 创建嵌套层创建嵌套层l在一个层中插入另外一个层就形成了嵌套层，嵌套通常用于随其父层一起移动，并且可以

14、设置为继承其父层的可见性，它可通过插入、拖动的方法创建，操作步骤如下：l（1）在文档中选中已有的层，如图23所示。图图23l（2）在图层Layer1中，用创建图层的方法再创建一个层，输入文字“智能家居图片”，如图24所示。图图24l（3）从图24可以看出，第二个层在第一个层的范围之内，但是查看【层】面板时发现两个层依然是并列状态，如图25所示。图图25l（4）切换到代码视图，查看层layer2的代码如图26所示：图图26l（5）将层layer2的代码剪切，然后粘贴在层layer1的标记之内，修改后的代码如图27所示：图图27l（6）再查看层面板，这时可以看到layer2为layer1的子层呈树

15、状显示，如图28所示：图图2810.3 层与表格的相互转换层与表格的相互转换l10.3.1层转换为表格l由于层在网页布局上非常方便，因此也可以使用层来创建布局，然后再将层转换为表格，但是在转换之前，应该确保层没有重叠。将层转换成表格的步骤如下：l（1）选中要转换的层，如图29所示。图图29l（2）选择菜单命令【修改转换层到表格】，弹出【转换层为表格】对话框，如图30所示。图图30（3）在对话框中的各项设置如下：）在对话框中的各项设置如下：l表格布局:l最精确-严格按照层的排版生成表格，为每一层建立一个表格单元，为保持层与层之间的间隔必须附加单元格，缺点是表格会比较复杂l最小：合并空白单元-可以

16、删除宽度小于1px的单元格，可以设置像素宽度，指定如果几个层被定位在指定像素之内，这些层的边缘应该对齐。选中此单选按钮生成的表格的空行、空列最少l使用透明GIF-用透明GIF图像填充表格的最后一行，这样可以确保表格在所有的浏览器中的显示相同l置于页面中央-选中此复选框可以让转换的表格在页面居中；如果不选复选框，表格左对齐l布局工具:l防治层重叠-层转换为表格后，层必须不重叠，选中此复选框可以防止层重叠l显示层面板-选中此复选框，将打开层面板组l显示到网络-选中此复选框在文档中显示网络l靠齐到网络-选中此复选框启用媳妇到网络功能l（4）设置完成，单击【确定】按钮，层就转换成表格，如图31所示。图

17、图3110.3.2 表格转换为层表格转换为层l表格同样也可以转换为层，将表格转换为层的步骤如下：l（1）选中表格，如图32所示。图图32l（2）选择菜单命令【修改转换表格到层】，弹出【转换表格为层】的对话框，如图33所示。图图33l对话框中的【布局工具】选项组有4个复选框，一般只选第一个即可，各复选框的具体含义如下：l防止层重叠：选中此复选框可以在建立、移动层和调整层大小时防止层互相重叠；l显示层面板：在转换完成时显示层面板；l显示网络：转换完成在页面显示网络；l靠齐到网络：启用网络吸附功能。l（3）单击【确定】按钮，表格就被成功转换为层，如图34所示，原表格的每一行转换后都成了一个层。图图3

18、410.4 时时 间间 轴轴l时间轴一般都是和层配合使用的，用来制作网页中常见的图片浮动效果。在Dreamweaver8中，如果不熟悉脚本编程语言，也可以制作出图片的浮动效果，但需要与行为配合使用。10.4.1 时间轴检查器时间轴检查器l使用时间轴，首先要先了解时间轴检查器，利用它可以制作出非常炫的动画效果，按Alt+F9键或选择菜单命令【窗口】时间轴】，打开【时间轴检查器】面板，如图35所示。图图35l时间轴中的面板和Flash软件中的时间轴基本相似，面板中各控制选项的说明如下：l（1）时间轴弹出菜单：表示当前时间轴的名称；l（2）回首帧：将播放头移至时间轴的第一帧；l（3）后退：将播放头向

19、左移动一帧。单击【后退】按钮并按住鼠标左键不放，可以反向播发时间轴；l（4）当前播放帧：该处的文本框中显示当前帧的序号；l（5）播放：将播放头向右移动一帧。单击【播放】按钮并按住鼠标左键不放，可以连续播发时间轴；l（6）每秒播放帧数：设置动画的速度，可以在该文本框中输入具体的数值；l（7）自动播放：选中复选框，当前页载入时自动开始播放时间轴；l（8）循环：选中此复选框，使当前时间轴可以无限循环播放。双击此帧中的标记可以编辑行为参数和改变循环的次数；l（9）行为频道：在指定帧中选择要运行的行为；l（10）播放头：之时时间的当前帧，也称为时间轴指针；l（11）动画频道：制作和显示层图像的动画区域；

20、l（12）帧数：同Flash软件中的帧数一样，设置总帧数和每秒帧数，可以控制动画的持续时间。默认的设置是每秒15帧。10.4.2 创建时间轴动画创建时间轴动画l下面通过制作一个在网页中漂浮的Flash动画来操作如何使用时间轴，具体步骤如下：l（1）先在文档中插入一个空白层，然后在层中插入一个Flash动画，如图36所示。图图36l（2）选择插入对象的层，并在该层的手柄上按下鼠标左键，然后将该层拖动到时间轴l动画通道中。可以看到插入的动画长度默认为15帧，相应的层名(Layer1)显示在该动画条l中，并且在动画条两端自动加入了两个关键帧，如图37所示。图图37l（3）单击动画条中的某个关键帧(例

21、如默认时的第15帧)，此时播放头也相应地移动到该处。创建直线动画时，在【时间轴】面板中选择最后一个关键帧第15帧，再在文档窗口中选择该层，并拖动该层移动一定的距离后，松开鼠标左键。可以看到动画起始位置到结束位置之间有一条线，这就是层的运动轨迹，如图38所示。图图38l（4）如果需要层按曲线移动，则在【时间轴】面板中选择该动画条，在需要增加关键帧的位置按住Ctrl键并单击，则可以看到在该位置处添加了一个圆圈，表示增加了一个关键帧，如图39所示。图图39l（5）在文档窗口中移动该动画对应的层的位置，使轨迹呈现曲线状，如图40所示。图图40l（6）重复第（4）、（5）步，就可以制作出运动路线比较复杂

22、的动画。l（7）选中【时间轴】面板中的【自动播放】、【循环】两个复选框，如图41所示。图图41l（8）按F12进行预览，会播放出用户录制的路径动画。l如果需要创建比较复杂的动画，可以通过“录制层路径”来创建时间轴动画，具体操作步骤如下：l在页面中绘制层，在层中插入需要创建动画的图像。l选中层，然后选择【修改】|【时间轴】|【录制层路径】命令，用鼠标拖动层进行移动，路径会随着鼠标移动的轨迹自动产生一条运动路径。l选中【自动播放】、【循环】两个复选框，预览时，会播放出用户录制的路径动画。10.4.3 修改时间轴属性修改时间轴属性l在定义时间轴后，有时为了达到某些目的，需要进行一些修改。例如，添加或

23、删除关键帧、修改动画的起始时间及改变动画的位置等。下面分别进行说明：l（1）改变动画的起始时间：先选择一个或多个动画条（按住Shift键可以一次选择多个动画条），在这些动画条上按住鼠标左键并左右拖动动画条，则可以改变播放动画的起始帧。l（2）改变动画条长度：在动画条两端的关键帧上按住鼠标左键并左右拖动，则可以改变动画条的长度。此时动画条中所有关键帧都发生移动，保证它们的相对位置不变。如果要防止其他关键帧移动，可按住Ctrl键再拖动动画条两端的关键帧。改变动画条长度只是改变动画播放的时间，不会改变动画运动轨迹的长度。l（3）改变关键帧位置：在动画条中的关键帧上按住鼠标左键并左右拖动，则可以改变关键帧的位置。l（4）改变动画轨迹的位置：在【时间轴】面板中单击需要改变动画轨迹的动画条，使整个动画条被选中，然后在文档窗口中拖动该动画对应的对象，即可改变该动画的轨迹在文档窗口中的位置。该操作使整个轨迹移动，但不改变运动轨迹的形状。本本 章章 小小 结结l通过对层的学习，读者可以掌握层的创建方法，其中包括创建层、嵌套层、层面板的使用、层的基本操作以及时间轴的基础知识等，由于层和时间轴配合才可以制作网页的动态效果，因此有必要对之熟练掌握。