《《网站前端技术》教案第28课开发者商务网站建设（三）.docx》由会员分享，可在线阅读，更多相关《《网站前端技术》教案第28课开发者商务网站建设（三）.docx（15页珍藏版）》请在课桌文档上搜索。
1、课题第28课开发者商务网站建设（三）课时2课时(90min)教学目标知识技能目标：掌握网站实现首页人机交互效果的具体操作素质目标：通过对案例的不断完善锻炼学生精益求精的态度教学重难点教学重点：微信二维码的显示与隐藏、二级导航的插入与选项卡效果教学难点：banner图轮播效果实现、返回顶部效果实现、导航栏实时固定于顶部效果实现教学方法问答法、讨论法、i并授法、实践练习法教学用具电脑、投影仪、多媒体课件、教材、APP教学设计第1节课：课前任务T考勤（2min）一问题导入（5min）一传授新知（30min）一课堂讨论（8min）第2节课：问题导入（5min）一传授新知（27min）一课堂讨论（8mi
2、n）一课堂小结（3min）一作业布置（2min）教学过程主要教学内容及步骤设计意图第一节课课前任务【教师】布置课前任务，和学生负责人取得联系，让其提醒同学通过APP或其他学习软件，完成课前任务请大家了解网站实现首页人机交互效果的相关内容。【学生】完成课前任务通过课前任务，使学生了解本节课的主要内容，增加学生的学习兴趣考勤(2min)【教师】使用APP进行签到【学生】按照老师要求签到培养学生的组织纪律性，掌握学生的出勤情况问题导入（5min）【教师】提出以下问题在网站的首页可以通过哪些操作来实现人机交互效果？【学生】思考、举手回答【教师】通过学生的回答引入要讲的知识通过问题导入的方法，引导学生主
3、动思考，激发学生的学习兴趣传授新知（30min）6.2实现首页人机交互效果【教师】讲解实现首页人机交互效果的具体操作6.2.1 微信二维码的显示与隐藏【实现目标】浏览开发者网站首页，单击头部微信图标时显示微信二维码，为用户提供扫码登录网站的功能；当再次单击微信图标时，可隐藏微信二维码。通过教师讲解、课堂互动等方式，使学生了解微信二维码的显示与隐藏、二级导航的插入与选项卡效果的相关流程及操作【知识扫描】(1)HTML文档关联JS文件的方法。【课堂互动】十【教师】提问实现微信二维码的显示与隐藏功能，需要使用JS的哪些相关知识点?十【学生】聆听、思考、回答(2)JS相关知识点：定义变量的方法；通过i
4、d属性获取元素；通过类属性获取元素组；通过元素的SIyIe属性控制元素样式变化;函数的定义和调用。【难点分析】单击微信图标显示二维码，以及再次单击微信图标隐藏二维码功能的实现，应使用开关原!里，即定义一个开关变量跟踪二维码显示隐藏状态.本任务中采用开关值为。跟踪二维码隐藏状态，开关值为1跟踪二维码显示状态。【实现步骤】步骤1在developer站点目录中创建js目录，使用软件创建JS文件index.js并保存在js目录中，在index.html的head标签中嵌套标签，关联index.js,注意相对路径的设置。在index.js中输入下方代码后，使用Google浏览器浏览index.html,
5、在页面上单击右键选择“检有，在打开的界面中选择Console选项卡，观察控制台是否输出1,如图6-2-2所示。此操作的目的是验证HTML文档与JS文档的有效关联。console.log(1);【教师】PPt展示“控制台测试效果”图片(详见教材)【提示】测试成功后将上述代码删除。步骤2在index.js中输入窗口加载事件.window.onload=function()此处输入后续步骤所述JS相关代码。步骤3在加载事件中定义变量weiXin通过类名捕获类名为head的元素组，将其中下标为I的元素赋值给变量WeiXimvarweiXin=document.getElementsByClassNam
6、e(head)(1;步骤4在HTML微信图片之后插入二维码图片(图片名称为erWei.jpg),并设置其id属性为crWeiCimgSrC=CrWeijpg“id=CrWCial=4在index.css中合适位置定义二维码样式表，设置其相对于父元素绝对定位,距父元素上方31PX,右侧0px；宽度和高度均为100px;图层数为2.#erWeiPositioniabsolute;top:31px;right:O;width:1OOpx;height:!OOpx;z-index:2;【提示】为实现二维码相对于父元素绝对定位，需要将类选择器head设置为相对定位。步腺6在窗口加载事件中定义变量crWe
7、i,并通过id属性捕捉二维码元素，将捕获到的元素赋值给erWei变量，然后通过style属性设置二维码隐藏。varerWei=document.getElementById(erWei);erWei.style.display=none;步骤7步骤8初始化跟踪二维码显示，隐藏的开关ag,初始值为O,即隐藏。V ar ag=O;定义weiXin对象的单击事件，触发控制台输出weiXin字样。weiXin.onclick=function()consolo.log(weiXin);此时如果代码正确，单击微信图标时，控制台输出weiXin。【提示】测试成功后将控制台输出语句删除。步骤9编辑WeiXi
8、n对象单击事件，触发内容为，当二维码显示，隐藏跟踪开关为0时,设置erWei对象显示,开关ag为1；否则设置erWei对象隐藏，开关flag为O0if(11ag=O)erWei.style.display=block;Aag=I;elseerWei.style.display=none;flag=O;步骤10创建自定义函数库文件议funjs,封装微信二维码显示，隐藏函数。为了将首页中的互动功能很方便地应用于其他页面，可以将其封装成函数。首先创建js/fun.js,并在index.html中关联fun.js；然后在fun.js中创建函数weiXin(),并将index.js实现二维码显示/隐藏的
9、代码剪切粘贴到函数体中。functionweiXin()(步骤6-9相关代码。删除index.js中微信二维码显示/隐藏相关代码，并输入调用函数WeiXin()相关代码。weiXin();【实现目标】为一级导航栏插入二级导航，并实现选项卡效果。6.2.2二级导航的插入与选项卡效果【教师】PPt展示“鼠标移至一级导航栏效果图1”“鼠标移至一级导航栏效果图2“鼠标离开一级导航栏效果”图片(详见教材)，并讲解当鼠标移至一级导航栏时，相应的二级导航显示；当鼠标离开一级导航栏时，二级导航【知识扫描】【课堂互动】+【教师】提问实现二级导航的插入与选项卡效果，需要用到哪些方面的知识点?【学生】聆听、思考、回
10、答(I)CSS3相关知识点：当鼠标移至父元素上，子元素显示.(2)JS相关知识点：数组的定义和数组元素个数的获取；数组元素的遍历；for语句。(3Query相关知识点：JQuery文件的关联；使用JQUery方法创建元素和获取元素；使用JQuery获取同类元素的第n个元素；子元素追加到父元素的方法；父元素追加子元素的方法；字符串连接变量的方法。【实现步骤】步骤1在index.html中编辑二级导航。在一级导航栏a元素T恤之后布局div元素,并设置其类名为nav2-box在nav2内部输入3个a标签,并设置它们的类名为nav2步骤2在index.css中编辑相关样式。编辑类选择器nav2-box
11、,设置其宽度为101PX,高度为auto”益出属性为hidden；定位属性为绝对定位，距父元素上方24PX；顶部边框为3PX实心线，颜色为#B91720；背景颜色为#11T；图层数为1.nav2-boxWidthilOlpx;heighcauto:overflow:hidden;position:absolute;top:24px;border-top:3pxsolid#B91720;background:#fff;z-index:1;此时运行网页，可以发现二级导航无法显示，原因是一级导航栏所在盒子develop-box设置了溢出属性为hidden,所以将一级导航栏所在盒子类名修改为nav-b
12、ox,并编辑其样式表，设置其宽度为1200px,高度为46px；相对于父元素水平居中，且上方外边8巨为20pxo.nav-boxwidth:1200px;height:46px:margin:20pxauto0;【提示】编辑类选择器nav2,设置其为块元素；宽度为101px,高度为30px在布局完成之后，将HTML端nav2-box类元素删除。在index.html中关联JQuery文件.首先将jquery-1.12.1.js复制到站点js目步螺3*录中，然后在index.html文档head部分添加script标签关联jquery-U2.1.js文件.步蟋4创建nav2()函数，为一级导航栏
13、插入二级导航。在fun.js中创建nav2。函数。functionnav2()同时在index.js窗口加载事件中调用函数nav2()nav2();在nav2()函数中初始化字符串二维数组str,存放二级导航名称。varstr=v领T恤圆领T恤,翻领T恤”,纯色衬衫,”花色衬衫7韩版衬衫1轻薄羽绒服”.“羽绒马甲“长款羽绒服面包羽绒服运动鞋,“休闲鞋二皮鞋,“马丁靴】麻质上衣”,“麻裤羊绒衫羊毛衫”.“棉线衫1牛仔裤”.“运动裤休闲裤1床衣柜”,“橱柜洗浴用具定制西装”.“定制家具“定制首饰”;通过for语句创建9个类元素nav2Box,类名为nav2-box,并追加到相应的一级导航栏类元素n
14、av中。for(vari=0:i9;i+)varnav2Box=S();后续5)代码块$C.nav:eq(+(i+1)+,).append(nav2Box);)通过for语句创建和二级导航栏相对应的子元素nav2,类名为nav2,元素类型为a,内容为数组str对应的信并将nav2追加到对象nav2Box中。fbr(varj=OJstri.Iengthj+)varnav2=$(+striU+*);nav2.appendlb(nav2Box);步骤5使用CSS样式表实现选项卡效果。在indexes中完成以下工作：Q)设置类nav2-box显示方式为隐藏；定义鼠标置于nav上方时，nav2-box显
15、示方式为块形式。.navhover.nav2-boxdisplay:block;【学生】聆听、记录、理解课堂讨论(8min)【教师】提出以下问题，组织学生分组开展讨论(I)讨论CSS实现选项卡效果的方法。(2)举例说明数组的定义方法和元素遍历方法.(3)举例说明使用JQuery创建元素，追加元素到父元素，追加子元素的方法。【学生】思考、讨论通过小组讨论，使学生巩固所学知识*6第二节课问题导入(5min)【教师】提出以下问题轮播图效果可以通过所学的哪些技术实现？【学生】思考、举手回答通过提问引导学生思考本节课内容传授新知6.2.3banner图轮播效果实现【教师】讲解banner图轮播效果实现的
16、具体操作【实现目标】(I)当在窗口中加载首页时，banner区域轮播图自动自左向右轮播，且当前图片对应的按钮背景色为酒红色。【教师】PPt展示“轮播图按钮凸显与图片对应效果1”“轮播图按钮凸显与图片对应效果2”图片(详见教材)，并讲解(2)当鼠标移至banner区域时，轮播图停止。(3)用鼠标单击左侧按钮，轮播图向左轮播；用鼠标单击右侧按钮，轮播图向右轮播。(4)用鼠标单击下方按钮，显示对应的轮播图。【知识扫描】【课堂互动】十【教师】提问实现banner图轮播效果,需要使用到JS、JQuery哪些知识点？通过教师讲解、课堂互动等方式，让学生熟悉banner图轮播效果实现、(27min)【学生】
17、聆听、思考、回答(I)JS相关知识点：时间间隔函数；清除时间间隔对象。(2)JQUery相关知识点：JQuery控制DOM元素样式；获取当前元素在同类元素中的序号；JQUery中的鼠标单击事件，鼠标浮于上方事件，鼠标离开元素事件。【实现步骤】EUn在fun.js中创建并编辑函数btns(m),实现动态插入m个按钮.在函数中循环m次，每次创建一个类名为bins的元素，并追加到下方按钮盒子btns-box.设置按钮盒子的宽度为m*30像素。完整的JS代码如下：functionbtns(m)fbr(vari=0;im;i+)varbtns=S();blns.apendTo(.btns-box,);)
18、$(.btns-box).css(width:m*30+px);最后将HTML文档中所有类名为b(ns的元素删除。【提示】返回顶部效果实现、导航栏实时固定于顶部效果实现的相关流程及操作在实际应用中，banner图的数量并不是固定的，因此下方按钮数量也不是固定的，而是应该根据banner图的数量插入相同数量的按钮。因此需要定义该函数。步骤2在fun.js中创建并编辑函数banner(n),作用是显示第n张banner酬口突出下方的第n个按钮functionbanner(n)$(.banner).css(display:none);S(,.banneeq(+n+).css(display:bloc
19、kM);S(,.btns).css(backgroundCCC,);S(.btnseq(,+n+,),).css(backgroundfB91720);步骤3在fun.js中创建函数lunbo(),作用是实现轮播图所有效果。在Enboo函数中初始化n=0,调用banner(n)同时在index.js中调用该函数。varn=0;banner(n);在EnbO()函数中定义m变量的值为banner图的数量,同时在下方插入m个按步骤4varm=S(.banner).length;btns(m);在IUnbO()函数中定义Iefto函数，实现n值减一变化；并设置在n=0时，n的值变为m-1,即最后一张
20、banner图的下标值；之后再次调用banner(n)functionleft()if(n=O)n=m-l;else(n-;)banner(n);在IUnboo函数中定义左侧按钮单击事件,实现向左翻banner图。步骤5步骤6S(.left-btn).click(function()left();)在IUnbO()函数中定义right。函数，实现nmJQ变化；并设置在n=m-l时，n的值变为0,即第一张banner图的下标值；之后再次调用banner(n)functionright()if(n=m-l)n=0;elsen+;banner(n);.在IUnbOo函数中定义右侧按钮单击事件，实现向
21、右翻banner图效果。步骤7步骤8$(.right-btn).click(function()right();)在IUnbO()函数中使用时间间隔函数实现每隔I(X)Oms,右翻一张banner图，并将函数赋值给变量以步骤9varc=setlnterval(function()right();,1000);步骤10在IUnbo()函数中定义当鼠标移至banner图区域时，自动轮播停止。S(.banner).mouseover(function()clearlnterval(c);步骤11在IUnbOo函数中定义当鼠标离开banner图区域时，自动轮播启动。)步骤12S(.banner).mo
22、useout(function()c=setlnterval(function()right();,1000);在IUnbO()函数中定义当鼠标单击下方按钮时，获取按钮序号值index并赋值给n,显示相应的banner图。【学生】聆听、记录、理解6.2.4 返回顶部效果实现【教师】讲解返回顶部效果实现的具体操作【多媒体】组织学生扫码播放“返回顶部效果实现“视频（详见教材），让学生对这部分内容有一个大致地了解【实现目标】当鼠标单击返回顶映钮时，页面滚动条顶端回到O位置。【知识扫描】JQUery相关知识点：窗口滚动条顶部位置设置方法。步骤1步骤2【实现步骤】在fun.js中定义backTop（）函
23、数同时在index.js窗口加载事件中调用该函数。在backTop（）函数中，设置单击返回按钮（id为fix-backTop的元素）时，窗口滚动条顶端位置为OefunctionbackTop()$(#fix-backTop).click(function()(S(window).scrollTop(0);)【学生】聆听、记录、理解6.2.5 导航栏实时固定于顶部效果实现【教师】讲解导航栏实时固定于顶部效果实现的具体操作【实现目标】【教师】PPt展示”导航栏固定于窗口顶端”“导航栏原始位置”图片（详见教材），并讲解当滚动条顶端位置彳氐于一级导航栏原始位置时,导航栏固定在窗口顶端；当滚动条顶端位置
24、高于一级导航栏原始位置时，导航栏回到原位。【知识扫描】【课堂互动】十【教师】提问导航栏实时固定于顶部效果的实现，需要用到哪些方面的知识点?*【学生】聆听、思考、回答(2)JQuery相关知识点：窗口滚动事件；获取窗口滚动条顶端位置方法。(1)CSS相关知识点：实现固定定位元素水平居中的方法。【实现步骤】步骤1步赚2在fun.js中定义函数navTop(),同时在index.js中调用该函数。在navTop()中定义窗口滚动事件。当窗口滚动条顶端位置大于等于200像素时，一级导航栏盒子样式为固定定位，距浏览器顶端0；图层为1,背景颜色为白色，外边8巨为自动，实现滚动条水平居中；距浏览器左侧和右侧
25、均为0。否则一级导航栏盒子样式为相对定位。functionnavTop()S(window).scroll(function()if(S(window).scrollTop()=200)S(,.nav-box).css(,position,fixed,.(opz,0,z-index:l,background:#fffVmargin:auto,left:。,right:。);else$(.nav-box).css(position:relative)；)【学生】聆听、记录、理解课堂讨论(8min)【教师】组织学生分组，围绕以下问题开展讨论(I)举例说明时间间隔函数的使用方法。(2)举例说明清除时
26、间间隔对象的方法。(3)举例说明JQuery事件的定义方法。(4)写出DOM元素顶端固定并水平居中的CSS样式表。【学生】讨论、回答通过课堂讨论，使学生巩固所学知识课堂小结(3min)【教师】简要总结本节课的要点本节课主要学习了微信二维码的显示与隐藏、二级导航的插入与选项卡效果、banner图轮播效果实现、返回顶部效果实现、导航栏实时固定于顶部效果实现等具体操作，希望通过本节课的讲解，大家可以掌握实现网站人机交互效果的具体操作与方法.【学生】总结回顾知识点总结知识点，巩固学生对实现人机交互效果相关知识的印象作业布置(2min)【教师】布置课后作业个人作业：请根据课堂所学知识，完成课后习题团队作业：完成以下要求，并形成文档上传至APP(1)在个人网站首页中实现某DOM元素的显示/隐藏效果。(2)在个人网站首页中实现二级导航加载和选项卡效果。(3)在个人网站首页中实现轮播图效果。(4)在个人网站首页中实现返回顶部效果。(5)实现个人网站首页在恰当的时候导航栏固定于顶端的效果。【学生】完成课后任务通过课后作业复习巩固学到的知识，提高学生的理解能力教学反思-,-在这节课中学生能在互动环节深入沟通，效果不错。教师还要多与学生进行深入的沟通和交流，积极与学生探讨学习方法和策略，引导学生在探讨中发现、认识自身学习中存在的问题并及时纠正，从而掌握科学有效的学习方法，提高学习质量和效率。
