第9章 行为.pptx

第9章 行为;1. 行为简介 2. 制作图像特效 3. 启用浏览器窗口 4. 效果行为 5. JavaScript代码;一个完整的Dreamweaver行为由两大要素组成：事件（Event）和动作（Action）。事件是由浏览器定义的消息，可以附加在网页元素上，或者HTML语言标签上。动作是行为的内容本身，由一组JavaScript程序组成。 对于一个特定网页元素或对象来说，添加行为需要确定事件和动作，并将动作和相应的事件关联起来，才能实现行为。;9.1.1事件 事件可以理解为行为中各种动作的触发条件，常用的事件包括onClick，onDblClick，onMouseOver，onMouseOut和onLoad等，分别表示鼠标单击，鼠标双击、鼠标经过、鼠标移开和页面加载等。;9.1.2动作 动作是行为的具体实现过程。不同动作执行不同的任务或工作，展示不同的效果。 针对不同元素或对象，可以添加不同的行为，有针对层的行为，有针对图像的行为等。 9.1.3行为面板;9.2.1课堂案例-吉太美食 案例学习目标：学习图像特效的制作。 案例知识要点：在【行为】面板中，点击 按钮，在【动作】菜单中选择相应图片特效动作进行设置。 素材所在位置：光盘/素材/ch09/课堂案例-吉太美食。 案例效果如图9-4所示。;9.2.2交换图像 交换图像动作主要用于创建当鼠标指针经过时产生动态变化的图片对象。 9.2.3显示-隐藏元素 显示-隐藏元素动作，能够通过响应事件，触发改变一个或多个网页元素的可见性。 ;9.3.1课堂案例-卡通人物 案例学习目标：学习在网页中拖动图层的方法。 案例知识要点：在【行为】面板中，单击【添加行为】按钮 ，在【动作】菜单中选择【拖动AP元素】进行设置。 素材所在位置：光盘/素材/ch09/课堂案例-卡通人物。 案例效果如图9-21所示。;9.3.2 拖动AP元素 拖动AP元素允许网页浏览者拖动图层，改变其位置。该动作常用于拼图游戏、滑块控件等可移动的网页元素。;9.4.1课堂案例-儿童摄影 案例学习目标：学习添加打开网页时弹出窗口。 案例知识要点：在【行为】面板中，单击【添加行为】按钮 ，在【动作】菜单中选择添加浏览器行为。 素材所在位置：光盘/素材/ch09/课堂案例-儿童摄影。 案例效果如图9-30所示。;9.4.2打开浏览器窗口 打开浏览器窗口行为主要用于控制在一个新窗口中打开指定网页。 9.4.3转到URL调用 转到URL动作主要用于在当前窗口指定的框架下打开一个新网页，可通过一次操作更改多个框架的内容。;9.5.1课堂案例-绿野网站建设 案例学习目标：学习设置图像效果的方法。 案例知识要点：在【行为】面板中，单击【添加行为】按钮 ，在【动作】菜单中选择【效果】进行设置。 素材所在位置：光盘/素材/ch09/课堂案例-绿野网站建设。 案例效果如图9-36所示。;9.5.2增大收缩 9.5.3挤压 9.5.4显示/渐隐 9.5.5晃动 9.5.6滑动 ;调用JavaScript行为可以指定在事件发生时要执行的自定义函数或者JavaScript代码。可以自己书写这些JavaScript代码，也可以使用网络上免费发布的各种JavaScript库。;9.7.1练习案例-甜品饮料吧 案例练习目标：练习制作图像特效。 案例操作要点： 在“热卖产品”下方，分别为图像“茉莉花香”，“冰火两重天”，“生命之绿”，“巨杯甜饮”添加显示-隐藏元素特效，实现鼠标经过不同图片，在网页特色产品单元格右侧显示其放大图片，放大图片分别为：big1-1.jpg，big2-1.jpg，big3-1.jpg，big4-1.jpg。 在“特色产品”下方，自左至右，自上至下，分别插入图像a-1.jpg- f-1.jpg，并添加交换图像特效，交换???片分别设为a.jpg- f.jpg。 素材所在位置：光盘/案例素材/ch09/练习案例-甜品饮料吧，效果如图9-54所示。;9.7.2练习案例-美达人寿 案例练习目标：练习制作启用浏览器窗口效果。 案例操作要点： 打开网页index.html的同时，启动新窗口index1.html 启动窗口宽度300px，窗口高度500px。 素材所在位置：光盘/案例素材/ch09/练习案例-美达人寿，效果如图9-55，9-56所示。;9.7.3练习案例-我们爱猫网 案例练习目标：练习制作效果特效。 案例操作要点： 为网页index.html中的4幅图片，添加增大/收缩、挤压、显示/渐隐和晃动4种不同的效果。 为第5幅图片添加滑动效果，通过不同事件触发。 素材所在位置：光盘/案例素材/ch09/练习案例-我们爱猫网，效果如图9-57所示。