网页设计与制作项目九-使用Dreamweaver-实现网页特效 PPT课件

1、任务一 应用Dreamweaver内置行为,【知识目标】 了解行为的概念。 掌握行为中常见的动作和事件。 掌握Dreamweaver内置行为的使用。,任务一 应用Dreamweaver内置行为,【技能目标】 能为网页元素添加行为。 能应用Dreamweaver常用内置行为。 能对添加的行为修改触发事件。,任务一 应用Dreamweaver内置行为,【项目描述】 在本节项目中，我们就要通过对网页添加一些简单的行为，实现以下功能： 当用户进入网页时，页面填出一个消息框“欢迎访问本网站！”。 鼠标放置在图像上，图像会改变成另外一个图像。 点击图像，可以打开一个新窗口，查看较大的图像。,行为的概念 所

2、谓行为就是某个事件和由该事件触发的动作的组合。 一个行为是由事件和动作组成的。事件是由浏览器生成的消息，它指示网页的访问者已执行的某种操作。 一个事件可以触发多个不同的动作，用户可以根据需要指定这些动作发生的顺序。,9.1.1 项目准备,9.1.1 项目准备,2. 行为面板 1是显示设置事件：显示添加到当前网页的行为事件。 2是显示所有事件：显示所有可能的行为事件，按照字母降序排列。详见表9-1。 3是添加行为：通过点击“+”，可以为选定的页面元素添加行为。 4是删除行为：通过点击“-”，可以删除选定的行为。 5是向上移动行为。 6是向下移动行为。,9.1.1 项目准备,3应用行为 用户可以将

3、行为添加到网页中的各种元素上，包括超链接、图像、表单和表格等，甚至于可以添加到整个网页文档上。 根据“显示事件”中不同的浏览器版本，支持的事件也会有所不同。 用户可以为一个事件指定多个动作。用户也可以根据需要通过上下箭头调整顺序。,9.1.1 项目准备,4.更改或删除行为 在附加了行为之后，用户可以更改触发动作的事件、添加或删除动作以及更改动作的参数。 （1）选择一个设置了行为的对象。 （2）打开行为面板。 （3）更改或删除行为,9.1.1 项目准备,5.更新行为 更新行为的操作步骤如下： （1）选择一个设置了行为的对象。 （2）打开行为面板，双击该行为。 （3）进行所需的更改，然后在该行为的

4、对话框中单击“确定”。,9.1.1 项目准备,6.下载和安装第三方提供的行为 用户除了使用Dreamweaver中自带的行为外，还可以从其他网站上下载第三方提供的行为。在下载了这些插件后，把插件解压缩后，放置在Dreamweaver按照目录下的Configuration/Behaviors/Actions/文件夹中即可。,9.1.1.1 交换图像,“交换图像”行为其实就是通过更改网页中的 标签的 src 属性将一个图像和另一个图像进行交换。 使用此行为可创建鼠标经过按钮的效果以及其它图像效果，可以一次交换多个图像。 在使用“交换图像”行为时，要注意的是应该换一个与原图像尺寸相同的图像，否则，换

5、入图像显示时会被压缩或扩张。,9.1.1.2 弹出信息,当触发“弹出信息”行为后，浏览器会自动弹出一个消息框，对用户进行提示或者警告。这个消息框仅仅是提供信息，不为用户提供任何选择操作。添加弹出消息行为步骤如下： 选择要添加该行为的网页元素，打开行为面板，单击“+”号，选择“弹出信息”。 在“消息”框中输入想要提示用户的消息。 单击“确定”按钮，不同网页元素的默认事件是不相同的。用户也可对触发事件进行修改。,9.1.1.3 打开浏览器窗口,使用“打开浏览器窗口”行为可在一个新的窗口中打开页面。用户可以指定新窗口的属性（包括其大小）、特性（它是否可以调整大小、是否具有菜单栏等）和名称。 如果不指

6、定该窗口的任何属性，在打开时它的大小和属性与打开它的窗口相同。指定窗口的任何属性都将自动关闭所有其它未明确打开的属性。,9.1.1.4 调用Javascript,Dreamweaver内置行为其实就是一段内置的Javascript代码。 “调用Javascript”行为是当触发事件时执行自行编辑的Javascript代码。,9.1.1.5 改变属性,使用“改变属性”行为可更改页面元素某个属性的值 添加“改变属性”行为步骤如下： 选择一个页面元素，打开行为面板，添加“改变属性”行为。 在“改变属性”对话框中，根据需要进行设置。从“元素类型”菜单中选择某个元素类型，以显示该类型的所有标识的元素。

7、从“元素 ID”菜单选择一个元素。 从“属性”菜单中选择一个属性，或在框中输入该属性的名称。 在“新的值”域中为新属性输入一个新值。 单击“确定”， 查看触发事件，如不合适，用户可以进行修改。,9.1.1.6 设置导航栏图像,使用“设置导航栏图像”行为可以把图像变为导航栏图像 添加“设置导航栏图像”行为的步骤： （1）选择导航条中的某个图像，打开行为面板。 （2）添加“设置导航栏图像”行为。 （3）在“设置导航栏图像”对话框中设置编辑选项。 （4） 点击“确定”，查看触发事件，如不合适，用户可以进行修改。,9.1.1.7 跳转菜单,创建跳转菜单的步骤： 点击菜单【插入记录】/【表单】/【跳转菜

8、单】。 对“插入跳转菜单”对话框进行设置。 编辑一个现有的跳转菜单有两种方式： 第一种方式：双击行为面板中的“跳转菜单”行为进行编辑。 第二种方式：选择跳转菜单，在“属性”面板中对“列表值”进行编辑,9.1.2 项目实现,本节我们将运用上述方法，通过对网页添加一些简单的行为，实现以下功能： 当用户进入网页时，页面填出一个消息框“欢迎访问本网站！”。 鼠标放置在图像上，图像会改变成另外一个图像。 点击图像，可以打开一个新窗口，查看较大的图像。,9.1.3 知识拓展,预先载入图像 显示-隐藏元素 检查表单 检查插件,9.1.4 项目训练,请为2.3.5项目训练规划的刘翔个人网站首页添加一下几种行为： 制作弹出消息框，用于欢迎访问者。 为首页的导航栏设置导航栏图像。 任意选择一副图像，当鼠标移到图像上是换成另一幅图像，鼠标移走后恢复。,9.2 实训项目,【技能目标】 了解行为的含义和特点 掌握添加行为的方法 掌握行为参数设置方法 【项目描述与分析】 本次实训将利用项目八中新建的网站首页，通过添加合适的行为达到以下效果： 当鼠标点击第一幅图像后，弹出一个新窗口显示该图的较大图像。 当鼠标点击第二幅图像时，弹出一个提示窗口“对不起，此图不允许下载！”。,9.2 实训项目,【实训过程】 （1）打开站点，打开index.html。 （2）鼠标选中第一幅图像，打