《網(wǎng)站前端技術(shù)》（梁玲）621-7 教案 第30課 開發(fā)者商務(wù)網(wǎng)站建設(shè)（五）

PAGE4PAGE4PAGE3PAGE3PAGE3PAGE3

課題第30課開發(fā)者商務(wù)網(wǎng)站建設(shè)（五）課時(shí)2課時(shí)（90min）教學(xué)目標(biāo)知識(shí)技能目標(biāo)：掌握制作登錄頁的具體操作素質(zhì)目標(biāo)：通過對案例的不斷完善鍛煉學(xué)生精益求精的態(tài)度教學(xué)重難點(diǎn)教學(xué)重點(diǎn)：制作登錄頁教學(xué)難點(diǎn)：制作登錄頁教學(xué)方法問答法、討論法、講授法、實(shí)踐練習(xí)法教學(xué)用具電腦、投影儀、多媒體課件、教材、文旌課堂APP教學(xué)設(shè)計(jì)第1節(jié)課：→→→傳授新知（28min）→課堂討論（10min）第2節(jié)課：→傳授新知（25min）→課堂討論（10min）→課堂小結(jié)（3min）→作業(yè)布置（2min）教學(xué)過程主要教學(xué)內(nèi)容及步驟設(shè)計(jì)意圖第一節(jié)課課前任務(wù)【教師】布置課前任務(wù)，和學(xué)生負(fù)責(zé)人取得聯(lián)系，讓其提醒同學(xué)通過文旌課堂APP或其他學(xué)習(xí)軟件，完成課前任務(wù)請大家了解制作登錄頁的相關(guān)內(nèi)容?！緦W(xué)生】完成課前任務(wù)通過課前任務(wù)，使學(xué)生了解本節(jié)課的主要內(nèi)容，增加學(xué)生的學(xué)習(xí)興趣考勤

（2min）【教師】使用文旌課堂APP進(jìn)行簽到【學(xué)生】按照老師要求簽到培養(yǎng)學(xué)生的組織紀(jì)律性，掌握學(xué)生的出勤情況問題導(dǎo)入（5min）【教師】提出以下問題一個(gè)網(wǎng)頁的登錄頁面都包含哪些內(nèi)容？【學(xué)生】思考、舉手回答【教師】通過學(xué)生的回答引入要講的知識(shí)通過問題導(dǎo)入的方法，引導(dǎo)學(xué)生主動(dòng)思考，激發(fā)學(xué)生的學(xué)習(xí)興趣傳授新知

