《网站前端技术》教案第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)实多在fursel