网页设计第6章页面布局丶层丶行为和时间轴的使用
《网页设计与制作》第六章
6.2 通过邮件接收表单
表单中的信息输入完毕以后需要将信息提供给 服务器端的相关人员，用户可以通过表单域属性 面板中的“动作”属性指定通过电子邮件接收表 单数据。 在属性面板的“动作”文本框中输入 mailto:***@***.***,也就是在mailto后面加上邮 件地址。在浏览者提交表单后，会弹出窗口询问 是否继续以电子邮件形式提交，单击“确定”按 钮，浏览器会自动打开Outlook或Outlook Express， 将表单中的数据整理为E-mail内容发送到设定的 信箱中去。
《网页设计与制作》
第六章 交互式表单制作源自讲解提纲• 6.1 创建表单 • 6.2 通过邮件接收表单
• 6.3 制作跳转菜单
6.1 创建表单
使用表单，可以帮助Internet服务器从用户 那里收集信息，它由两部分组成：前台显示页面 和后台处理程序。前台显示页面用于显示表单的 内容，主要包括文本域、单选按钮、复选框、菜 单和提交按钮等。后台处理程序用于处理用户提 交的表单数据。 在 Dreamweaver 中，表单输入类型称为表 单对象。可以通过选择“插入”菜单“表单”子 菜单来插入表单对象，或者通过 “插入”工具栏 的“表单”子工具栏来插入表单对象。
3.插入单选按钮 要求浏览者只能从一组选项中选择一个选项 时，使用单选按钮。单选按钮通常成组地使用，在 同一组中的每个单选按钮的名称必须一致，这样整 个单选组才能有效。 要插入单选按钮，将光标定位后，单击“表 单”工具栏上的“单选按钮”按钮，即可插入一个 单选按钮。
4.插入复选框 复选框允许在一组选项中选择多项，用户可 以选择任意多个适用的选项。 要插入复选框，将光标定位后，单击“表单” 工具栏上的“复选框”按钮，即可插入一个复选 框。 5.插入文件域 文件域使用户可以浏览到其硬盘上的文件， 并将这些文件作为表单数据上传， 要插入文件域，将光标定位后，单击“表单” 工具栏上的“文件域”按钮，即可插入一个文件 域。
网页设计与制作6
相关知识
2.运用保存在库中的项目
（1）利用保存在库中的项目编辑网页文档 前面任务二中已经详细讲述了库项目的建立过程，这里就不详细说明了。
相关知识
（2）修改登录到库中的项目 首先，选择“窗口”→“资源”菜单，打开“资源”面板，选择面板左侧的 “库”类别。单击库项目面板中的“logo”，这时库项目的预览出现在“资源” 面板的顶部。双击库项目或者单击“资源”面板底部的“编辑”按钮，这时就会 打开一个标题为“logo.lbi”的编辑库项目的窗口，如图所示。
设置样式的名称为“ziti”，在“选择器类型”中选择“类（可应用与任何HTML 元素）”，在“规则定义”中选择“仅限该文档”如图所示。
新建CSS样式
设置type选项
相关知识
相关知识
选中网页中的文字，在“属性”面板“目标规则”中选择“ziti”样式，如图。
相关知识
（2）根据自定义的文字属性一并修改文章段落 打开网页，在“样式表”面板中单击新建图标，弹出“新建CSS规则”对话框， 设置样式的名称为“wz”，在“选择器类型”中选择“类（可应用与任何HTML元 素）”，在“规则定义”中选择“仅限该文档”。 在选项“类型”中设置“Font-size”字体大小为“12px”，“Line-height” 行高为“20px”，在“区块”中设置“Text-indent”文字缩进为“2ems”，如图 所示。
“选择器”相当于调用的标识，“属性”和“属性值”则是说明想要描述的是 哪一个属性，该属性的值为多少。
相关知识
（3）样式表的种类 按照选择器分，CSS最常用的种类有四种：HTML标签选择器、CLASS类选择器、 ID类选择器和伪元素选择器。
相关知识
① HTML标签选择器 顾名思议，HTML标签选择器是直接将HTML标签作为选择器，可以是p、h1、dl、 strong等HTML标签。示例代码如下： <style> h2 { color: orange; } h4{ color: green; } p { font-weight:bold; } </style>
最新文档-网页设计之行为与时间轴-PPT精品文档
• 播放时间轴，停止时间轴 ： 允许用户通过某种事件来播放或停止播放时间轴
2019/4/25
21
四、时间轴应用实例
制作在网页上飘动的广告图片(gundong.html) 小广告在网页上飘动，当鼠标指向广告时广告停止
不动，当鼠标离开广告时，广告继续飘动
2019/4/25
11
时间轴弹出菜单
当
前
回
播
每秒
首 后 放 播 播放
帧 退 帧 放 帧数
二 、时间轴面板
自动 循环 播放 播放
行为频道 播放头
动画频道
动画栏
帧数
关键帧
自 循播动动关 总动环 画键放画帧时 回后播播播 栏帧间首放头频数退放放 （轴：：帧： 条： 道弹选是使 ）：择出值 ： 表将动页：将“菜是 显 示面即播画自播单在动页 示 每栏放：放播浏画指中面 动 个头头放览频定给”器 道移上画动向当复某中动前当层画选左右打 的个到框文前和栏开 蓝移对，档时时 色使显图占动的象间， 小当哪示像有指一当 条轴前个定页前 ，的帧的时面时 显了首间是栏帧在间 示属轴帧载时数轴 每显性入可 个间。浏示（以 对览在轴如无象器时限的的位时间循持自置哪轴动环续面）开一播时板的始放间帧中播帧。放。时间轴
7. 移动层，使运动轨迹呈曲线状
2019/4/25
19
（二）通过拖动路径创建时间轴动画
1. 插入一个层 2. 移动该层到动画的起始处，选中该层
3. 选择 修改时间轴录制层路径
4. 在页面上拖动层，创建想要运动的路径并在动 画结束的地方松开鼠标。
2019/4/25
20
（三）控制时间轴
网页中层的运用
网页中层的运用摘要：对层的精确定位，可以任意控制层的前后位置、显示与隐藏，这些大大增强了网页设计的灵活性。
关键词：层网页设计在使用Dreamweaver软件制作网页的过程中，层是一个很重要的概念。
简单地说，网页中的层就是网页内容的一个容器，在层中可以放置文本、图像、表单、对象插件，甚至还可以插入其他层。
层最主要的特性就是可以在网页上自由浮动，可以放置在网页上的任何位置，从而实现对层的精确定位。
而且层的位置可以重叠，可以任意控制层的前后位置、显示与隐藏，这些大大增强了网页设计的灵活性。
同时层与时间轴结合，可以轻松地在页面上制作出效果。
下面就通过实例来说明层在网页制作中的运用。
实例一、拼图游戏——拖动层内容简介：本例主要介绍使用层的技术，结合行为的应用，在网页中实现拼图的效果。
访问者在浏览网页时，可用鼠标拖动网页中的图像碎片，将其拼成完整的图形。
制作步骤：(1)启动Dreamweaver，新建文档并保存。
(2)准备多张GIF图片，它们各是一幅完整图像的一部分。
保存在同一个文件夹下，分别命名为01.gif，02.gif，03.gif……(3)选择“插入”面板中“常用”选项卡下的“描绘层”，在设计页面中画出一个层，自动命名为“Layer1”，将光标置入层“Layer1”中，选择“插入”“图像”，在层中插入文件夹下的一幅图像，如01.gif。
(4)在不选中任何层的情况下，在“行为”面板中单击“加号（+）”，在弹出菜单中选择“拖动层”（选中层后无法选取“拖动层”命令），在弹出的“拖动层”对话框中，选中“层”下拉菜单中的“层Layer1”，单击“确定”按钮。
(5)在行为面板中选中新添加的行为，单击事件右侧的箭头，将事件修改为“OnMouseMove”（鼠标在对象上移动时）。
如图1所示。
(6)按同样的方法将其余的图像添加到各个层中后，给各个层添加行为（注意：要设置哪一个层，就在“拖动层”对话框中的“层”下拉菜单中选择哪一个层），并在设计页面中将它们打乱分布在页面上。
网页制作第6单元-表格、图层、行为、时间轴
第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章节）⑧列宽控制、行高控制按钮组：上行包含有清除表格宽度、将宽度转换为像素值、将宽度转换为百分比三个按钮。
网页设计基础教程与上机指导使用图层和时间轴PPT教案
同时缩放。 【线性缩放比例】：按百分数在x和y方向
同时缩放。 【更改颜色】：可以修改最终的颜色，即
动画是由对象本身的颜色渐变到修改后的 颜色。最终颜色的设置是以RGB模式的， 或者直接输入十六进制值也可以。单击此 按钮，可以指定最后复件的颜色，中间的 复件将逐渐过渡到这种颜色。 【最终的Alpha】：用于设置动画的透明 度，变化式以百分比为单位的。
【涂抹】：选中【出】单 选按钮，并选中此复选框， 获得淡出效果。
【移动缓慢】：设置开始 时慢速，然后逐渐变快， 或开始时快，然后逐渐变 慢。
第10页/共20页
3. 【分散式直接复制】时间轴特效
➢ 在【分散式直接复制】对话框中可以进行 如下设置。
【副本数量】：根据需要设置副本的数量。 【偏移距离】：可以根据X轴、Y轴的位
第11页/共20页
4. 【复制到网格】时间轴特效
➢ 在【复制到网格】对话框中可以进行如下设置。
【网格尺寸】：【行数】是设置网格的行数；【列数】是设置网格的列 数。
【网格间距】：【行数】是设置行间距(以像素为单位)；【列数】是设置 列间距(以像素为单位)。
第12页/共20页
5. 【分离】时间轴特效
也可以添加一个场景。 【复制场景】：如果在影片中需要相同的场景，可以将场景复制，单击【场景】面板底部的【直
接复制场景】按钮，直接复制一个场景。 【删除场景】：如果在影片中有不需要的场景，单击【场景】面板底部的【删除场景】按钮，弹
出Flash 8提示框，如图18.5所示。单击【确定】按钮，即可删除场景。 【切换场景】：当有多个场景时，如果需要切换到某一个场景时，可在【场景】面板中单击需要
《网页设计与制作》习题参考答案
《网页设计与制作》习题参考答案第一章网页设计与制作概述1、填空题（1）静态网页、动态网页（2）HyperText Mark-up Language、超文本标记语言或超文本链接标示语言（3）文字、图形图像、动画、视频（4）Microsoft Frontpage（或SharePoint Designer）、Adobe Dreamweaver2、问答题(1)www的特点有哪些？答：1）万维网是无数个网络站点和网页的集合，它们在一起构成了因特网最主要的部分。
2）WWW是建立在客户机／服务器模型之上的。
3）WWW是以超文本标注语言HTML(Hyper Markup Language)与超文本传输协议HTTP(Hyper Text Transfer Protocol)为基础。
4）WWW能够提供面向Internet服务的、一致的用户界面的信息浏览系统。
5）WWW浏览提供界面友好的信息查询接口。
(2)网页的基本元素有哪些？答：组成网页的元素主要有文字、图像、声音、动画、视频、超链接以及交互式处理等。
它们的特点如下：文字：网页中的大多数信息主要以文本方式显示，文字是网页的主体，负责传达信息的功能。
图像：图片给网页添加了色彩，使网页做到了图文并茂，形象生动。
动画：动画是动态的图形，添加动画可以使网页更加生动。
常用的动画格式包括动态GIF图片和Flash动画声音和视频：声音是多媒体网页中的重要组成部分，支持网络的声音文件格式很多，主要有MIDI、WA V、MP3和AIF等。
网页中支持的视频文件格式主要有Realplay、Mpeg、A VI和DivX等。
表格：在网页中使用表格可以控制网页中信息的结构布局。
超链接：超链接是网页与其他网络资源联系的纽带，是网页区别于传统媒体的重要特点导航栏：导航栏的作用是引导浏览者游历所有站点。
表单：表单类似于Windows程序的窗体，用来将浏览者提供的信息，提交给服务器端程序进行处理。
其他常见元素：包括悬停按钮、Java特效和ActiveX等各种特效。
网页设计实用教程 第6章
16
6.2 布局模式
6.2.1 创建布局表格 6.2.2 使用布局模式进行页面排版176.2.1 创建布局表格
绘制布局表格的步骤：
切换到布局视图后，在面板面板中单击“布局 表格”按钮 ，鼠标指针变为“+“形状。 在文档窗口中按下鼠标左键并拖动，拖拽出一 个矩形后松开鼠标即可创建布局表格。
20
6.3 层
6.3.1 6.3.2 6.3.3 6.3.4 6.3.5 6.3.6 6.3.7 6.3.8 6.3.9 层的创建 层的选择 设置层属性 设置层的顺序 层大小的调整 层的移动 层的对齐 层的显示和隐藏 层与表格的相互转换
21
6.3.1层的创建
创建普通层
使用菜单命令创建层
将光标放在要创建层的位置 选择“插入”|“布局面板”|“层”命令，即可在插入点 所在位置插入一个默认大小的层
18
6.2.1 创建布局表格
绘制布局单元格的步骤：
在布局面板中单击“绘制布局单元格”按钮 ， 鼠标指针变为“+”形状。 按下鼠标并拖动，绘制出布局单元格。 切换到标准视图中。 可以直接输入或插入内容。
19
6.2.2 使用布局模式进行页面排版
布局表格与普通表格相比更方便，使用布局 表格进行页面排版能够更加随意的绘制表格 ，实现页面布局。
选中表格，然后选择命令“修改”|“转化
”|“表格到层”。
34
6.4 框架页
6.4.1 6.4.2 6.4.3 6.4.4 6.4.5 框架和框架集 创建框架 保存框架 设定框架内容和样式 为框架设定链接
35
6.4.1 框架和框架集
框架由框架集和框架两个主要部分组成。
框架集是一个文档内定义一组框架结构的HTML 网页，并不显示在浏览器中，只是存储了一些 框架如何显示的信息。 框架是指网页在一个浏览器窗口下分割成的几 个不同区域，每一个区域都是单独的HTML文档 。
4.层、 行为和时间轴
onKeyPress：当按下和松开任意键时产生。此事件相当 于把onKeyDown和onKeyUp这两事件合在一起。
onKeyUp：当按下的键松开时产生。 onLoad：当一图像或网页载入完成时产生。
onMouseDown：当访问者按下鼠标时产生。 onMouseMove：当访问者将鼠标在指定元素上移动时产生。 onMouseOut：当鼠标从指定元素上移开时产生。 onMouseOver：当鼠标移动到指定元素（刚进入区域）时产生。 onMouseUp：当鼠标弹起时产生。
onSubmit：当访问者提交表单时产生。
制作步骤
（1）在“布局”插入栏中点击“绘制层”按钮在页面中 绘制一个层，然后在层的“属性面板”中设置各参数。
（2）将光标移至title层内，点击插入面板“常用”视图 下的表格按钮，插入一个1行4列的表格，宽度为100%， 设置四个单元格宽度为120px
实例4：打开浏览器窗口
实例创意
打开浏览器窗口即在打开当前网页的同时，另外打开一个新 的窗口，而这个新打开的窗口，可以根据自己的喜好对它的菜单、
页面尺寸、滚动条等进行设置，如263网站打开时弹出的“免费试
用”广告窗口。
制作步骤：
（1）设计一个页面，作为新窗口。
（2）创建另一个网页“index.htm”，由于是对整个页的行为， 即广告窗口是在该网页加载时自动弹出，所以选择状态栏 上的“<body>”后单击行为面板的“+”按钮，选择“打开 浏览器窗口”菜单命令 （3）系统弹出 “打开浏览器窗口”对话框，在“要显示的 URL”文本框中输入新窗口文件的路径和文件名，也可以通 过单击“浏览”按钮查找相应的路径及文件名。“窗口宽 度”和“窗口高度”文本框中定义新窗口的长宽值。 （4）选择事件为“onload”。
网页制作-行为与时间轴及其应用
① 【时间轴列表】： 是时间轴选择列表，在同一个文档中可以设置多个
时间轴，当用户创建多个时间轴时，利用该下拉列表可 选择当前时间轴。
② 【播放控制选项】： 它的3个按钮的功能分别是切换到第一帧、切换到
当前帧的上一帧、切换到当前帧的下一帧，文本框中是 当前帧的序号。若输入某个帧序号值，便可切换到该帧。 单击、这2个按钮并按住鼠标左键不放，可预览动画效 果。
例2 双击层1，改变状态栏中显示的文字。
layer1
例3 拖动层。 选中整个<body>……</body>
9.2 Dreamweaver 8 内置的动作和事件
Dreamweaver 8中自带了很多动作，使用它们可以在 网页中设计出各种效果。在本节中列出的动作是Netscape 6.0、Internet Explorer 6.0及以上版本支持的动作。在 【行为】面板的【动作】菜单中各项的意义如下所述。
当用户调整浏览器窗口或框架的尺寸时， 将触发该事件。 当捆绑数据源的当前记录指针改变时，将
触发该事件。 当捆绑数据源的当前记录指针将要改变时,
触发该事件。 当用户拖动上、下滚动条时，触发该事件。 在文本区域选定文本时，触发该事件。 当编辑框中的内容开始循环时，触发该事件。 提交表单时，触发该事件。 离开页面时，触发该事件。
18 【跳转菜单】： 设计者通过选择【插入】｜【表单对 象】｜【跳转菜单】命令，可在网页上创建一个跳转菜单。若 要修改这个跳转菜单，可在【行为】面板中双击【跳转菜单】 动作，在【跳转菜单】对话框中修改跳转菜单的各项参数。
19 【跳转菜单开始】：可以给跳转菜单添加不同的事件。
20 【转到 URL】： 这个动作用于在当前窗口或指定的框架中 打开一个新的页面。
网页设计课后复习题
《网页设计课后复习题》第一章网页设计概述一、填空题。
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）标记内。
网页设计中如何添加行为和时间线51页PPT
认识事件
事件：指特定时间或者由用户发出的特 定的指令，是浏览器能够识别的一些操 作。如:单击鼠标,鼠标经过等
认识动作
动作：是事先编好的一段JawaScript脚 本代码，利用这些代码完成特定的任务， 如：播放声音，打开浏览器，显示层， 视频等
行为面板
删除行为
添加行为 事件列 用于修改事件的
OnBounce OnChange
IE4、 IE5
当一个选取框元素的内容已经到了
选取框边缘时
NS3、 NS4、 IE3、 IE4、 IE5 当 网 页 元 素 改 变
OnClick
NS3、 NS4、 IE3、 IE4、 IE5 当 鼠 标 单 击
OnDblClick
NS4、 IE4、 IE5
当鼠标双击
OnRowEx 让
OnScr011OnSelec Nhomakorabea OnSubm 让 OnUnlOad
支持的浏览器
说明
NS4、 IE4、 IE5
当按下鼠标左键些犟放时
IE3、 IE4、 IE5
当鼠标移动到一个元素上时
NS3、 NS4、 IE4、 IE5
当鼠标琶些苎声的元素时一
NS3、 NS4、 IE3、 IE4、 IE5
Ie4,5
Ie345 ie45
当网页下载中断 当鼠标单击 当鼠标双击 当图象或页面完全载入后
On mouse
ie45
down
On mouse over ie345
On mouse out ie45
当按下鼠标左键尚未释放时
当鼠标刚移动到特定的元素上 时 当鼠标刚移出特定元素时
创建行为
可以将行为附加给整个文件, 也可以附加给\文本\图像\链 接\层\等，对象可以接受什 么样的行为取决于浏览器。 浏览器的版本越高，接受的 事件就越多
网页设计 第6章
“改变属性”对话框
第6章
动态网页设计 显示-隐藏层
“显示-隐藏层”行为显示、隐藏或恢复一个或多个层的默认可见 性。此“动作”作用于用户与页进行交互时显示信息。 1、创建鼠标激发的图层显示与隐藏 首先在网页中创建图层，可以创建多个图层，再创建一个文本链 接，将光标置于链接文本中，从行为面板左侧选择“onMouseOver” 项，单击 按钮，从弹出的菜单中选择“显示-隐藏层”命令，弹出如 下图所示的“显示-隐藏层”对话框。 2、创建预先载入层 在网页中绘制一个较大的层，该层一定要覆盖页上的所有内容。 在“层”面板中，将该层拖到列表顶部，使得该层位于页面堆叠顺序 的最上面。在层仍处于选中状态时，在属性面板中将层的背景色设置 为与页背景相同的颜色。如果需要，在层中（该层现在应该挡住其余 的页内容）单击并键入消息。
第6章
动态网页设计
控制Shockwave或Flash
该动作用于在Shockwave或Flash Player中播放、停止、返回 或跳至某一帧。其操作如下： （1）在文档窗口中插入Flash或Shockwave对象，并在属性面 板中为它们命名，然后从行为面板中选择“控制Shockwave或 Flash”，弹出如下图所示的“控制Shockwave或Flash”对话框。在 影片下拉框中选择一个影片（Dreamweaver会自动列出当前文档中 OBJECT或EMBED标签中所有以.dcr、.dir、.swf、.spl为扩展名的 文件）。 （2）可以单击“播放”、“停止”、“后退”、“前往帧” 单选按钮。比如选择“前往帧”，并在后面文本框中输入帧数，然 后保存并预览，影片将直接跳到指定的帧位置显示。
“ 打开浏览器窗口”对话 框
第6章
动态网页设计 拖动层
该动作允许用户进行层的拖动操作。这个动作可以创建移动层、 滑动控件以及其他可移动的用户界面对象；也可以指定拖动层的方 向、拖动层的目标，在某个固定大小的目标中是否将层和目标对齐， 层与目标接触时的操作等。 由于拖动层动作必须在层被用户拖动之前调用，所以确认引发 动作的事件必须发生在拖动层之前。建议将拖动层动作与body对象 相连（使用onLoad事件），也可以将拖动层动作与填充整个页面 的链接相连，例如图像的链接（使用onMouseOver事件）。
第6章 层和时间轴
6.2.3实现幻灯片效果5
第 六 章 AP AP
将鼠标指针移动到第15帧的B轨道上，双击 选中， 重复上述操作，在“显示-隐藏AP元素” 对话框中，选中“layer6”, 单击“显示”，最后 单击“确定”，这样“layer6”将从第15帧开始显 示。 重复上述操作步骤，在第29帧为layer6设 置行为为“图AP元素隐藏”，layer7 设置行为 为“图AP元素显示”；在第34帧为layer7设置 行为为“图AP元素隐藏”。最后，选中时间 轴上的“自动播放”和“循环”复选框。 保存文件后，按F12键，在浏览器中就可 以看到幻灯片效果了。
第 六 章 AP AP
打开“时间轴”面板。 选中AP元素，单击菜单栏上的“修改”， 移动鼠标指针到下拉菜单的“时间轴”上， 最后单击下一级菜单中的“录制AP元素路径 ”命令，选中AP元素，按照希望的路径拖动 鼠标，可以看到一条粗灰线。 将AP元素拖 动到合适的位置 ，松开鼠标，可 以看见沿刚才拖 动鼠标的路径出 现一条细线。
6.2.2实现文字跑马灯效果4
第 六 章 AP AP
在时间轴浮动面板中选中“自动播放”和“循 环” ，弹出对话框时，单击“确定”。 保存网页后，预览 该网页，可以看到 跑马灯效果。
6.2.3实现幻灯片效果1
第 六 章 AP AP
我们制作幻灯片效果的思路是：创建三个AP 元素，三个AP元素应该大小一致，并且与插入 的图片大小相同，利用时间轴来隐藏图AP元素 ，实现最终效果。三个AP元素的坐标必须一致 ，这样可以避免图片的跳动，所以，我们在制作 时仅仅插入一个AP元素，然后用复制AP元素的 方法，实现另外两个AP元素的插入。 单击“插入”菜单，在其下拉菜单中选择 “AP元素”命令， 插入图像，并调整AP元素的 大小恰好为图像的大小，将鼠标指针移动到AP 元素标记上，单击鼠标右键，在快捷菜单中选择 “拷贝”命令，单击“编辑”菜单，在弹出的菜 单中选择“粘贴”命令，复制一个相同大小的 AP元素。
第6章 层和时间轴
• 6）、创建父层和子层 • 在已有层中按Alt键绘制 • 在层面板中按Ctrl键，将准备设置为子层的层拖动到准备设置为父 层的层上，就可以创建子层。当移动父层位置时，子层的位置也将同 时发生变化。 • 7）、将多个层对齐到相同位置 • 按住Shift键选择要排列的层，最后选定的层就是作为对齐的标准 • 选择“修改-排列顺序” • 8）、确定层的层叠顺序 • 从字面意义上来看，层本身就具有层层叠放的意思。插入的时间相 对晚的层将为于之前插入的层的外侧。当层层叠时，最终插入的层将 位于最外侧。 • 层面板中，数值大的层相对位于上方位置。通过拖动鼠标，可以直 接修改层顺序。
• 时间轴 • 时间轴是Dreamweaver实现动画的一种方法，用户不需要编辑代码 或使用任何ActiveX、Java或其他任何插件即可在网页上制作动画效 果。时间线主要是通过改变层的位置、属性、可见性以及层的顺序来 实现动画效果的。 • 时间轴的各项功能
帧数。默认15帧。帧数增加，播放速度将加快。 网页中自动运行 时间指针位置 移到第一帧 反复播放动画 添加行为 时间轴名称 图层通道
图层条 指针 关键帧
• 创建时间抽动画 • 1、关键帧动画 • 时间线只能移动分层对象，如果想移动文本或图像之类的。 • 1、将层拖动到时间轴的行上。 • 2、确定第一帧位置，选择最后关键帧，移动层到结束位置。 • 3、勾选“自动播放选项”，按F12浏览效果。 • 2、自动生成动画 选择“修改→ 时间轴→ 录制层路径”.
第定位技术，在Dreamweaver中对其进行了可视化操作。 文本、图像、表格等元素只能固定其位置，不能互相叠加在一起，而 层可以放置在网页文档内的任何一个位置，层内可以放置网页文档中 的其他构成元素，层可以自由移动，层与层之间还可以重叠，层体现 了网页技术从二维空间向三维空间的一种延伸。 • 层的特点 • 大家可以将层理解为文档窗口内的又一个文档窗口。像在普通文档 窗口中进行操作一样，在层中可以输入文字，也可以插入图像、动影 像、音乐文件、表格、Flash影片等之后，对其进行编辑。 • 重叠排放各构成元素 • 精确地指定层位置 • 隐藏/显示层
网页设计之行为与时间轴
这实际上是在动画最后一帧后的行为通道中插入 了“转到时间轴帧”行为。双击此帧中的标记， 可以编辑行为的参数与改变循环次数
2020/5/23
17
三 、 创建时间轴动画的操作
(一)简单的时间轴应用： 1. 在页面添加层，在层中插入要移动的元素，然
后将层移动到动画的起始位置
2. 选择 窗口时间轴 ，打开时间轴面板
隐藏和显示层、播放音乐、交换图像等； 事件是完成某一动作的具体方式，如onMouseOver(鼠标指
向对象)、onMouseOut(鼠标移离对象)、onClick(单击鼠标)等。
例：插入【交互式图像】就是一个典型的行为应用。
2020/5/23
3
事件
Onclick:单击图像链接按扭 onDblclick：双击对象 onError：载入错误 onFinish：所选内容完成一个循环 onHelp：单击help onKeyDown：按键 Onkeypress：按键并释放 onKeyUp：释放 onLoad：页面载入 onMouseDown：按下鼠标 onMouseMove：移动鼠标 onMouseOut：鼠标移出 onMouseOver：鼠标移入
2020/5/23
8
8章 时间轴
2020/5/23
9
一、时间轴的概述
时间轴的基本原理： 使层中的内容在一定的时间内，按照设计好的路 线显示在页面中，在时间轴上显示的每一个层称 为一帧，整个时间轴就是由许多帧构成的，这些 帧在页面中的连续播放构成了时间轴动画。
2020/5/23
10
时间轴通过改变层在不同时间的 位置 大小 可见性和叠放顺序 来创建动画。
2020/5/23
4
网页制作第6单元表格、图层、行为、时间轴
网页制作第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号，一般可不输入。
②行、列：设置表格行数、列数。
③宽、高：设置表格的宽度、高度，有百分比和像素值两种单位可选。
④填充、间距：填充栏用于设置单元格内部和表格线的距离，间距栏用于设置单元格之间的距离，单位是像素。
⑤对齐：设置表格的对齐方式，有左对齐、居中对齐、右对齐、默认方式为左对齐。