《网站前端技术》（梁玲）621-7 教案 第31课 开发者商务网站建设（六）

PAGE4PAGE4PAGE3PAGE3PAGE3PAGE3

课题第31课开发者商务网站建设（六）课时2课时（90min）教学目标知识技能目标：掌握制作注册页、后台管理页的具体操作素质目标：通过对案例的不断完善锻炼学生精益求精的态度教学重难点教学重点：制作注册页教学难点：制作后台管理页教学方法问答法、讨论法、讲授法、实践练习法教学用具电脑、投影仪、多媒体课件、教材、文旌课堂APP教学设计第1节课：→→→传授新知（28min）→课堂讨论（10min）第2节课：→传授新知（25min）→课堂讨论（10min）→课堂小结（3min）→作业布置（2min）教学过程主要教学内容及步骤设计意图第一节课课前任务【教师】布置课前任务，和学生负责人取得联系，让其提醒同学通过文旌课堂APP或其他学习软件，完成课前任务请大家了解制作注册页、后台管理页的相关内容。【学生】完成课前任务通过课前任务，使学生了解本节课的主要内容，增加学生的学习兴趣考勤

（2min）【教师】使用文旌课堂APP进行签到【学生】按照老师要求签到培养学生的组织纪律性，掌握学生的出勤情况问题导入（5min）【教师】提出以下问题注册页面应包含哪些内容？【学生】思考、举手回答【教师】通过学生的回答引入要讲的知识通过问题导入的方法，引导学生主动思考，激发学生的学习兴趣传授新知

（28min）6.3.6制作注册页【教师】讲解制作注册页的具体操作【实现目标】【教师】ppt展示“注册页主体区域右侧表单的初始效果及交互效果”图片（详见教材），并讲解注册页从上到下分为头部区域、主体区域和脚部区域。整体与登录页类似，只有主体区域右侧表单有所区别。制作过程中需要注意一些问题。（1）当文本框获取到焦点时，内容为空。（2）密码和重复密码文本框在获取焦点时，类型变为密码。（3）用户名、手机号码、密码、邮箱地址文本框输入文本时，显示相应的正则条件，在输入正确时正则条件提示消失。如用户名输入时如数据不符合条件，会显示报错信息。（4）重复输入密码时，提示两次密码应一致。（5）单击“注册”按钮时，判断各必填项目是否为空且输入正确，给出相应提示。（6）单击页面右上角“登录”链接可跳转到登录页，即login.html。【知识扫描】【课堂互动】✈【教师】提问制作注册页过程中需要使用到JS、JQuery哪些知识点？✈【学生】聆听、思考、回答（1）JS相关知识点：①正则表达式；②文本框输入事件；③正则检测函数。（2）JQuery相关知识点：①获取元素；②设置DOM元素属性值方法。【实现步骤】1使用HTML5和CSS3布局注册页，页面名称为reg.html，CSS样式表名称为reg.css，保存在css文件夹中，JS文件名称为reg.js，保存在js文件夹中。将样式表、JS文件与“login.css”“jquery-1.12.1.js”“fun.js”文件关联至本页面。12制作主题区域右侧表单。2（1）修改表单的标题，在主体区域右侧div元素中输入如下代码：<divid="login-caption"> <divid="login-left">Developer注册</div> <divid="login-right">已有账户要<ahref="login.html">登录</a></div></div>（2）添加注册表单。【课堂互动】✈【教师】提问添加注册表单需要设计表单中哪些属性？✈【学生】聆听、思考、回答①表单name属性值为reg，表单只有顶端边框，且颜色为酒红色、实心线、2px；②表单中有5个文本框，name属性分别为userName、userPhone、userPass、userPass1、userEmail，样式同登录页中的输入框样式，并为两个密码框定义类名为“pass”；③每个文本域后和用户名文本域之前均布局一个信息提示ts；④按钮的文字提示为“注册”。代码如下：<formaction=""name="reg"> <divclass="ts"></div> <inputtype="text"name="userName"placeholder="请输入用户名"> <divclass="ts"></div> <inputtype="text"name="userPhone"placeholder="请输入手机号码"> <divclass="ts"></div> <inputtype="text"name="userPass"placeholder="请输入密码"class="pass"> <divclass="ts"></div> <inputtype="text"name="userPass1"placeholder="请重复输入密码"class="pass"> <divclass="ts"></div> <inputtype="text"name="userEmail"placeholder="请输入邮箱地址"> <divclass="ts"></div> <inputtype="button"value="注册"></form>3实现表单文本框的交互效果。3（1）批量实现文本域获取焦点时，值为空。$("input[type='text']").focus(function(){ $(this).attr("value",""); })（2）批量实现密码相关文本框获取焦点时，type值为password。$("input[class='pass']").focus(function(){ $(this).attr("type","password");})（3）实现在重复密码文本框输入时判定两次密码是否输入正确。如果不匹配，设置相应提示信息内容，相应开关值为0；否则设置相应信息内容为空字符串，相应开关值为1。代码如下：userPass1.oninput=function(){ if(userPass.value!=userPass1.value){ $(".ts:eq(4)").html("两次密码需一致"); flag[3]=0; }else{ $(".ts:eq(4)").html(""); flag[3]=1; }}4实现用户名、手机号码、密码、邮箱地址的正则验证，并使用开关数组跟踪正确性。4（1）定义开关数组，内含五个元素，每个元素值均为0。varflag=[0,0,0,0,0];（2）实现交互效果“输入文本时，相应的提示内容为正则条件，相应开关值为0；文本输入正确时，相应的提示内容为空字符串，开关值为1”。以用户名为例，正则条件为“6-16位数字或下划线或字母、首位不为数字”。定义用户名正则。varregName=/^\D\w{5,15}$/;获取用户名DOM元素并定义用户名输入框输入事件，当不符合正则条件时设置显示内容，否则设置显示内容为空。varuserName=reg.userName;userName.oninput=function(){ if(!regName.test(userName.value)){ $(".ts:eq(1)").html("用户名包含6-16位字母、数字、下划线，且首字符不得为数字"); flag[0]=0; }else{ $(".ts:eq(1)").html(""); flag[0]=1;}}【提示】手机号码、密码、电子邮箱正则条件与正则表达式如下：（1）手机号码正则条件为：11位数字；手机号码正则表达式为：/^\d{11}$/。（2）密码正则条件为：6到16位数字、字母、下划线；密码正则表达式为：/^\w{6,16}$/。（3）电子邮箱正则条件为：字符串@字符串.后缀串；正则表达式为：/^\w+@\w+\.(com||reg|net)$/。5实现表单中“注册”按钮的功能。5（1）当单击“注册”按钮时，判断五个开关值是否均为1，如果是则跳转到首页。否则完成后续编辑。$("input[type='button']").click(function(){ if(flag[0]==1&&flag[1]==1&&flag[2]==1&&flag[3]==1&&flag[4]==1){ window.location.href="index.html"; }else{ 此处为各文本框判断是否输入的相关代码 } }})（2）依次判断5个文本框的值是否为空或原提示语，如果是，设置提示信息为相应信息为必填项。以用户名文本框为例，代码如下：if(flag[0]==0){ if(userName.value==""||userName.value=="请输入用户名"){ $(".ts:eq(0)").html("用户名为必填项"); }}【学生】聆听、记录、理解通过教师讲解、课堂互动等方式，使学生了解制作注册页的相关流程及操作课堂讨论（10min）【教师】提出以下问题，组织学生分组开展讨论（1）举例说明正则表达式的定义方法。（2）举例说明正则表达式检测函数的用法。【学生】思考、讨论通过小组讨论，使学生巩固所学知识第二节课问题导入（5min）【教师】提出以下问题制作后台管理页需要哪些模块？【学生】思考、举手回答通过提问引导学生思考本节课内容传授新知