（28min）6.3.5制作登陸頁【教師】講解制作登陸頁的具體操作【實(shí)現(xiàn)目標(biāo)】登錄頁從上到下分為頭部區(qū)域、主體區(qū)域與腳部區(qū)域。其中，腳部區(qū)域同首頁?！窘處煛縫pt展示“登錄頁頭部區(qū)域效果”“登錄頁主體區(qū)域效果”圖片（詳見教材），并講解【課堂互動(dòng)】?【教師】提問登陸頁制作過程中需要注意哪些問題？?【學(xué)生】聆聽、思考、回答（1）登錄頁交互效果：①默認(rèn)選中“普通登錄”選項(xiàng)卡，選中的選項(xiàng)卡背景顏色為酒紅色，文本為白色，相應(yīng)表單顯示；不被選中的選項(xiàng)卡背景顏色為灰色，文本為深灰色，相應(yīng)表單隱藏；②文本框獲取焦點(diǎn)時(shí)，文本框內(nèi)容清空；③密碼文本框獲取焦點(diǎn)時(shí)，文本框內(nèi)容清空的同時(shí)更改屬性為密碼；……（詳見教材）（2）頁面跳轉(zhuǎn)效果：頁面右上角的“注冊”文本鏈接到注冊頁，即reg.html。【知識(shí)掃描】【課堂互動(dòng)】?【教師】提問登錄頁制作過程中需要使用到HTML、CSS、JS哪些知識(shí)點(diǎn)？?【學(xué)生】聆聽、思考、回答（1）HTML相關(guān)知識(shí)點(diǎn)：①表單標(biāo)簽及其常用屬性；②密碼域；③頁眉標(biāo)簽；④主體標(biāo)簽。（2）CSS相關(guān)知識(shí)點(diǎn)：各種選擇器的組合使用。（3）JS相關(guān)知識(shí)點(diǎn)：①表單的獲取；②表單所屬控件的獲取；③控件屬性的設(shè)置；④文本框、密碼框獲取焦點(diǎn)事件；⑤頁面跳轉(zhuǎn)；⑥窗口加載事件?！緦?shí)現(xiàn)步驟】1使用HTML5布局登錄頁，頁面名稱為login.html。然后在css文件夾中創(chuàng)建login.css文件，在js文件夾中創(chuàng)建login.js文件，并將它們與jquery-1.12.1.js和fun.js關(guān)聯(lián)至本頁面。12使用<header>標(biāo)簽制作頁眉區(qū)域，HTML代碼如下：2<header> <imgsrc="img/logo.png"alt=""> <div>幫助</div></header>相關(guān)CSS樣式代碼如下：header{ width:1200px; height:60px; border-bottom:2pxsolid#CCC;……（詳見教材）3使用<main>標(biāo)簽制作主體區(qū)域的框架。在<main>標(biāo)簽中放置兩個(gè)<div>標(biāo)簽。3CSS文檔編輯操作：（1）設(shè)置main標(biāo)簽選擇器，寬度1200px，高度自動(dòng)被子元素?fù)伍_；設(shè)置上下外邊距為0，且水平居中；顯示方式為彈性布局。main{ width:1200px; height:auto; overflow:hidden; margin:0auto; display:flex;}（2）設(shè)置main標(biāo)簽的一級(jí)子元素div選擇器，各子元素寬度比例為1∶1；高度自動(dòng)，被子元素?fù)伍_。main>div{ flex:1; height:auto; overflow:hidden;}4在主體區(qū)域的框架中添加內(nèi)容。其中，在主體區(qū)域左側(cè)<div>標(biāo)簽中添加一張圖片，地址為“l(fā)ogo.jpg”，設(shè)置其基本CSS樣式；在右側(cè)<div>標(biāo)簽中添加標(biāo)題、選項(xiàng)卡、表單及友情鏈接的容器元素。45制作主體區(qū)域右側(cè)的內(nèi)容。5（1）在標(biāo)題的容器元素中添加標(biāo)題內(nèi)容，相關(guān)HTML代碼如下：<divid="login-left">Developer登錄</div><divid="login-right">沒有賬戶免費(fèi)<ahref="reg.html">注冊</a></div>CSS文檔編輯操作：設(shè)置左右兩側(cè)標(biāo)題的CSS樣式。#login-left{ flex:1; text-align:left; font-size:26px;……（詳見教材）（2）在選項(xiàng)卡的容器元素中添加兩個(gè)select選項(xiàng)卡，相關(guān)HTML代碼如下：<divid="select-box"> <divclass="select">普通登錄</div> <divclass="select">快速登錄</div></div>CSS文檔編輯操作：①設(shè)置選項(xiàng)卡盒子select-box寬度為400px；高度40px；顯示方式為彈性布局；上下外邊距為0，水平居中。#select-box{ width:400px; height:40px; display:flex; margin:0auto;}②設(shè)置各選項(xiàng)卡寬度比例為1∶1，行高為40px，實(shí)現(xiàn)文本垂直居中；背景顏色為淺灰色；文本顏色為深灰色；文本水平居中；四周邊框?yàn)?px、實(shí)心線、#CCC。.select{ flex:1; line-height:40px; background:#eee; color:#666; text-align:center; border:1pxsolid#CCC;}（3）在表單的容器元素中添加普通登錄表單與快速登錄表單，相關(guān)HTML代碼如下：<formaction=""name="login1"> <divclass="ts"></div> <inputtype="text"name="userName"value="請輸入用戶名"> <divclass="ts"></div>……（詳見教材）CSS文檔編輯操作：①設(shè)置表單標(biāo)簽選擇器form寬度為400px，高度自動(dòng)，被子元素?fù)伍_；邊框?yàn)?px、實(shí)心線、#CCC；上下外邊距為0，相對于父元素水平居中。form{ width:400px; height:auto; overflow:hidden; border:1pxsolid#CCC; margin:0auto;}②設(shè)置輸入框標(biāo)簽選擇器input為塊元素；寬度為360px，高度40px；邊框?yàn)?px、實(shí)心線、#CCC；上下外邊距為5px，相對于父元素水平居中。input{ display:block; width:360px; height:40px; border:1pxsolid#CCC; margin:5pxauto;}③設(shè)置信息提示占位的類選擇器ts與ts1寬度為自動(dòng)，高度30px，行高為30px；文字大小12px；顏色為酒紅色；左側(cè)外邊距為30px。.ts,.ts1{ width:auto; height:30px; line-height:30px; font-size:12px;……（詳見教材）④使用群選擇器設(shè)置文本框和密碼框，即屬性type為text和password的輸入框input選擇器，左側(cè)內(nèi)邊距為20px。input[type="text"],input[type="password"]{ padding-left:20px;}⑤設(shè)置按鈕，即屬性type為button的輸入框input選擇器，背景顏色為酒紅色；文字顏色為白色；字體大小為24px；底部外邊距為20px。input[type="text"],input[type="password"]{ padding-left:20px;}⑥#vila{ width:360px; height:40px; margin:5pxauto; display:flex;}⑦設(shè)置驗(yàn)證碼輸入框#vilaCode寬度為180px，高度為40px；外邊距為0。#vilaCode{ width:180px; height:40px; margin:0;}⑧設(shè)置驗(yàn)證碼圖片#vilaCodeA樣式同驗(yàn)證碼輸入框，并增加設(shè)置行高為40px；文本居中對齊；背景色為粉色；字號(hào)為28px；字體樣式為斜體；文本樣式為刪除線。#vilaCodeA{ width:180px; height:40px; margin:0; line-height:40px;……（詳見教材）⑨將ts1類選擇器設(shè)置為向右浮動(dòng)，右側(cè)外邊距為30px。.ts1{ float:right; margin-right:30px;}（4）在友情鏈接的容器元素中添加內(nèi)容，相關(guān)HTML代碼如下：<divid="friend-title">使用合作網(wǎng)站賬號(hào)登錄凡客</div><divid="friend-boxs"></div>相關(guān)CSS樣式代碼如下：#friend-box{ width:400px; height:auto; border:1pxsolid#CCC;……（詳見教材）【學(xué)生】聆聽、記錄、理解通過教師講解、課堂互動(dòng)等方式，使學(xué)生了解制作登錄頁的相關(guān)流程及操作課堂討論（10min）【教師】提出以下問題，組織學(xué)生分組開展討論（1）舉例說明表單控件的獲取方法。（2）寫出JS中的焦點(diǎn)事件?！緦W(xué)生】思考、討論通過小組討論，使學(xué)生鞏固所學(xué)知識(shí)第二節(jié)課問題導(dǎo)入（5min）【教師】提出以下問題制作登錄頁時(shí)，在完成之前所講的步驟后，接下來該進(jìn)行哪些操作？【學(xué)生】思考、舉手回答通過提問引導(dǎo)學(xué)生思考本節(jié)課內(nèi)容傳授新知

（25min）6.3.5制作登陸頁【教師】講解制作登陸頁的具體操作【實(shí)現(xiàn)步驟】6制作與首頁相同的腳部區(qū)域。67制作該頁面的交互效果。7（1）實(shí)現(xiàn)表單中單擊選項(xiàng)卡的突出效果。①在fun.js文件中創(chuàng)建select函數(shù)，在其中定義并初始化n的值，使其等于0；再創(chuàng)建selectShow(n)函數(shù)，用于突出第n個(gè)選項(xiàng)卡并顯示第n個(gè)表單；然后調(diào)用selectShow(n)函數(shù)，默認(rèn)選中第0個(gè)選項(xiàng)卡，顯示第0個(gè)表單。相關(guān)代碼如下：functionselect(){ varn=0; functionselectShow(n){ $(".select").css({ "background":"#EEE", "color":"#666" });……（詳見教材）②在login.js文件中創(chuàng)建窗口加載事件，調(diào)用select函數(shù)。代碼如下：$(function(){select();})（2）實(shí)現(xiàn)表單中文本框獲取焦點(diǎn)時(shí)內(nèi)容清空的效果?！菊n堂互動(dòng)】?【教師】提問如何實(shí)現(xiàn)表單中文本框獲取焦點(diǎn)時(shí)內(nèi)容清空的效果？?【學(xué)生】聆聽、思考、回答首先在login.js文件的窗口加載事件中獲取第一個(gè)文本框元素userName，然后定義該元素獲取焦點(diǎn)的事件，即觸發(fā)時(shí)元素值為空。其余三個(gè)文本框的設(shè)置方法相同。?【多媒體】組織學(xué)生掃碼播放“用戶名密碼的置空和類型改變”視頻（詳見教材），幫助學(xué)生了解相關(guān)內(nèi)容相關(guān)代碼如下：varuserName=login1.userName;userName.onfocus=function(){ userName.value="";}varuserPass=login1.userPass;userPass.onfocus=function(){ userPass.value=""; userPass.type="password";}……（詳見教材）【提示】定義userPass元素獲取焦點(diǎn)的事件時(shí)，需將其類型設(shè)置為密碼。（3）實(shí)現(xiàn)“普通登錄”表單中“登錄”按鈕的效果，即單擊時(shí)依次判斷文本框是否為空，為空則設(shè)置相應(yīng)信息提示內(nèi)容，否則清空內(nèi)容。①定義普通登錄按鈕單擊事件。$("input[type='button']:eq(0)").click(function(){……}②在單擊事件中定義開關(guān)變量flaga、flagb均為0。varflaga=0,flagb=0;③判斷userName、userPass的值是否為空或者為原提示內(nèi)容，如果不是，設(shè)置相應(yīng)提示內(nèi)容為空，同時(shí)給相應(yīng)開關(guān)賦值為1；如果是，設(shè)置相應(yīng)提示內(nèi)容為報(bào)錯(cuò)信息，同時(shí)給相應(yīng)開關(guān)賦值為0。if(userName.value==""||userName.value=="請輸入用戶名"){ $(".ts:eq(1)").html("用戶名不為空"); flaga=0;}else{ $(".ts:eq(1)").html(""); flaga=1;}……（詳見教材）④判斷兩個(gè)開關(guān)的值是否均為1，如果是跳轉(zhuǎn)到首頁。if(flaga==1&&flagb==1){ window.location.href="index.html";}（4）實(shí)現(xiàn)“快速登錄”表單中的“看不清，換一張”功能，即單擊時(shí)更改驗(yàn)證碼內(nèi)容。①在fun.js編輯驗(yàn)證碼顯示vilaShow()函數(shù)。functionvilaShow(){……}②定義字符數(shù)組chars為驗(yàn)證碼中可以出現(xiàn)的所有字符。字符集可以由自己定義。varchars=["0","1","2","3","4","5","6","7","8","9"];③定義空字符串str，用來連接隨機(jī)碼。varstr="";④通過循環(huán)獲取6個(gè)字符，并連接到字符串變量str中。每次循環(huán)通過隨機(jī)數(shù)方法取得數(shù)組的隨機(jī)下標(biāo)，獲取不同的字符。for(vark=0;k<6;k++){ vari=Math.floor(Math.random()*10); str+=chars[i];}【提示】（1）Math.random()可以獲取0～1之間的小數(shù)，不包含0和1；Math.random()*10可以獲取0～10之間的小數(shù)，不包含0和10；Math.floor(Math.random()*10)可以將0～10之間的小數(shù)向下取整，得到0～9。（2）為了增強(qiáng)驗(yàn)證碼顯示函數(shù)的通用性，可以定義變量獲取字符集數(shù)組的長度，并將程序中的10替換為該變量。⑤獲取到完整的驗(yàn)證碼后添加到驗(yàn)證碼盒子中。$("#vilaCodeA").html(str);⑥在login.js文件的窗口加載事件中調(diào)用vilaShow()函數(shù)，然后定義“看不清，換一張”單擊事件，實(shí)現(xiàn)變化驗(yàn)證碼效果。vilaShow();$(".ts1").click(function(){ vilaShow();});（5）實(shí)現(xiàn)“快速登錄”表單中的“登錄”按鈕的效果，即單擊時(shí)分別判斷手機(jī)號(hào)碼是否為空、驗(yàn)證碼是否為空、驗(yàn)證碼是否正確。如有錯(cuò)誤，顯示相應(yīng)的提示；如沒有錯(cuò)誤則跳轉(zhuǎn)到首頁。①定義快速登錄按鈕單擊事件。$("input[type='button']:eq(1)").click(function(){……})②在單擊事件中定義開關(guān)變量flaga、flagb均為0。varflaga=0,flagb=0;③判斷userPhone的值是否為空或者為原提示內(nèi)容，如果是，設(shè)置相應(yīng)位置提示信息為“手機(jī)號(hào)碼不為空”，同時(shí)給相應(yīng)開關(guān)賦值為0；如果不是，設(shè)置相應(yīng)提示信息為空字符串，同時(shí)給相應(yīng)開關(guān)賦值為1。if(userPhone.value==""||userPhone.value=="請輸入手機(jī)號(hào)碼"){ $(".ts:eq(4)").html("手機(jī)號(hào)碼不為空"); flaga=0;}else{ $(".ts:eq(4)").html(""); flaga=1;});④判斷vilaCode的值是否為空或者為原提示內(nèi)容，如果是，設(shè)置相應(yīng)提示信息為“驗(yàn)證碼不為空”，同時(shí)設(shè)置開關(guān)值為0；如果不是，進(jìn)一步判斷vilaCode和vilaCodeA的