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