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

PAGE4PAGE4PAGE3PAGE3PAGE3PAGE3

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

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

（28min）6.3.6制作注冊(cè)頁(yè)【教師】講解制作注冊(cè)頁(yè)的具體操作【實(shí)現(xiàn)目標(biāo)】【教師】ppt展示“注冊(cè)頁(yè)主體區(qū)域右側(cè)表單的初始效果及交互效果”圖片（詳見(jiàn)教材），并講解注冊(cè)頁(yè)從上到下分為頭部區(qū)域、主體區(qū)域和腳部區(qū)域。整體與登錄頁(yè)類似，只有主體區(qū)域右側(cè)表單有所區(qū)別。制作過(guò)程中需要注意一些問(wèn)題。（1）當(dāng)文本框獲取到焦點(diǎn)時(shí)，內(nèi)容為空。（2）密碼和重復(fù)密碼文本框在獲取焦點(diǎn)時(shí)，類型變?yōu)槊艽a。（3）用戶名、手機(jī)號(hào)碼、密碼、郵箱地址文本框輸入文本時(shí)，顯示相應(yīng)的正則條件，在輸入正確時(shí)正則條件提示消失。如用戶名輸入時(shí)如數(shù)據(jù)不符合條件，會(huì)顯示報(bào)錯(cuò)信息。（4）重復(fù)輸入密碼時(shí)，提示兩次密碼應(yīng)一致。（5）單擊“注冊(cè)”按鈕時(shí)，判斷各必填項(xiàng)目是否為空且輸入正確，給出相應(yīng)提示。（6）單擊頁(yè)面右上角“登錄”鏈接可跳轉(zhuǎn)到登錄頁(yè)，即login.html。【知識(shí)掃描】【課堂互動(dòng)】?【教師】提問(wèn)制作注冊(cè)頁(yè)過(guò)程中需要使用到JS、JQuery哪些知識(shí)點(diǎn)？?【學(xué)生】聆聽(tīng)、思考、回答（1）JS相關(guān)知識(shí)點(diǎn)：①正則表達(dá)式；②文本框輸入事件；③正則檢測(cè)函數(shù)。（2）JQuery相關(guān)知識(shí)點(diǎn)：①獲取元素；②設(shè)置DOM元素屬性值方法?！緦?shí)現(xiàn)步驟】1使用HTML5和CSS3布局注冊(cè)頁(yè)，頁(yè)面名稱為reg.html，CSS樣式表名稱為reg.css，保存在css文件夾中，JS文件名稱為reg.js，保存在js文件夾中。將樣式表、JS文件與“l(fā)ogin.css”“jquery-1.12.1.js”“fun.js”文件關(guān)聯(lián)至本頁(yè)面。12制作主題區(qū)域右側(cè)表單。2（1）修改表單的標(biāo)題，在主體區(qū)域右側(cè)div元素中輸入如下代碼：<divid="login-caption"> <divid="login-left">Developer注冊(cè)</div> <divid="login-right">已有賬戶要<ahref="login.html">登錄</a></div></div>（2）添加注冊(cè)表單?！菊n堂互動(dòng)】?【教師】提問(wèn)添加注冊(cè)表單需要設(shè)計(jì)表單中哪些屬性？?【學(xué)生】聆聽(tīng)、思考、回答①表單name屬性值為reg，表單只有頂端邊框，且顏色為酒紅色、實(shí)心線、2px；②表單中有5個(gè)文本框，name屬性分別為userName、userPhone、userPass、userPass1、userEmail，樣式同登錄頁(yè)中的輸入框樣式，并為兩個(gè)密碼框定義類名為“pass”；③每個(gè)文本域后和用戶名文本域之前均布局一個(gè)信息提示ts；④按鈕的文字提示為“注冊(cè)”。代碼如下：<formaction=""name="reg"> <divclass="ts"></div> <inputtype="text"name="userName"placeholder="請(qǐng)輸入用戶名"> <divclass="ts"></div> <inputtype="text"name="userPhone"placeholder="請(qǐng)輸入手機(jī)號(hào)碼"> <divclass="ts"></div> <inputtype="text"name="userPass"placeholder="請(qǐng)輸入密碼"class="pass"> <divclass="ts"></div> <inputtype="text"name="userPass1"placeholder="請(qǐng)重復(fù)輸入密碼"class="pass"> <divclass="ts"></div> <inputtype="text"name="userEmail"placeholder="請(qǐng)輸入郵箱地址"> <divclass="ts"></div> <inputtype="button"value="注冊(cè)"></form>3實(shí)現(xiàn)表單文本框的交互效果。3（1）批量實(shí)現(xiàn)文本域獲取焦點(diǎn)時(shí)，值為空。$("input[type='text']").focus(function(){ $(this).attr("value",""); })（2）批量實(shí)現(xiàn)密碼相關(guān)文本框獲取焦點(diǎn)時(shí)，type值為password。$("input[class='pass']").focus(function(){ $(this).attr("type","password");})（3）實(shí)現(xiàn)在重復(fù)密碼文本框輸入時(shí)判定兩次密碼是否輸入正確。如果不匹配，設(shè)置相應(yīng)提示信息內(nèi)容，相應(yīng)開(kāi)關(guān)值為0；否則設(shè)置相應(yīng)信息內(nèi)容為空字符串，相應(yīng)開(kāi)關(guān)值為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實(shí)現(xiàn)用戶名、手機(jī)號(hào)碼、密碼、郵箱地址的正則驗(yàn)證，并使用開(kāi)關(guān)數(shù)組跟蹤正確性。4（1）定義開(kāi)關(guān)數(shù)組，內(nèi)含五個(gè)元素，每個(gè)元素值均為0。varflag=[0,0,0,0,0];（2）實(shí)現(xiàn)交互效果“輸入文本時(shí)，相應(yīng)的提示內(nèi)容為正則條件，相應(yīng)開(kāi)關(guān)值為0；文本輸入正確時(shí)，相應(yīng)的提示內(nèi)容為空字符串，開(kāi)關(guān)值為1”。以用戶名為例，正則條件為“6-16位數(shù)字或下劃線或字母、首位不為數(shù)字”。定義用戶名正則。varregName=/^\D\w{5,15}$/;獲取用戶名DOM元素并定義用戶名輸入框輸入事件，當(dāng)不符合正則條件時(shí)設(shè)置顯示內(nèi)容，否則設(shè)置顯示內(nèi)容為空。varuserName=reg.userName;userName.oninput=function(){ if(!regName.test(userName.value)){ $(".ts:eq(1)").html("用戶名包含6-16位字母、數(shù)字、下劃線，且首字符不得為數(shù)字"); flag[0]=0; }else{ $(".ts:eq(1)").html(""); flag[0]=1;}}【提示】手機(jī)號(hào)碼、密碼、電子郵箱正則條件與正則表達(dá)式如下：（1）手機(jī)號(hào)碼正則條件為：11位數(shù)字；手機(jī)號(hào)碼正則表達(dá)式為：/^\d{11}$/。（2）密碼正則條件為：6到16位數(shù)字、字母、下劃線；密碼正則表達(dá)式為：/^\w{6,16}$/。（3）電子郵箱正則條件為：字符串@字符串.后綴串；正則表達(dá)式為：/^\w+@\w+\.(com||reg|net)$/。5實(shí)現(xiàn)表單中“注冊(cè)”按鈕的功能。5（1）當(dāng)單擊“注冊(cè)”按鈕時(shí)，判斷五個(gè)開(kāi)關(guān)值是否均為1，如果是則跳轉(zhuǎn)到首頁(yè)。否則完成后續(xù)編輯。$("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{ 此處為各文本框判斷是否輸入的相關(guān)代碼 } }})（2）依次判斷5個(gè)文本框的值是否為空或原提示語(yǔ)，如果是，設(shè)置提示信息為相應(yīng)信息為必填項(xiàng)。以用戶名文本框?yàn)槔?，代碼如下：if(flag[0]==0){ if(userName.value==""||userName.value=="請(qǐng)輸入用戶名"){ $(".ts:eq(0)").html("用戶名為必填項(xiàng)"); }}【學(xué)生】聆聽(tīng)、記錄、理解通過(guò)教師講解、課堂互動(dòng)等方式，使學(xué)生了解制作注冊(cè)頁(yè)的相關(guān)流程及操作課堂討論（10min）【教師】提出以下問(wèn)題，組織學(xué)生分組開(kāi)展討論（1）舉例說(shuō)明正則表達(dá)式的定義方法。（2）舉例說(shuō)明正則表達(dá)式檢測(cè)函數(shù)的用法?！緦W(xué)生】思考、討論通過(guò)小組討論，使學(xué)生鞏固所學(xué)知識(shí)第二節(jié)課問(wèn)題導(dǎo)入（5min）【教師】提出以下問(wèn)題制作后臺(tái)管理頁(yè)需要哪些模塊？【學(xué)生】思考、舉手回答通過(guò)提問(wèn)引導(dǎo)學(xué)生思考本節(jié)課內(nèi)容傳授新知

（25min）6.3.7制作后臺(tái)管理頁(yè)【教師】講解制作后臺(tái)管理頁(yè)的具體操作【實(shí)現(xiàn)目標(biāo)】【教師】ppt展示“后臺(tái)管理頁(yè)初始狀態(tài)”圖片（詳見(jiàn)教材），并講解后臺(tái)管理頁(yè)包含頭部區(qū)域、主體區(qū)域和腳部區(qū)域。其中，頭部與腳部區(qū)域同登錄頁(yè)。【課堂互動(dòng)】?【教師】提問(wèn)后臺(tái)管理頁(yè)制作過(guò)程中需要注意哪些問(wèn)題？?【學(xué)生】聆聽(tīng)、思考、回答（1）交互效果：①當(dāng)單擊管理主項(xiàng)目時(shí)，打開(kāi)或者關(guān)閉管理子項(xiàng)目，其他主項(xiàng)目關(guān)閉相關(guān)子項(xiàng)目；②當(dāng)單擊管理子項(xiàng)目鏈接時(shí)，右側(cè)浮動(dòng)框架顯示相應(yīng)的管理頁(yè)，本案例以簡(jiǎn)單的文本作為代替。【教師】ppt展示“單擊管理主項(xiàng)目效果”圖片（詳見(jiàn)教材）（2）頁(yè)面跳轉(zhuǎn)效果：【課堂互動(dòng)】?【教師】提問(wèn)后臺(tái)管理頁(yè)中頁(yè)面跳轉(zhuǎn)效果有哪些？?【學(xué)生】聆聽(tīng)、思考、回答①分類查詢鏈接，跳轉(zhuǎn)到分類查詢頁(yè)，即admin/classShow.html；②分類刪除鏈接，跳轉(zhuǎn)到分類刪除頁(yè)，即admin/classDelete.html；③分類修改鏈接，跳轉(zhuǎn)到分類修改頁(yè)，即admin/classEdit.html；④分類添加鏈接，跳轉(zhuǎn)到分類添加頁(yè)，即admin/classAdd.html；⑤商品查詢鏈接，跳轉(zhuǎn)到商品查詢頁(yè)，即admin/comShow.html；⑥商品刪除鏈接，跳轉(zhuǎn)到商品刪除頁(yè)，即admin/comDelete.html；⑦商品修改鏈接，跳轉(zhuǎn)到商品修改頁(yè)，即admin/comEdit.html；⑧商品添加鏈接，跳轉(zhuǎn)到商品修改頁(yè)，即admin/comAdd.html；⑨訂單查看鏈接，跳轉(zhuǎn)到訂單查詢頁(yè)，即admin/indentShow.html；⑩訂單確認(rèn)鏈接，跳轉(zhuǎn)到訂單確認(rèn)頁(yè)，即admin/indentEdit.html；……（詳見(jiàn)教材）【知識(shí)掃描】HTML相關(guān)知識(shí)點(diǎn)：①浮動(dòng)框架及其屬性；②超鏈接標(biāo)簽target屬性的使用?！緦?shí)現(xiàn)步驟】1按照要求創(chuàng)建admin文件夾及相關(guān)頁(yè)面，主頁(yè)面名稱為adminIndex.html。12使用<header>標(biāo)簽制作頁(yè)眉，制作方法與登錄頁(yè)頁(yè)眉類似。23制作主體區(qū)域的列表。3HTML文檔編輯操作：交替使用<div>標(biāo)簽與<a>標(biāo)簽制作管理項(xiàng)目列表。其中一組管理項(xiàng)目的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>【提示】注意“退出管理”模塊為超鏈接，應(yīng)鏈接至index.html頁(yè)面，target屬性值為“self”。CSS文檔編輯操作：根據(jù)效果圖設(shè)置管理項(xiàng)目的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實(shí)現(xiàn)列表的交互效果。4（1）實(shí)現(xiàn)打開(kāi)、關(guān)閉管理子項(xiàng)目的效果。①設(shè)置開(kāi)關(guān)數(shù)組flag，并初始化值均為0。varflag=[0,0,0,0,0];②單擊管理項(xiàng)目標(biāo)題時(shí)，如果相應(yīng)的開(kāi)關(guān)為0，則隱藏所有子項(xiàng)目，只打開(kāi)指定的子項(xiàng)目，并將開(kāi)關(guān)值置為1；否則隱藏所有子項(xiàng)目，并將開(kāi)關(guān)值置為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）實(shí)現(xiàn)單擊子項(xiàng)目，右側(cè)顯示相應(yīng)的管理內(nèi)頁(yè)的效果。將管理內(nèi)頁(yè)的內(nèi)容布局為