Dreamweaver行为.pptx

第9章行为,网页设计与制作DreamweaverCC标准教程,1.行为简介2.制作图像特效3.改变属性4.启用浏览器窗口5.效果6.JavaScript代码,本章学习主要内容：,网页中的行为实际上就是网页文档中一系列的JavaScript代码，用于实现网页的动感效果或引起某些特殊功能。一个完整的Dreamweaver行为由两大要素组成：事件（Event）和动作（Action）。事件是由浏览器定义的消息，可以附加在网页元素上，或者HTML语言标签上。动作是行为的内容本身，由一组JavaScript程序组成。对于一个特定网页元素或对象来说，添加行为需要确定事件和动作，并将动作和相应的事件关联起来，才能实现行为。,9.1行为,9.1.1事件9.1.2动作9.1.3行为面板,9.1行为,事件可以理解为是行为中各种动作的触发条件，最常用的事件包括onClick，onDblClick，onMouseOver，onMouseOut和onLoad等，分别表示鼠标单击，鼠标双击、鼠标经过、鼠标移开和页面加载等。,9.1.1事件,动作是行为的具体实现过程。不同动作执行不同的任务或工作，展示不同的效果。针对不同元素或对象，可以添加不同的行为，有针对层的行为，有针对图像的行为等。,9.1.2动作,在网页中添加和修改行为，由【行为】面板来完成。选择菜单【窗口】|【行为】，或按快捷键，即可打开【行为】面板。,9.1.3行为面板,添加适当的图像特效，能使网页内容更加生动。常用的图像特效有交换图像、显示-隐藏元素等。,9.2制作图像特效,9.2.1课堂案例吉太美食9.2.2交换图像9.2.3显示-隐藏元素,9.2制作图像特效,案例学习目标：学习图像特效的制作。案例知识要点：在【行为】面板中，点击按钮，在【动作】菜单中选择相应图片特效动作进行设置。素材所在位置：光盘/素材/ch9/课堂案例-吉太美食。案例效果如图9-4所示。,9.2.1课堂案例-吉太美食,交换图像动作主要用于创建当鼠标指针经过时产生动态变化的图片对象。提示：因为只有图像的src属性受此动作的影响，因此目标图像应与原图像具有相同宽度和高度，否则，载入图像将被压缩或拉伸，导致变形。,9.2.2交换图像,显示-隐藏元素动作，能够通过响应事件，触发改变一个或多个网页元素的可见性。提示：设置网页中的显示或隐藏元素，通常由两个行为组成，第一个行为通过事件触发显示或隐藏网页元素，第二个行为用以恢复网页元素之前的显示或隐藏状态。,9.2.3显示-隐藏元素,改变属性允许网页浏览者通过事件控制网页元素，令其各种属性发生变化。利用改变属性的方法控制网页元素的外观及其他所有属性，可以更加灵活地形成各种特殊效果。,9.3改变属性,11.3.1课堂案例绿野网站建设11.3.2改变属性,9.3改变属性,案例学习目标：学习改变网页元素属性的方法。案例知识要点：在【行为】面板中，单击【添加行为】按钮，在【动作】菜单中选择【改变属性】进行设置。素材所在位置：光盘/案例素材/ch9/课堂案例-绿野网站建设。案例效果如图9-23所示。,9.3.1课堂案例-改变属性,自动弹出浏览器窗口是网络浏览过程中经常会用到的特效。,11.4启用浏览器窗口,9.4.1课堂案例儿童摄影9.4.2打开浏览器窗口9.4.3转到URL调用,9.4启用浏览器窗口,案例学习目标：学习添加启用浏览器窗口行为。案例知识要点：在【行为】面板中，单击【添加行为】按钮，在【动作】菜单中选择添加浏览器行为。素材所在位置：光盘/案例素材/ch9/课堂案例-儿童摄影。案例效果如图9-37所示。,9.4.1课堂案例-儿童摄影,打开浏览器窗口行为主要用于控制在一个新窗口中打开指定网页。,9.4.2打开浏览器窗口,转到URL动作主要用于在当前窗口指定的框架下打开一个新网页，可通过一次操作更改多个框架的内容。,9.4.3转到URL调用,效果行为是视觉增强功能，通常在一段时间内修改网页元素的视觉效果。效果包括增大收缩、显示渐隐、晃动、挤压和滑动等效果，还可以组合两个或多个效果来创建复合特效。该行为可以应用于网页中几乎所有的元素,9.5效果,9.5.1课堂案例艺术画廊9.5.2Blind，Clip，Slide，Fold9.5.3Fade，Highlight，Drop9.5.4Puff，Scale9.5.5Bounce，Pulsate，Shake,9.5效果,案例学习目标：学习设置图像效果的方法。案例知识要点：在【行为】面板中，单击【添加行为】按钮，在【动作】菜单中选择【效果】进行设置。素材所在位置：光盘/案例素材/ch9/课堂案例-艺术走廊。案例效果如图9-43所示。,9.5.1课堂案例-艺术画廊,9.5.2Blind，Clip，Slide，Fold,为网页元素添加Blind，Clip，Slide，Fold效果行为，可使目标元素分别以置百叶窗，剪短，滑动，折叠等效果通过形状的变化实现在网页中的显示及隐藏,为网页元素添加Fade，Highlight，Drop效果行为，可使目标元素分别以渐隐，加亮，降低等效果通过亮度的变化在网页中部分或全部显示及隐藏。,9.5.3Fade，Highlight，Drop,为网页元素添加Puff，Scale效果行为，可使目标元素分别以膨胀，收缩等效果通过大小的变化实现在网页中的显示及隐藏,9.5.4Puff，Scale,为网页元素添加Bounce，Pulsate，Shake效果行为，可令目标元素在隐藏前或显示后分别执行跳动，悸动，摇动等效果。,9.5.5Bounce，Pulsate，Shake,调用JavaScript行为可以指定在事件发生时要执行的自定义函数或者JavaScript代码。可以自己书写这些JavaScript代码，也可以使用网络上免费发布的各种JavaScript库。,9.6JavaScript代码,9.7.1练习案例-甜品饮料吧9.7.2练习案例-校园信息中心9.7.3练习案例-我们爱猫网,9.7练习案例,案例练习目标：练习制作图像特效。案例操作要点：1在“热卖产品”下方，分别为图像“茉莉花香”，“冰火两重天”，“生命之绿”，“巨杯甜饮”添加显示-隐藏元素特效，实现鼠标经过这些图片时，在“巨杯甜饮”右侧显示其放大图片（即将apDiv插入到其右侧单元格中），放大图片分别为big1-1.jpg，big2-1.jpg，big3-1.jpg，big4-1.jpg。2在“特色产品”下方，从左向右，从上到下，分别插入图像a-1.jpgf-1.jpg，并添加交换图像特效，交换图片分别设为a.jpgf.jpg。素材所在位置：光盘/案例素材/ch11/练习案例-甜品饮料吧，效果如图11-52所示。,9.7.1练习案例-甜品饮料吧,案例练习目标：练习改变网页元素属性的方法。案例操作要点如下。1打开网页index.html，在空白处插入ID名称为banner的标签，设置#banner属性：宽度320px，高度820px，背景为图片sb2.jpg。2在其下方表格中间三个单元格中，分别插入三个图片dot.png，并为这些图片添加改变属性行为，图片事件为onMouseOver，改变banner背景属性。素材所在位置：光盘/案例素材/ch9/练习案例-校园信息中心，效果如图9-70所示。,9.7.2练习案例-校园信息中心,案例练习目标：练习制作效果特效。案例操作要点：1在网页中插入6幅图片，分别为其添加Blind，Fold，H