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

；二二二课题第30课开发者商务网站建设（五）课时2课时(90min)教学目标知识技能目标：掌握制作登录页的具体操作素质目标：通过对案例的不断完善锻炼学生精益求精的态度教学重难点教学重点：制作登录页教学难点：制作登录页教学方法问答法、讨论法、讲授法、实践练习法教学用具电脑、投影仪、多媒体课件、教材、APP教学设计第1节课：课前任务一考勤（2min）一问题导入（5min）一传授新知（28tnin）一课堂讨论（Iomin）第2节课：问题导入（5min）T传授新知（25min）T课堂讨论（IOmin）一课堂小结（3min）一作业布置（2min）教学过程主要教学内容及步骤设计意图第一节课课前任务【教师】布置课前任务,和学生负责人取得联系，让其提醒同学通过APP或其他学习软件，完成课前任务请大家了解制作登录页的相关内容。【学生】完成课前任务通过课前任务，使学生了解本节课的主要内容，增加学生的学习兴趣考勤(2min)【教师】使用APP进行签到【学生】按照老师要求签到培养学生的组织纪律性，掌握学生的出勤情况问题导入（5min）【教师】提出以下问题一个网页的登录页面都包含哪些内容？【学生】思考、举手回答【教师】通过学生的回答引入要讲的知识通过问题导入的方法，引导学生主动思考，激发学生的学习兴趣传授新知（28min）6.3.5制作登陆页【教师】讲解制作登陆页的具体操作【实现目标】登录页从上到下分为头部区域、主体区域与脚部区域。其中，脚部区域同首页。【教师】PPt展示“登录页头部区域效果”“登录页主体区域效果”图片（详见教材），并讲解通过教师讲解、课堂互动等方式，使学生了解制作登录页的相关流程及操作十【教师】提问登陆页制作过程中需要注意哪些问题？+【学生】聆听、思考、回答(I)登录页交互效果：默认选中"普通登录"选项卡，选中的选项卡背景颜色为酒红色，文本为白色，相应表单显示；不被选中的选项卡背景颜色为灰色，文本为深灰色，相应表单隐藏；文本框获取焦点时，文本框内容清空；密码文本框获取焦点时，文本框内容清空的同时更改属性为密码；(详见教材)(2)页面跳转效果：页面右上角的"注册"文本链接到注册页，即reg.html【知识扫描】【课堂互动】十【教师】提问登录页制作过程中需要使用到HTML、CSS、JS哪些知识点？+【学生】聆听、思考、回答(I)HTML相关知识点：表单标签及其常用属性：密码域：页眉标签；主体标签。(2)CSS相关知识点：各种选择器的组合使用。(3)JS相关知识点：表单的获取；表单所属控件的获取；控件属性的设置；文本框、密码框获取焦点事件；页面的桀；窗口加载事件。【实现步骤】E2三l使用HTML5布局登录页，页面名称为Ioginhml.然后在css文件夹中创建login.css文件,在js文件夹中创建Ioginjs文件，并将它们与jquery-l12.1.js和fun.js关联至本页面。使用header标签制作页眉区域,HTML代码如下：header<ingsrc="imglogo.png"alt=""><div>帮助<div>header相关CSS样式代码如下：header(width:1200px;height:60px;border-bottom:2pxsolid#CCC:（详见教材）使用main标签制作主体区域的框架。在main标签中放置两个div标签。CSS文档编辑操作：>»*(1)设置main标签选择器，宽度1200px,高度自动被子元素撑开；设置上下外边距为0,且水平居中；显示方式为弹性布局。mainwidth:1200px;height:auto;overflow:hidden;margin:Oauto;display:flex;(2)设置main标签的一级子元素div选择器，各子元素宽度比例为1：1；高度自动,被子元素撑开。main>divflex:l;height:auto;overflow:hidden;)步骤4在主体区域的框架中添加内容。其中，在主体区域左侧<div>标签中添加一张图片，地址为“logoJPg",设置其基本CSS样式；在右侧<div>标签中添力讲示题、选项卡、表单及友情链接的容器元素。步腺5制作主体区域右侧的内容。(1)在标题的容器元素中添加标题内容，相关HTML代码如下：<divid="login-left">Developer登录<div><divid="login-right">没有账户免费<ahref="reg.html">ifl<a><div>CSS文档编辑操作：设置左右两侧标题的CSS样式。#login-leftflex:1;text-align:left;font-size:26px;(详见教材)(2)在选项卡的容器元素中添加两个select选项卡，相关HTML代码如下：<divid="select-box',><divClaSS="select"普通登录<div><divCIaSS="select">快速登录vdiv><div>CSS文档编辑操作：设置选项卡盒子select-box宽度为4(X)PX；高度40PX；显示方式为弹性布局；上下外边距为0,水平居中。#select-boxwidth:4(X)px;height:40px;display:flex;margin:0auto;设置各选项卡宽度比例为1:1,行高为40px,实现文本垂直居中；背景颜色为浅灰色；文本颜色为深灰色；文本水平居中；四周边框为Ipx、实心线、#CCc.selectflex:l;line-height:40x;background:#eee;color:#666;text-align:center;border:1pxsolid#CCC;(3)在表单的容器元素中添加普通登录表单与快速登录表单，相关HTML代码如下：<fbrmaction=""name="Iogin|><divclass="ts,'><div><inputtype="text"name="userName"value="请输入用户名"><divclass="ts,'><div>.（详见教材）CSS文档编辑操作：设置表单标签选择器form宽度为400px,高度自动,被子元素撑开；边框为1px、实线、#CCC；上下外边距为0,相对于父元素水平居中。formwidth:400px;height:auto;overflow:hidden;border:Ipxsolid#CCC;margin:0auto;!设置输入框标签选择器input为块元素；宽度为360PX,高度40PX；边框为1px、实线、#CCC；上下外边距为5PX,相对于父元素水平居中。input(display:block;width:360px;height:40px;border:Ipxsolid#CCC;margin:5pxauto;)设置信息提示占位的类选择器ts与tsi宽度为自动，高度30PX,行高为30px；文字大小12PX；颜色为酒红色；左侧外边距为30px.ts,.tslwidth:auto;height:30px;line-height:30px:fbnt-size:12px;（详见教材）使用群选择器设置文本框和密码框，即属性type为text和password的输入框input选择器，左侧内边距为20pxinpu(type="(ext",inpultype="password"padding-left:20px;设置按钮，即属性type为button的输入框input选择器，背景颜色为酒红色；文字颜色为白色；字体大小为24px；底部外边距为20pxinputtype="text",inputjtype="password"padding-left:20px;设置id选择器Vila宽度为360PX,高度为40PX；上下边距5px,水平居中；弹性布局。#vilawidth:360px;height:40px;margin:5pxauto;display:flex;设置验证码输入框#ViIaCOde宽度为180px,高度为40px；外边距为0。#vilaCodewidth:180px;height:40px;margin:0;I一M-EZ簿IV.：,-*NKf,¾-v'!三*GK三>，.)设置验证码图片机HaCodeA样式同验证码输入框，并增加设置行高为40px；文本居中对齐；背景色为粉色；字号为28px；字体样式为斜体；文本样式为删除线。#vilaCodeAwidth:180px;height:40px;margin:0;line-height:40px;.(详见教材)将H类选择器设置为向右浮动，右侧外边S巨为30px.tsl(float:right;margin-right:30px;(4)在友情链接的容器元素中添加内容，相关HTML代码如下：i(!=叶襁泪切加使用合作网站账号登录凡客川)<divid="friend-boxs',><div>相关CSS样式代码如下：#friend-boxwidth:400px;height:auto:border:Ipxsolid#CCC;(详见教材)【学生】聆听、记录、理解课堂讨论(10min)【教师】提出以下问题，组织学生分组开展讨论(I)举例说明表单控件的获取方法。(2)写出JS中的焦点事件.【学生】思考、讨论通过小组讨论，使学生巩固所学知识第二节课问题导入(5min)【教师】提出以下问题制作登录页时，在完成之前所讲的步骤后,接下来该进行哪些操作?【学生】思考、举手回答通过提问引导学生思考本节课内容传授新知(25min)6.3.5制作登陆页【教师】讲解制作登陆页的具体操作【实现步骤】区域。；效果。,在其中定义并初始化n的值，使其等于0；再创建5卡并显示第n个表单；然后调用SeleCtShOW(n)函数，单。相关代码如下：通过教师讲解、课堂互动等方式，使学生了解制作登录页的相关流程及操作步蝶6制作与首页相同的脚部制作该页面的交互效果见表单中单击选项卡的突t±Js文件中创建select函数函数，用于突出第n个选区个选项卡，显示第0个表SeIeel()步骤7(1)实多在furselectShow(n)l默认选中第0functionS(".select").css("background'1:"#EEE","color":"#666"I)；(详见教材)在Ioginjs文件中创建窗口加载事件，调用select函数。代码如下：$(function()seleci():)(2)实现表单中文本框获取焦点时内容清空的效果。【课堂互动】【教师】提问如何实现表单中文本框获取焦点时内容清空的效果？÷【学生】聆听、思考、回答首先在Ioginjs文件的窗口加载事件中获取第一个文本框元素UserName,然后定义该元素获取焦点的事件，即触发时元素值为空。其余三个文本框的设置方法相同。÷【多媒体】组织学生扫码播放“用户名密码的置空和类型改变“视频(详见教材)，帮助学生了解相关内容相关代码如下：varUserName=Iogin1.userName;userName.onfbcus=function()USerName.value="")varUserPass=Iogin1.userPass;userPass.onfbcus=function()userPass.value=""USerPaSS.iype="password"(详见教材)【提示】定义userPass元素获取焦点的事件时，需将其类型设置为密码。(3)实现"普通登录"表单中"登录"按钮的效果，即单击时依次判断文本框是否为空，为空则设置相应信息提示内容，否则清空内容。定义普通登录按钮单击事件。$("input|type=,button':eq(0)M).click(function()在单击事件中定义开关变量flaga、flagb均为0.Varflaga=O,flagb=O;>»判断USerName、userPass的值是否为空或者为原提小内容，如果不是，设置相应提 示内容为空，同时给相应开关赋值为1；如果是，设置相应提示内容为报错信息，同时给相 应开关赋值为Oeif(userName.value=",userName.value="请输入用户名”)$(".ts:eq(1)").html("用户名不为空")；flaga=0;)elseS(".tseq(l)',).html("");flaga=1;)(详见教材)判断两个开关的值是否均为1,如果是跳转到首页。if(flaga=1&&flagb=1)window.location.href="index.html"(4)实现“快速登录"表单中的"看不清，换一张"功能，即单击时更改验证码内容。在fun.js编辑验证码显示ViIaShoWo函数。functionvilaShow()定义字符数组CharS为验证码中可以出现的所有字符。字符集可以由自己定义。varchars=,O",","2"t',3","4"'5",'<6'"7,8",9"定义空字符串str,用来连接随机码。varstr=""通过循环获取6个字符，并连接到字符串变量str中。每次循环通过随机数方法取得数组的随机下标，获取不同的字符。for(vark=0;k<6;k+)vari=Math.flr(Math.random()*10);str+=charsi;【提示】(1)MaIh.random。可以获取0I之间的小数,不包含。和1；Malh.random。*10可以获取()10之间的小数，不包含0和10；MaIhfoor(Math.random()*10)可以将01()之间的小数向下取整，得到09。(2)为了增强验证码显示函数的通用性，可以定义变量获取字符集数组的长度，并将程序中的10替换为该变量。获取到完整的验证码后添加到验证码盒子中。$("#vilaCodeA").html(str);在IoginJs文件的窗口加载事件中调用ViIaShOWo函数，然后定义"看不清，换一张"单击事件，实现变化验证码效果。vilaShow();S(".tsl").click(function()vilaShow();!)；(5)实现“快速登录"表单中的"登录"按钮的效果，即单击时分别判断手机号码是否为空、验证码是否为空、验证码是否正确。如有错误，显示相应的提示；如没有错误则学桀到首页.定义快速登录按钮单击事件。$("inputtype-button':eq(1)M).click(function()1)在单击事件中定义开关变量Haga、flagb均为0。varflaga=0,agb=0;判断UserPhone的值是否为空或者为原提示内容，如果是，设置相应位置提示信息为"手机号码不为空”，同时给相应开关赋值为0；如果不是，设置相应提示信息为空字符串，同时给相应开关赋值为Uif(userPhone.value=""userPhone.value="请输入手机号码$(".ts:eq(4)").html("手机号码不为空");flaga=O;else($(".ts:eq(4)").html("");flaga=l;!)；判断VilaCode的值是否为空或者为原提示内容，如果是，设置相应提示信息为"验证码不为空"，同时设置开关值为0；如果不是，进一步判断VilaCode和VilaCodeA的内容值是否相等,不相等则设置相应提示信息为"验证码不正确"；否则设置相应提示信息为空字符串。if(vikCode.value=""vilaCode.value="请输入验证码")$(".eq(5)").html("验证码不为空")；Aagb=O;else(详见教材)当两个开关值都为I时，百阵专到首页。if(flaga=三1&&flagb=1)window.location.href="index.html"I【学生】聆听、记录、理解课堂讨论(10min)【教师】组织学生分组，围绕以下问题开展讨论(1)请简述验证码显示函数的逻辑思路。(2)举例说明JS实现页面鼠牌专的方法。【学生】讨论、回答通过课堂讨论，使学生巩固所学知识课堂小结(3min)【教师】简要总结本节课的要点本节课主要学习了制作登录页的具体操作,希望通过本节课的讲解，大家可以巩固之前所学的相关知识，学会完善网站所需静态页面的方法，掌握网站的基础设计。【学生】总结回顾知识点总结知识点，巩固学生对制作登录页相关知识的印象作业布置(2min)【教师】布置课后作业个人作业：请根据课堂所学知识，完成课后习题团队作业：实现个人网站的登录页面或登录功能，并形成文档上传至APP通过课后作业复习巩固学到的知识，提高学生的理解能力*本节课在教学中，采用小组合作、全班交流等多种课堂教学组织形式，这些形式为学生创造了合作交流的空教学反思间，还为他们的自主学习提供了充足的时间，让他们有一个宽松、和谐的学习环境。学生才是学习的主人，教师的一个重要任务就是为学生提供学生合作交流的空间与时间，这是学生自主学习最重要的学习资源环境。