1、PHP網(wǎng)站開發(fā)項目式教程教案任務(wù)5-3-驗證碼的升級、加載與刷新PHP網(wǎng)站開發(fā)項目式教程教案任務(wù)5-3-驗證碼的升級、加載與刷新PHP網(wǎng)站開發(fā)項目式教程教案任務(wù)5-3-驗證碼的升級、加載與刷新5-3 驗證碼的升級、加載與刷新課程內(nèi)容信息說明所屬任務(wù)任務(wù)五 郵箱注冊和登錄功能實現(xiàn)已有基礎(chǔ)（學(xué)情）已經(jīng)完成了本任務(wù)中的郵箱注冊界面的設(shè)計和表單數(shù)據(jù)驗證，具備了項目基礎(chǔ)；已經(jīng)設(shè)計了不帶干擾因素的圖片驗證碼。教學(xué)目標(biāo)知識目標(biāo)1.掌握在驗證碼圖片中添加干擾因素的做法（函數(shù)imageline()和imagesetpixel()的應(yīng)用）2.掌握在頁面中加載和刷新驗證碼的做法能力目標(biāo)1.能夠設(shè)計出安全性更高不易被

2、機器識別的驗證碼，能夠在任何注冊或登錄頁面中自由加載和刷新驗證碼2.能夠獨立添加除黑點和直線之外的干擾因素（例如半圓形或三角形以及驗證碼字符的黏連效果），創(chuàng)建漢字驗證碼，培養(yǎng)創(chuàng)新思維和設(shè)計能力素質(zhì)目標(biāo)（包含課程思政）1.向他人求助之前能夠通過查找資料自主嘗試解決問題2.要秉持精益求精的精神，提升驗證碼的安全性，以保護客戶利益；同樣秉持精益求精的精神，追求頁面的美觀，做到精細(xì)化的布局和排版3.養(yǎng)成代碼規(guī)范的習(xí)慣重點1.函數(shù)imageline()和imagesetpixel()的應(yīng)用2.在頁面中加載和刷新驗證碼難點1.如何實現(xiàn)驗證碼的刷新（js函數(shù)的定義及調(diào)用）教學(xué)策略信息化手段流程圖動畫演示教學(xué)

3、方法討論法、啟發(fā)引導(dǎo)、問題導(dǎo)向、講授法學(xué)習(xí)方法課前預(yù)習(xí)、課中探究、課后練習(xí)與拓展課前活動及需要時間教師活動及內(nèi)容學(xué)生活動及內(nèi)容1.布置學(xué)生觀看如下視頻，設(shè)計翻轉(zhuǎn)課堂問題，安排預(yù)習(xí)作業(yè)（圖片驗證碼預(yù)習(xí)作業(yè)-2）5-5.2-7驗證碼圖片中黑點和直線的生成5-5.2-8圖片驗證碼的插入和刷新5-5.2-9擴展圖片驗證碼2.設(shè)計職教云頭腦風(fēng)暴問題、搶答問題、搖一搖問題和課堂討論問題，為課堂使用做準(zhǔn)備3.批閱學(xué)生的預(yù)習(xí)作業(yè)1.觀看視頻5-5.2-7（約8分鐘）5-5.2-8（約9分鐘）5-5.2-9（約5分鐘）2.思考翻轉(zhuǎn)課堂問題，完成預(yù)習(xí)作業(yè)（約20分鐘）3.完成“課前預(yù)習(xí)中的難點問題調(diào)查問卷”課中活

4、動（檢查預(yù)習(xí)效果，講解重點難點）及時間安排1.教學(xué)目標(biāo)導(dǎo)入（5分鐘）2.在圖片驗證碼中增加黑點和直線等干擾因素（30分鐘）3.在注冊界面中插入圖片驗證碼（10分鐘）4.定義函數(shù)實現(xiàn)圖片驗證碼的刷新操作（35分鐘）5.課中考核與總結(jié)（10分鐘）環(huán)節(jié)1-教學(xué)目標(biāo)導(dǎo)入（5分鐘）以問題導(dǎo)入的方式說明已經(jīng)設(shè)計的驗證碼存在的問題及升級的必要性，引入課程教學(xué)目標(biāo)教師活動學(xué)生活動展示已有驗證碼效果，啟用搶答問題：這樣的驗證碼有什么缺陷？需要添加什么因素？ 教師強調(diào)各種干擾因素對圖片驗證碼的重要性，引入課程思政-繼續(xù)培養(yǎng)學(xué)生精益求精客戶至上的工匠精神。（5分鐘）學(xué)生思考并回答、聽講環(huán)節(jié)2-在圖片驗證碼中增加黑點

