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

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

本章要点：

●框架的概念

●使用框架设置网页布局

●层的概念

●创建层

●使用时间轴

一、使用框架（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）移动层

✓直接拖动边框