网页设计与制作——JavaScript+jQuery标准教程 教案 第11章 综合实训：开发网络相册.docx

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

1、电子商务网页设计与制作授课教案学年第学期学院(部)专业(学部)课程名称电子商务网页设计与制作任课教师课内形式理论教学课内实践口理实一体0习题复习口考核评价其他活动口学习量安排课内：课外形式调查分析团小组研讨口实践任务团理论探究口考核评价汇报展示口其他活动团课外：序号11授课日期月日月日月日月日授课班级课内教学内容：第11章综合实训：开发网络相册课外学习任务：(1)课前：以小组为单位，讨论网络相册的设计，交互方式等相关知识，通过查询了解当前流行的网络相册布局风格并以PPT的形式记录下来。(2)课后：实现图片轮播广告框效果。要求有三张图片进行轮播，每次展示一张图片。实现商品展示框效果。教学目标：知

2、识目标 掌握网络相册的设计理念 掌握图片轮播效果的实现 掌握网络相册的缩略图的实现 掌握相册切换和相片局部放大的实现能力目标 能够独立实现静态网页的布局； 能够独立实现网络相册各项动态交互效果。素质目标 较强的专业知识和自学能力； 丰富知识结构，提升专业知识； 掌握HTM1+CSS+JavaScript和jQuery框架动态网页编写技能，理解并应用专业知识。重点难点及解决方法：(1)重点：网络相册的页面布局解决方法：通过知识点讲解+课堂在线展示相结合的方法，教师讲解通过HTM1+CSS实现网页元素的页面布局，引导学生积极思考,掌握相应知识；同时通过课堂在线展示，使学生可以更直观的了解网页编写过

3、程中可能遇到的问题以及解决方法;培养学生的思维能力和分析问题解决问题的能力。(2)难点：网络相册的动态交互效果解决方法：通过代码讲解+在线演示的的方式教学，细致讲解网页中各种动态效果是如何通过JavaScript代码和jQuery框架实现的。帮助学生掌握JavaScript代码和jQuery框架对网页动态交互效果的实现方法和技巧。从实用的角度帮助学生提高专业知识。课内教学授课地点：教学媒体：微课、PPT课件、网页图片、相关教学视频等。设备及材料：多媒体计算机、多媒体教学广播软件、网页素材图片、教学载体源文件等。其它资源：与本次课相关的专业技术论文电子版。学习效果评价方式：对理论知识学习效果评价

4、：采用课堂提问、课后习题和查阅技术论文研读笔记的方式；对技能的评价：教师对学生上交网页作品按制作要求进行综合性评价；对职业素养的评价：采用学生自评、小组内评价和教师评价相结合的方式。课后小结：填表说明：1.序号，指该课程授课的顺序号，应与授课计划一致；2.授课形式在相应白选项打“J课内教学内容及过程时间分配方法及手段1.分析页面【设计分析】网络相册的主要功能是以相册的形式展示相片。其基本布局分为3块：网页左侧为相册列表，右上方为标准相片展示框，右下方为相片缩略图列表。本案例中的相册基本布局如图11.1所示。相册列表标准相片展示框相片缩略图列表【功能分析】在网络相册中，用户点击相册可展开对应相片

5、的缩略图。通过点击按钮的方式，缩略图可以左右滚动。点击缩略图之后，对应相片会显示为标准大小。当鼠标指针位于标准相片上时，用户可以放大相片局部，查看细节。网络相册功能需要通过以下几步实现。1 .准备资源本案例中需要用到4种尺寸的相片。其中，相册封面需要4张不同的相片。相册中的每张相片都需要缩略、标准和特大3种尺寸。2 .添加静态页面静态页面用于添加相册布局时需要的标签、文本元素和图片元素。3 .添加CSS样式CSS样式用于为网页元素添加指定的样式，包括元素的位置、外观等。4 .添加交互代码交互代码通过JavaScriptjQuery核心库、jQueryUI插件以及jQuery第三方插件构建。可通

6、过交互代码实现相册的排序、切换、打开，以及相片的移动、放大等效果。2.模块拆分【相册列表】整个网络相册的全部元素都默认居中显示。相册列表位于网络相册左侧，由一个UI元素和多个Ii元素组成，每个Ii元素中展示一个相册，效果如图11.2所示。相册列表中要使用到div元素作为容器，使用U1元素和Ii元素实现相册排列显示。相册【标准相片展示框】标准相片展示框位于网络相册的右上方，用于展示标准尺寸的相片，效果如图11.3所示。标准相片展示框由div元素、a元素和img元素组成。【相片缩略图列表】相片缩略图列表用于展示每个相册中存放的相片，本案例中每个相册中存放6张相片，在页面中直接显示4张，其余两张滚动

