第六章 使用框架,层和时间轴

第六章使用框架、层和时间轴
本章要点：
●框架的概念
●使用框架设置网页布局
●层的概念
●创建层
●使用时间轴
一、使用框架（P90 6.2 使用框架）
（一）、使用框架
如果多个网页拥有相同的导航区，只是内容有所不同，则可以使用框架来设计网页布局，这样浏览者在查看不同内容时，无需每次都下载整个页面，而可以保持导航部分不变，只下载网页中需要更新的内容即可，从而极大提高网页的下载速度。

这类网页称为框架页，其最典型的应用时各大论坛的设计。

1、框架的概念
框架页面通过框架将网页分成多个独立的区域，在每个区域可以单独显示不同的页面，每个区域可以独立翻滚。

（1）框架网页的结构
框架由框架和框架集组成，框架就是网页中被分隔开的各个部分，每一个部分都是一个完整的网页，这些网页共同组成了框架集。

框架集实际上也是一个网页文件，用于定义框架的结构、数量、尺寸等属性。

框架集又被称为父框架，框架被称为子框架，将某个页面划分为若干框架时，既可独立地操作各个框架，创建新文件，也可为框架指定自己制作好的文档。

选择【查看】-【可视化助理】-【框架边框】命令可以显示或隐藏框架边界。

（2）框架网页的功能——导航
（3）框架结构的优点
●浏览者无需为每个页面重新加载与导航相关的图形，可以大大提高网页的下载效率
●每个框架都有自己的滚动条，浏览者可以独立滚动这些框架
2、创建框架网页文档
（1）在【新建文档】对话框中创建
文件-新建-示例中的页-框架集-选择所需框架结构
在【框架标签辅助功能属性】对话框中为每一个框架指定一个标题
（2）在【布局】插入栏中创建
插入-布局-框架-可选13种预定于框架
（3）手动创建框架网页
查看-可视化助理-框架边框，显示框架边框，选中所需分隔的框架，按ALT键同时，光标移至框架边框上，显示为双箭头时，即可将一个框架拆分为两个框架。

（二）、编辑框架
1、框架的基本操作
（1）创建嵌套框架
打开一个框架网页，将光标移至要创建嵌套框架集的框架中，选择【插入记录】-【HTML】-【框架】-选择某种嵌套框架集
（2）删除框架
光标移至需要删除的框架边缘，显示为双箭头时，将鼠标朝向框架外继续拖拽至边框消失即删除该框架
（3）选择框架和框架集
【窗口】-【框架】，显示框架面板，在框架面板中选择所需框架。

2、设置框架和框架集属性
（1）设置框架属性
选择框架-属性
●框架名称：文本框中输入框架名称，脚本语言编程时可能调用
●源文件：该框架对应的源文件
●滚动：默认，是，否，自动。

默认为自动，当浏览器窗口中没有足够空间来显示当前框
架完整内容时会显示滚动条
●不能调整大小：禁止改变框架的尺寸
●边框：设置是否显示框架的边框；边框颜色
●边界宽度和边界高度：设置框架与边界之间的距离
（2）设置框架集属性
选择框架集-属性
●边框，边框颜色，边框宽度
●行/列值：设置框架集的宽度数值；单位：像素，百分比，相对
●行列选定范围：标示框
注：当前所选框架集为框架集2，即两行一列的框架集
其中2,3构成框架集1，框架集1与框架1构成框架集2
3、使用框架设置网页布局（例6-1）
制作步骤包括以下部分：
●建立站点
●建立框架网页
●建立“top”网页
●建立“left”网页
●建立“main”网页
●设置框架属性
●保存框架网页和初始网页
●建立其它内容网页
●建立超级链接
二、使用层（P114 ch7 AP元素的使用）
层是html网页的一种元素，可以放在网页中的任何位置，用于网页元素的精确定位。

一个页面中可以包含多个层，层之间可以互相重叠，通过设置透明度来决定每个层是否可见或可见的程度。

