《HTML5 CSS3項目開發(fā)案例教程》（袁明蘭）770-5教案 第14課 使用CSS3美化表單

第課第課使用CSS3美化表單的基基本本14421PAGE61421使用CSS3美化表單第1421使用CSS3美化表單第課PAGE71412使用CSS3美化表單第1412使用CSS3美化表單第課PAGE1

課題使用CSS3美化表單課時2課時（90min）教學目標知識技能目標：（1）學習CSS3美化表單背景的方法（2）掌握使用CSS3美化表單控件思政育人目標：通過本節(jié)課的學習，提高學生的審美能力和實踐能力，培養(yǎng)學生深入思考和獨立思考的良好習慣，并通過大量典型案例，使學生將理論和實踐結(jié)合起來教學重難點教學重點：掌握CSS3美化表單背景和表單控件的方法教學難點：使用CSS3美化表單背景和表單控件教學方法講授法、啟發(fā)法、問答法、演示法、討論法、練習法教學用具電腦、投影儀、多媒體課件、教材教學設(shè)計第1節(jié)課：考勤（2min）→導入新知（4min）→知識講解（18min）→課堂練習（14min）→交流討論（7min）第2節(jié)課：案例分析（34min）→課堂小結(jié)（7min）→作業(yè)布置（4min）教學過程主要教學內(nèi)容及步驟設(shè)計意圖第一節(jié)課考勤

（2min）【教師】清點上課人數(shù)，記錄好考勤【學生】班干部報請假人員及原因培養(yǎng)學生的組織紀律性，掌握學生的出勤情況導入新知

（4min）【教師】介紹表單控件的優(yōu)點，引出新知識點表單控件有許多其他元素所不具備的狀態(tài)，如獲得焦點、選中等，設(shè)置這些狀態(tài)下的樣式能夠使表單在易讀的同時更加美觀。通過CSS3語言對表單進行設(shè)置，讓其可以達到上述的要求【學生】思考、討論通過對表單控件優(yōu)勢的介紹，讓學生主動思考如何美化表單，激發(fā)學生的求知欲知識講解

