工信版（中职）网页设计与制作-9电子课件.ppt

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