PAGE1PAGE1PAGE2PAGE2

課題第11課CSS3的表格屬性和表單屬性課時(shí)2課時(shí)（90min）教學(xué)目標(biāo)知識(shí)技能目標(biāo)：掌握設(shè)置表格相關(guān)屬性的方法（2）掌握設(shè)置表單樣式相關(guān)屬性的方法（3）掌握設(shè)置表單控件樣式的方法素質(zhì)目標(biāo)：（1）學(xué)習(xí)CSS3中表格和表單的常用屬性，增加知識(shí)儲(chǔ)備，鍛煉思維能力（2）體驗(yàn)豐富的案例，養(yǎng)成理論與實(shí)踐相結(jié)合的良好習(xí)慣（3）感受?chē)?guó)家強(qiáng)大，增強(qiáng)民族自豪感，提升民族自信心教學(xué)重難點(diǎn)教學(xué)重點(diǎn)：設(shè)置表格相關(guān)屬性的方法、設(shè)置表單樣式相關(guān)屬性的方法教學(xué)難點(diǎn)：設(shè)置表單控件樣式的方法教學(xué)方法問(wèn)答法、討論法、講授法、實(shí)踐練習(xí)法、演示法教學(xué)用具電腦、投影儀、多媒體課件、教材、文旌課堂教學(xué)設(shè)計(jì)第1節(jié)課：→→→傳授新知（15min）→實(shí)戰(zhàn)演練（15min）→實(shí)戰(zhàn)拓展（10min）第2節(jié)課：→傳授新知（15min）→實(shí)戰(zhàn)演練（10min）→實(shí)戰(zhàn)拓展（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ù)了解CSS的表格屬性和表單屬性，從網(wǎng)上找多種網(wǎng)頁(yè)案例查看原代碼，查看其中CSS相關(guān)屬性的設(shè)置【學(xué)生】完成課前任務(wù)通過(guò)課前任務(wù)，讓學(xué)生提前預(yù)習(xí)知識(shí)，了解CSS的表格屬性和表單屬性考勤（2min）【教師】使用文旌課堂APP進(jìn)行簽到【學(xué)生】按照老師要求簽到培養(yǎng)學(xué)生的組織紀(jì)律性，掌握學(xué)生的出勤情況問(wèn)題導(dǎo)入（3min）【教師】提出問(wèn)題在上次課中，我們學(xué)習(xí)了網(wǎng)頁(yè)的列表和超鏈接美化，這節(jié)課我們將要繼續(xù)學(xué)習(xí)網(wǎng)頁(yè)表格的美化方法，同學(xué)們想一想，表格可以進(jìn)行哪些方面的美化？【學(xué)生】思考、舉手回答【教師】通過(guò)學(xué)生的回答引入要講的知識(shí)通過(guò)問(wèn)題導(dǎo)入的方法，引導(dǎo)學(xué)生主動(dòng)思考，激發(fā)學(xué)生的學(xué)習(xí)興趣傳授新知（15min）6.3表格屬性【教師】講解設(shè)置表格屬性的分類(lèi)，并演示例子輔助理解為了制作風(fēng)格統(tǒng)一的頁(yè)面效果，常常需要重新設(shè)置網(wǎng)頁(yè)中表格的樣式。CSS3提供了一些屬性，專(zhuān)門(mén)用于設(shè)置表格標(biāo)題位置、合并表格邊框、單元格的間距、是否顯示空單元格、表格的顯示規(guī)則等。（1）在CSS3中，使用caption-side屬性設(shè)置表格標(biāo)題的顯示位置，具體格式為：……（詳見(jiàn)教材）（2）在CSS3中，使用border-collapse屬性設(shè)置是否將表格邊框合并為單一的邊框，具體格式為：……（詳見(jiàn)教材）（3）在CSS3中，使用border-spacing屬性設(shè)置相鄰單元格的邊框間的距離（即單元格的間距），具體格式為：…（詳見(jiàn)教材）在CSS3中，使用empty-cells屬性設(shè)置是否顯示表格中的空單元格，具體格式為：…（詳見(jiàn)教材）（5）在CSS3中，使用table-layout屬性設(shè)置顯示表格單元格、行、列的算法規(guī)則，具體格式為：table-layout:auto|fixed;…（詳見(jiàn)教材）【例6-8】制作高中課程表，設(shè)置表格的樣式，包括表格標(biāo)題位置、合并表格邊框、單元格的間距、是否顯示空單元格、表格的顯示規(guī)則等…（詳見(jiàn)教材）【學(xué)生】聆聽(tīng)、記錄、理解、觀(guān)看效果通過(guò)教師的講解和演示例子使學(xué)生了解CSS3設(shè)置表格樣式的方法實(shí)戰(zhàn)演練（15min）美化“云課堂”頁(yè)面的“精品課程”模塊【教師】先演示下最終效果，再講解練習(xí)中較為重要和學(xué)生容易出錯(cuò)的地方，再要求學(xué)生制作“美化“云課堂”頁(yè)面的“精品課程”模塊”項(xiàng)目，遇到不會(huì)的問(wèn)題可以?huà)呙栉⒄n二維碼觀(guān)看視頻”美化“云課堂”頁(yè)面的“精品課程”模塊“（詳見(jiàn)教材），可討論或咨詢(xún)老師，可互相幫助在第2章的實(shí)戰(zhàn)演練中已經(jīng)介紹過(guò)如何使用HTML5結(jié)構(gòu)標(biāo)簽構(gòu)建該網(wǎng)站主頁(yè)的主體框架，這里介紹如何布局該主頁(yè)。步驟1在HBuilderX中導(dǎo)入本書(shū)配套素材“素材與案例\第7章\實(shí)戰(zhàn)演練\7.3\JinqieProject”文件夾，然后打開(kāi)“index.css”文檔。步驟2設(shè)置“頁(yè)眉”的樣式。在“index.css”文檔中添加以下代碼，使用選擇器#index_header設(shè)置樣式，……（詳見(jiàn)教材）步驟3設(shè)置“導(dǎo)航欄”的樣式。在“index.css”文檔中添加以下代碼，使用選擇器#index_nav設(shè)置樣式，……（詳見(jiàn)教材）步驟4設(shè)置“精品課程”表格的樣式。在“course.css”文檔中添加以下代碼，使用選擇器table、th、td等設(shè)置樣式，此時(shí)即可獲得該模塊最終的頁(yè)面效果，……（詳見(jiàn)教材）通過(guò)制作“美化“云課堂”頁(yè)面的“精品課程”模塊“，使學(xué)生鞏固所學(xué)知識(shí)，鍛煉動(dòng)手操作能力，通過(guò)學(xué)生討論和咨詢(xún)，可活躍課堂氣氛，拉近學(xué)生和老師之間，學(xué)生與學(xué)生之間的距離，提高學(xué)生學(xué)習(xí)積極性實(shí)戰(zhàn)拓展（10min）【教師】要求學(xué)生根據(jù)上課所學(xué)知識(shí)和例6-8，制作隊(duì)伍的項(xiàng)目，要求將表格進(jìn)行美化，可以互相討論或詢(xún)問(wèn)老師【學(xué)生】討論、思考、操作通過(guò)實(shí)踐學(xué)習(xí)，鞏固學(xué)生對(duì)表格屬性設(shè)置的理解，并鍛煉學(xué)生的實(shí)際操作能力第二節(jié)課問(wèn)題導(dǎo)入（5min）【教師】提出問(wèn)題表單及其控件的默認(rèn)樣式無(wú)法滿(mǎn)足用戶(hù)對(duì)頁(yè)面效果的要求，因此為了制作更加美觀(guān)的頁(yè)面效果，常常需要重新設(shè)置頁(yè)面中表單及其控件的樣式。有沒(méi)有同學(xué)知道怎么設(shè)置表單及其控件的樣式呢？【學(xué)生】思考、舉手回答【教師】通過(guò)學(xué)生的回答引入要講的知識(shí)通過(guò)問(wèn)題導(dǎo)入的方法，引導(dǎo)學(xué)生主動(dòng)思考，激發(fā)學(xué)生的學(xué)習(xí)興趣傳授新知（15min）6.6表格屬性6.6.1設(shè)置表單樣式【教師】講解表單樣式的設(shè)置，并演示例子輔助理解在網(wǎng)頁(yè)中應(yīng)用表單時(shí)，常使用CSS3中的不同屬性設(shè)置表單的樣式，如表單的寬度和高度、背景顏色、邊框樣式、圓角樣式、行高、水平對(duì)齊方式等，以符合整個(gè)頁(yè)面的風(fēng)格，提升頁(yè)面的美觀(guān)度。【例6-9】制作用戶(hù)登錄表單，設(shè)置表單的樣式（以下提供部分代碼），……（詳見(jiàn)教材）【課堂拓展】表單控件的背景顏色默認(rèn)為白色，為其設(shè)置背景圖像后，背景顏色將默認(rèn)繼承表單域的顏色，所以一般在設(shè)置背景圖像時(shí)也需要設(shè)置背景顏色。【學(xué)生】觀(guān)看效果、聆聽(tīng)、記錄、理解6.6.2設(shè)置表單控件的樣式【教師】講解表單控件樣式的設(shè)置，并演示例子輔助理解表單控件的種類(lèi)有很多，如文本框、單選鈕、復(fù)選框等，由于這些表單控件的默認(rèn)樣式單一，無(wú)法滿(mǎn)足網(wǎng)頁(yè)設(shè)計(jì)的需求，因此需要使用CSS3提供的屬性設(shè)置它們的樣式。設(shè)置表單控件獲得焦點(diǎn)時(shí)的樣式需要使用“:focus”選擇器。……（詳見(jiàn)教材）【例6-10】制作基本信息表單，設(shè)置表單及其控件的樣式，包括單行文本框獲得焦點(diǎn)時(shí)的樣式，以及單選鈕與復(fù)選框的樣式，……（詳見(jiàn)教材）【學(xué)生】觀(guān)看效果、聆聽(tīng)、記錄、理解通過(guò)講解和演示例子，使學(xué)生掌握CSS3設(shè)置表單樣式、表單控件樣式的方法實(shí)戰(zhàn)演練（10min）美化“金企鵝教育”網(wǎng)站主頁(yè)的導(dǎo)航欄【教師】要求學(xué)生美化“金企鵝教育”網(wǎng)站的登錄頁(yè)面，遇到不會(huì)的問(wèn)題可以?huà)呙栉⒄n二維碼觀(guān)看視頻”美化“金企鵝教育”網(wǎng)站的登錄頁(yè)面“（詳見(jiàn)教材），有疑問(wèn)可討論或咨詢(xún)教師在第4章的實(shí)戰(zhàn)演練中已經(jīng)介紹過(guò)如何使用表單制作“金企鵝教育”網(wǎng)站登錄頁(yè)面的登錄注冊(cè)模塊，這里介紹如何美化該模塊。步驟1在HBuilderX中導(dǎo)入本書(shū)配套素材“素材與案例\第6章\實(shí)戰(zhàn)演練\6.6\JinqieProject”文件夾，然后打開(kāi)“l(fā)ogin.css”文檔。步驟2設(shè)置登錄注冊(cè)模塊容器的樣式。在“l(fā)ogin.css”文檔中添加以下代碼，使用選擇器.login_b2設(shè)置樣式，……（詳見(jiàn)教材）步驟3設(shè)置登錄注冊(cè)模塊列表的樣式。在“l(fā)ogin.css”文檔中添加以下代碼，使用選擇器.login_b2_ul、.login_b2_ul>li等設(shè)置樣式，……（詳見(jiàn)教材）步驟4設(shè)置登錄注冊(cè)模塊表單控件的樣式。在“l(fā)ogin.css”文檔中添加以下代碼，使用選擇器.login_b2input、.login_b2input:focus等設(shè)置樣式，此時(shí)即可獲得登錄頁(yè)面最終的頁(yè)面效果，……（詳見(jiàn)教材）【課堂拓展】在CSS3中，使用user-select屬性規(guī)定是否能選取元素的文本，具體格式為：user-select:auto|none|text|all;制作項(xiàng)目，觀(guān)看微課，討論通過(guò)制作“美化“金企鵝教育”網(wǎng)站的登錄頁(yè)面”模塊，使學(xué)生鞏固所學(xué)知識(shí)，鍛煉動(dòng)手操作能力實(shí)戰(zhàn)拓展(10min)【教師】要求學(xué)生根據(jù)上課所學(xué)知識(shí)和例6-9和6-10，要求將自己小隊(duì)項(xiàng)目的表格樣式和表單及其控件樣式進(jìn)行美化，風(fēng)格要與項(xiàng)目主題風(fēng)格搭配，可以互相討論或詢(xún)問(wèn)老師【學(xué)生】討論、思考、操作通過(guò)實(shí)踐學(xué)習(xí)，鞏固學(xué)生對(duì)表單及其控件屬性的理解與掌握，并鍛煉學(xué)生的實(shí)際操作能力課堂小結(jié)（3min）【教師】簡(jiǎn)要總結(jié)本節(jié)課的要點(diǎn)本節(jié)課主要介紹了CSS3的常用屬性。通過(guò)本節(jié)課的學(xué)習(xí)，學(xué)生應(yīng)重點(diǎn)掌握以下內(nèi)容。（1）CSS3提供了專(zhuān)門(mén)用于設(shè)置表格樣式的屬性，包括caption-side（表格標(biāo)題位置）、border-collapse（合并表格邊框）、border-spacing（單元格的間距）、empty-cells（是否顯示空單元格）、table-layout（表格的顯示規(guī)則）等。（2）在CSS3中，大部分屬性都可以用于設(shè)置表單及其控件的樣式。此外，使用“:focus”選擇器設(shè)置表單控件獲得焦點(diǎn)時(shí)的樣式；使用選擇器“:checked”設(shè)置單選鈕或復(fù)選框被選中的樣式。【學(xué)生】總結(jié)回顧知識(shí)點(diǎn)總結(jié)知識(shí)點(diǎn)，使學(xué)生牢固掌握CSS3設(shè)置設(shè)置表格樣式的屬性和設(shè)置表單及其控件樣式的方法作業(yè)布置（2min）【教師】布置課后作業(yè)個(gè)人作業(yè)：請(qǐng)根據(jù)課堂所學(xué)知識(shí)，完成課后習(xí)題和實(shí)訓(xùn)練習(xí)團(tuán)隊(duì)作業(yè)：完成隊(duì)伍項(xiàng)目的表格、表單及其控件的美化。【學(xué)生