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

工程八设计与制作网页的交互特效学 时：学时日 期:工程编号：WYSJ-8 指导老师: 工程简介网页特效是网页中非常有魅力的局部，任何一个网站都少不了网页特效的制作，它是网页制作的 一个重要组成局部。网页特效的制作不是很难的事情，只要具备一定的JavaScript基础和CSS样式知 识就可以在页面上实现丰富的动态特殊效果。本工程将介绍现今几个比拟流行的网页特效制作实例 (图片放大制作、广告图片自动轮换制作、动感导航条制作和浮动广告制作)，以提高学习者的网页 特效制作能力。工程目标1.能力目标学习完本工程后，学生应当能够依据公司工程要求完成页面的特效制作，包括:(1)利用CSS配置来完成页面交互的设计通(2)利用Javascript来完成页面交互的设计(3)通过网页交互特效来增加访问者的满意度2.知识目标(1) CSS样式产生交互效果(2)脚本语言及其运用(3) JavaScript 基本语法3.态度目标：(1)具有思考、探究问题的自觉性、主动性和创新性；(2)具备良好的沟通、表达能力；(3)具备良好的团队合作精神。工程内容任务一：制作图片放大效果任务二：制作广告图片自动轮换任务三：制作浮动广告教学形式1、学生两人一组进行讨论、分工及制作2、各任务的实施（过程中教师进行分析指导，并讲解所涉及的相关知识）3、小组交流汇报任务一 “图片放大特效制作”任务单本任务目标是利用CSS实现杭州网轩科技电子商务网站产品的图片放大特效功能。通常放在页面上的图片不能太大，为了让客户浏览方便，可以通过用户鼠标经过图片时，使该图片实现 自动放大，制作效果如下图。产品拄荐中考体育培训管理系统中考体育培训管理系统培训管理系统登录"nr公安大队扣车管理系统-aste-浙江工业大学生物与环境工程学院浙江工业大学-化材学院在线测试系统五、任务小结请写出在制作过程中遇到的问题及解决方法。六、任务执行评价：（根据任务完成的质量、及时度、报告的编写质量给出成绩（100制），作为本工程总成绩评定时的依据之一）成绩：日期： 年 月 日七、任务拓展:1 .动态时间显示动态时间显示2011年12月14日星期三0:25:12.鼠标跟随文字任务二“制作广告图片自动轮换”任务单任务编号：WYSJ-8-2学 时：实训地点：日 期：小组姓名：班级：学号：二、 任务描述本任务目标是利用CSS实现杭州网轩科技电子商务网站首页的广告图片自 动轮换特效功能。广告图片自动轮换是通过图片的自动切换展示出各种广告图片，如果 要浏览某张图片，可以通过点击图片跳转到相应的页面，在这页面里除了浏览此图片之 外还可以浏览其他相关信息，这是一种生动形象的广告形式，制作效果如下图。首页公司相况新闻动杳数字校国信息政企客户股务网站建设网轩商城联系我们7血机讪儿扪三、任务分配（由学生填写）四、任务实施（由学生填与）五、任务小结请写出在制作过程中遇到的问题及解决方法。六、任务执行评价：（根据任务完成的质量、及时度、报告的编写质量给出成绩（100制），作为本工程总成绩评定时的依据之一）成绩：日期： 年 月 日七、任务拓展1 .制作一组广告图片的自动轮换，图片每隔2秒就自动以不同的效果切换到下一张图片, 与此同时数字按钮、背景也跟着相应而改变，如果想浏览任意一张图片，可以单击任何 一个数字按钮即可；当想详细了解某张图片及其信息内容时，就可以直接单击图片或者 图片下的标题文字，这时会翻开有关图片及其信息的新页面。效果如下列图所示：广告图片过渡效果图广告图片自动切换效果图.显示隐藏层的运用校园时讯通知公告丁 教学视窗一图片新闻3X4 rTLJTJ 21111 1 v JUL 只J H FK加强校政合作建立战略伙伴关系 我院领导节前慰问困难职工任务三“制作浮动广告”任务单任务三“制作浮动广告”任务单浮动广告是是当前网上最热门的浮动图片广告特效之一，给人耳目一新的感觉，其主要用于一些最新广告宣传，使网页时尚漂亮，并可以表达一种及时性。本任务目标是 利用CSS实现杭州网轩科技电子商务网站首页的浮动广告特效功能。具体满足: 广告在页面上按照一定的轨迹浮动，当鼠标移动到浮动广告上时，浮动广告停止运行, 便于用户点击查看详细，制作效果如下图。杭州网轩科技 Hangzhou WangXuan Technok*首页首页新闻动杳数字校园信息政企客户最务网站建设同轩商城联系我们我们的优势公司概况品质卓越极富竞争力的价格专业的技术支持灵活的解决方N二、任务分配（由学生填写）三、任务实施（由学生填写）四、任务小结请写出在制作过程中遇到的问题及解决方法。五、任务执行评价：（根据任务完成的质量、及时度、报告的编写质量给出成绩（100制），作为本工程总成绩评定时的依据之一）成绩：日期： 年 月 日六、任务拓展1 .浮动广告（两侧对联式）专业建设培养方案招生就业专业建设培养方案招生就业设施资源学生天地软件技术信息管理 C语言程序设讨200& 06.05 C-语台程序设计( 200& 03.28J计宜机专业英语200& 06.03计宣机电路即出200&06,09计苴机组成原理(200ag09 数懒的2008.05.16教件M试200a 05.29。专业公告 2005级毕业生学瘠处理公力关于填午节放11ttli1M关他叱蝴习材崛耽计*机应丽A小。专业新闻J燧始评出2008年十大16（3律关注创业公司HOT& AMD Fuho浏登器：一半是GPU 一半是CPU HOT«阳d巴塞罗印处理器开始出发mie英特尔下一代版?芯片俎X38超瘦未曝光&雄基百科创始人宣祁将推开源软件受索O加巴塞罗脑理器开始出货H华谀1S出全库言软GPS笔记本U3SB笔记本用视16元电问世高达585美元。就业指导»测试：你是母段职场性格 »阿洛求IR八大技巧大用烧 »大学生求职维权怠识。友情链接、网址-；eww h，o123 M 彘因鼠除沟Q小L*卤71a岳*2 .综合效果运用欢迎光临91bjpbn ，有问题请与我们联系！：）zme人不要求你天天来访，只希望你看了有所想、有所思，有 空再留下你的回音，这就是对我最大的鼓舞。