（25min）6.3.7制作后台管理页【教师】讲解制作后台管理页的具体操作【实现目标】【教师】ppt展示“后台管理页初始状态”图片（详见教材），并讲解后台管理页包含头部区域、主体区域和脚部区域。其中，头部与脚部区域同登录页。【课堂互动】✈【教师】提问后台管理页制作过程中需要注意哪些问题？✈【学生】聆听、思考、回答（1）交互效果：①当单击管理主项目时，打开或者关闭管理子项目，其他主项目关闭相关子项目；②当单击管理子项目链接时，右侧浮动框架显示相应的管理页，本案例以简单的文本作为代替。【教师】ppt展示“单击管理主项目效果”图片（详见教材）（2）页面跳转效果：【课堂互动】✈【教师】提问后台管理页中页面跳转效果有哪些？✈【学生】聆听、思考、回答①分类查询链接，跳转到分类查询页，即admin/classShow.html；②分类删除链接，跳转到分类删除页，即admin/classDelete.html；③分类修改链接，跳转到分类修改页，即admin/classEdit.html；④分类添加链接，跳转到分类添加页，即admin/classAdd.html；⑤商品查询链接，跳转到商品查询页，即admin/comShow.html；⑥商品删除链接，跳转到商品删除页，即admin/comDelete.html；⑦商品修改链接，跳转到商品修改页，即admin/comEdit.html；⑧商品添加链接，跳转到商品修改页，即admin/comAdd.html；⑨订单查看链接，跳转到订单查询页，即admin/indentShow.html；⑩订单确认链接，跳转到订单确认页，即admin/indentEdit.html；……（详见教材）【知识扫描】HTML相关知识点：①浮动框架及其属性；②超链接标签target属性的使用。【实现步骤】1按照要求创建admin文件夹及相关页面，主页面名称为adminIndex.html。12使用<header>标签制作页眉，制作方法与登录页页眉类似。23制作主体区域的列表。3HTML文档编辑操作：交替使用<div>标签与<a>标签制作管理项目列表。其中一组管理项目的HTML代码如下：<divclass="manage-title">分类管理</div><divclass="manage-boxs"> <aclass="manage"href="classShow.html"target="manage">分类查看</a> <aclass="manage"href="classEdit.html"target="manage">分类修改</a> <aclass="manage"href="classDelete.html"target="manage">分类删除</a></div>【提示】注意“退出管理”模块为超链接，应链接至index.html页面，target属性值为“self”。CSS文档编辑操作：根据效果图设置管理项目的CSS格式。.manage-title{ display:block; width:120px; height:40px; line-height:40px; text-align:center; background:#2DA8E6; color:#fff; margin:0auto; font-size:20px; border-bottom:1pxsolid#fff;}.manage-boxs{ width:120px; height:auto; overflow:hidden; margin:0auto; display:none;}4实现列表的交互效果。4（1）实现打开、关闭管理子项目的效果。①设置开关数组flag，并初始化值均为0。varflag=[0,0,0,0,0];②单击管理项目标题时，如果相应的开关为0，则隐藏所有子项目，只打开指定的子项目，并将开关值置为1；否则隐藏所有子项目，并将开关值置为0。$(".manage-title").click(function(){ varindex=$(this).index(".manage-title"); if(flag[index]==0){ $(".manage-boxs").css({ "display":"none" }); $(".manage-boxs:eq("+index+")").css({ "display":"block" }); flag[index]=1; }else{ $(".manage-boxs").css({ "display":"none" }); flag[index]=0; }})（2）实现单击子项目，右侧显示相应的管理内页的效果。将管理内页的内容布局为