第8章行为的应用课件.pptx

学习目标掌握行为构成的三要素和创建方法。掌握行为面板的使用方法。能够合理使用常见的行为。能够运用网页元素结合行为制作丰富的动态效果。8.1　创建与使用行为8.1.1 案例制作：香水使用指南 最终效果如图所示。8.1　创建与使用行为8.1.1 案例制作：香水使用指南 1）规划站点。新建文件夹“Perfume”，将素材文件夹“Perfume”中所有文件和文件夹拷贝到“Perfume”文件夹中。2）定义站点。在Dreamweaver CS5中，单击菜单“站点”→“新建站点”命令，通过“站点设置对象”对话框定义站点，站点名称为“香水网”，本地站点文件夹设置为“Perfume”文件夹。打开网页index.html，单击菜单“窗口”→“行为”命令，打开“行为”面板。3）在文档窗口底部左侧的状态栏中单击body标签，在“行为”面板中单击“添加行为”按钮 ，选择“打开浏览器窗口”命令，如图所示。8.1　创建与使用行为8.1.1 案例制作：香水使用指南 4）在“打开浏览器窗口”对话框中，单击“浏览”按钮选择“openWindows.html”，在“属性”部分选择“菜单条”、“需要时使用滚动条”、“状态栏”和“调整大小手柄”4个复选框，如图所示，单击“确定”按钮。8.1　创建与使用行为8.1.1 案例制作：香水使用指南 5）此时“行为”面板中将显示设置的行为。左侧为事件类型，右侧为设置的动作，如图所示，保存，按F12预览效果。8.1　创建与使用行为8.1.2 新知解析1. 行为构成的三要素对象（Object） 对象是产生行为的主体，很多网页元素都可以成为对象，如图像、文本、多媒体文件等，甚至是整个页面。事件（Event) 事件是触发动态效果的原因，它可以被附加到各种页面元素上，也可以被附加到HTML标签中。一个事件总是针对页面元素或标签而言的，例如：将鼠标移动到图像上、把鼠标放在图像之外、单击鼠标，是与鼠标有关的三个最常见的事件(onMouseOver、onMouseOut、onClick)。不同的浏览器支持的事件种类和多少是不一样的，通常高版本的浏览器支持更多的事件。动作(Action) 行为通过动作来完成动态效果，如：图像翻转、打开浏览器窗口、播放声音等都是动作。动作通常是关于对象的一段JavaScript代码，在Dreamweaver CC 2015中使用Dreamweaver内置的行为向页面中添加JavaScript代码，不需要自己编写。8.1　创建与使用行为8.1.2 新知解析2. 设置“行为”面板选项 “行为”面板是实现和设置各种行为的地方。具有以下选项 “显示设置事件” ：仅显示附加到当前文档的事件。事件被分别划归到客户端或服务器端类别中。每个类别的事件都包含在一个可折叠的列表中。“显示设置事件”是默认的视图。“显示所有事件” ：按字母降序显示给定类别的所有事件。“添加行为” ：是一个弹出菜单，其中包含可以附加到当前所选元素的动作。8.1　创建与使用行为8.1.2 新知解析“删除事件” ：从行为列表中删除所选的事件和动作。“上下箭头按钮” ：当为同一个特定事件设定了多个动作时，可利用上下箭头按钮调整所选动作在行为列表中上下位置。给定事件的动作是以特定的顺序执行的。“事件”：是一个弹出菜单，其中包含了可以触发该动作的所有事件。只有在设置了行为时才显示该弹出菜单。根据所选对象的不同，显示的事件也有所不同。 8.1　创建与使用行为8.1.2 新知解析3. 创建与使用行为 行为可以附加到整个文档（即附加到body标签），还可以附加到超链接、图像、表单元素或其它HTML元素中的任何一种，操作方法如下：在页面上选择一个对象（网页元素），例如一个图像、一个超链接或整个页面，这个对象一定要合适并有意义。例如要将行为附加到整个页，需要在“文档”窗口底部左侧的状态栏单击body标签，这样产生事件的对象是整个页面。选择菜单“窗口”→“行为”，打开“行为”面板。单击“添加行为按钮” ，并从“动作”弹出菜单中选择一个动作。菜单中以灰色显示的动作表示不可选，原因是当前选中的对象不具备产生该动作的条件。输入参数和说明，单击“确定”按钮。触发该动作的默认事件显示在“事件”栏中。 8.1　创建与使用行为8.1.2 新知解析4.更改行为 在附加了行为之后，可以更改触发动作的事件、添加或删除动作以及更改动作的参数。若要更改行为，操作方法如下：1）选择附加有行为的对象。2）若要编辑动作的参数，可以双击该动作名称，然后更改对话框中的参数、说明等，完成后单击“确定”按钮。 3）若要更改给定事件的多个动作的顺序，可以选择某个动作然后单击“行为”面板中的上下箭头 按钮。 4）若要删除某个行为，可以将其选中，然后单击减号按钮或直接按Delete键。。 8.1　创建