网页设计与制作——JavaScript+jQuery标准教程 教案 第12章 综合实训：开发汽车销售.docx

《网页设计与制作——JavaScript+jQuery标准教程 教案 第12章 综合实训：开发汽车销售.docx》由会员分享，可在线阅读，更多相关《网页设计与制作——JavaScript+jQuery标准教程 教案 第12章 综合实训：开发汽车销售.docx（9页珍藏版）》请在第一文库网上搜索。

1、电子商务网页设计与制作授课教案学年第学期学院(部)专业(学部)课程名称电子商务网页设计与制作任课教师课内形式理论教学口课内实践口理实一体0习题复习口考核评价口其他活动口学习量安排课内：课外形式调查分析团小组研讨口实践任务团理论探究口考核评价口汇报展示口其他活动团课外：序号11授课日期月日月日月日月日授课班级课内教学内容：第12章综合实训：开发汽车销售门户网页课外学习任务：(1)课前：以小组为单位，讨论汽车销售门户网页的设计，交互方式等相关知识，通过查询了解当前流行的汽车销售门户网页布局风格并以PPT的形式记录下来。(2)课后：实现元素滚动到指定位置的显示效果。实现鼠标指针位于图片上，图片以动画

2、形式放大，鼠标指针离开图片，图片以动画形式缩小。要求图片从中心向四周放大。教学目标：知识目标 掌握HTM+CSS布局。 掌握jQuery页面滚动事件。 掌握jQuery常用方法。能力目标 能够独立实现汽车销售门户静态网页的布局； 能够独立实现汽车销售门户网页各项动态交互效果。素质目标 较强的专业知识和自学能力； 丰富知识结构，提升专业知识； 掌握HTM1+CSS+JavaScript和JQuery框架动态网页编写技能，理解并应用专业知识。重点难点及解决方法：(1)重点：汽车销售门户静态网页布局解决方法：通过知识点讲解+课堂在线展示相结合的方法，教师讲解通过HTM1+CSS实现汽车销售门户网页的

3、页面布局，引导学生积极思考，掌握相应知识；同时通过课堂在线展示,使学生可以更直观的了解网页编写过程中可能遇到的问题以及解决方法;培养学生的思维能力和分析问题解决问题的能力。(2)难点：汽车销售门户网页的动态交互效果解决方法：通过代码讲解+在线演示的的方式教学，细致讲解网页中各种动态效果是如何通过JavaScript代码和jQuery框架实现的。帮助学生掌握JavaScript代码和JQuery框架对网页动态交互效果的实现方法和技巧。从实用的角度帮助学生提高专业知识。课内教学授课地点：教学媒体：微课、PPT课件、网页图片、相关教学视频等。设备及材料：多媒体计算机、多媒体教学广播软件、网页素材图片

4、、教学载体源文件等。其它资源：与本次课相关的专业技术论文电子版。学习效果评价方式：对理论知识学习效果评价：采用课堂提问、课后习题和查阅技术论文研读笔记的方式；对技能的评价：教师对学生上交网页作品按制作要求进行综合性评价；对职业素养的评价：采用学生自评、小组内评价和教师评价相结合的方式。课后小结：填表说明：I.序号，指该课程授课的顺序号，应与授课计划一致；2.授课形式在相应白选项打“V”。课内教学内容及过程时间分配方法及手段1网页分析【首页布局分析】首页主要用于展示汽车品牌下的各种汽车信息、汽车品牌推出的活动和新款汽车。在首页部分，通过下拉菜单的模式实现各种类型汽车的信息展示，然后通过图片轮播的

5、效果实现新款汽车的展示，最后通过四宫格的方式展示最新推出的品牌活动、售后服务及网站信息。整体的页面采用单列布局，如图12.1所示。【详情页面布局分析】详情页面主要用于展示某一款汽车的各种信息，包括它的动力、油耗、价格等。在详情页面部分，通过多张大图的形式，分别展示汽车的各项信息，并以表格的形式实现汇总。整体的页面采用单列布局，如图12.2所示。23 .网页结构设计【首页元素布局】首页主要由div元素进行区域划分，用U1元素实现列表展示。【首页样式添加】通过CSS可以将元素以固定的样式显示，并且可以设置对应元素的显示和隐藏状态。【详情页面元素布局】详情页面元素主要用img元素实现大图的展示，使用

6、span元素实现文字内容的展示。详情页面的头部导航栏与页脚的布局和首页的布局相同。【详情页面样式添加】通过CSS修饰详情页面的对应元素，让元素的展示效果更加丰富多彩。4 .首页交互效果设计【下拉菜单自动显示效果】下拉菜单位于整个网页顶端，用户进入网页后会自动显示，当用户向下滚动页面时，下拉菜单会隐藏。当页面滚动到网页顶端时下拉菜单也会自动显示。下拉菜单在隐藏和显示的同时，网页其他部分的透明度会发生改变。下拉菜单的效果如图12.3所示。【汽车信息列表切换效果】下拉菜单由u1元素和Ii元素组成。在下拉菜单中，用户可以根据需求选择不同车型；在下拉菜单右侧会显示对应车型的具体信息。【点击按钮关闭下拉菜

