《网站前端技术》教案第28课开发者商务网站建设（三）.docx

《《网站前端技术》教案第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显示方式为块形式。.navhover.nav2-boxdisplay:block;【学生】聆听、记录、理解课堂讨论(8min)【教师】提