第九章层与时间轴
课题：层的创建与设置
一、教学基本内容
1、层的创建
2、层的基本操作
3、层的属性
二、课型：新授课
三、课时：1个课时
四、教学重点与难点
重点：层的属性
难点：z-index、子层
五、教学目的
掌握层的相关操作，为动画设置打基础
六、教学过程
1、复习引入
网页中的定位--表格
2、建立层
（1）菜单，插入（Insert）层（Layer），默认大小：200╳115
（1）对象面板
3、层的意义
（1）可以将元素重叠
（2）可以用于精确定位网页元素
（3）可以通过应用时间线使层移动和变换，实现简单的动画效果
（4）网页和网页元素的可见或不可见可以通过层的显示和隐藏属性实
现
（5）层可以转换成表格
4、层属性
（1）层编号（LayerID）
（2）Z轴（Z-index）：控制层重叠时谁在前谁在后的问题
（3）背景图像（Bgimage）
（4）显示（Vis）：默认（default）、（继承）inherit、（可见）visible、隐藏（hidden）四个选项之一
（5）标签（Tag）：DIV、SPAN、LAYER、ILAYER，选DIV
（6）溢出（Overflow）：当层内容超过层大小的时候如何显示。显
示层内的全部内容（visible）、只显示层尺寸以内的内容（hidden）、
不改变层大小、只添加滚动条（scroll）、只有层不够大时才显示滚
动条（auto）
（7）剪裁（Clip）：指定层的哪一部分是可见的，输入的数值是距
离层的4个边界的距离
6、子层
（1）在一个层中再插入一个层，后者就是前者的子层
（2）子层不一定在父层里面
（3）移动子层，父层位置不发生变化
（4）移动父层，子层跟着变化，对父层的相对位置不变
（5）子层可以继承父层的可见性
7、层与表格的转换
（1）层转换为表格：修改---转换层到表格
（2）表格转换为层：修改----转换表格到层
七、作业处理
1、制作阴影字
2、用层将5个图片放置围绕一个图片
3、将上题结果转换为表格
八、教具
所用的教室为多媒体实验室，因此所要板书的内容及使用的工具均在计算机上用PPT课件进行演示。
第六章使用框架、层和时间轴 本章要点： ●框架的概念 ●使用框架设置网页布局 ●层的概念 ●创建层 ●使用时间轴 一、使用框架（P90 6.2 使用框架） （一）、使用框架 如果多个网页拥有相同的导航区，只是内容有所不同，则可以使用框架来设计网页布局，这样浏览者在查看不同内容时，无需每次都下载整个页面，而可以保持导航部分不变，只下载网页中需要更新的内容即可，从而极大提高网页的下载速度。这类网页称为框架页，其最典型的应用时各大论坛的设计。 1、框架的概念 框架页面通过框架将网页分成多个独立的区域，在每个区域可以单独显示不同的页面，每个区域可以独立翻滚。 （1）框架网页的结构 框架由框架和框架集组成，框架就是网页中被分隔开的各个部分，每一个部分都是一个完整的网页，这些网页共同组成了框架集。框架集实际上也是一个网页文件，用于定义框架的结构、数量、尺寸等属性。 框架集又被称为父框架，框架被称为子框架，将某个页面划分为若干框架时，既可独立地操作各个框架，创建新文件，也可为框架指定自己制作好的文档。选择【查看】-【可视化助理】-【框架边框】命令可以显示或隐藏框架边界。 （2）框架网页的功能——导航 （3）框架结构的优点 ●浏览者无需为每个页面重新加载与导航相关的图形，可以大大提高网页的下载效率 ●每个框架都有自己的滚动条，浏览者可以独立滚动这些框架 2、创建框架网页文档 （1）在【新建文档】对话框中创建 文件-新建-示例中的页-框架集-选择所需框架结构 在【框架标签辅助功能属性】对话框中为每一个框架指定一个标题 （2）在【布局】插入栏中创建 插入-布局-框架-可选13种预定于框架 （3）手动创建框架网页 查看-可视化助理-框架边框，显示框架边框，选中所需分隔的框架，按ALT键同时，光标移至框架边框上，显示为双箭头时，即可将一个框架拆分为两个框架。 （二）、编辑框架 1、框架的基本操作 （1）创建嵌套框架
制作层动画 动态HTML（即DHTML）是指HTML 与一种脚本撰写语言的组合，您可以使用该脚本撰写语言更改HTML 元素的样式或定位属性。在Dreamweaver 中，时间轴使用动态HTML 来更改层和图像在一段时间内的属性。使用时间轴可创建不需要任何ActiveX 控件、插件或Java Applet（但需要JavaScript）的动画。 注意 动态一词在与Web 相关的不同上下文中具有不同含义。不要将动态HTML 与动态Web 页的概念相混淆，后者表示在向访问者提供Web 页之前由服务器端代码动态生成的Web 页。 利用时间轴，您可以更改层的位置、大小、可见性和层叠顺序。（时间轴的层功能只能在 4.0 或更高版本的浏览器中使用。）对于要在页加载后执行的其他操作，时间轴也非常有用。例如，时间轴可以更改图像标签的源文件，因此一段时间内有不同的图像出现在页面上。 若要查看由时间轴生成的JavaScript 代码，请打开“文档”窗口的代码视图。时间轴代码位于MM_initTimelines 函数中（在文档的文件头部分的脚本标签中）。 当编辑包含时间轴的文档的HTML 时，请确保没有移动、重命名或删除时间轴所引用的任何内容。 Dreamweaver3 图层应用技巧（三）出处： PConline 责任编辑： [01-11-24 0:15] 作者：icefire/酷页 zwg 在Dreamweaver中不能对一般的普通文字直接予特效，这可能是设计者当初没有想到这个问题。真的不能吗？当然可以，仅需你改一点代码，先看看效果。 >>如何赋予文字图层特效（请看范例）
1.先输入你要做特效的文字，为它做一个链接，随便是什么链接。 2.建一个图层,设为(hidden)隐含,由于特效可以在链接上实现，先把图层特效在链接上做好。 3.链接的标签是与，我们现在做的事就是把与用与替换就可以达到目的。当然也有一些别的特效可以在文字上实现。如OnClick，Popup Message等，只要是能在链接上实现的特效，一般都可以在文本文字上实现。 >>Timeline 的基本应用（请看范例） TimeLine（时间轴）是Dreamweaver最精华的一点，也是Macromedia最为骄傲的。用TimeLine做动画可以满页飞，动画的实现主要是通过Java Script语句来完成的，你不必为不懂java script而苦恼，在DW中你只需用鼠标点几下就ok。DW动画是建立在图层上的，也就是说没有图层的参与DW动画就不可能实现，这是我为什么把TimeLine归纳为图层应用的原因。 先让我们熟悉一下TimeLine面板，按键盘Ctrl+F9或Window->TimeLine打开面板如下图： 1.时间轴选择框，它列出了当前所有时间轴动画名称，方便你选择编辑。 2.帧控制按钮，最左边的的按钮功能是回到第一帧，剩下的分别是向左或向右移动一个帧。
第八节层与时间轴的应用 层是CSS中的定位技术，在Dreamweaver中对其进行了可视化操作。文本、图像、表格等元素只能固定其位置，不能互相叠加在一起，而层可以放置在网页文档内的任何一个位置，层内可以放置网页文档中的其他构成元素，层可以自由移动，层与层之间还可以重叠，层体现了网页技术从二维空间向三维空间的一种延伸。 一、创建层 1、创建普通层 （1）插入层 选择菜单栏>插入>布局对象>层命令，即可将层插入到页面中去。 使用这种方法插入层，层的位置由光标所在的位置决定，光标放置在什么位置，层就在什么位置出现。选中层会出现六个小手柄，拖动小手柄可以改变层的大小。 （2）拖放层 打开快捷栏的“布局”选项，单击“绘制层”按钮，单击鼠标左键，并且按住不放，拖动图标到文档窗口中，然后释放鼠标，这是层就会出现在页面中了。 （3）绘制层 打开快捷栏的“布局”选项，单击“绘制层”按钮，在文档窗口内鼠标光标变成十字光标，然后按住鼠标左键，拖动出一个矩形，矩形的大小就是层的大小，释放鼠标猴层就会出现在页面中。 2、创建嵌套层 创建嵌套层就是在一个层内插入另外的层。 方法一：将光标放才某层内，选择菜单栏>插入>布局对象>层命令，即可在改层内插入一个层。
方法二：打开层面板，从中选择需要嵌套的层，此时按住Ctrl键同时拖动改层到另外一个层上，直到出现如下图所示图标后，释放Ctrl键和鼠标，这样普通层就转换为嵌套层了。 二、设置层的属性 选中要设置的层，就可以在属性面板中设置层的属性了。 层编号：给层命名，以便在“层”面板和 JavaScript 代码中标识该层。 左、上：指定层的左上角相对于页面（如果嵌套，则为父层）左上角的位置。 宽、高：指定层的宽度和高度。如果层的内容超过指定大小，层的底边缘（按照在 Dreamweaver设计视图中的显示）会延伸以容纳这些内容。（如果“溢出”属性没有设置为“可见”，那么当层在浏览器中出现时，底边缘将不会延伸。 Z轴：设置层的层次属性。在浏览器中，编号较大的层出现在编号较小的层的前面。值可以为正，也可以为负。当更改层的堆叠顺序时，使用“层”面板要比输入特定的 z 轴值更为简便 可见性：在“可见性”下拉列表中，设置层的可见性。使用教本语言如
项目四时间轴、图层和帧的使用 习题答案 一、简答题 （1）时间轴由哪几部分组成？简单叙述各部分的功能。 时间轴的顶部是标题栏，单击标题栏中的“时间轴”按钮可以将时间轴折叠起来，再次单击则展开时间轴。 时间轴的左边是图层区，显示了当前场景的图层数、图层类型、图层的状态以及正在编辑的图层。 时间轴的右边是时间线，时间线由许多小格组成，每个格表示一帧。 在时间轴的底部有4个统称为洋葱皮的按钮。单击“绘图纸外观”按钮可以以残影方式查看动画的连续性效果；单击“绘图纸外观轮廓”按钮可以以轮廓方式查看动画的连续性效果；单击“编辑多个帧”按钮可以同时查看和编辑动画的多个关键帧；单击“修改绘图纸标记”按钮将打开一个菜单，在其中可以选择要查看或编辑的帧。 在洋葱皮按钮的右边是时间轴状态栏，用于显示当前游标所在帧的编号、帧频率和播放到当前帧所花的时间。 在时间轴的右上角有一个按钮，单击该按钮在弹出的下拉菜单中可以选择帧的显示方式。 （2）图层有几种类型？引导层有什么特点和功能? ①普通图层用于放置动画对象，也可以实现很多动画效果。②引导图层和被引导图层。用于创建路径引导动画，其中引导图层存放的是运动轨迹，被引导图层存放的是运动对象。 （3）图层的锁定和隐藏在实际应用中有什么意义？ 锁定图层可以防止不需要编辑的图层误操作。如果需要观察某个图层的效果，可以把其他图层隐藏。 （4）帧的类型有哪些？ 帧的类型有关键帧、空白关键帧、普通帧、空白的普通帧和过渡帧等类型。 （5）关键帧和空白关键帧有什么区别和联系？二则如何转换？ 关键帧就是有关键内容的帧。用来定义动画变化、更改状态的帧，即可以修改舞台上对象属性的帧，在时间轴上显示为实心的圆点。空白关键帧是没有包含舞台上的实例内容的关键帧，也就是空的关键帧，在时间轴上显示为空心的圆点。在空白关键帧中添加内容后，该空白关键帧就变成了关键帧，清除关键帧的内容后就变成了空白关键帧。 二、操作题 （1）制作倒计10秒动画。 方法请参考本章项目实践制作倒计时动画。 （2）制作探照灯动画。动画效果为：一个光线很暗的图形上有个圆形的探照灯在走动，灯走到什么地方可以看到什么地方的彩色效果图，同时探照灯在走的过程中有大小的变化。 用引导图层和被引导图层制作。引导图层放置路径，路径的形状随意。被引导放置圆形。
DW教程--八、层与时间轴的应用
第八节层与时间轴的应用 层是CSS中的定位技术，在Dreamweaver中对其进行了可视化操作。文本、图像、表格等元素只能固定其位置，不能互相叠加在一起，而层可以放置在网页文档内的任何一个位置，层内可以放置网页文档中的其他构成元素，层可以自由移动，层与层之间还可以重叠，层体现了网页技术从二维空间向三维空间的一种延伸。 一、创建层 1、创建普通层 （1）插入层 选择菜单栏>插入>布局对象>层命令，即可将层插入到页面中去。 使用这种方法插入层，层的位置由光标所在的位置决定，光标放置在什么位置，层就在什么位置出现。选中层会出现六个小手柄，拖动小手柄可以改变层的大小。 （2）拖放层 打开快捷栏的“布局”选项，单击“绘制层”按钮，单击鼠标左键，并且按住不放，拖动图标到文档窗口中，然后释放鼠标，这是层就会出现在页面中了。 （3）绘制层 打开快捷栏的“布局”选项，单击“绘制层”按钮，在文档窗口内鼠标光标变成十字光标，然后按住鼠标左键，拖动出一个矩形，矩形的大小就是层的大小，释放鼠标猴层就会出现在页面中。 2、创建嵌套层 创建嵌套层就是在一个层内插入另外的层。 方法一：将光标放才某层内，选择菜单栏>插入>布局对象>层命令，即可在改层内插入一个层。
方法二：打开层面板，从中选择需要嵌套的层，此时按住Ctrl键同时拖动改层到另外一个层上，直到出现如下图所示图标后，释放Ctrl键和鼠标，这样普通层就转换为嵌套层了。 二、设置层的属性 选中要设置的层，就可以在属性面板中设置层的属性了。 层编号：给层命名，以便在“层”面板和 JavaScript 代码中标识该层。 左、上：指定层的左上角相对于页面（如果嵌套，则为父层）左上角的位置。 宽、高：指定层的宽度和高度。如果层的内容超过指定大小，层的底边缘（按照在 Dreamweaver设计视图中的显示）会延伸以容纳这些内容。（如果“溢出”属性没有设置为“可见”，那么当层在浏览器中出现时，底边缘将不会延伸。 Z轴：设置层的层次属性。在浏览器中，编号较大的层出现在编号较小的层的前面。值可以为正，也可以为负。当更改层的堆叠顺序时，使用“层”面板要比输入特定的 z 轴值更为简便 可见性：在“可见性”下拉列表中，设置层的可见性。使用教本语言
第七讲场景与时间轴特效动画 一、场景 1．增加场景与切换场景 在 Flash 影片中，演出的舞台只有一个，但在演出过程中，可以更换不同的场景。 (1)增加场景 (2)切换场景 2．“场景”面板的使用 单击“窗口”→“其他面板”→“场景”菜单命令，可以调出“场景”面板，利用该面板，可显示、新建、复制、删除场景，以及给场景更名和改变场景的顺序等。 (1)改变场景播放顺序 (2)新建场景 (3)重制场景 (4)删除场景 (5)更改场景名称 二、帧的基本操作 1．选择帧 编辑帧以前应先选中要编辑的帧。在时间轴中选中若干帧，然后单击右键，即可调出帧快捷菜单，常常需要使用帧快捷菜单中的菜单命令来编辑帧。选择帧的方法如下。 (1)选中一个帧 (2)选中连续的多个帧 (3)选中一个图层的所有帧 (4)选中多个连续图层的所有帧 (5)选中多个图层的所有帧 (6)选择所有帧 2．移动帧、复制帧和调整关键帧的位置 (1)调整关键帧的位置 (2)鼠标移动帧 (3)复制帧和移动帧 3．插入帧、删除帧和转换为关键帧 (1)插入普通帧：单击选中要插入普通帧的帧单元格，然后按 F5 键。这时就会在选中的帧单元格中新添加一个普通帧，该帧单元格中原来的帧以及它右面的帧都会向右移动一帧。 (2)删除帧：选中要删除的一个或多个帧，单击帧快捷菜单中的“删除帧”菜单命令。
(3)插入关键帧：选中要插入关键帧的帧，按 F6 键或单击帧快捷菜单中的“插入关键帧”菜单命令。 (4)插入空白关键帧：选中要插入空白关键帧的帧，按 F7 键或单击帧快捷菜单中的“插入空白关键帧”菜单命令。 (5)清除关键帧：选中要删除的关键帧，单击帧快捷菜单中的“删除关键帧”菜单命令。此时，原关键帧中的内容会被前面的关键帧内容取代。 (6)清除帧：选中要清除的帧，单击帧快捷菜单中的“清除帧”菜单命令，可将选中的帧中的内容清除，使该帧成为空白关键帧。 (7)转换为关键帧：选中要转换的普通帧，然后单击帧快捷菜单中的“转换为关键帧” (或“转换为空白关键帧” )菜单命令，即可将普通帧转换为关键帧(或空白关键帧) 。 三、时间轴特效动画 1．时间轴特效动画简介 时间轴特效是Flash 8 中内置的一组动画效果，可以通过执行时间轴特效来快速创建复杂的动画。时间轴特效有“变形”、“转换”、“分离”、“展开”、“投影”和“模糊”等特效。它们的操作步骤很简单。可以对文本、图形、图像和元件实例等对象应用时间轴特效。 当将时间轴特效应用于舞台工作区中的对象，创建完一个时间轴特效后，“库“面板中会自动添加一个与该时间轴特效同名的文件夹，它包含有该时间轴特效所用到的所有元素。当一个对象创建了时间轴特效后，Flash 将为这个时间轴特效创建一个图层，并将对象放置在该图层中，动画所用到的所有补间、变形等都在该图层中。 2．编辑时间轴特效 （1）选中有时间轴特效动画的图层，单击“修改”→“时间轴特效”→“编辑特效”菜单命令，即可调出相应的对话框。 （2）在调出的对话框内进行参数修改后，单击该对话框内的“确定”按钮，即可完成时间轴特效的编辑。 四、案例 案例1图像切换 “图像切换”动画的显示效果是先显示第1 幅图像，接着第 1 幅图像从左向右淡出涂抹，同时由不透明变为透明，逐渐将第 2 幅图像显示出来；然后第2 幅图像逐渐旋转、缩小、移出左上角，逐渐将第 3 幅图像显示出来。动画播放后的2 幅画面如图4-4-1 所示。通过本实例的学习，掌握使用“转换”时间轴特效功能制作动画的方法。该动画的制作方法如下。