电子商务网页制作-项目9

DW项目九电子商务网页制作网页特效的使用•学习为网页元素添加行为•学习在网页中插入网页特效项目目标试一试——有趣的网页特效第一步：打开IE浏览器，在地址栏中输入，将打开北京银行官方网站首页。试一试——有趣的网页特效第一步：打开IE浏览器，在地址栏中输入，将打开北京银行官方网站首页。试一试——有趣的网页特效第二步：观察北京银行网站首页具有的特效。顶部显示了当前的日期；“京行公告”栏采用了滚动文字效果；网页两侧使用了层广告效果。第三步：在IE浏览器地址栏中输入，将打开华夏银行官方网站首页，在打开首页的同时，会自动弹出下图所示的广告窗口，这也是网页特效的一种。试一试——有趣的网页特效很多网站都会加入若干网页特效以增强网站的动态效果，此外还可以制作网页广告，提高网页的宣传效果。网页特效的种类很多，可根据需要选用，但是网页特效的使用不宜过杂，要有针对性，不能引起浏览者的反感。活动小结行为概述行为是在某一对象上因为某一事件而触发某一动作的综合描述，它是被用来动态响应用户操作、改变当前页面的效果或是执行特定任务的一种方法。行为是由事件、对象和动作构成的。使用行为，我们可以完成打开新浏览器窗口、改变对象属性、制作文字滚动等效果。行为是由事件和触发该事件的动作组合而成的。在“行为”面板中，通过指定一个动作然后指定触发该动作的事件，可将行为添加到网页中。行为概述•事件：事件是浏览器生成的消息，指示网页的访问者执行了某种操作。比如，当访问者将鼠标指针移动到某个链接上时，浏览器为该链接生成一个onMouseOver事件；然后浏览器查看是否存在当为该链接生成该事件时浏览器应该调用的JavaScript代码。•动作：动作是由预先编写的JavaScript代码组成的，这些代码可以执行特定的任务，比如打开浏览器窗口、显示或隐藏层、播放声音或停止Shockwave影片。单个事件可以触发多个不同的动作，可以指定这些动作发生的顺序。行为的触发事件行为的产生要通过事件来触发，常见的事件如鼠标单击、页面加载、鼠标移入、按键等等。打开“窗口”菜单，选择“行为”命令，将在面板组中打开“行为”面板：onBlur：当指定元素失去焦点时产生的事件。onClick：当用户单击指定元素时产生的事件。onDbClick：当用户单双指定元素时产生的事件。onError：当页面或图像载入，发生错误时产生的事件。onFocus：当指定元素获得焦点时产生的事件。onKeyDown：当用户按下任意键时产生的事件。行为的触发事件onKeyPress：当用户按下任意键并释放该键时产生的事件。onKeyUp：当用户释放按下的任意键时产生的事件。onLoad：当图像或网页载入完毕时产生的事件。onMouseDown：当用户在网页的某元素上按下鼠标时产生的事件。onMouseMove：当鼠标移动时产生的事件。onMouseOut：当鼠标离开某元素范围时产生的事件。onMouseOver：当鼠标移动到某元素范围内时产生的事件onMouseUp：当按下的鼠标被松开时产生的事件。onUnLoad：当页面卸载时产生的事件。可添加行为的常见网页元素选取网页元素可通过单击该元素或通过相应标签进行选取。这些不同的网页元素可以产生不同的事件。可附加行为的常见对象包括：1．A：超链接可以产生的事件有：onClick、onDbClick、onKeyDown、onKeyPress、onKeyUp、onMouseDown、onMouseOut、onMouseOver、onMouseUp。2．AREA：图像的热点区域可以产生的事件有：onClick、onDbClick、onMouseOut、onMouseOver。3．BODY：HTML文件的正文部分可以产生的事件有：onBlur、onError、onFocus、onLoad、onUnLoad。4．FORM：表单对象可以产生的事件有：onSubmit、onReset。5．FRAMESET：框架集可以产生的事件有：onBlur、onFocus、onLoad、onUnLoad。可添加行为的常见网页元素6．IMG：图像可以产生的事件有：onError、onLoad。7．INPUT：按钮、复选框、文件域、密码域、单选按钮、提交按钮或重置按钮等可以产生的事件有：onBlur、onClick、onFocus、onMouseDown、onMouseUp8．SELECT：下拉菜单可以产生的事件有：onBlur、onFocus。9．TEXTAREA：文本区域可以产生的事件有：onBlur、onFocus、onKeyDown、onKeyPress、onKeyUp。在实际应用时，可根据需要选择元素的事件来触发行为。DreamweaverCS5的行为应用1．翻转图像翻转图像可以增添美观而专业的装饰效果，是网页设计的常用手法，通过使用“交换图像”和“交换图像恢复”行为，很容易实现翻转图像的效果。（1）选中一个图像，打开“行为”面板，单击面板中的“+”按钮，打开下拉菜单，选择其中的“交换图像”命令，将打开“交换图像”对话框：DreamweaverCS5的行为应用（2）在“设定原始档为”文本框中输入要交换的图像的地址，或者单击“浏览”按钮查找并选择图像文件。（3）选中“预先载入图像”复选框。（4）如果选中“鼠标滑开时恢复图像”复选框，则鼠标移到图片上时，图片翻转；鼠标移走后，图片还原。（5）单击“确定”按钮完成此行为的设置。这时可以看见，插入的动作已经出现在“行为”面板中：DreamweaverCS5的行为应用2．弹出信息“弹出信息”动作可以设置弹出消息框显示指定的消息。可以给某个按钮或链接设置单击事件弹出信息，也可以设置网页加载时弹出信息。（1）选择某个按钮或链接，在行为面板下拉菜单中选择“弹出信息”，将打开“弹出信息”对话框：（2）在“消息”文本框中输入信息内容，单击“确定”完成弹出信息行为的设置。DreamweaverCS5的行为应用3．打开浏览器窗口打开浏览器窗口是网上广告投放的一种常见形式。使用行为可以轻松实现这个动作。（1）在行为面板下拉菜单中选择“打开浏览器窗口”，将打开“打开浏览器窗口”对话框：（2）在“要显示的URL”文本框中输入要打开的文件的地址，或单击“浏览”按钮查找并选择该文件。在“窗口宽度”和“窗口高度”中设定窗口的尺寸。在属性一栏中，选择相应的选项，以控制打开的新窗口的外观。（3）单击“确定”完成此行为的设置。（4）如需要更改触发动作的事件可参考前面的说明。DreamweaverCS5的行为应用4．改变属性可以设置某种鼠标事件来改变对象的属性。比如鼠标移过时改变对象的颜色，或者改变对象的大小等等。（1）选择要改变属性的对象，如一个链接或是一个图像，在属性面板中为其设置一个ID名。（2）在行为面板下拉菜单中选择“改变属性”，将打开“改变属性”对话框（3）选择“元素类型”和“元素ID”，在“属性”中选择要改变的属性类型，在“新的值”文本框中输入改变后的属性值。（4）单击“确定”完成此行为的设置。（5）如需要更改触发动作的事件可参考前面的说明。DreamweaverCS5的行为应用5．显示/隐藏元素显示和隐藏元素可以实现网页对象的出现的隐藏，可以用于制作网页小广告，点击关闭将小广告隐藏，也可以用于制作层提示效果等。如果要制作一个隐藏对象的效果，点击一个按钮将一幅广告图片隐藏，可按如下操作进行：（1）选择要隐藏的图片，在属性面板中为其设置一个ID名。（2）选择触发隐藏动作的按钮，在行为面板下拉菜单中选择“显示/隐藏元素”，将打开“显示/隐藏元素”对话框（3）选择图片的ID名，点击“隐藏”按钮后单击“确定”。（4）如需要更改触发动作的事件可参考前面的说明。网页特效概述1.什么是网页特效网页特效就是网页的特殊效果，是一段编写好的脚本程序，应用它可以让网页变得形式多样，更加吸引人，比如弹出窗口、漂浮广告等。2.网页特效的分类常用的网页特效有很多，根据其作用的对象可分为以下几类：文本特效类、图形图像类、鼠标事件类、网页特效类、背景特效类、时间日期类、按钮特效类、状态栏特效类、代码生成类、等等。网页特效概述3.网页特效代码的应用网页特效代码的应用十分简单，只要根据特效说明，把这些代码复制、粘贴到网页源代码的相应位置中，保存文件，再在浏览器中打开，就能够看到效果了。在网页源代码中插入特效代码有两种方式：（1）在Dreamweaver中应用特效代码。用Dreamweaver打开要应用特效的网页，切换到代码视图，将特效代码插入到指定位置，然后做相应的调试即可。（2）直接使用文本编辑器。直接用文本编辑器（如记事本）打开网页文件，将特效代码插入到指定位置，然后做相应的调试即可。网页特效实例1．图片逐渐显现脚本说明：第一步：把如下代码加入body区域中：SCRIPTFOR=windowEVENT=onLoadLANGUAGE=vbscriptimage1.filters.item(0).apply()image1.filters.item(0).transition=12image1.Style.visibility=image1.filters(0).play(2.0)/SCRIPT第二步：把如下代码加入body区域中：imgsrc=图片的URLid=image1style=visibility:hidden;FILTER:revealTrans(Duration=4.0,Transition=23);网页特效实例2．显示日期和时钟脚本说明：第一步：把如下代码加入body区域中divid=shijian/div第二步：把如下代码加入body区域中：scripttype=text/javascriptfunctionshowtime(){vartoday=newDate();varnian=today.getFullYear();varyue=today.getMonth()+1;varri=today.getDate();varday=today.getDay;varshi=today.getHours();varfen=today.getMinutes();varmiao=today.getSeconds();if(today.getDay()==0)day=星期日;if(today.getDay()==1)day=星期一;if(today.getDay()==2)day=星期二;if(today.getDay()==3)day=星期三;if(today.getDay()==4)day=星期四;if(today.getDay()==5)day=星期五;if(today.getDay()==6)day=星期六;if(shi10)shi=0+shi;if(fen10)fen=0+fen;if(miao10)miao=0+miao;document.getElementById(shijian).innerHTML=h2今天是：+nian+年+yue+月+ri+日+day+br+现在时刻：+shi+:+fen+:+miao+/h2;setTimeout(showtime,1000);}/script网页特效实例第三步：在body标签内加入代码onload=showtime()：bodyonload=showtime()项目总结本项目介绍了行为和网页特效在网页中应用。行为是在某一对象上因为某一事件而触发的某一动作的综合描述，它是被用来动态响应用户操作、改变当前页面效果或是执行特定任务的一种方法。网页中的很多动态效果都可以通过行为来实现，DreamweaverCS5附带了很多内置的行为，即使是不懂JavaScript的入门者也