网页设计与制作教程1.pptVIP

网页设计与制作 ——Dreamweaver MX 2004 项目10层与行为的应用 学习目标 掌握创建和使用层的方法 掌握转换表格和层的方法 掌握使用时间轴创建层动画的方法 掌握“行为”面板的使用方法 理解常用事件及其意义 掌握Dreamweaver中内置动作的使用方法 任务一 使用层 层是一种HTML页面元素，可以将它定位于页面的任意位置。层可以包含文本、图像和其他任何可放入HTML文档正文中的内容。 操作一 创建并应用层 任务二 添加行为和事件 行为是Dreamweaver中的一个重要部分，通过行为可以在网页上制作出一些简单的交互效果。行为由两个部分组成，即 Event（事件）和 Action（动作），通过事件的响应进而执行对应的动作。 任务二 添加行为和事件 1．认识“行为”面板 2．认识事件 行为实际是事件与动作的联合。事件用于指明执行某项动作的条件，如鼠标移到对象上方、离开对象、单击对象、双击对象、定时等都是事件 动作实际上是一段执行特定任务的、预先写好的 Javascript代码，如打开窗口、播放声音、停止 Shockwave 电影等部是动作。 任务二 添加行为和事件 事件由浏览器定义、产生与执行，例如，OnMouseout，OnMouseover和OnClick在大多数浏览器中都用于和某个链接关联，而onLoad则用于与图片及文档的body关联。 任务二 添加行为和事件 3．认识动作 4．为对象附加行为 添加行为的时候要遵循如下3个步骤： 选择对象； 添加动作； 调整事件。 任务二 添加行为和事件 操作一 弹出信息 操作二 打开浏览器窗口 操作三 设置状态栏文本 操作四 播放声音 操作五 显示隐藏层 操作六 转到URL 操作七 交换图像 任务三 添加时间轴 在Dreamweaver中，时间轴面板使用动态HTML来改变层及图片在一段时间内的属性，如位置、尺寸、可见性及顺序等，从而制作出动画效果。此外，利用时间轴还可以实现在网页加载后执行其他操作，例如在特定时间改变突破的源文件或执行某些行为。 任务三 添加时间轴 操作一 时间轴的使用 使用时间轴创建动画主要是通过改变对象在文档中的位置、大小、可见度以及层的重叠顺序等方法来实现的。时间轴只能够移动层对象，如果要使图像、文本等对象产生动画效果，必须将其置于层中。 项目拓展 拼图游戏 实训一 用层制作时间轴动画 实训目的：掌握层和时间轴的使用。 实训内容：按照要求制作层和时间轴动画。 项目小结 层是一种HTML页面元素，可以将它定位于页面的任意位置，层可以包含文本、图像和其他任何可放入HTML文档正文中的内容。 行为是Dreamweaver中的一个重要部分，通过行为可以在网页上制作出一些简单的交互效果。行为由两个部分组成，即 Event（事件）和 Action（动作），通过事件的响应进而执行对应的动作。 本项目主要讲述了层的基本操作和应用，并结合行为、时间轴制作动画效果，要求掌握用行为和事件来实现设置文本、弹出消息、播放声音、转到网址、显示/隐藏层、交换图像等效果。 * *