电子商务网页设计与制作
授课教案
学年第学期
学院(部)专业(学部)
课程名称
电子商务网页设计与制作
任课教师
课内形式
理论教学口课内实践口理实一体0习题复习口考核评价口其他活动口
学习量安排
课内：
课外形式
调查分析团小组研讨口实践任务团理论探究口考核评价口汇报展示口其他活动团
课外：
序号
11
授课日期
月日
月日
月日
月日
授课班级
课内教学内容：
第12章综合实训：开发汽车销售门户网页
课外学习任务：
(1)课前：
以小组为单位，讨论汽车销售门户网页的设计，交互方式等相关知识，通过查询了解当前流行的汽车销售门户网页布局风格并以PPT的形式记录下来。
(2)课后：
①实现元素滚动到指定位置的显示效果。
②实现鼠标指针位于图片上，图片以动画形式放大，鼠标指针离开图片，图片以动画形式缩小。要求图片从中心向四周放大。
教学目标：
知识目标
•掌握HTM+CSS布局。
•掌握jQuery页面滚动事件。
•掌握jQuery常用方法。
能力目标
•能够独立实现汽车销售门户静态网页的布局；
•能够独立实现汽车销售门户网页各项动态交互效果。
素质目标
•较强的专业知识和自学能力；
•丰富知识结构，提升专业知识；
•掌握HTM1+CSS+JavaScript和JQuery框架动态网页编写技能，理解并应用专业知识。
jquery自动轮播图代码重点难点及解决方法：
(1)重点：汽车销售门户静态网页布局
解决方法：通过知识点讲解+课堂在线展示相结合的方法，教师讲解通过HTM1+CSS实现汽车销售门户网页的页面布局，引导学生积极思考，掌握相应知识；同时通过课堂在线展示,使学生可以更直观的了解网页编写过程中可能遇到的问题以及解决方法;培养学生的思维能力和分析问题解决问题的能力。
(2)难点：汽车销售门户网页的动态交互效果
解决方法：通过代码讲解+在线演示的的方式教学，细致讲解网页中各种动态效果是如何通过JavaScript代码和jQuery框架实现的。帮助学生掌握JavaScript代码和JQuery框架对网页动态交互效果的实现方法和技巧。从实用的角度帮助学生提高专业知识。
课内教学授课地点：
教学媒体：微课、PPT课件、网页图片、相关教学视频等。
设备及材料：多媒体计算机、多媒体教学广播软件、网页素材图片、教学载体源文件等。
其它资源：与本次课相关的专业技术论文电子版。
学习效果评价方式：
对理论知识学习效果评价：采用课堂提问、课后习题和查阅技术论文研读笔记的方式；对技能的评价：教师对学生上交网页作品按制作要求进行综合性评价；
对职业素养的评价：采用学生自评、小组内评价和教师评价相结合的方式。
课后小结：
填表说明：I.序号，指该课程授课的顺序号，应与授课计划一致；2.授课形式在相应白《选项打“V”。
课内教学内容及过程
时间分配
方法
及手段
1网页分析
【首页布局分析】
首页主要用于展示汽车品牌下的各种汽车信息、汽车品牌推出的活动和新款汽车。在首页部分，通过下拉菜单的模式实现各种类型汽车的信息展示，然后通过图片轮播的效果实现新款汽车的展示，最后通过四宫格的方式展示最新推出的品牌活动、售后服务及网站信息。整体的页面采用单列布局，如图12.1所示。
—

【详情页面布局分析】
详情页面主要用于展示某一款汽车的各种信息，包括它的动力、油耗、价格等。在详情页面部分，通过多张大图的形式，分别展示汽车的各项信息，并以表格的形式实现汇总。整体的页面采用单列布局，如图12.2所示。
2
3.网页结构设计
【首页元素布局】
首页主要由div元素进行区域划分，用U1元素实现列表展示。
【首页样式添加】
通过CSS可以将元素以固定的样式显示，并且可以设置对应元素的显示和隐藏状态。
【详情页面元素布局】
详情页面元素主要用img元素实现大图的展示，使用span元素实现文字内容的展示。详情页面的头部导航栏与页脚的布局和首页的布局相同。
【详情页面样式添加】
通过CSS修饰详情页面的对应元素，让元素的展示效果更加丰富多彩。
4.首页交互效果设计
【下拉菜单自动显示效果】
下拉菜单位于整个网页顶端，用户进入网页后会自动显示，当用户向下滚动页面时，下拉菜单会隐藏。当页面滚动到网页顶端时下拉菜单也会自动显示。下拉菜单在隐藏和显示的同时，网页其他部分的透明度会发生
改变。下拉菜单的效果如图12.3所示。
【汽车信息列表切换效果】
下拉菜单由u1元素和Ii元素组成。在下拉菜单中，用户可以根据需求选择不同车型；在下拉菜单右侧会显示对应车型的具体信息。
【点击按钮关闭下拉菜单效果】
在下拉菜单的右上角有一个关闭按钮，用户可以点击该按钮关闭下拉菜单。
【广告图片自动轮播效果】
广告图片自动轮播是网页中十分常见的一种展示效果。使用广告图片轮播效果可以在网页焦点位置有限的网页空间中展示多个内容。本案例中的广告图片会以间隔3s的频率进行自动轮播，效果如图12.4所示。
【点击列表切换广告图片效果】
在广告图片自动轮播过程中，如果用户对某个广告有兴趣，可以通过点击列表按钮的方式停止广告图片自动轮播，并可以点击对应的列表按钮对广告图片进行切换。
【图片放大和文字显示效果】
在四宫格展示模块中，当鼠标指针移动到图片上时，图片从中心向四周放大并且会被添加一个半透明遮罩，遮罩上会显示对应的文字内容，其效果如图12.5所示。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。