层就像是包含文字或图片等元素的胶片，按顺序叠放在一起，组成页面的最终效果。

层可以精确定位页面上的元素，并且在层中可以加入文本，图像，表格等元素。

层的主要功能
●绝对定位：游离在文档之上，可以浮动定位网页元素
●可以重叠：z轴属性，产生叠加效果
●显示和隐藏：产生动态效果
1、创建层
（1）创建普通层
●插入菜单-布局-绘制AP Div【拖动（200*115）和绘制（自定义大小）两种效果】
●插入记录-布局对象-【AP Div】
（2）创建嵌套层
前提：在AP元素面板中，取消“防止重叠”
两种方法：光标移至层中，
●插入菜单-布局-绘制AP Div或插入记录-布局对象-【AP Div】
●利用AP元素面板建立嵌套关系：
⏹在AP元素面板中选中层1，按住ctrl并拖动至层2，即实现层1嵌套于层2
之中
⏹解除嵌套：将子层拖动至母层上方
（3）设置层属性
属性面板
●层编号：显示层的名称，识别不同的层
●左，上：层距离浏览器窗口左边界，上边界的距离，实现精确定位
●宽，高：层的宽度和高度数值
●Z轴：层的Z轴顺序。

在浏览器中，编号较大的层出现在编号较小的层的上面。

值
可以为正，也可以为负。

当更改层的堆叠顺序时，使用“层”面板要比输入特定的z
轴值更为简便
●背景图像，背景颜色
●类：选择CSS样式
●可见性：层最初的显示状态
✓Default——不指明层的可见性，大多数浏览器都会默认为inherit选项
✓Inherit——继承父层的可见性。

✓Visible——显示层及其包含的内容，无论其父级层是否可见。

✓Hidden——隐藏层及其包含的内容，无论其父级层是否可见。

●剪辑：指定层的可见部分，输入距离层的四个边界的距离数值，只显示本层四个坐
标数值中间的内容。

（该属性存在兼容性的问题，如IE 7下没有效果）
●溢出：当层内容超过层的大小时的处理方式：
✓Visible(显示)：选择该选项，当层内容超出层的范围时，可自动增加层尺寸。

✓hidden(隐藏): 选择该选项，，当层内容超出层的范围时，保持层尺寸不变，隐藏超出部分的内容。

✓scroll(滚动条): 选择该选项，则层内容无论是否超出层的范围，都会自动增加滚动条。

✓auto(自动): 选择该选项，，当层内容超出层的范围时，自动增加滚动条(默认)
2、层的基本操作
（1）选择层
✓【窗口】-【AP元素】命令，打开【AP元素】面板，单击层名称即可选中该层。

✓光标移至层的边框，当显示为十字形状时，单击即可选中该层
✓按住shift键，单击要选择的层，可以选择多个层。

（2）改变层的显示顺序
✓在【AP元素】面板中选中层，单击Z轴属性列，在文本框中输入叠放顺序的数值即可。

✓在【AP元素】面板中选中层，拖动至所需重叠的位置，在拖动中会显示一条线，释放鼠标即可改变层的叠放顺序。

（例图片层与文字层叠堆）
（3）设置层可见性
在【AP元素】面板中手动设置——眼睛图标按钮
（4）在层中插入对象：直接插入
（5）调整层大小：鼠标直接拖拽层边缘
（6）移动层
✓直接拖动边框
✓属性面板输入层的左、上位置坐标，可精确定位
✓按方向键一次一个像素;Shift+方向键，一次10个像素
（7）对齐层
选中多个层，【修改】-排列顺序-左右上下对齐（以最后一个选中的层位置为标准）（8）将层对齐网格
借助网格功能，可实现进一步精确定位。

✓显示网格：查看-网格设置-显示网格，打开网格功能，
✓靠齐到网格：查看-网格设置-靠齐到网格，即可在移动或绘制层时自动靠齐到网格。

