网页设计与制作 教学课件 作者 王海军 网页设计与制作 9.pptVIP

网页设计与制作教 学 课 件 第9章 层、时间轴与动画 本章主要内容： 层的认识 层可以以像素为单位精确定位页面元素 层中可以放置文本、图像甚至其它层 层可以放置在页面的任意位置 把页面元素放在层中，可以控制元素的显示顺序 层可以隐藏或显示 通过时间线可以让层在屏幕中移动来使页面产生动画效果 创建层 插入层：选择菜单【插入】→【布局对象】→【层】 绘制层 :以拖放的方法创建层 层的嵌套 ，就是在一个层内插入另外的层 层的属性 层的可见性： 属性面板的“可见性”下拉列表中，设置层的可见性。 Default不指明层的可见性。 Inherit继承父层的可见性。 Visible显示层及其包含的内容。 Hidden隐藏层及其包含的内容。 层的溢出处理 指当层内容超过层的大小时的处理方式： Visible（显示）：自动增加层尺寸。 hidden（隐藏）：保持层尺寸不变，隐藏超出部分的内容。 scroll（滚动条）：层内容无论是否超出层的范围，都会自动增加滚动条。 auto（自动）：当层内容超出层边界时，自动增加滚动条（默认）。 层的操作 改变层的大小 移动层的位置 显示和隐藏层 插入图片、文字等内容 层与表格的转换 认识时间轴面板 时间轴面板显示层和图像随时间变化的属性。 时间轴名称 、行为频道 、播放头 、时间轴 、动画条、关键桢等。 利用时间轴可以实现动画效果 创建时间轴动画 首先创建层并在层中插入动画对象。 调出时间轴面板 将层拖动到时间轴动画通道中 改变动画栏的长度 、动画变化的速度 确定层的运动轨迹 插入关键桢使层按曲线移动 设定播放属性。 录制层路径 ，是最简单的建立层动画的方法 修改时间轴 改变整个动画栏的长度 改变关键帧位置 改变动画的起始时间 改变动画轨迹的位置 自动播放功能 循环播放功能 ☆控制时间轴的行为 ，可以实现互动的动态效果 认识行为 对象，网页中被作为一个整体操作的元素，如层、图片、表格等。 行为是用来动态响应用户操作、改变当前页面效果或是执行特定任务的一种方法。 行为是由事件和动作构成的。事件：为动作的触发点，多数由用户完成动作： 计算机所完成的操作或某个状态的变化 常用的事件有： onMouseOver：鼠标移到目标上； onMouseOut：鼠标移开时； onClink：点击时； onDblClick：双击时； onLoad：载入网页时； onUnload：离开页面时； onResize：当浏览者改变浏览器窗口或框架大小时； onScroll：当浏览者拖动滚动条上下移动浏览器窗口时。 使用各种行为动作 Dreamweaver MX中使用行为的主要途径是行为面板 打开面板 添加与删除行为 设定触发事件 调整先后次序 完成以上操作要先确定对象。 使用各种行为动作 播放声音 打开浏览器窗口 弹出信息 检查表单 检查浏览器 跳转菜单 拖动层 显示—隐藏层 转到URL 检查表单实例 新建一个网页，插入如图表单。 选择【提交】按钮 打开【检查表单】对话框 依次设置各文本域容许输入值的范围 预览网页，输入不符合限定条件的内容，然后提交表单 本章小结 本章的主要内容为层、时间轴和行为 层可以对网页进行版面布局 时间轴的可以产生丰富多彩的动画效果 行为不但简化了网页制作还大大增强了网页的功能 * * * * 了解层的概念，掌握层的创建方法，学会设置层的 属性和利用层布局页面 学会创建时间轴动画 行为及行为面板的使用 控制与行为相对应的行为事件 Z 轴：层的层次属性 可见性：显示和隐藏 溢 出：内容超过层的大小时的处理方式 层编号：给层命名 左、上：确定层的位置 宽、高：精确确定层的大小 图9-29 检查表单对话框  * *