下载文档原格式
第六章使用框架、层和时间轴本章要点：●框架的概念●使用框架设置网页布局●层的概念●创建层●使用时间轴一、使用框架（P90 6.2 使用框架）（一）、使用框架如果多个网页拥有相同的导航区，只是内容有所不同，则可以使用框架来设计网页布局，这样浏览者在查看不同内容时，无需每次都下载整个页面，而可以保持导航部分不变，只下载网页中需要更新的内容即可，从而极大提高网页的下载速度。
这类网页称为框架页，其最典型的应用时各大论坛的设计。
1、框架的概念框架页面通过框架将网页分成多个独立的区域，在每个区域可以单独显示不同的页面，每个区域可以独立翻滚。
（1）框架网页的结构框架由框架和框架集组成，框架就是网页中被分隔开的各个部分，每一个部分都是一个完整的网页，这些网页共同组成了框架集。
框架集实际上也是一个网页文件，用于定义框架的结构、数量、尺寸等属性。
框架集又被称为父框架，框架被称为子框架，将某个页面划分为若干框架时，既可独立地操作各个框架，创建新文件，也可为框架指定自己制作好的文档。
选择【查看】-【可视化助理】-【框架边框】命令可以显示或隐藏框架边界。
（2）框架网页的功能——导航（3）框架结构的优点●浏览者无需为每个页面重新加载与导航相关的图形，可以大大提高网页的下载效率●每个框架都有自己的滚动条，浏览者可以独立滚动这些框架2、创建框架网页文档（1）在【新建文档】对话框中创建文件-新建-示例中的页-框架集-选择所需框架结构在【框架标签辅助功能属性】对话框中为每一个框架指定一个标题（2）在【布局】插入栏中创建插入-布局-框架-可选13种预定于框架（3）手动创建框架网页查看-可视化助理-框架边框，显示框架边框，选中所需分隔的框架，按ALT键同时，光标移至框架边框上，显示为双箭头时，即可将一个框架拆分为两个框架。
（二）、编辑框架1、框架的基本操作（1）创建嵌套框架打开一个框架网页，将光标移至要创建嵌套框架集的框架中，选择【插入记录】-【HTML】-【框架】-选择某种嵌套框架集（2）删除框架光标移至需要删除的框架边缘，显示为双箭头时，将鼠标朝向框架外继续拖拽至边框消失即删除该框架（3）选择框架和框架集【窗口】-【框架】，显示框架面板，在框架面板中选择所需框架。
第6单元表格、图层、行为、时间轴课程目标：●掌握在网页中插入表格方法●掌握网页中细线表格、立体表格等制作方法●掌握层的使用建议学时：理论3学时，实践3学时。
6.1 表格表格在网页中是一种用途非常广泛的工具，这不仅表现在它可以有序地排列数据，还表现在它可以精确地定位文本、图像及其他网页中的元素，使这些元素的水平位置、垂直位置发生细小变化，这在网页版面布局方面是非常重要的。
对于网页的排版布局来说，表格是不可或缺的工具。
作为一名网页设计人员，表格运用得熟练与否直接影响作品外观的好坏，因上掌握网页表格是十分重要的。
6.1.1 表格的插入要在页面中插入表格，可按以下步骤操作。
（1）使用菜单【插入】|【表格】，或常用工具栏的【表格】工具。
（2）弹出【表格】对话框，如图6-1所示。
图6-1 表格对话框行数：设置表格的行数。
列数：设置表格的列数表格宽度：设置表格的宽度，可使用“像素值”为单位，也可以使用“百分比”作为单位，在嵌套表格中常使用百分比。
边框粗细：设置表格线宽度，单位是像素。
单元格边距：设置表格单元格内部和表格线的距离。
单元格间距：设置单元格之间的距离。
其它可使用默认设置，按下确定后，在页面出现插入的表格，表格下方的淡绿色线条及数据为表格的宽度数据。
图6-2 插入表格示例6.1.2 设置表格属性选中表格后，属性面板变为了表格的属性面板，可以在属性面板中直接设置表格的各项属性。
图6-3 表格属性面板①表格Id：设置表格的ID号，一般可不输入。
②行、列：设置表格行数、列数。
③宽、高：设置表格的宽度、高度，有百分比和像素值两种单位可选。
④填充、间距：填充栏用于设置单元格内部和表格线的距离，间距栏用于设置单元格之间的距离，单位是像素。
⑤对齐：设置表格的对齐方式，有左对齐、居中对齐、右对齐、默认方式为左对齐。
⑥边框：设置边框的宽度，单位是像素。
⑦类：使用CSS中定义的类（见有关CSS章节）⑧列宽控制、行高控制按钮组：上行包含有清除表格宽度、将宽度转换为像素值、将宽度转换为百分比三个按钮。
网页制作第6单元表格、图层、行为、时间轴-标准化文件发布号：（9456-EUATWK-MWUB-WUNN-INNUL-DDQTY-KII第6单元表格、图层、行为、时间轴课程目标：掌握在网页中插入表格方法掌握网页中细线表格、立体表格等制作方法掌握层的使用建议学时：理论3学时，实践3学时。
6.1 表格表格在网页中是一种用途非常广泛的工具，这不仅表现在它可以有序地排列数据，还表现在它可以精确地定位文本、图像及其他网页中的元素，使这些元素的水平位置、垂直位置发生细小变化，这在网页版面布局方面是非常重要的。
对于网页的排版布局来说，表格是不可或缺的工具。
作为一名网页设计人员，表格运用得熟练与否直接影响作品外观的好坏，因上掌握网页表格是十分重要的。
6.1.1 表格的插入要在页面中插入表格，可按以下步骤操作。
（1）使用菜单【插入】|【表格】，或常用工具栏的【表格】工具。
（2）弹出【表格】对话框，如图6-1所示。
2图6-1 表格对话框行数：设置表格的行数。
列数：设置表格的列数表格宽度：设置表格的宽度，可使用“像素值”为单位，也可以使用“百分比”作为单位，在嵌套表格中常使用百分比。
边框粗细：设置表格线宽度，单位是像素。
单元格边距：设置表格单元格内部和表格线的距离。
单元格间距：设置单元格之间的距离。
其它可使用默认设置，按下确定后，在页面出现插入的表格，表格下方的淡绿色线条及数据为表格的宽度数据。
图6-2 插入表格示例36.1.2 设置表格属性选中表格后，属性面板变为了表格的属性面板，可以在属性面板中直接设置表格的各项属性。
图6-3 表格属性面板①表格Id：设置表格的ID号，一般可不输入。
②行、列：设置表格行数、列数。
③宽、高：设置表格的宽度、高度，有百分比和像素值两种单位可选。
④填充、间距：填充栏用于设置单元格内部和表格线的距离，间距栏用于设置单元格之间的距离，单位是像素。
⑤对齐：设置表格的对齐方式，有左对齐、居中对齐、右对齐、默认方式为左对齐。
项目十五行为及时间轴的应用一、目的学会运用行为实现网页中的动态效果二、内容1、制作漂浮公告拦2、弹出菜单的设计；3、使用行为控制时间轴；三、步骤1．制作漂浮公告拦第一步：在准备好的页面上绘制一个层，并给层加上背景，如下图：第二步：在层中插入一行一列的表格，宽和高同时设置成100% ，并加入“公告栏”，再给它加一个链接。
如下图：第三步：打开时间轴面板，右键点击层边缘，弹出属性菜单，点击“添加到时间轴”如下图所示：第四步：点中15 帧进行拖动到400 帧。
第五步：然后把层从起点拖到终点，这就是这400 帧层的运动轨迹。
第六步：为了让层运动轨迹更加自然，我们在先200 帧处分别添加关键帧，如下图所示第七步：然后拖动层到理想的位置，如下图，那么它的运动轨迹成了一个抛物线，看起来就比较自然了。
第八步：为了使层的运动轨迹更加自然，我们可以依照上一步的方法添加多个关键帧来设置层的运动轨迹。
第九步：把时间轴面板上的“自动播放”和“循环”都选上，它们分别表示当页面一打开就运行运动和层运动到了终点后，再到起点循环播放。
2．弹出菜单的设计第一步：新建网页，插入一行四列表格，背景颜色为#5A85B2 ，在表格中插入图片。
第二步：选定第二列中图片，打开行为面板，单击右键，在弹出的窗口中选择显示弹出菜单。
设定菜单内容和格式，保存预览。
3．使用行为控制时间轴第一步：新建网页，插入层layer1, 宽700px ，高320px, 在层中插入图片beijing.gif，设置图片大小与层相同；第二步：在层layer1 中插入一个子层layer2，在layer2 中插入图片image1.gif，分别在播放、暂停和停止三个按钮上绘制热点；第三步：保存，预览一下。
第四步：按ALT+F9 打开时间轴，选定image1.jpg, 拖到时间轴中。
拖动最后一个关键帧到第25 帧。
在第 5 帧、第10 帧、第15 帧、第20 帧、插入关键帧。
并将第 5 帧上图片设为image2.jpg, 第10 帧上图片设为image3.jpg, 第15 帧上图片设为image4.jpg, 第20 帧上图片设为image5.jpg.第五步：通过行为控制时间轴。
《网页设计课后复习题》第一章网页设计概述一、填空题。
1.HTML是超文本标记语言的英文缩写，全称是Hyper Text Markup Language。
2.现在网络上使用的绝大多数图片和图像是gif格式、jpeg格式和png文件格式。
3.通过超链接可以从一个网页转到另一个网页，也可以从一个网页转到另一个网页。
超链接的载体包括文本、图像和热区三种。
4.网页能够把信息以多媒体的方式表现出来，同时把世界各地的信息链接在一起。
网页的基本功能有媒体的作用、互动的作用和传输的作用三方面。
5.PNG格式是Fireworks默认的格式。
它结合了jpeg和gif的优点，也支持透明和交错，是无损压缩的。
二、选择题。
1.网页中最基本的元素是（D）。
D.文字。
2.浏览网页时，当鼠标指针指向超链接时，通常鼠标指针的形状会变成（A）。
A.手形。
3.下列（D）不是用于制作网页的软件。
D.ORC。
4.以下图像格式具有动画效果的是（B）。
B.GIF。
5.网页编制完成以后，一般是以(C)为扩展名存盘的。
C.html。
第二章HTML语言基础一、填空题。
1.在HTML语言中文本文档标签是必须的。
2.在HTML语言中<P>标记的作用是表示一个文本段落的开始。
3.在插入图像或者使用超链接时，路径有相对路径和绝对路径两种。
4.HTML的英文全称是Hypertext Markup Language。
5.HTML列表常用的包括有序列表和无序列表，有序列表的标记是<OL>，无序列表的标记是<UL>。
二、选择题。
1.为同段落中的文本换行时，HTML标记为（B）。
B.<br>。
2.HTML代码<img src=url>表示（A）。
A.添加一个图像。
3.在HTML文档中创建最大的标题的文本标签是（B）。
B.<hL></hL>。
4.在HTML文档中网页的主体内容将写在（A）标记内。
动画通道播放速度（帧/秒） 进一帧，按住不放可以连续播放 时间轴及其应用使用时间轴创建动画实际上是通过时间轴改变层在不同时间段的位置来实现的。
要实现图像或文本的动画效果，必须把相关图像或文本先放到一个层中，设置层的起始位置和终点位置，Dreamweaver 会自动添加中间的帧，以实现平滑的动画效果。
（１）时间轴面板单击主菜单“窗口”→“其他”→“时间轴”，弹出“时间轴”面板，如图3-190所示。
“时间轴”面板“自动播放”：如果选中该项，则在网页加载后自动开始播放当前时间轴的动画。
自动播放实际上是给文档<body>标识符加载一种行为，使页面载入时执行播放时间轴（Play 时间轴）动作。
“循环”：如果选中该项，使页面在浏览器中打开时当前时间轴可以循环播放。
（２）创建时间轴动画创建时间轴动画，就是往动画通道上添加对象，构建动画条，然后构建动画条上的关键帧，再从文档窗口中设置对象在关键帧上的位置，实现动画的创作。
这里需要注意的是时间线，只能移动层对象。
所以，如果希望移动诸如文本或图像之类的对象，应将之放入层中。
实例：利用录制层路径,创建复杂路径的动画。
操作步骤：①在文档窗口中选择要创建动画的层；②在层内插入图片hua.gif ；③ 将层移动到动画的起始位置；④ 执行“修改”→“时间线”→“录制层路径”命令；⑤ 在文档窗口中，按照需要的路径拖动层；⑥ 当希望动画停止时，可以释放鼠标，停止移动层，录制结束；⑦ 在时间轴面板上会自动添加关于该层的动画条（见图3-197）。
⑧ 保存文档，并选中“自动播放”复选框，如果想不停地播放再选中“循环”复选框，按F12键就可以预览动画效果。
录制层路径利用录制层路径功能，可以制作出优美的动画效果。
如绕太阳旋转的地球、飘动的雪花、飞翔的小鸟等，如果录制的路径不够光滑和规则，则可以选定关键帧，再拖动层调整路径。