（9）删除和复制层：选中-删除，复制，粘贴
例6-3：打开例6-1，创建层并在层中插入文本和图像
例AP DIV布局：将表格布局的inde.htm页面用层进行布局index_cen.htm
3、转换表格和层
（1）将表格转换为层
选中表格-修改-转换-将表格转换为AP Div（空白表格不能转）
（2）将层转换为表格
选中层-修改-转换-将AP Div转换为表格
（3）防止层的重叠
因为表格不能够重叠，因此如果文档中存在重叠的层，就无法将其转换为表格。

因此需对文档中的层进行重新排列，使之不重叠。

修改-排列顺序-防止层重叠或【AP元素】面板中的【防止重叠】
4、设置层属性
在【首选参数】对话框中可以设置层的参数：
编辑-首选参数-AP元素
●显示：设置新建层的默认可见性（四选项与属性面板中一致）
●宽和高：设置新建层的默认宽度和高度，单位为像素
●背景颜色，背景图像
●嵌套：选中它，可以在文档中创建嵌套层。

否则，在层内部绘制层时，创建的是重
叠层也不是嵌套层。

●Netscape 4 兼容性：在文档头部自动添加一段代码，以修复netscape浏览器中重设
浏览器大小时出现的CSS层错误。

三、使用时间轴
在【时间轴】面板中创建一系列帧，通过改变每帧中层的位置，尺寸，可见性及重叠顺序等属性，创建动画效果。

1、认识【时间轴】面板
【窗口】-【时间轴】命令，打开时间轴面板
A.关键帧
B. 时间轴弹出菜单
C. 帧编号
D. 行为通道
E. 动画通道
F. 动画条
G. 播放栏
●关键帧:定义动画条中已经为对象指定属性（如位置）的帧。

Dreamweaver 会计算关键
帧之间的帧的中间值。

小圆标记表示关键帧。

●行为通道:说明应在时间轴中特定帧处执行的行为。

●时间轴弹出菜单:指定当前在“时间轴”面板中显示文档的哪一个时间轴。

●动画通道:显示用于制作AP 元素和图像动画的条。

●动画条:显示每个对象的动画的持续时间。

一个行可以包含表示不同对象的多个条。

不
同的条无法控制同一帧中的同一对象。

●播放栏:显示当前在“文档”窗口中显示时间轴的哪一帧。

●帧编号:指示帧的序号。

“后退”和“播放”按钮之间的数字是当前帧编号。

您可以通过设
置帧的总数和每秒帧数(fps) 来控制动画的持续时间。

每秒15 帧这一默认设置是比较适当的平均速率，可用于在通常的Windows 和Macintosh 系统上运行的大多数浏览器。

2、创建时间轴动画
（1）通过移动层位置创建时间轴动画（例6-4）
◆打开例6-3文档，【窗口】-【时间轴】命令，打开时间轴面板
◆将层拖动到【时间轴】面板中，系统会自动打开一个信息提示框，单击确定。

（时间轴面板中会显示动画条）
◆选中动画条尾部的关键帧标记，拖动到任意帧位置，设置动画中帧数（60帧）
●制作直线运动动画：调整每一关键帧处层的位置，使连续两个关键帧处层
不在同一位置显示。

●制作曲线动画：
⏹右击时间轴上动画区域内任意帧，【增加关键帧】（15,30,45帧处增加
关键帧）
⏹调整每一关键帧处层的位置，使连续两个关键帧处层不在同一位置显
示。

◆选中自动播放，循环播放，预览网页效果。

练习6-1,6-2
（2）通过拖动层轨迹创建动画（例6-5）
要根据复杂路径来创建动画，比关键帧更有效的方法是记录移动层时经过的轨迹。

◆打开例6-3文档，选中层，将层拖动到【时间轴】面板中。

◆选择【修改】-【时间轴】-【记录AP元素的路径】命令。

◆按住鼠标拖动层，创建层移动的路径。

◆创建层移动的路径后，在【时间轴】面板中会自动添加动画条。

选中自动播放，循环播放，预览网页效果。