5、和直線等干擾因素（30分鐘）重點：函數(shù)imageline()和imagesetpixel()的應(yīng)用教學(xué)方法：啟發(fā)引導(dǎo)、對比分析、流程圖動畫教師活動學(xué)生活動（1）講解重點：函數(shù) imagepixel()的作用和格式（講授+啟發(fā)引導(dǎo)）說明該函數(shù)的作用和格式，啟用搖一搖回答問題，鞏固與當(dāng)前函數(shù)高度相似的函數(shù)imagefill()的格式及作用。講解重點+難點：隨機設(shè)置100個黑色像素的操作流程（流程圖動畫）啟用搶答問題：循環(huán)變量$i的初值和終值還可換成什么樣的取值？為什么可以換？讓學(xué)生注意不同環(huán)境中循環(huán)變量取值的要求安排課堂實操：在圖片驗證碼中隨機增加100個黑點（8分鐘）學(xué)生回答問題、聽課、完成操作

6、（2）啟用頭腦風(fēng)暴問題：函數(shù)imageline()需要幾個參數(shù)？其中幾個用于設(shè)置坐標(biāo)？設(shè)置坐標(biāo)的參數(shù)順序如何？啟用搖一搖實操問題：選取學(xué)生登臺實操，在圖片驗證碼中隨機增加兩條直線啟用搶答問題：如何將一條線控制在左側(cè)，一條線控制在右側(cè)？（8分鐘）學(xué)生回答問題、登臺實操（3）安排學(xué)生完成黑點和直線等干擾因素的添加 在已有驗證碼中增加一個半徑12像素的半圓作為干擾因素，半圓要封閉，位置隨意（網(wǎng)上搜索+小組討論素質(zhì)目標(biāo)養(yǎng)成）學(xué)生搜索畫圓弧的函數(shù)，通過小組討論，確定實現(xiàn)上面功能時函數(shù)的參數(shù)取值形式啟用搶答實操問題：完成半圓干擾因素的添加（14分鐘）學(xué)生參與討論、回答問題，獨立完成驗證碼的升級環(huán)節(jié)3-在注

7、冊界面中插入圖片驗證碼（10分鐘）重點：在注冊頁面中插入驗證碼及調(diào)整圖片與文本對齊的方法教學(xué)方法：問題導(dǎo)向、啟發(fā)引導(dǎo)法教師活動學(xué)生活動（1）啟用頭腦風(fēng)暴問題：作為生成圖片的yzm.php文件，要如何加載到注冊頁面中？教師強調(diào)：只要最終結(jié)果是圖片，無論文件類型如何，加載到頁面的方法都是唯一的，說明加載圖片驗證碼的方法及設(shè)置圖片元素name或id的必要性（4分鐘）回答問題、聽課（2）在插入圖片驗證碼之后，圖片和前面的文本框從垂直方向沒有對齊（圖片向上文本框向下），頁面效果如左圖所示，引導(dǎo)學(xué)生觀察 啟用搶答問題：產(chǎn)生該問題的原因是什么？如何解決問題得到右圖所示效果？（學(xué)生寫代碼解決該問題）這種問題在

8、頁面設(shè)計中并不常見，因此，很多學(xué)生會想當(dāng)然認(rèn)為是表格單元格沒有設(shè)置頂端對齊所造成的，教師強調(diào)產(chǎn)生問題的原因，告誡學(xué)生養(yǎng)成精益求精的項目開發(fā)習(xí)慣，考慮頁面布局的每個細(xì)節(jié)，達(dá)到美觀的效果。（6分鐘）學(xué)生觀察運行效果、搶答問題并登臺實操環(huán)節(jié)4-定義函數(shù)實現(xiàn)圖片驗證碼的刷新操作（35分鐘）重點：刷新的概念作用及驗證碼刷新的本質(zhì)重點+難點：如何使用js函數(shù)實現(xiàn)驗證碼的刷新教學(xué)方法：問題導(dǎo)向、設(shè)置障礙、啟發(fā)引導(dǎo)法教師活動學(xué)生活動（1）解決重點：刷新的概念作用及驗證碼刷新的本質(zhì)（動畫演示）啟用搖一搖問題：頁面刷新的概念是什么？刷新頁面的作用是什么？教師加以解釋說明啟用頭腦風(fēng)暴問題：圖片驗證碼的刷新要重新運行