（18min）【教師】講述設(shè)置表單背景的方法設(shè)置表單背景在網(wǎng)頁中應(yīng)用表單時，一般會為表單設(shè)置背景顏色或背景圖像，以符合整個頁面的風格，增強表單的可用性。【教師】演示【例7-11】操作流程，制作用戶登錄表單在<style>標簽中的form{…}內(nèi)添加以下代碼，為表單域添加漸變背景。background:linear-gradient(#fffad2,#b69e4555%,#fffad2);在<style>標簽中添加以下代碼，為表單控件添加背景顏色與背景圖像。input.in_id{text-indent:2em;background:#ffffffurl(images/id.png)no-repeat2%center;}input.in_pw{text-indent:2em;background:#ffffffurl(images/pw.png)no-repeat2%center;}/*設(shè)置兩個表單控件的縮進、背景顏色與背景圖像*/【教師】講述設(shè)置表單控件獲得焦點時的樣式設(shè)置表單控件獲得焦點時的樣式當鼠標指針單擊輸入型文本框時，光標出現(xiàn)在文本框中，即稱其獲得了焦點。部分表單控件具有獲得焦點時的樣式效果，不同瀏覽器的效果有所不同。在實際的網(wǎng)頁制作中，通常需要重新設(shè)置該樣式，以符合網(wǎng)頁的整體風格?！窘處煛垦菔尽纠?-12】操作流程，制作用戶注冊表單在<style>標簽中添加以下代碼，設(shè)置表單控件的樣式input{border:solid1px#9f9fd9;}/*設(shè)置表單控件的邊框*/input:focus{border:solid2px#55557f;background-color:#f3f4ff;outline:none;}/*設(shè)置表單控件獲得焦點時的邊框與背景顏色，去除輪廓線*/【學生】聆聽、思考、理解【教師】講述設(shè)置單選鈕與復選框的樣式設(shè)置單選鈕與復選框的樣式單選鈕與復選框的默認樣式比較單一，無法滿足網(wǎng)頁設(shè)計的需求，往往需要使用CSS3重新設(shè)置它們的樣式。而使用CSS3只能簡單設(shè)計單選鈕與復選框的樣式。為滿足需要，可以先將單選鈕或復選框隱藏，再通過設(shè)置其提示信息的樣式來實現(xiàn)單選鈕與復選框的功能。這就要用到偽類選擇器“:checked”，它可以匹配選中的單選鈕或復選框，搭配其他選擇器使用就可以匹配到選中的單選鈕或復選框的提示信息。設(shè)置了相應(yīng)提示信息的樣式之后，就可以通過提示信息的樣式變化提醒用戶選擇了哪個選項，從而在單選鈕或復選框隱藏顯示的同時不影響使用它們的功能。【學生】聆聽、思考、理解【教師】巡視課堂，指導學生理解知識內(nèi)容通過講解知識點，讓學生了解CSS3美化表單的基本操作課堂練習

（14min）【教師】布置課堂練習內(nèi)容制作基本信息表單，設(shè)置單選鈕與復選框的樣式，頁面效果如圖7-20所示。未選中單選鈕選中復選框未選中單選鈕選中復選框圖7-20基本信息表單的頁面效果【教師】分析課堂練習在<style>標簽中輸入以下代碼，設(shè)置提示信息的樣式input[type="radio"]+label,input[type="checkbox"]+label{background:linear-gradient(#d3cdf110%,#d6dbff50%,#d3cdf1);border-radius:10px;padding:0px15px;margin-left:15px;text-shadow:none;border:solid2px#b5c5fc;color:#55557f;}/*設(shè)置單選鈕與復選框?qū)?yīng)提示信息的漸變背景、圓角、內(nèi)邊距、左外邊距、文本陰影、邊框與文本顏色*/input[type="radio"]:checked+label,input[type="checkbox"]:checked+label{color:#fcffee;background:linear-gradient(#53667f10%,#99b4ff50%,#53667f);}/*設(shè)置選中單選鈕與復選框時，對應(yīng)提示信息的文本顏色與漸變背景*/【學生】閱讀題目，對不理解的地方進行提問【教師】回答學生提問，指導學生【學生】完成課堂練習【教師】公布參考答案【學生】對照參考答案，修改內(nèi)容利用練習法，培養(yǎng)出學生對CSS3美化表單操作的經(jīng)驗交流討論

（7min）【教師】組織交流討論設(shè)置交流討論內(nèi)容，以小組為單位進行討論（1）CSS3美化表單和美化表格的不同之處在哪里（2）CSS3設(shè)置表單背景圖像和背景顏色的不同（3）如何快速使用CSS3設(shè)置復選框格式【學生】參與交流討論【教師】隨機抽取小組講述交流內(nèi)容【學生】講述交流內(nèi)容，形成書面匯報【教師】收取小組匯報通過交流討論，提高學生的交流表達能力，鞏固知識點第二節(jié)課案例分析

（34min）【教師】多媒體展示案例內(nèi)容制作大學生職業(yè)規(guī)劃調(diào)查問卷，頁面效果如圖7-23所示圖7-23大學生職業(yè)規(guī)劃調(diào)查問卷的頁面效果【學生】聆聽、思考、理解【教師】給出問題分析除了常用的“:focus”與“:checked”選擇器之外，CSS3還提供了能夠匹配其他形式表單控件的偽類選擇器，主要有以下幾種（1）:disabled。匹配禁用的表單控件。（2）:enable。匹配可用的表單控件。（3）:required。匹配必填的表單控件。（4）:optional。匹配非必填的表單控件。（5）:invalid。匹配輸入非法值的表單控件。（6）:valid。匹配輸入合法值的表單控件。【學生】寫出程序偽碼，畫出流程圖【教師】顯示參考代碼在<style>標簽中添加以下代碼，設(shè)置單選鈕與復選框及其提示信息的樣式。input[type="radio"],input[type="checkbox"]{display:none;}/*隱藏單選鈕與復選框*/input[type="radio"]+label,input[type="checkbox"]+label{border:solid2px#8e9bc6;padding:1px5px;margin:5px2px;background-color:#f7fffe;}/*設(shè)置單選鈕與復選框?qū)?yīng)提示信息的邊框、內(nèi)外邊距與背景顏色*/input[type="radio"]:checked+label,input[type="checkbox"]:checked+label{border:solid2px#55557f;background-color:#55557f;color:#f7fffe;}/*設(shè)置選中單選鈕或復選框時，對應(yīng)提示信息的邊框、背景顏色與文本顏色*/繼續(xù)在<style>標簽中添加以下代碼，完善提示信息的樣式。.self{text-indent:3em;}/*設(shè)置個人信息部分的縮進*/.selfspan{margin-right:60px;color:#aa0000;}/*設(shè)置個人信息部分文本“*”的右外邊距與文本顏色*//*設(shè)置所有綁定表單控件的提示信息的文本顏色、圓角與字體加粗*/label:not([for]){font-size:1.2em;font-weight:bold;}/*設(shè)置所有未綁定表單控件的提示信息的字號與字體加粗*/繼續(xù)在<style>標簽中添加以下代碼，設(shè)置必填表單控件的樣式。input:required{background-color:#fefff4;border:solid2px#8e9bc6;}/*設(shè)置必填表單控件的背景顏色與邊框*/【學生】觀察代碼，對比自身內(nèi)容，思考【教師】講解代碼【學生】聆聽、思考、記錄通過對經(jīng)典案例的分析、講解，加深學生對本章內(nèi)容的理解課堂小結(jié)

（7min）【教師】簡要總結(jié)本章的知識要點本節(jié)課學習了使用CSS3美化表單背景和表單控件的方法。希望同學們在課下多加練習，熟練掌握所學知識。【學生】總結(jié)回顧知識點總結(jié)知識點，鞏固印象作業(yè)布置

（4min）【教師】布置課后作業(yè)在DW中打開本書配套素材“項目7”→“項目實訓”→“eol”→“signup.css”文檔，按照以下要求修改文檔（1）將“用戶注冊”標題的文本顏色設(shè)置為“#9a3012”，字號為1.8em，上內(nèi)邊距為25px，文本陰影為“1px1px1px#ffaa7f”，添加背景圖像（images文件夾中的bg_1.png）、背景圖像不重復、顯示位置為“50%90%”（2）將提示信息的字號設(shè)置為1.2em，字體加粗，文本顏色為“#ca5303”，文本陰影為“1px1px2px#ffaa7f”（3）設(shè)置文本框的邊框?qū)挾葹?px，顏色為“#ff9e4e”，樣式為單實線（4）設(shè)置文本框獲得焦點時的邊框?qū)挾葹?px，顏色為“#c18060”，樣式為單實線，背景顏色為“#e1e1e1”，去除輪