网页设计与制作——JavaScript+jQuery标准教程 教案 第13章 综合实训：开发视频网页.docx

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

1、电子商务网页设计与制作授课教案学年第学期学院(部)专业(学部)课程名称电子商务网页设计与制作任课教师课内形式理论教学课内实践口理实一体0习题复习口考核评价其他活动口学习量安排课内：课外形式调查分析团小组研讨口实践任务团理论探究口考核评价汇报展示口其他活动团课外：序号11授课日期月日月日月日月日授课班级课内教学内容：第13章综合实训：开发视频网页课外学习任务：(1)课前：以小组为单位，讨论视频网页的设计，交互方式等相关知识，通过查询了解当前流行的视频网页布局风格并以PPT的形式记录下来。(2)课后：实现点击按钮显示或隐藏其他元素的效果。实现在input元素中输入文字时，修改元素的背景色为红色。教

2、学目标：知识目标 掌握HTM+CSS布局。 掌握jQuery页面滚动事件。 掌握jQuery常用方法。能力目标 能够独立实现视频网页的静态布局； 能够独立实现视频网页的各项动态交互效果。素质目标 较强的专业知识和自学能力； 丰富知识结构，提升专业知识； 掌握HTM1+CSS+JavaScript和JQuery框架动态网页编写技能，理解并应用专业知识。重点难点及解决方法：(1)重点：视频静态网页布局解决方法：通过知识点讲解+课堂在线展示相结合的方法，教师讲解通过HTM1+CSS实现视频页面布局，引导学生积极思考，掌握相应知识；同时通过课堂在线展示，使学生可以更直观的了解网页编写过程中可能遇到的问

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

4、课后习题和查阅技术论文研读笔记的方式；对技能的评价：教师对学生上交网页作品按制作要求进行综合性评价；对职业素养的评价：采用学生自评、小组内评价和教师评价相结合的方式。课后小结：填表说明：1.序号，指该课程授课的顺序号，应与授课计划一致；2.授课形式在相应供选项打“J课内教学内容及过程时间分配方法及手段1.网页分析【首页布局分析】首页主要用于展示整个网页中的主要视频内容以及视频分类。在首页中，首先会展示整个网页的导航栏，包括网页1Og0、搜索框以及隐藏导航等多种内容；其次会在网页焦点位置添加通栏的banner,通过图片轮播的方式展示网页的主要视频内容；最后通过图片堆砌的方式，按照视频分类依次展示

5、，包括热门视频、猜你喜欢、电影、电视剧等。在部分分类右侧还会展示对应的排行榜信息。在网页结尾添加网页的相关信息，如联系方式、入驻方式等。首页布局如图13.1所示。导航栏banner热门视频猜你喜欢电影排行榜电视剧排行榜网站信息【播放页面布局分析】视频播放页面主要用于播放相应的视频，并且提供视频的播放列表以及相关视频的展示。在视频播放页面中，首先会展示一个导航栏；其次会实现视频的播放部分，包括视频播放、视频信息和播放列表；然后提供相关的演员列表；接着会提供相关视频的推荐列表；最后实现视频评论功能和网页相关信息内容。视频播放页面的布局如图13.2所示。导航视频播放视频信息播放列表猜你喜X欠电影排行

6、榜电视剧评论排行榜网站信息2 .网页结构设计【首页元素布局】首页通过CSS要处理好导航栏与banner之间的关系以及大量的图文混排重用问题。不同类型的视频使用的图文混排的图片尺寸不同，总体可以划分为3种布局模式。当涉及到布局重用时，就可以根据布局的模式不同，使用对应的CSS样式。【首页样式添加】通过CSS可以将元素以固定的样式显示，并且可以设置对应元素的显示和隐藏状态。【视频播放页面元素布局】视频播放页面使用的头部导航栏为首页的滚动导航栏，而尾部的内容与首页的内容完全相同。【视频播放页面样式添加】视频播放页面主要通过CSS实现视频播放模块、播放列表模块以及评论模块等的布局，其中，图文混排效果也

7、会使用到3种模式，所以CSS中会提供3种模式的样式用于样式重用。3 .页面交互效果设计【滚动页面切换导航栏】首页会提供两个导航栏，分别是无背景导航栏和有背景相对于浏览器位置固定的导航栏。这两个导航栏可以通过滚动页面进行切换。当页面位于最顶端时，显示无背景导航栏，当页面进行滚动后切换为有背景的导航栏，两个导航栏的效果如图13.3所示。星期天.*Q屋auM,t*星期天3Wv,一二【获取焦点显示热搜菜单】在视频网页的搜索框中可以进行相关内容搜索，当用户点击搜索框时,搜索框会获取到焦点，此时会自动显示当前热搜菜单，效果如图13.4所示。当输入框失去焦点后，热搜菜单自动隐藏。【广告图片自动轮播】实现广告

