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

电子商务网页设计与制作

授课教案

学年第学期

学院(部)专业(学部)

【详情页面布局分析】

详情页面主要用于展示某一款汽车的各种信息，包括它的动力、油耗、价格等。在详情页面部分，通过多张大图的形式，分别展示汽车的各项信息，并以表格的形式实现汇总。整体的页面采用单列布局，如图12.2所示。

2

3.网页结构设计

【首页元素布局】

首页主要由div元素进行区域划分，用U1元素实现列表展示。

【首页样式添加】

通过CSS可以将元素以固定的样式显示，并且可以设置对应元素的显示和隐藏状态。

【详情页面元素布局】

详情页面元素主要用img元素实现大图的展示，使用span元素实现文字内容的展示。详情页面的头部导航栏与页脚的布局和首页的布局相同。

【详情页面样式添加】

通过CSS修饰详情页面的对应元素，让元素的展示效果更加丰富多彩。

4.首页交互效果设计

【下拉菜单自动显示效果】

下拉菜单位于整个网页顶端，用户进入网页后会自动显示，当用户向下滚动页面时，下拉菜单会隐藏。当页面滚动到网页顶端时下拉菜单也会自动显示。下拉菜单在隐藏和显示的同时，网页其他部分的透明度会发生

改变。下拉菜单的效果如图12.3所示。

【汽车信息列表切换效果】

下拉菜单由u1元素和Ii元素组成。在下拉菜单中，用户可以根据需求选择不同车型；在下拉菜单右侧会显示对应车型的具体信息。

【点击按钮关闭下拉菜单效果】

在下拉菜单的右上角有一个关闭按钮，用户可以点击该按钮关闭下拉菜单。【广告图片自动轮播效果】

广告图片自动轮播是网页中十分常见的一种展示效果。使用广告图片轮播效果可以在网页焦点位置有限的网页空间中展示多个内容。本案例中的广告图片会以间隔3s的频率进行自动轮播，效果如图12.4所示。

【点击列表切换广告图片效果】

在广告图片自动轮播过程中，如果用户对某个广告有兴趣，可以通过点击列表按钮的方式停止广告图片自动轮播，并可以点击对应的列表按钮对广告图片进行切换。

【图片放大和文字显示效果】

在四宫格展示模块中，当鼠标指针移动到图片上时，图片从中心向四周放大并且会被添加一个半透明遮罩，遮罩上会显示对应的文字内容，其效果如图12.5所示。

【按钮交互效果】

售后服务模块的按钮列表也实现了鼠标指针移动到按钮上对应按钮放大的交互效果，如图12.6所示。

«1后■务

5

6.详情页面交互效果设计

【滚动页面切换导航栏效果】

详情页面会提供两个导航栏，第一个导航栏是主导航栏，用于整个网页中的页面导航。第二个导航栏是页面导航栏，用于详情页面的位置导航。当页面位于网页顶端时，两个导航栏都会显示，当页面向下滚动时，主导航栏隐藏，页面导航栏会添加•个半透明遮罩并设置导航栏相对于浏览器窗口固定显示，其效果如图12.7所示。

【点击元素滚动页面效果】

对于详情页面中的页面导航栏，可以通过锚点定位的方式实现点击导航栏中的元素，让页面滚动到指定位置的效果。例如，点击“超级性能''菜单后，页面会自动滚动到“超级性能”模块，效果如图12.8所示。

［滚动页面显示相应元素效果】

在详情页面中，每个模块的标题和图片的解释文本内容默认都是隐藏的。

只有页面滚动到相应元素所在的位置时，元素才会以动画的形式展示。这样可以通过动态效果，引导用户读取对应的文本信息。其效果如图12.9所示。

【表格交互效果】

使用表格交互效果是为了更好地显示鼠标指针所指的对应数据。当鼠标指针指向数据表中的对应行之后，对应的行会被添加指定的背景色，其效果如图12.10所示。

B(J≡nrfS

7

8.汽车销售网页效果展示

首页的效果如图12.11所示。

♦WM■

A F4 2

4Sr口口

6

7.素养课堂

汽车销售网页需要展示的信息量十分巨大，但是网页的展示空间十分有限。因此，在整个网页布局中使用了化繁为简的方式，以大图划分信息,以精简的文字阐述产品信息。两者结合，一方面有强烈的视觉冲击，另一方面有高效的文字信息传递方式，从而带给用户非常好的体验。这种化繁为简的布局方式虽然看起来简单，但是离不开对大量信息的归纳总结以及对整体的把控。

在学习、生活中，面对大量的知识和信息，如何能快速地上手整理，将知识点之间的关系厘清，并以合理的方式表达，是个人处理事务能力的最直接体现。

在学习、生活中要注意提升这种处理事务的能力，要从基础知识开始积累，注意培养对知识自身规律的观察总结。将知识连成知识线，将知识线整理为知识树。从全局出发，做到快速提炼知识的“骨干内容”，并且可以将“骨干内容”进行更深一步地解释。

总而言之，合理、科学地归纳总结，一方面可以帮助我们更加科学地掌握知识点，另一方面还可以培养我们从大局出发快速处理大量信息的能力。

8.教学评价

【组织阶段考核与学生自评互评、展示考核结果】

本次课的考核注重过程评价：课上考核包括专业能力与职业素养两方面。

展示本次课《职业素养评价表》，组织学生自评、互评。

9.思考与练习

【疑难解答】

课前：

【教师布置调研任务】

调研主题：《分析如何编写汽车销售门户网页》

要求：以小组为单位，分析汽车销售门户网页的设计风格，布局方式以及要实现的动态交互效果，同时制作汇报PPT,提交到“微信群”。

【学生调研，教师线上指导】

学生采用线上调研的方式，开展调研。教师使用“微信群”对学生进行指导。

［教师对各组调研成果进行评价】

教师查阅学生调研结果PPT,对每个小组的PPT进行评价，记录评价成绩，并挑选出优秀作品。课后：

［学生实现滚动页面显示对应内容效果】

小组成员团结协作，使用jQuer滚动事件实现实现滚动到指定位置的显示指定元素效果。教师使用“微信群”对学生进行指导。

【学生实现鼠标和图片交互效果。】

学生通过之前所学的知识，实现鼠标指针位于图片上，图片以动画形式放大，鼠标指针离开图片，图片以动画形式缩小。要求图片从中心向四周放大。教师使用“微信群”对学生进行。

填表说明：1本页可续页；2.教学方法如：项目教学、案例分析、分组讨论、角色扮演、启发引导等;

3.教学手段如：课件演示、模型讲解、实物讲解、挂图讲解、视频讲解、网络课程等。