网站建设与管理之层、时间轴、行为和布局(ppt 82页).ppt

1 第九章层 时间轴 行为和布局 2 内容提要 9 1使用层9 2Dreamweaver中的时间轴9 3行为9 4布局模式 3 9 1使用层 什么是层 层提供一种对网页对象进行有效控制的手段 层可以包含文本 图像 表单等所有可直接用于文档的元素 层中还可以包含插件或其它层 嵌套使用 层提供了精确定位页面元素的方法 通过将页面元素放置在层中 用户可控制对象的叠放顺序 显示或隐藏 甚至可利用时间轴同时在屏幕上移动一个或多个层 4 层参数设置 选择菜单 编辑 首选参数 打开 首选参数 对话框 在左侧的分类列表中选择 层 选项 5 创建层 若要创建层 请执行以下操作之一 若要绘制层 请单击插入栏上的 描绘层 按钮 然后在文档窗口的设计视图中通过拖动来绘制层 若要在文档中的特定位置插入层的代码 请将插入点放入文档窗口 然后选择 插入 布局对象 层 若要连续绘制多个层 请执行以下操作 1 单击 插入 栏上的 绘制层 按钮 2 通过按住Ctrl键并拖动鼠标来绘制各个层 只要不松开Ctrl键 就可以继续绘制新的层 演示 6 层面板 若要打开层面板 请选择 窗口 其他 层 层显示为按z轴顺序排列的名称列表 首先创建的层出现在列表的底部 最新创建的层出现列表的顶部 嵌套的层显示为连接到父层的名称 单击加号 或减号 图标显示或隐藏嵌套的层 7 层的可见性 层的可见性分为以下三种 1 睁开的眼睛表示层可见 2 闭上的眼睛表示层不可见 3 如果没有眼睛图标 表示该层继承其父层的可见性 演示 8 改变层的名称和叠放顺序 在打开的层面板中 名称为层的标识名 Z表示层的索引号 任意单击管理器中的某一层 即选中该层 按Delete键可以删除它 按住Shift键可同时选择多个层 然后可同时移动或删除它们 双击名称项可为层更改标识名 在层面板中用鼠标拖动层的上下位置 可以改变层的叠放顺序 也可以双击层面板中某层的Z选项 直接输入新值以修改该层的位置顺序 当输入比当前值大的数值时 该层将向上移动 如果输入比当前值小的数值时 该层将向下移动 9 对齐层 当页面中存在多个层时 可以使用层对齐命令对齐层 使用层对齐 可使多个层和最后选定的层在某一方向上对齐 操作步骤如下 1 按住Shift键选取多个层 2 选择菜单命令 修改 排列顺序 出现 排列顺序 子菜单 如图所示 演示 10 层属性面板 选定层后 在Dreamweaver的底部会出现层的属性面板 在层属性面板上可以显示和设置以下属性 层编号 该文本框设置当前层的名称 层的名称只能由标准的字母和数字表示 不能使用空格 连字符 斜杠符等 左 设置层左边边框相对于页面的左边界或父层左边界的距离 上 设置层上边边框相对于页面的上边界或父层顶端的距离 宽 该域用于设置层的宽度值 默认单位是像素 高 该域用于设置层的高度值 默认单位是像素 11 层属性面板 Z轴 在该文本框中输入层在Z方向上的索引值 显示 该下拉列表框设置层的可见性 背景图像 设置层的背景图像 背景颜色 设置层的背景色 单击颜色框按钮 在色盘中选取合适的颜色 或者在文本框中直接输入背景颜色的十六进制数值 类 将某种CSS样式应用到层中 溢出 设置当层中的内容超出层的范围后产生的效果 12 层属性面板 溢出 设置当层中的内容超出层的范围后产生的效果 Visible 当层中的内容超出层的范围时 层会自动扩展大小以显示其中的内容 Hidden 当层中的内容超出层的范围时 层的大小保持不变 超出的内容不被显示 Scroll 无论层中的内容是否超出层的范围 在层的右边和下边出现滚动条 Auto 当层中的内容超出层的范围时 层的大小保持不变 在层的右边和下边出现滚动条 拖动滚动条显示超出部分内容 当层中内容没有超出时 不显示滚动条 剪辑 在该域中定义层中可见区域的大小 在上 下 左 右四个文本框中分别设置层中显示区域相对于四边的距离 单位为像素 如果在页面中选择多个层 可以通过层属性面板同时修改多个层的属性 这样使我们的设计过程更方便快捷 13 层和表格的转换 将层转换为表格选择菜单命令 修改 转换 层到表格 打开 转换层为表格 对话框 14 层和表格的转换 在该对话框中可进行以下设置 最精确 选中该项 将层转换为表格 如果层之间有间距 则插入适当的单元格 最小 选中该项后 如果层之间的距离很小 会将这些层转换为相邻的单元格 转换后的表格具有最少的行列 使用透明GIFs 选中该复选框 会在转换后的表格最后一行中填充透明的GIF图像 目的是为了在所有的浏览器中 使表格都具有一样的显示效果 置于页面中央 选中该复选框 转换后的表格在页面中居中对齐 否则表格为左对齐方式 15 层转换为表格示例 演示 16 将表格转换为层 1 选择菜单命令 修改 转换 表格到层 打开 转换表格为层 对话框 如下图所示 2 设置好选项后 单击 确定 按钮 即可将表格转换为层 17 嵌套层 1 插入法 把插入点放置于页面上已有层内 然后选择 插入 层 菜单命令插入一个嵌套层 2 描绘法 单击 插入 工具栏布局面板中的层按钮 然后在一个已有层中拖动 即画出一个嵌套层 如果在层的参数设置中关闭了层嵌套 请按住Ctrl键在已有层中描绘其子层 演示 18 关于嵌套层 关于嵌套层 需要特别注意的是嵌套层并不是页面上一层位于另一层内 嵌套层的本质应该是一层的HTML代码嵌套在另一层的HTML代码之内 从图中可以看出 层 sub 的代码嵌套在层 main 的HTML代码之内 所以它是嵌套层 反过来 即使在页面上看 一个层位于另一层之内 如果它们的HTML代码互不包含 它们就不是嵌套层 当然最直观的方法还是通过层面板查看层间是不是存在嵌套关系 19 在层中插入内容 在层中可以插入多种页面元素 包括文本 表格 图像 插件 按钮等 方法是先在某层内单击鼠标 将光标插入点置于层内 然后就可以采用与在页面中插入元素的相同方法将各种元素插入到层中 演示Example test14 html 20 9 2时间轴 时间轴是Dreamweaver提供用于设计网页动态效果的工具 它通过设置不同时间段层的大小 位置 和可见性来创建动态网页 在时间轴上显示的每一幅图片或文字称为一帧 整个时间轴由许多帧组成 播放时所有的帧按照设置好的时间和运动方式依次显示出来 好像放电影一样 一段动态效果画面就呈现在浏览者面前 21 时间轴面板 时间轴面板提供了操作时间轴的便捷通道 在面板中可以查看和设置对象在各个时间点的属性 打开时间轴面板的方法有两种 选择菜单命令 窗口 时间轴 或Alt F9 22 时间轴面板 时间轴面板中各对象作用说明如下 1 时间轴名称 该下拉列表框用于选择要操作的时间轴 一个网页中可以定义多条时间轴 每条时间轴的名称都不一样 2 首帧 返回到时间轴的第一帧位置 3 后退 将播放头向左后退一帧 单击后退按钮并按住鼠标左键不放 可以反向播放时间轴 4 当前帧 显示时间轴中当前位置的帧编号 23 时间轴面板 5 播放 将播放头向右移动一帧 如果按住该按钮不放可以预览动画 6 Fps 设置每秒单位时间内播放动画帧的数量 默认设置为每秒播放15帧 7 自动播放 选中该复选框 设置在浏览器加载页面时自动播放时间轴 自动播放实际上是给页面的Body标签附加一种行为 使页面在载入时执行播放时间轴动作 8 循环 选中该复选框 设置在浏览器中可以循环播放当前时间轴 实际上是在动画末帧之后的行为通道中加入跳到第一帧的行为 双击行为通道中的标记可以编辑行为参数和改变循环次数 这将在后面的部分中进行介绍 24 时间轴面板 9 行为通道 通道前有B Behavior 标志 用来设置时间轴中某个特定帧应该执行的行为动作 10 播放头 面板中的红色方块 指示页面上当前显示的是时间轴中哪一帧 11 动画通道 显示层和图像的通道 共有32个这样的通道 12 动画栏 显示对象的动画轨迹 13 关键帧 动画栏中用小圆圈标识的帧就是关键键 通过关键帧可以设置对象在该时刻的属性 Dreamweaver可以自动生成两个关键帧之间的过渡动画帧 25 时间轴动画 时间轴通过改变层的位置 大小 可见性以及叠放次序来创建动画 需要特别说明的是 时间轴只能移动层 如果要移动图像或文本 必须先在页面中添加层 然后将图像或文本放置在层中 通过移动层来移动这些元素 26 使用关键帧创建动画 使用关键帧创建层动画的具体步骤如下 1 在页面中添加层 并在层中插入要漂移的文本或图像 然后将层放置在动画的起点位置 2 打开时间轴面板 并选中要创建动画的层 3 将层放入到时间轴面板中 27 使用关键帧创建动画 4 单击动画栏的末帧 将此关键帧拖动到第60帧位置 然后将层移动到动画结束的位置 此时我们会发现在文档窗口中显示有一条从层起始位置到结束位置的连接线 这就是层的运动轨迹 28 使用关键帧创建动画 5 可以通过添加关键帧的方法 创建曲线运动轨迹 选择动画栏 执行下面操作之一 单击动画栏中的某一帧 选择菜单命令 修改 时间轴 增加关键帧 用鼠标右键单击动画栏中的某一帧 然后从快捷菜单中选择 增加关键帧 命令 按住Ctrl键并单击动画栏中某一帧 在该处添加关键帧 如果要移除某一关键帧 右键单击该帧 然后从快捷菜单中选择 移除关键帧 命令 29 使用关键帧创建动画 6 单击增加的关键帧 拖动层使其运动轨迹呈曲线状 重复添加多个关键帧 可创建更复杂的曲线路径 演示 30 通过拖动路径创建动画 如果要创建具有复杂路径的动画 采用添加关键帧的方法比较麻烦 此时通过记录层拖动时的路径来创建动画要简便得多 具体操作方法如下 1 选择要创建动画的层 2 将层移动到动画开始的位置 3 选择 修改 时间轴 录制层路径 菜单命令或者在时间轴快捷菜单中选择该命令 需要说明的是 如果没有层被选择 此菜单项不可用 31 通过拖动路径创建动画 4 在页面中拖动层 创建想要的运动路径 拖运层时鼠标所经过的路径即为层动画的运动轨迹 5 释放鼠标后 Dreamweaver将自动向时间轴中添加一个动画栏 同时添加一批相应的关键帧 演示 32 时间轴的其它操作 1 改变动画长度和关键帧位置通过拖动结束帧标记 可以动态调整动画播放时间 拖动时所有关键帧发生移位 保持相互之间的相对位置不变 动画将均匀调整 如果不希望调整其他关键帧 可在拖动时按住Ctrl键 2 改变动画的起始位置在时间轴面板中选择一个或多个动画栏 按住Shift键可选择多栏 然后左右拖动可调整动画的起始位置 拖动时注意可以参考动画栏上面的时间轴刻度 需要特别注意的是 拖动时不要把鼠标放置在关键帧位置 否则变为移动关键帧 而不是移动整个动画位置 演示 33 时间轴的其它操作 3 移动整个动画路径如果想移动整个动画路径 可单击动画栏上任意非关键帧位置 选中整个动画栏 然后单击层控制柄并拖动 系统将调整所有关键帧的位置 需要说明的是 这种操作的结果是使整个运动路径移位 但并不改变运动轨迹的形状 4 增加或移除对象增加对象的最简单方法是选中某个层或图像后直接将其拖动到时间轴面板中 也可在选中对象之后通过快捷菜单命令 添加对象 完成 如果想从时间轴移除某个对象 首先选中动画栏 然后右击时间轴面板 在弹出的快捷菜单中选择 移除对象 命令即可 注意移除对象并不会删除层或图像 只是从时间轴中删除动画栏 演示 34 时间轴的其它操作 5 添加或删除帧选择 修改 时间轴 添加帧 或 修改 时间轴 移除帧 菜单命令可以在时间轴上添加或者删除帧 6 设置循环播放次数当我们选择时间轴面板中的 循环 复选框时 Dreamweaver会自动在动画最后一帧后 插入跳转至第一帧的行为 使时间轴动画可以不断循环播放 如果希望动画循环若干次而为是无限循环 则可以通过编辑该行为参数来设定循环次数 方法是双击行为通道中的行为标志 打开行为面板进行设置 演示 35 时间轴的其它操作 7 修改时间轴上对象的属性时间轴可以包含层和图像对象 在时间轴中除了可以移动层之外 还可以改变图像的源文件 改变层的可见性 大小和叠放顺序 改变时间轴中对象属性的操作方法如下 1 在时间轴面板动画栏中选择需要修改其对应对象的关键帧 或者新建一个关键帧 2 为对象定义新属性 可执行下列操作之一 如果想改变图像的源文件 可在属性面板的 源文件 文本框中输入新的图像文件名称 或单击文件夹按钮 浏览并选择图像文件 如果要改变层的可见性 可在属性面板中的 可见性 域中设置 如果想改变层的大小 可拖动层的大小调整手柄或在属性面板中设置宽度和高度 如果想改变层的叠放 可在层面板中重新设置Z轴值 3 按下播放按钮预览动画效果 36 图像变换动画示例 时间轴只能改变图像的源属性 如果要使图像的位置发生变化 需要先将图像放置在层中 然后将层加入时间轴 演示 37 9 3行为 行为是事件和动作的组合 它允许用户改变网页内容以及执行特定的任务 利用Dreamweaver的行为 可以轻松制作出动态的网页效果 从而使网页更具吸引力 38 关于行为 行为是事件和由该事件触发的动作的组合 用户可以利用 行为 面板来将行为添加到页面中 行为面板选择 窗口 行为 打开 行为 面板 行为 面板分为上下两个部分 上部为6个按钮 下部为行为列表 如下图所示 控制按钮 行为列表 39 控制按钮 从左至右各按钮的含义如下图所示 关于行为 40 控制按钮 从左至右各按钮的含义如下图所示 关于行为 41 控制按钮 从左至右各按钮的含义如下图所示 关于行为 42 控制按钮 从左至右各按钮的含义如下图所示 关于行为 43 控制按钮 从左至右各按钮的含义如下图所示 关于行为 44 控制按钮 从左至右各按钮的含义如下图所示 关于行为 45 行为列表 用户可以在其中为某行为项选择不同的事件 如下图所示 关于行为 演示 46 动作和事件 动作和事件动作是由JavaScript和HTML代码组成的 该代码能执行各种特殊任务 如弹出一个信息框 播放一段音乐等 用户可以使用 行为 面板直接向页面中添加动作 事件是浏览器生成的消息 指示该页的用户执行了某种操作 如果用户预先设置了某个动作 则事件将触发相应的动作发生 如弹出一个信息框等 47 动作和事件 演示 48 可产生的事件 根据所选择对象和指定浏览器的不同 显示在事件下拉列表中的事件也有所不同 49 行为示例1 动态效果 网页加载时弹出信息框 演示 50 打开浏览器窗口 使用 打开浏览器窗口 动作可以在一个新的窗口中打开指定的URL 同时用户还可以指定新窗口的属性 包括它的大小 特性和名称 操作步骤选中要附加行为的对象 打开 行为 面板 单击按钮并从动作菜单中选择 打开浏览器窗口 弹出如下图所示的对话框 51 打开浏览器窗口 在 打开浏览器窗口 对话框中设置新窗口的各项属性 单击 确定 按钮 完成设置 并使用指定事件触发该动作 演示Example test16 html 52 播放声音 使用 播放声音 动作可以播放音乐或其它音频片断 操作步骤选中要附加行为的对象 打开 行为 面板 单击按钮并从动作菜单中选择 播放声音 弹出如下图所示的对话框 53 在 播放声音 对话框中设置要播放的音频文件 单击 确定 按钮 完成设置 并使用指定事件触发该动作 注意事项 播放声音 行为并不支持网上最流行的mp3格式文件 目前只支持wav midi等少数格式 浏览器可能需要用某种附加的音频支持 例如音频插件 来播放声音 播放声音 演示 54 显示 隐藏层 使用 显示 隐藏层 动作可以显示 隐藏或恢复一个或多个层的默认可见性 操作步骤选中要附加行为的对象 打开 行为 面板 单击按钮并从动作菜单中选择 显示 隐藏层 弹出如下图所示的对话框 55 设置 显示 隐藏层 对话框在 命名的层 列表中选择要更改其可见性的层 单击 显示 按钮以显示该层 单击 隐藏 按钮以隐藏该层 单击 默认 按钮以恢复该层的默认可见性 单击 确定 按钮 完成设置 并使用指定事件触发该动作 注意事项如果在动作菜单中 显示 隐藏层 不可用 则可能是因为浏览器不接受事件 选择动作菜单中 显示事件 中IE4 0以后的版本或者选择Netscape6 0 重新选择菜单命令 此时 显示 隐藏层 将可用 显示 隐藏层 56 显示 隐藏层 演示Example test17 html 57 转到URL 使用 转到URL 动作可以在当前窗口或指定的框架中打开一个新的网页 这个动作对于想单击一次便改变两个或多个框架中的内容特别有用 操作步骤选中要附加行为的对象 打开 行为 面板 单击按钮并从动作菜单中选择 转到URL 弹出如下图所示的对话框 58 设置 转到URL 对话框打开在 设置在主窗口或指定的框架中打开新网页 URL 设置要打开的新网页的路径和名称 单击 确定 按钮 完成设置 并使用指定事件触发该动作 转到URL 演示 59 交换图像 交换图像 动作可以通过更改img标签的src属性 将一个图像和另一个图像进行交换 操作步骤选中要附加行为的原始图像 打开 行为 面板 单击按钮并从动作菜单中选择 交换图像 弹出如下图所示的对话框 60 设置 交换图像 对话框设定原始档为 设置新图像 用来替换原始图像 预先载入图像 防止新图像加载时发生延迟 鼠标滑开时恢复图像 鼠标离开图像时 图像自动恢复为原始图像 单击 确定 按钮 完成设置 并使用默认事件触发该动作 交换图像 61 交换图像 注意事项因为只有图像的src属性受此动作的影响 所以应该换入一个与原始图像具有相同尺寸的图像 否则 换入的图像显示时会被压缩或扩展 以使其适应原始图像的大小 62 拖动层 使用 拖动层 动作 可以使页面的层跟随用户的鼠标移动 从而实现某些特殊的页面效果 比如创建拼图游戏 滑块控件和其他可移动的页面元素 下面以实例的形式介绍该行为的使用 1 选择 插入 布局对象 层 在文档窗口的设计视图中插入一个层 并在属性面板中将其命名为Layer1 2 将光标置于Layer1层内部 选择 插入 图像 向层中插入图像文件cat01 gif 3 以同样的方法再创建三个层 并分别插入图像文件cat02 gif cat03 gif和cat04 gif 三个层分别命名为Layer2 Layer3和Layer4 4 移动层 将四个分图拼成一个整图 63 拖动层 5 再次选择 插入 布局对象 层 在文档窗口的设计视图中插入一个新层 并将该层命名为Layer5 6 将光标置于Layer5层内部 选择 插入 表格 向层中插入一个两行两列的表格 7 调整Layer5层的位置及表格大小 使表格的每个单元格与图相对应 8 选择 窗口 层 打开层面板 将Layer5层置于底层 如图所示 64 拖动层 9 选择插入的第一幅图像cat01 gif 并打开行为面板 10 单击 添加行为 按钮并从动作弹出菜单中选择 拖动层 随即弹出如图所示的 拖动层 对话框 11 设置 拖动层 对话框中的参数 12 单击 确定 按钮 完成设置 并使用默认事件 onLoad 触发该动作 65 拖动层 13 以同样的方法完成对其他三个层的设置 14 利用鼠标拖动 将各层的位置打乱 15 保存后按下快捷键F12预览 就能得到如图所示的页面 用户可以拖动页面中的层 来进行拼图游戏 演示Example test20 html 66 使用扩展管理器 扩展管理器是一个独立的应用程序 可用于安装和管理Macromedia应用程序中的功能扩展 功能扩展是一些可以很容易地添加到Dreamweaver中的新功能 mxp 操作步骤从Macromedia的官方站点下载需要的功能扩展并保存至安装目录内的DownloadedExtensions文件夹中 选择 命令 扩展管理 打开扩展管理器 如下图所示 67 使用扩展管理器 在扩展管理器上选择 文件 安装扩展 选取要安装的功能扩展 单击 安装 按钮 功能扩展将被安装到Dreamweaver中 如下图所示 注意事项有些功能扩展必须在重新启动Dreamweaver后才能使用 68 9 4布局模式 Dreamweaver的 布局视图 的功能可以用来制作布局更加自由的网页 69 布局视图 切换布局视图的步骤 1 在插入工具栏单击 布局 选项 其中包括有和布局视图相关的一些工具 如图所示 2 单击 布局 按钮进入布局视图 此时会打开一个 从布局模式开始 提示窗口 其中介绍了 布局单元格 与 布局表格 工具的使用方法 3 单击 确定 按钮关闭对话框并自动进入布局模式 如图所示 演示 70 添加布局表格和布局单元格 添加布局表格添加布局表格的步骤 1 单击 布局 插入工具栏上的 布局表格 按钮 此时鼠标就会变成 形状 2 将鼠标放在要绘制布局表格的区域 然后按住鼠标左键拖动就能绘制出表格来 如图所示 71 添加布局表格和布局单元格 添加布局单元格添加布局单元格的步骤 1 在 布局 插入工具栏上单击 绘制布局单元格 按钮 然后定位到绘制单元格的位置 按下鼠标左键后拖动 松开鼠标后 表格中就会出现一个可以插入文字和图像的单元格了 如图所示 72 添加布局表格和布局单元格 添加布局单元格添加布局单元格的步骤 2 在布局表格中绘制完好单元格后 在 布局 插入工具栏上单击 标准 按