《网页设计与制作——Dreamweaver MX 2004 教学课件 ppt 作者 邓宁 10》由会员分享，可在线阅读，更多相关《网页设计与制作——Dreamweaver MX 2004 教学课件 ppt 作者 邓宁 10（24页珍藏版）》请在金锄头文库上搜索。
1、项目十 层与行为的应用,项目提要 在设计页面布局的过程中，有些内容我们希望能够随意的放在网页的某个地方，但是利用前面学习过的各种布局方法都无法实现这种要求。但接下来我们要学习的层的使用，就可以实现布局时任意排布文字、图片等网页素材。我们平时在浏览网页时经常会看到一些对话框探出来，或者看到一些广告信息漂浮在页面上，这些效果是怎么实现的呢？其实通过Dreamweaver中的行为和事件，配合时间轴，就可以实现上述的效果了。 学习目标 掌握创建和使用层的方法； 掌握转换表格和层的方法； 掌握使用时间轴创建层动画的方法； 掌握行为面板的使用方法； 理解常用事件及其意义； 掌握Dreamweaver中内置
2、动作的使用方法。,任务一 使用层,层是一种HTML页面元素，可以将它定位于页面的任意位置。层可以包含文本、图像和其他任何可放入HTML文档正文中的内容。利用Dreamweaver，可以在不进行任何JavaScript或HTML编码的情况下放置层。可以将层前后放置、隐藏某些层而显示其他层，以及在屏幕上移动层。利用层可以非常灵活地放置内容。若要确保所有人都能够完美地查看Web页，可以使用层设计页，然后将层转换为表格。,操作一 创建并应用层,描绘层,层面板,操作一 创建并应用层,层属性面板,任务二 添加行为和事件,行为是Dreamweaver中的一个重要部分，通过行为可以在网页上制作出一些简单的交互
3、效果。行为由两个部分组成，即 Event（事件）和 Action（动作），通过事件的响应进而执行对应的动作。,任务二 添加行为和事件,1、认识“行为”面板,行为面板,任务二 添加行为和事件,2 、认识事件 onDblClick：双击选定元素将触发该事件。 OnClick(NS3、NS4、IE3、IE4、IE5)：单击选定元素（如超链接、图片、影像、按钮）将触发该事件。 onKeyDown（NS4、IE4、IE5）：当用户按下任何键时即触发该事件。 onKeyPress（NS4、IE4、IE5）：当用户按下并释放任意键时触发该事件。它相当于onKeyDown与onKeyUp事件的联合。 onKe
4、yUp（NS4、IE4、IE5）：按下键后释放该键时触发该事件。 Onload(NS3、NS4、IE3、IE4、IE5)：当图片或页面完成装载后触发该事件。 onMouseDown (NS4、IE4、IE5)：当用户按下鼠标键时触发该事件。 onMouseMove (NS4、IE4、IE5)：当鼠标指针停留在对象边界内时触发该事件。 onMouseout（NS3、NS4、IE4、IE5）：当鼠标指针离开对象边界时触发该事件。 onMouseOver（NS3、NS4、IE3、IE4、IE5）：当鼠标指针自次移动指向特定对象时触发该事件。该事件通常用于链接。 onMouseUp（NS4、IE4、I
5、E5）：当按下的鼠标键被释放时触发该事件。 onstart（IE4、IE5）：当编辑框中的内容开始循环时触发该事件。 onsubmit（NS3、NS4、IE3、IE4、IE5）：确认表单时触发该事件。 onUnload（NS3、NS4、IE3、IE4、IE5）：离开页面时触发该事件。,任务二 添加行为和事件,3、 认识动作 “调用 JavaScript”：此动作允许用户使用“行为”面板指定当发生某个事件时应该执行的自定义函数或Javascript代码行。 “改变属性”：此动作可更改对象某个属性的值。 “拖动层”（NS 3.0 F、IE 3.0 F）：利用该动作允许用户拖动层。 “转到 URL”
6、：在当前窗口或指定框架打开一个新页面。 “跳转菜单”（IE 3.0 F）：当用户通过选择“插入”“表板对象”“跳转菜单”命令创建了一个跳转菜单时，Dreamweaver将创建一个menu对象，并为其附加行为。在“行为”面板中双击“跳转菜单”动作可编辑跳转菜单。 “打开浏览器窗口”（IE 3.0 F）：在新窗口中打开 URL，并可设置新窗口的属性、特性和名称。 “播放声音”（IE 30 F）：用此动作可播放声音。但浏览器需要某种附加的音频支持（例如音频插件）来播放声音，因此，具有不同插件的浏览器所播放的声音的果会有所不同。 “弹出消息”：显示带指定信息的Javascript警告。 “设置层文本”
7、（NS 3.0 F、IE 30 F）：利用指定内容取代现存层中的内容及格式。 “设置状态栏文本”：在浏览器左下角的状态栏中显示信息。 “设置文本域文本”：利用指定内容取代表单编辑框中内容。 “显示一隐藏层”（NS 3.0 F、IE 30 F）：此动作可显示、隐藏或恢复一个或多个层的默认可见性。常用于在用户与网页进行交互时显示信息。 “交换图像”（IE 30 F）：此动作通过更改 IMG标签的 SRC属性将一个图像和另个图像进行交换。使用此动作可创建按钮的鼠标经过图像和其他图像效果。,操作一 弹出信息,选择body标签,选择弹出信息行为,输入自定义的消息,操作二 打开浏览器窗口,首先，应准备好两
8、个页面，分别为主窗口的页面和弹出窗口的页面,主窗口页面,弹出窗口页面,操作二 打开浏览器窗口,打开浏览器窗口对话框,“打开浏览器窗口”行为面板,操作三 设置状态栏文本,选择设置状态栏文本,设置状态栏文本,操作四 播放声音,首先在页面中选择左下角标签选择器中的body标签，单击（+）按钮并从“动作”弹出式菜单中选择“播放声音”。单击“浏览”按钮选择要播放的声音文件，或在“播放声音”文本框中直接输入路径和文件名。,播放声音对话框,操作五 显示隐藏层,（1）单击插入栏“布局”中的“层”按钮，然后在文档窗口中绘制一个层。 （2）然后在层中放置显示隐藏的图像。并将层的属性设置为隐藏,将所有层的属性设置为
9、隐藏,改变层的可见性,“显示隐藏层”的行为面板,操作六 转到URL,1、为按钮添加链接,设置按钮标签，并设置动作为无,设置URL,操作六 转到URL,2、鼠标上滚图像时的链接跳转,选择图像对象,调整行为的鼠标事件,操作七 交换图像,（1）选择“插入”“图像”或单击插入栏的“图像”按钮来插入一个图像，在属性面板中，在最左侧的文本框中为该图像输入一个名称,为图像命名,操作七 交换图像,准备好的两张图像,设置交换图像对话框,任务三 添加时间轴,在Dreamweaver中，时间轴面板使用动态HTML来改变层及图片子一段时间内的属性，如位置、尺寸、可见性及顺序等，从而制作出动画效果。此外，利用时间轴还可
10、以实现网页加载后执行其他操作，例如在特定时间改变突破的源文件或执行某些行为。,操作一 时间轴的使用,绘制一个层并插入图像,将层拖放到时间轴,操作一 时间轴的使用,选择最后一帧调整层的位置,添加一个关键帧并拖动层,项目拓展 拼图游戏,项目小结,层是一种HTML页面元素，可以将它定位于页面的任意位置，层可以包含文本、图像和其他任何可放入HTML文档正文中的内容。 行为是Dreamweaver中的一个重要部分，通过行为可以在网页上制作出一些简单的交互效果。行为由两个部分组成，即 Event（事件）和 Action（动作），通过事件的响应进而执行对应的动作。 本项目主要讲述了层的基本操作和应用，并结合行为、时间轴制作动画效果，要求掌握用行为和事件来实现设置文本、弹出消息、播放声音、转到网址、显示/隐藏层、交换图像等效果。,
