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

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

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

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

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

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

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

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

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

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

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