电子商务网页设计与制作 教案 项目八 设计与制作网页的交互特效（任务单）.doc

项目八 设计与制作网页的交互特效 项目编号：WYSJ-8 学 时： 学时 指导老师： 日 期： 项目简介 网页特效是网页中非常有魅力的部分，任何一个网站都少不了网页特效的制作，它是网页制作的一个重要组成部分。网页特效的制作不是很难的事情，只要具备一定的JavaScript 基础和CSS样式知识就可以在页面上实现丰富的动态特殊效果。本项目将介绍现今几个比较流行的网页特效制作实例（图片放大制作、广告图片自动轮换制作、动感导航条制作和浮动广告制作），以提高学习者的网页特效制作能力。 项目目标 1. 能力目标 学习完本项目后，学生应当能够依据公司项目要求完成页面的特效制作，包括： （1）利用CSS配置来完成页面交互的设计通 （2）利用Javascript来完成页面交互的设计 （3）通过网页交互特效来增加访问者的满意度 2. 知识目标 （1）CSS样式产生交互效果 （2）脚本语言及其运用 （3）JavaScript基本语法 3. 态度目标： （1）具有思考、探究问题的自觉性、主动性和创新性； （2）具备良好的沟通、表达能力； （3）具备良好的团队合作精神。 项目内容 任务一：制作图片放大效果 任务二：制作广告图片自动轮换 任务三：制作浮动广告 教学形式 1、学生两人一组进行讨论、分工及制作 2、各任务的实施（过程中教师进行分析指导，并讲解所涉及的相关知识） 3、小组交流汇报 任务一 “图片放大特效制作”任务单 任务编号：WYSJ-8-1 学 时： 实训地点： 日 期： 小组 姓名： 班级： 学号： 任务描述 本任务目标是利用CSS实现杭州网轩科技有限公司电子商务网站产品的图片放大特效功能。通常放在页面上的图片不能太大，为了让客户浏览方便，可以通过用户鼠标经过图片时，使该图片实现自动放大，制作效果如图所示。 三、任务分配（由学生填写） 四、任务实施（由学生填写） 五、任务小结 请写出在制作过程中遇到的问题及解决办法。 六、任务执行评价： （根据任务完成的质量、及时度、报告的编写质量给出成绩 （100制），作为本项目总成绩评定时的依据之一） 成绩： 　 日期：　　年　　月　　日 七、任务拓展： 1.动态时间显示 2. 鼠标跟随文字 任务二 “制作广告图片自动轮换”任务单 任务编号：WYSJ-8-2 学 时： 实训地点： 日 期： 小组 姓名： 班级： 学号： 任务描述 本任务目标是利用CSS实现杭州网轩科技有限公司电子商务网站首页的广告图片自动轮换特效功能。广告图片自动轮换是通过图片的自动切换展示出各种广告图片，如果要浏览某张图片，可以通过点击图片跳转到相应的页面，在这页面里除了浏览此图片之外还可以浏览其他相关信息，这是一种生动形象的广告形式，制作效果如图所示。 三、任务分配（由学生填写） 四、任务实施（由学生填写） 五、任务小结 请写出在制作过程中遇到的问题及解决办法。 六、任务执行评价： （根据任务完成的质量、及时度、报告的编写质量给出成绩 （100制），作为本项目总成绩评定时的依据之一） 成绩： 　 日期：　　年　　月　　日 七、任务拓展 1. 制作一组广告图片的自动轮换，图片每隔2秒就自动以不同的效果切换到下一张图片，与此同时数字按钮、背景也跟着相应而改变，如果想浏览任意一张图片，可以单击任何一个数字按钮即可；当想详细了解某张图片及其信息内容时，就可以直接单击图片或者图片下的标题文字，这时会打开有关图片及其信息的新页面。效果如下图所示： 广告图片过渡效果图 广告图片自动切换效果图 2.显示隐藏层的运用 任务三 “制作浮动广告”任务单 任务编号：WYSJ-8-3 学 时： 实训地点： 日 期： 小组 姓名： 班级： 学号： 一、任务描述 浮动广告是是当前网上最热门的浮动图片广告特效之一，给人耳目一新的感觉，其主要用于一些最新广告宣传，使网页时尚漂亮，并可以体现一种及时性。本任务目标是利用CSS实现杭州网轩科技有限公司电子商务网站首页的浮动广告特效功能。具体满足：广告在页面上按照一定的轨迹浮动，当鼠标移动到浮动广告上时，浮动广告停止运行，便于用户点击查看详细，制作效果如图所示。 二、任务分配（由学生填写） 三、任务实施（由学生填写） 四、任务小结 请写出在制作过程中遇到的问题及解决办法。 五、任务执行评价： （根据任务完成的质量、及时度、报告的编写质量给出成绩 （100制），作为本项目总