8、图片自动轮播效果会使用到定时器函数。通过定时切换图片路径的方式实现广告图片自动轮播，其效果如图13.5所示。【点击列表切换广告图片】视频网页除了可以自动轮播广告图片之外还支持用户通过点击列表选择要展示的广告图片。当用户点击列表之后，广告图片会进行切换，并且在展示5s之后，广告图片继续自动轮播。【点击显示更多导航信息】视频网页中的视频种类繁多，但是导航栏的长度有限，所以可以将更多的视频分类导航信息进行隐藏，通过点击的方式进行显示，其效果如图13.6所示。综艺体苜会员导航）那些故事6热搜榜A电影电视扇挣艺娱乐12录片动漫少儿休H新知时尚公袜生活A4电EI鼠标指针经过显示更多内容】视频分类中可以通过

9、图文形式更加直观地显示更多视频信息，当鼠标指针经过广告上的分类信息时视频网页会显示对应的更多视频内容，效果如图13.7所示。【鼠标指针经过图片放大】视频网页中图片非常多，所以容易导致用户失去焦点。使用鼠标指针经过图片放大的效果为用户提供反馈信息,可以带给用户动态的交互体验,并引导用户的注意力聚焦在当前鼠标指针所在位置以及对应的视频信息上，其效果如图13.8所示。【鼠标指针经过添加背景色】视频网页中存在多个视频排行榜，如电视剧排行榜和电影排行榜。当鼠标指针经过排行榜中的视频名称时，对应的名称就会自动添加背景色，文本颜色也发生了变化，其效果如图13.9所示。电视周热播榜漫长的告白深奥町绊六门光守炉

10、爱情漫长的告白深情科绊於日光守护爱情漫长的告白深情的等M时光守炉爱情漫长的告白深情IW异IW光g炉爱情漫长的告白深情飘抨H时光守护爱情【点击元素显示视频详情】在视频播放模块中，为了节约空间会将大段的视频详情进行隐藏。用户可以通过点击对应元素让视频详情显示，其效果如图13.10所示。【在文本框中输入内容显示文本字数】视频的评论模块会限制用户的评论字数，在评论模块会显示允许评论的最多字数以及当前评论的字数。例如，在文本框中输入4个字，其效果如图13.11所示.评论这个视频4/300提女4 .网页效果展示首页效果如图13.12所示。电影捕H楼an*a*AM4,aay命,二例李四王五余刘柳金琪琪5 .

11、素养课堂网页是目前最流行的信息传播方式之一。随着网络速度的不断提升，网页内容的载体也从文本和少量图片过渡为了大量的图片和视频，从而使用户在浏览网页时可以得到更加直观的浏览体验。这一切都得力于科技的不断发展。所以，努力学习科学文化知识是十分重要的。只有通过不断学习、不断创新才能用科学文化知识造福社会，才能推动每个行业不断发展。在日常的学习、生活中，我们要树立远大的理想，不要将自己的思维局限于学会即可，而是要向着掌握知识、创新知识的目标前进。以远大的理想作为生命中的“指明灯”，不断学习，不断努力，争取早日学有所成，造福社会。总而言之，科技是第一生产力，要在生活、学习中树立正确的人生观和价值观，努力

12、学习知识，创新知识，成为社会中有用的人，在社会生产生活中实现自身的价值。6 .教学评价【组织阶段考核与学生自评互评、展示考核结果】本次课的考核注重过程评价：课上考核包括专业能力与职业素养两方面。展示本次课职业素养评价表，组织学生自评、互评。7 .思考与练习【疑难解答】在制作视频网页时要注意什么？在使用遮罩层时要注意什么问题？【课后习题】1 .实现点击按钮显示或隐藏其他元素的效果。2 .实现在input元素中输入文字时，修改元素的背景色为红色。8 .板书设计一、 网页分析二、 网页结构设计三、 页面交互效果设计四、 网页效果展示五、 素养课堂六、教学评价七、思考与练习课外学习任务及学习指导课前：

13、【教师布置调研任务】调研主题：分析如何编写视频网页要求：以小组为单位，分析视频网页的设计风格，布局方式以及要实现的动态交互效果，同时制作汇报PPT,提交到“微信群二【学生调研，教师线上指导】学生采用线上调研的方式，开展调研。教师使用“微信群”对学生进行指导。教师对各组调研成果进行评价】教师查阅学生调研结果PPT,对每个小组的PPT进行评价，记录评价成绩，并挑选出优秀作品。课后：学生实现点击按钮显示或隐藏其他元素的效果】小组成员团结协作，使用c1ick事件和togg1e。方法实现点击按钮显示或隐藏其他元素的效果。教师使用“微信群”对学生进行指导。【学生实现在input元素中输入文字时，修改元素的背景色为红色】学生通过之前所学的知识，使用hover事件实现在input元素中输入文字时，修改元素的背景色为红色。教师使用“微信群”对学生进行。填表说明：1本页可续页；2.教学方法如：项目教学、案例分析、分组讨论、角色扮演、启发引导等;3.教学手段如：课件演示、模型讲解、实物讲解、挂图讲解、视频讲解、网络课程等。