7、单效果】在下拉菜单的右上角有一个关闭按钮，用户可以点击该按钮关闭下拉菜单。【广告图片自动轮播效果】广告图片自动轮播是网页中十分常见的一种展示效果。使用广告图片轮播效果可以在网页焦点位置有限的网页空间中展示多个内容。本案例中的广告图片会以间隔3s的频率进行自动轮播，效果如图12.4所示。【点击列表切换广告图片效果】在广告图片自动轮播过程中，如果用户对某个广告有兴趣，可以通过点击列表按钮的方式停止广告图片自动轮播，并可以点击对应的列表按钮对广告图片进行切换。【图片放大和文字显示效果】在四宫格展示模块中，当鼠标指针移动到图片上时，图片从中心向四周放大并且会被添加一个半透明遮罩，遮罩上会显示对应的文字

8、内容，其效果如图12.5所示。【按钮交互效果】售后服务模块的按钮列表也实现了鼠标指针移动到按钮上对应按钮放大的交互效果，如图12.6所示。1后务56 .详情页面交互效果设计【滚动页面切换导航栏效果】详情页面会提供两个导航栏，第一个导航栏是主导航栏，用于整个网页中的页面导航。第二个导航栏是页面导航栏，用于详情页面的位置导航。当页面位于网页顶端时，两个导航栏都会显示，当页面向下滚动时，主导航栏隐藏，页面导航栏会添加个半透明遮罩并设置导航栏相对于浏览器窗口固定显示，其效果如图12.7所示。【点击元素滚动页面效果】对于详情页面中的页面导航栏，可以通过锚点定位的方式实现点击导航栏中的元素，让页面滚动到指

9、定位置的效果。例如，点击“超级性能菜单后，页面会自动滚动到“超级性能”模块，效果如图12.8所示。滚动页面显示相应元素效果】在详情页面中，每个模块的标题和图片的解释文本内容默认都是隐藏的。只有页面滚动到相应元素所在的位置时，元素才会以动画的形式展示。这样可以通过动态效果，引导用户读取对应的文本信息。其效果如图12.9所示。【表格交互效果】使用表格交互效果是为了更好地显示鼠标指针所指的对应数据。当鼠标指针指向数据表中的对应行之后，对应的行会被添加指定的背景色，其效果如图12.10所示。B(JnrfS78 .汽车销售网页效果展示首页的效果如图12.11所示。WMAF424Sr口口67 .素养课堂汽

10、车销售网页需要展示的信息量十分巨大，但是网页的展示空间十分有限。因此，在整个网页布局中使用了化繁为简的方式，以大图划分信息,以精简的文字阐述产品信息。两者结合，一方面有强烈的视觉冲击，另一方面有高效的文字信息传递方式，从而带给用户非常好的体验。这种化繁为简的布局方式虽然看起来简单，但是离不开对大量信息的归纳总结以及对整体的把控。在学习、生活中，面对大量的知识和信息，如何能快速地上手整理，将知识点之间的关系厘清，并以合理的方式表达，是个人处理事务能力的最直接体现。在学习、生活中要注意提升这种处理事务的能力，要从基础知识开始积累，注意培养对知识自身规律的观察总结。将知识连成知识线，将知识线整理为知

11、识树。从全局出发，做到快速提炼知识的“骨干内容”，并且可以将“骨干内容”进行更深一步地解释。总而言之，合理、科学地归纳总结，一方面可以帮助我们更加科学地掌握知识点，另一方面还可以培养我们从大局出发快速处理大量信息的能力。8 .教学评价【组织阶段考核与学生自评互评、展示考核结果】本次课的考核注重过程评价：课上考核包括专业能力与职业素养两方面。展示本次课职业素养评价表，组织学生自评、互评。9 .思考与练习【疑难解答】如何判断元素处于浏览器可视化窗口范围内？为什么在滚动页面显示相应元素时使用fadeTo()方法而不用ShOWo方法？【课后习题】1 .实现元素滚动到指定位置的显示效果,2 .实现鼠标指

12、针位于图片上，图片以动画形式放大，鼠标指针离开图片，图片以动画形式缩小。要求图片从中心向四周放大。8.板书设计一、 网页分析二、 网页结构设计三、首页交互效果设计四、详情页面交互效果设计五、汽车销售网页效果展示六、素养课堂七、教学评价八、思考与练习课外学习任务及学习指导课前：【教师布置调研任务】调研主题：分析如何编写汽车销售门户网页要求：以小组为单位，分析汽车销售门户网页的设计风格，布局方式以及要实现的动态交互效果，同时制作汇报PPT,提交到“微信群”。【学生调研，教师线上指导】学生采用线上调研的方式，开展调研。教师使用“微信群”对学生进行指导。教师对各组调研成果进行评价】教师查阅学生调研结果PPT,对每个小组的PPT进行评价，记录评价成绩，并挑选出优秀作品。课后：学生实现滚动页面显示对应内容效果】小组成员团结协作，使用jQuer滚动事件实现实现滚动到指定位置的显示指定元素效果。教师使用“微信群”对学生进行指导。【学生实现鼠标和图片交互效果。】学生通过之前所学的知识，实现鼠标指针位于图片上，图片以动画形式放大，鼠标指针离开图片，图片以动画形式缩小。要求图片从中心向四周放大。教师使用“微信群”对学生进行。填表说明：1本页可续页；2.教学方法如：项目教学、案例分析、分组讨论、角色扮演、启发引导等;3.教学手段如：课件演示、模型讲解、实物讲解、挂图讲解、视频讲解、网络课程等。