9、的是哪個文件？啟用搶答問題：刷新整個注冊頁面，可否刷新驗證碼？能否通過這種方式實現(xiàn)驗證碼的刷新功能？為什么？演示動畫，通過動畫展示這種做法的嚴(yán)重缺陷。引出課程思政：開發(fā)項目時務(wù)必要隨時注意提升用戶的體驗感！啟用頭腦風(fēng)暴問題：對圖片驗證碼的刷新屬于局部刷新，其本質(zhì)是更換哪個頁面元素的哪個屬性的取值？教師加以適當(dāng)講解和總結(jié)（8分鐘）回答問題、聽講（2）說明使用js函數(shù)實現(xiàn)驗證碼刷新的三個步驟講解重點，定義函數(shù)yzmupdate()（講授+流程圖動畫演示）使用流程圖動畫說明函數(shù)功能的實現(xiàn)流程啟用頭腦風(fēng)暴問題：如何使用id獲取圖片元素？如何使用name獲取圖片元素？安排學(xué)生完成課程練習(xí)：根據(jù)流程圖寫出

10、函數(shù)代碼（6分鐘）學(xué)生聽課，完成操作（3）提出第二步-在頁面中增加span元素的操作要求啟用搖一搖問題：圖中所示文本使用什么元素添加？樣式如何？安排學(xué)生完成操作（6分鐘）學(xué)生完成操作（4）解決難點：瀏覽器的兼容性問題 （實例直觀展示+觀察）教師分別在谷歌和IE瀏覽器中運行效果，解釋IE瀏覽器沒有成功刷新的原因講解為了保證瀏覽器的兼容性，給用戶帶來良好體驗，在驗證碼刷新中引入問號?和隨機數(shù)的重要應(yīng)用，繼續(xù)強調(diào)精益求精的工匠精神在開發(fā)網(wǎng)絡(luò)應(yīng)用中的重要性。啟用搶答問題：js腳本中如何生成隨機數(shù)？（8分鐘）學(xué)生聽課、思考回答問題（5）課堂練習(xí)與提高啟用搶答操作問題：如何實現(xiàn)點擊驗證碼圖片本身對驗證碼進

11、行刷新？如何實現(xiàn)將光標(biāo)放入文本框中也能對驗證碼進行刷新（7分鐘）學(xué)生編寫代碼完成項目功能學(xué)生登臺實操并展示效果；在自己的項目中完成驗證碼的插入和刷新環(huán)節(jié)5-課中考核與總結(jié)（10分鐘）（1）完成職教云驗證碼應(yīng)用相關(guān)課堂小測試（5分鐘）（2）學(xué)生總結(jié)本次課的收獲（2分鐘）（3）教師總結(jié)重難點及學(xué)生遇到的各種問題（3分鐘）課后活動學(xué)生活動（總結(jié)與能力提升）教師活動（教學(xué)總結(jié)與反思）（1）在職教云課堂課后活動中做總結(jié)。（2）創(chuàng)新應(yīng)用能力培養(yǎng)：使用給定的漢字字符范圍，創(chuàng)建包含兩個漢字的圖片驗證碼。（3）個性化發(fā)展設(shè)計：要求能力較強的同學(xué)對所設(shè)計的驗證碼進行改進，將所有字符扭曲黏連，進一步提升安全性，并將改進后的驗證碼存儲到云盤中，可以提供給任何用戶使用。（1）教學(xué)效果：本次課的教學(xué)目標(biāo)全部完成，根據(jù)課堂考核效果來看，90%以上學(xué)生對重點難點都能理解掌握，剩余學(xué)生對隨機數(shù)在驗證碼刷新中的應(yīng)用不是很理解，處于知其然而不知其所以然的狀態(tài)，需要課后繼續(xù)鞏固。（2）教學(xué)特色：應(yīng)用動畫展示難點，抽象轉(zhuǎn)為形象；問題貫穿時刻保持課堂活力。（3）教學(xué)反思：課堂提升時，部分學(xué)生無從下手，獨立解決問題能力欠