7、显示，效果如图11.4所示。34 .交互效果设计【相册排序效果】通过拖动鼠标为相册排序需要使用jQuer/插件中的SOrtabIe插件。本案例会为相册列表引入该插件，让相册列表中的每一个相册都可以通过拖动鼠标来进行排序，效果如图11.5所示。【相片轮播效果】相片缩略图列表由6张相片组成，其中两张相片处于隐藏状态，所以需要通过向左滚动和向右滚动的方式来展示缩略图中的所有相片，也就是实现相片轮播效果。实现相片轮播效果需要实现的交互效果包括按钮交互效果、点击向左按钮后相片缩略图列表向左滚动、点击向右按钮后相片缩略图列表向左滚动。当相片缩略图列表位于最左端时，向左按钮无效；当相片缩略图列表位于最右端时

8、，向右按钮无效。相片轮播效果如图I16所示。【切换缩略图效果】切换缩略图效果是指，当用户点击左侧的相册后，相片缩略图列表中的相片自动切换为对应相册中的相片，其效果如图11.7所示。【相片切换和局部放大效果】实现相片切换和局部放大效果需要使用到EaSyZOOm插件。使用该插件可以将指定的相片在特定位置进行切换，并且支持使用鼠标对相片的细节进行放大，效果如图11.8所示。56 .网络相册效果展示网络相册整体要实现相册排序、相片轮播、切换缩略图，以及相片切换和局部放大效果。在浏览器中，网络相册的效果如图I19所示。789 .素养课堂人们的工作、学习以及生活都受到了网络的影响。面对网络的出现，有些人认

9、为利大于弊，有些人则认为弊大于利。其实任何事物都是存在两面性的，所以要辩证地看待网络的出现。对于网络要从两个方面看待，利用网络我们可以十分便利地获取资料，实现远程信息交流。利用网络人们获取信息和发送信息更加方便和高效，这将直接提高社会生产力，提高人们的生活水平。但是，网络在带来便利的同时，也会产生很多负面影响。例如，网络诈骗、网络暴力、过量的信息和不正确的信息容易让人们产生价值观的扭曲等。接受网络信息的主体是人，所以在当今社会已经无法远离网络的前提下，要注意对网络信息进行科学辨别，学习网络信息中正确的、有效的内容，摒弃网络信息中虚假的、负面的内容，恪守本心，从自身出发合理利用网络，让网络作为助

10、你飞翔的“翅膀”。古语有云，“三人行，必有我师焉。择其善者而从之，其不善者而改之。”网络就像集合了所有内容的“老师”，我们面对它要积极地学习其长处，摒弃其短处，要学会科学上网，健康生活。10 .教学评价【组织阶段考核与学生自评互评、展示考核结果】本次课的考核注重过程评价：课上考核包括专业能力与职业素养两方面。展示本次课职业素养评价表，组织学生自评、互评。11 .思考与练习【疑难解答】使用jQuery插件时要注意什么问题？什么是标签自定义属性？【课后习题】1 .实现图片轮播广告框效果。要求有3张图片进行轮播，每次展示一张图片。2 .实现商品展示框效果。8 .板书设计一、分析页面二、模块拆分三、

11、交互效果设计四、 网络相册效果展示五、 素养课堂六、教学评价七、思考与练习课外学习任务及学习指导课前：【教师布置调研任务】调研主题：分析如何编写网络相册要求：以小组为单位，分析网络相册的设计风格，布局方式以及要实现的动态交互效果，同时制作汇报PPT,提交到“微信群”。【学生调研，教师线上指导】学生采用线上调研的方式，开展调研。教师使用“微信群”对学生进行指导。【教师对各组调研成果进行评价】教师查阅学生调研结果PPT,对每个小组的PPT进行评价，记录评价成绩，并挑选出优秀作品。课后：【学生实现图片轮播广告框效果。要求有3张图片进行轮播，每次展示一张图片效果】小组成员团结协作，使用jQuer框架的animate。方法实现图片轮播广告框效果。教师使用“微信群”对学生进行指导。【学生实现商品展示框效果。】学生通过之前所学的知识,使用EasyZoom插件实现商品展示框效果。教师使用“微信群”对学生进行。填表说明：1本页可续页；2.教学方法如：项目教学、案例分析、分组讨论、角色扮演、启发引导等;3.教学手段如：课件演示、模型讲解、实物讲解、挂图讲解、视频讲解、网络课程等。