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

课题第31课开发者商务网站建设（六）课时2课时(90min)教学目标知识技能目标：掌握制作注册页、后台管理页的具体操作素质目标：通过对案例的不断完善锻炼学生精益求精的态度教学重难点教学重点：制作注册页教学难点：制作后台管理页教学方法问答法、讨论法、i并授法、实践练习法教学用具电脑、投影仪、多媒体课件、教材、APP教学设计第1节课：课前任务T考勤（2min）一问题导入（5min）一传授新知（28min）一课堂讨论（10min）第2节课：问题导入（5min）一传授新知（25min）一课堂讨论（IOmin）一课堂小结（3min）一作业布置（2min）教学过程主要教学内容及步骤设计意图第一节课课前任务【教师】布置课前任务，和学生负责人取得联系，让其提醒同学通过APP或其他学习软件，完成课前任务请大家了解制作注册页、后台管理页的相关内容。【学生】完成课前任务通过课前任务，使学生了解本节课的主要内容，增加学生的学习兴趣考勤(2min)【教师】使用APP进行签到【学生】按照老师要求签到培养学生的组织纪律性，掌握学生的出勤情况问题导入（5min）【教师】提出以下问题注册页面应包含哪些内容？【学生】思考、举手回答【教师】通过学生的回答引入要讲的知识通过问题导入的方法，引导学生主动思考，激发学生的学习兴趣传授新知（28min）6.3.6制作注册页【教师】讲解制作注册页的具体操作【实现目标】【教师】PPt展示“注册页主体区域右侧表单的初始效果及交互效果”图片（详见教材），并讲解注册页从上到下分为头部区域、主体区域和脚部区域。整体与登录页列以，只有主体区域右侧表单有所区别。制作过程中需要注意一些问题。通过教师讲解、课堂互动等方式，使学生了解制作注册页的相关流程及操作(I)当文本框获取到焦点时，内容为空。(2)密码和重复密码文本框在获取焦点时，类型变为密码。(3)用户名、手机号码、密码、邮箱地址文本框输入文本时，显示相应的正则条件，在输入正确时正则条件提示消失。如用户名输入时如数据不符合条件,会显示报错信息。(4)重复输入密码时，提示两次密码应一致。(5)单击"注册"按钮时，判断各必填项目是否为空且输入正确，给出相应提示。(6)单击页面右上角"登录"链接可助姬到登录页，即login.html【知识扫描】【课堂互动】十【教师】提问制作注册页过程中需要使用到JS、JQuery哪些知识点？÷【学生】聆听、思考、回答(I)JS相关知识点：正则表达式；文本框输入事件；正则检测函数。(2)JQuery相关知识点：获取元素；设置DOM元素属性值方法。步骤1【实现步骤】使用HTML5和CSS3布局注册页，页面名称为reg.html,CSS样式表名称为reg.css,保存在css文件夹中，JS文件名称为reg.js,保存在js文件夹中。将样式表、"funjs"文件关联至本页面。JS文件与wlogin.cssw,jquery-1.12.Ljsw制作主题区域右侧表单。(1)修改表单的标题，在主体区域右侧div元素中输入如下代码：<divid="login-caption"><divid="login-lef(">Developer<divid="login-right">已有9ii3要<ahref="login.hlml">登录<axdiv><div>(2)添加注册表单。【课堂互动】十【教师】提问添加注册表单需要设计表单中哪些属性？十【学生】聆听、思考、回答表单name属性值为reg,表单只有顶端边框，且颜色为酒红色、实心线、2px；表单中有5个文本框,name属性分别为UserNamevuserPhoneuserPassUSerPaSS1、UserEmail,样式同登录页中的输入框样式，并为两个密码框定义类名为"pass"；每个文本域后和用户名文本域之前均布局T信息提示ts；按钮的文字提示为“注册".代码如下：<fbrmaction=""name="reg"><divclass="ts,'><div><inputtype="text"name="userName"PlaCehOlder="请输入用户名”><divclass=',ts*,><div><inputtype=',text"name="UserPhone"PIaCehoIder="请输入¾号码"><divclass="ts"xdiv><inputtype=',text"name="userPass"PlaCehoIder="请输入密码''class=''pass"><divclass="ts"xdiv><inputtype=',text"name="userPassl"PlaCehOIder="请重复输入密码"class="pass"><divclass="ts',><div><inputtype=',text"name="userEmail"PlaCehOIder="请输入邮箱地址"><divclass=,'ts',xdiv><inputtype="button"value="ii册”><form>步螺3实现表单文本框的交互效果。(1)批量实现文本域获取焦点时，值为空。$("input(type="text'").focus(function()S(is).attr('value","");!)(2)批量实现密码相关文本框获取焦点时，type值为password.S("inputclass="pass',).focus(function()$(this).attr("type","password");B(3)实现在重复密码文本框输入时判定两次密码是否输入正确。如果不匹配，设置相应提示信息内容，相应开关值为0；否则设置相应信息内容为空字符串，相应开关值为1.代码如下：UserPassI.oninput=function()if(userPass.value!=userPassl.value)$(【s:eq").html("两次密码需一致")；flag3=0;else($(,.ts:eq(4)").html(M");步骤4flag3=l;实现用户名、手机号码、密码、邮箱地址的正则验证，并使用开关数组跟踪正确性。(1)定义开关数组，内含五个元素，每个元素值均为0.Varflag=O,(),O,O,O;(2)实现交互效果”输入文本时，相应的提示内容为正则条件，相应开关值为O；文本输入正确时，相应的提示内容为空字符串，开关值为1"。以用户名为例，正则条件为“616位数字或下划线或字母、首位不为数字”。定义用户名正则。varregName=Dw5,15$/;获取用户名M元素并定义用户名输入框输入事件，当不符合正则条件时设置显示内容，否则设置显示内容为空。varuserName=reg.UserName;userName.oninput=function()if(!regName.test(userName.value)$("人:四(1)”)加011(”用户名包含6-16位字母、数字、下划线，且首字符不得flagO=O;else(S(".tseq(l)',).html("");flagO=l;>»_*S':三，事【提示】手机号码、密码、电子邮箱正则条件与正则表达式如下：(I)手机号码正则条件为：11位数字;手机号码正则表达式为：dll凯(2)密码正则条件为：6到16位数字、字母、下划线；密码正则表达式为：w6,16S(3)电子邮箱正则条件为：字符串字符串.后缀串；正则表达式为：/Aw+w+.(com|reg|nei)$/°E三三实现表单中"；珊"按钮的功能。(1)当单击"注册"按钮时，判断五个开关值是否均为1,如果是则跳转到首页。否则完成后续编辑。S("inputtype="button''').click(function()if(flag(0=1&&flagl=1&&flag2=1&&flag3=1&&flag4=1)window.location.href="index.html"else此处为各文本框判断是否输入的相关代码)1)(2)依次判断5个文本框的值是否为空或原提示语，如果是，设置提示信息为相应信息为必填项。以用户名文本框为例，代码如下：if(flag(O=O)if(userName.value=""userName.value="请输入用户名")$(".ts:eq(O)").html("用户名为必填项”);I【学生】聆听、记录、理解课堂讨论(10min)【教师】提出以下问题，组织学生分组开展讨论(1)举例说明正则表达式的定义方法。(2)举例说明正则表达式检测函数的用法。【学生】思考、讨论通过小组讨论，使学生巩固所学知识第二节课问题导入(5min)【教师】提出以下问题制作后台管理页需要哪些模块？【学生】思考、举手回答通过提问引导学生思考本节课内容传授新知(25min)6.3.7制作后台管理页【教师】讲解制作后台管理页的具体操作【实现目标】通过教师讲解、课堂互动等方式，让学生了解制作后台管理页的相关流程及操作【教师】PPt展示“后台管理页初始状态”图片（详见教材），并讲解后台管理页包含头部区域、主体区域和脚部区域。其中，头部与脚部区域同登录页。【课堂互动】中【教师】提问后台管理页制作过程中需要注意哪些问题？）【学生】聆听、思考、回答（1）交互效果：当单击管理主项目时，打开或者关闭管理子项目，其他主项目关闭相关子项目：当单击管理子项目链接时，右侧浮动框架显示相应的管理页，本案例以简单的文本作为代替。【教师】PPt展示“单击管理主项目效果”图片（详见教材）（2）页面招桀效果：【课堂互动】+【教师】提问后台管理页中页面就缴效果有哪些？*【学生】聆听、思考、回答分类查询链接,鼠懒到分类查询页,即admin7classShow.html；分类删除链接，的桀到分类删除页，即admin7classDelete.html；分类修改链接,翳桀到分类修改页，即admin/classEdit.hlml；分类添加链接，的需到分类添加页,即admin/classAdd.html；商品查询链接，期纸到商品查询页，即admin/comShow.html；商品删除链接,鼠懒到商品删除页,即admin7comDelete.html；商品修改链接，已缴到商品修改页，即admin/comEdit.html；商品添加链接,已炼专到商品修改页,即UdminZcomAddhmI；订单查看链接，的桀到订单查询页，即admin7indentShow.html；订单确认链接，既维到订单确认页，即admin/indentEdit.html；（详见教材）【知识扫描】HTML相关知识点：浮动框架及其属性；超链接标签target属性的使用。步躲1步骤3【实现步骤】按照要求创建admin文件夹及相关页面，主页面名称为adminlndex.html.使用hcader标签制作页眉，制作方法与登录页页眉类似。制作主体区域的列表。HTML文档编辑操作：交替使用<div>标签与<a>标签制作管理项目列表。其中一组管理项目的HTML代码如下：VdiVCIaSS="managetitle">分类管理vdiv><divclass="manage-boxs">< aclass="manage"href=',classShow.htm,target="manage,>>4<<a>< aCIaSS="manage"href="classEdit.html"tael="manage”>分类修改<a>< aClaSS="manage"href="classDeleie.html"argei="manage”>分类删除<a><div>【提示】注意“退出管理"模块为超链接，应链接至indexhml页面，iarge属性值为“sef.CSS文档编辑操作：根据效果图设置管理项目的CSS格式。.manage-titledisplay:block;width:120px;height:40px;line-height:40px;text-align:center;background:#2DA8E6;color:#fff;margin:0auto;font-size:20px;border-bottom:Ipxsolid#fff;.manage-boxswidth:120px;heighcauto;overflow:hidden:margin:0auto;display:none;I步骤4(1)实现打开、关闭管理子项目的效果。设置开关数组ag,并初始化值均为O0varflag=O,O,O,O,O;单击管理项目标题时，如果相应的开关为0,则隐藏所有子项目，只打开指定的子项目，并将开关值置为1；否则隐藏所有子项目，并将开关值置为仇$(".manage-litle").click(funciion()varindex=$(this).index(".manage-title");if(flagindex=0)S(".manage-boxs',).css('display":"none")；$(".manage-boxs:eq("+index+")").css("display":"block'1I)；flagindex=1;elseS(".manage-boxs',).css("display":"none")；flagindexj=0;I),1.Sk一射.一,号.二"WJ送-二一-J(2)实现单击子项目，右侧显示相应的管理内页的效果。将管理内页的内容布局为一个浮动框架，并命名为“manage".代码如下：<divid="manage-page"><iframesrc="welcome.html"frameborder="0"width='11000"height="600"name="manage"xiframe><div>【学生】聆听、记录、理解课堂讨论(10min)【教师】组织学生分组，围绕以下问题开展讨论(1)举例说明浮动框架的使用方法。(2)举例说明超链接的target属性的使用方法。【学生】讨论、回答通过课堂讨论，使学生巩固所学知识课堂小结(3min)【教师】简要总结本节课的要点本节课主要学习了制作注册页和后台管理页的具体操作，希望通过本节课的讲解，大家可以巩固之前所学的相关知识，学会完善网站所需静态页面的方法，掌握网站的基础设计。【学生】总结回顾知识点总结知识点，巩固学生对制作注册页、后台管理页等相关知识的印象作业布置(2min)【教师】布置课后作业个人作业：请根据课堂所学知识，完成课后习题团队作业：完成以下要求，并形成文档上传至APP(1)完成个人网站注册功能静态部分。(2)参照本章教学案例完成个人网站。【学生】完成课后任务通过课后作业复习巩固学到的知识，提高学生的理解能力教学反思本节课效果不错,每个学生都积极参与到教学活动中，发挥了自己的价值。教学中注意分析学生的特点，根据不同学生的学习情况采用灵活多样的教学方法，极力营造一种平等和谐、活跃有序的课堂氛围。