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

PAGE4PAGE4PAGE3PAGE3PAGE3PAGE3

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

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

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

（25min）6.3.7制作后臺管理頁【教師】講解制作后臺管理頁的具體操作【實現(xiàn)目標】【教師】ppt展示“后臺管理頁初始狀態(tài)”圖片（詳見教材），并講解后臺管理頁包含頭部區(qū)域、主體區(qū)域和腳部區(qū)域。其中，頭部與腳部區(qū)域同登錄頁?！菊n堂互動】?【教師】提問后臺管理頁制作過程中需要注意哪些問題？?【學生】聆聽、思考、回答（1）交互效果：①當單擊管理主項目時，打開或者關閉管理子項目，其他主項目關閉相關子項目；②當單擊管理子項目鏈接時，右側浮動框架顯示相應的管理頁，本案例以簡單的文本作為代替?！窘處煛縫pt展示“單擊管理主項目效果”圖片（詳見教材）（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屬性的使用?！緦崿F(xiàn)步驟】1按照要求創(chuàng)建admin文件夾及相關頁面，主頁面名稱為adminIndex.html。12使用<header>標簽制作頁眉，制作方法與登錄頁頁眉類似。23制作主體區(qū)域的列表。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文檔編輯操作：根據(jù)效果圖設置管理項目的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實現(xiàn)列表的交互效果。4（1）實現(xiàn)打開、關閉管理子項目的效果。①設置開關數(shù)組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）實現(xiàn)單擊子項目，右側顯示相應的管理內(nèi)頁的效果。將管理內(nèi)頁的內(nèi)容布局為