精選表格表單css樣式設(shè)計(jì)教案

1、 一體化課程教案編號(hào)：QD-0707-05版本號(hào)：D/0流水號(hào)：編制：教研室批準(zhǔn): 成振洋2023/2023 學(xué)年度 第 二 學(xué)期 計(jì)算機(jī)系部 任課教師 顏虹 一體化課程網(wǎng)絡(luò)編程根底學(xué)習(xí)任務(wù)CSS表格表單樣式設(shè)計(jì)授課時(shí)數(shù)6授課日期2023.5.17周次13審批年 月 日教學(xué)班級(jí)10計(jì)網(wǎng)1學(xué)習(xí)目標(biāo)學(xué)習(xí)重點(diǎn)及其化解方法根據(jù)教材上要求，通過(guò)本次課程學(xué)習(xí)學(xué)生要能運(yùn)用CSS樣式實(shí)現(xiàn)表格、表單的樣式設(shè)計(jì)。本次課程的學(xué)習(xí)內(nèi)容應(yīng)該是學(xué)生比擬感興趣的知識(shí)，我們可以從簡(jiǎn)單例子入手，到復(fù)雜的網(wǎng)頁(yè)效果實(shí)現(xiàn)，再結(jié)合書(shū)本要求完成的綜合實(shí)例，還可以讓學(xué)生自由創(chuàng)作。這樣學(xué)生既理解了書(shū)上的表格表單CSS樣式設(shè)計(jì)的用法，真正具備

2、進(jìn)行網(wǎng)頁(yè)設(shè)計(jì)的能力。學(xué)習(xí)重點(diǎn)：分析并制作出網(wǎng)頁(yè)表格、表單的樣式表。學(xué)習(xí)難點(diǎn)及其化解方法 學(xué)習(xí)難點(diǎn)：指導(dǎo)學(xué)生的自主學(xué)習(xí)和正確評(píng)價(jià)自己和他人的設(shè)計(jì)多看優(yōu)秀的表單表格設(shè)計(jì)例子，例如google的日歷視圖等網(wǎng)頁(yè)上實(shí)例。教學(xué)準(zhǔn)備教學(xué)設(shè)備：電腦、投影、PowerPoint軟件、Dreamweaver軟件教學(xué)準(zhǔn)備： 例如網(wǎng)頁(yè)、素材圖片、任務(wù)書(shū)教學(xué)組織流程方案任務(wù):1通過(guò)學(xué)習(xí)和實(shí)踐，會(huì)使用CSS設(shè)置表格各種邊框樣式。2通過(guò)學(xué)習(xí)和實(shí)踐，會(huì)利用CSS設(shè)置仿Google日歷表格樣式。3通過(guò)學(xué)習(xí)和實(shí)踐，會(huì)利用CSS設(shè)置多彩的表單樣式。4通過(guò)學(xué)習(xí)和實(shí)踐，完成書(shū)本206頁(yè)綜合實(shí)例。教學(xué)情景創(chuàng)設(shè)與流程設(shè)計(jì)： 播放酷站網(wǎng)頁(yè)、

3、激發(fā)興趣、引出主題分析表格的CSS樣式設(shè)置方法學(xué)生自主完成表格邊框練習(xí)分析仿Google日歷表格樣式設(shè)置方法學(xué)生自主完成日歷表格練習(xí)分析表單css樣式設(shè)置方法學(xué)生自主完成彩色表單練習(xí)學(xué)生完成書(shū)本綜合實(shí)例學(xué)生互評(píng)教師總結(jié)學(xué)習(xí)情況設(shè)計(jì)：通過(guò)播放比擬精彩的酷站網(wǎng)站，提高學(xué)生的學(xué)習(xí)興趣和審美意識(shí)。學(xué)生在欣賞作品的同時(shí)受到啟發(fā)。本節(jié)課的主要任務(wù)是介紹對(duì)表格、表單的CSS樣式進(jìn)行分析，利用CSS進(jìn)行美化。讓學(xué)生翻開(kāi)效勞器上的素材進(jìn)行瀏覽，分析，總結(jié)。在此過(guò)程中，學(xué)生還可以互相交流，取長(zhǎng)補(bǔ)短，在交流中不斷總結(jié)問(wèn)題，加深對(duì)知識(shí)點(diǎn)理解。問(wèn)題設(shè)計(jì)：1、欣賞優(yōu)秀的網(wǎng)頁(yè)作品有書(shū)本素材，也有校園網(wǎng)站，還有網(wǎng)上的酷站，提

4、出疑問(wèn)：我們上一節(jié)課學(xué)習(xí)了CSS樣式，它能美化網(wǎng)頁(yè)，但是CSS樣式還可以干什么呢？以前，我們學(xué)會(huì)了表格HTML標(biāo)記，利用的屬性也能實(shí)現(xiàn)表格的邊框變化，但是通過(guò)使用CSS樣式更能夠做出不同的表格效果。演示一：點(diǎn)擊按鈕更換表格邊框樣式，提問(wèn)：為什么表格邊框線轉(zhuǎn)瞬間就變了呢?(說(shuō)明：這就是CSS控制表格邊框的技術(shù)強(qiáng)大，而用HTML標(biāo)記完成這樣的工作是不可能的。)演示二：鼠標(biāo)移到表單的某個(gè)元素時(shí)例如文本框，該文本框的背景顏色發(fā)生變化。提問(wèn)：這種設(shè)計(jì)是使你在填寫(xiě)表單時(shí)更加吸引你注意，特別是檢驗(yàn)表單數(shù)據(jù)時(shí)，通過(guò)改變背景色來(lái)提示你那個(gè)文本框的內(nèi)容填寫(xiě)有錯(cuò)誤。你們想不想試試？激發(fā)學(xué)生興趣和求知欲2、教師啟發(fā)：

5、其實(shí)也不需要大量代碼實(shí)現(xiàn)，別人能做的我相信同學(xué)們也一定能。通過(guò)我們以前的經(jīng)驗(yàn)，借助Dreamweaver這樣的應(yīng)用軟件，利用CSS樣式知識(shí)和HTML知識(shí)，只要我們認(rèn)真去探究，就一定會(huì)有新的發(fā)現(xiàn)，一定也會(huì)做出優(yōu)秀的作品。啟發(fā)、鼓勵(lì)學(xué)生，增強(qiáng)自信實(shí)施 按任務(wù)工程一個(gè)個(gè)完成評(píng)價(jià) 由學(xué)生自我評(píng)價(jià)與老師評(píng)價(jià)結(jié)合教學(xué)反思教學(xué)內(nèi)容課時(shí) 6 ：教學(xué)環(huán)節(jié)教師活動(dòng)學(xué)生活動(dòng)引出主題導(dǎo)入新課創(chuàng)設(shè)情景教師首先展示例如網(wǎng)站，演示表格邊框變化網(wǎng)頁(yè)。提問(wèn)用標(biāo)記能不能實(shí)現(xiàn)實(shí)時(shí)更換表格邊框？ 引導(dǎo)啟發(fā) 如果我們現(xiàn)能把握表格、表單在網(wǎng)頁(yè)中適當(dāng)應(yīng)用，并用CSS進(jìn)行美化，就能設(shè)計(jì)出漂亮、高效的網(wǎng)站。此時(shí)，可展示以前一些學(xué)生的優(yōu)秀作品，

6、鼓勵(lì)學(xué)生，增強(qiáng)自信導(dǎo)入新課本單元的主要任務(wù)是掌握表格、表單的CSS樣式設(shè)計(jì)，本課的任務(wù)是表格或表單類網(wǎng)頁(yè)的制作。欣賞觀察，答復(fù)下列問(wèn)題。認(rèn)真傾聽(tīng)，提起興趣。認(rèn)真傾聽(tīng)思考。欣賞網(wǎng)頁(yè)欣賞酷站。提問(wèn)思考這些網(wǎng)站表格的CSS樣式有哪些？觀察。認(rèn)真觀察，答復(fù)下列問(wèn)題。分析任務(wù)要點(diǎn)1、任務(wù)一：繪制交換顏色變化的表格。任務(wù)分析：第一步設(shè)置細(xì)邊框線，編輯tbody td類的樣式表，邊框的style設(shè)置為solid，width為1px，color為#f60。第二步設(shè)置自定義類，設(shè)置td的background-color。2、任務(wù)二：仿照google日歷制作相應(yīng)的樣式表格。任務(wù)分析：第一步先參照樣表，畫(huà)好表格。第

7、二步將表格邊框線按上例設(shè)置成細(xì)邊框線。第三步添加層，并置于最頂層，放在相關(guān)位置顯示日歷事項(xiàng)。任務(wù)三：制作彩色表單。任務(wù)分析：第一步參照樣表，制作好表單。第二步將表格邊框線按上例設(shè)置成細(xì)邊框線。第三步制作樣式表，設(shè)置thtd的顏色。第四步設(shè)置樣式表，當(dāng)鼠標(biāo)經(jīng)過(guò)過(guò)改變單元格顏色。任務(wù)四：按書(shū)本206頁(yè)要求完成綜合實(shí)例。以及209頁(yè)的操作題。任務(wù)分析：第一步利用onmouseoveronmouseout事件改變表格背景色。第二步設(shè)置表格樣式。認(rèn)真看書(shū)，動(dòng)手實(shí)踐。思考，確定主題及表達(dá)主題所需要的素材。自主學(xué)習(xí)，到達(dá)教師要求。設(shè)計(jì)評(píng)價(jià)小組互評(píng)，推薦優(yōu)秀作業(yè)。教師展示優(yōu)秀作業(yè)，對(duì)學(xué)生從主題、內(nèi)容、效果、技

8、巧等方面進(jìn)行評(píng)價(jià)。學(xué)生互相：從主題、技能、美學(xué)、效果等多方面進(jìn)行評(píng)價(jià)。課堂小結(jié)提問(wèn)通過(guò)這節(jié)課的學(xué)習(xí)，你們都學(xué)到了哪些知識(shí)，掌握了哪些技能？我們已經(jīng)掌握了利用CSS制作不同表格樣式效果的方法，下節(jié)課我們將繼續(xù)針對(duì)CSS布局進(jìn)行講解?？偨Y(jié)本課的收獲學(xué)習(xí)任務(wù)書(shū)教學(xué)任務(wù)一 繪制交換顏色變化的表格【任務(wù)內(nèi)容】講解表格CSS樣式表設(shè)置的方式方法【任務(wù)目的】使學(xué)生掌握表格樣式，學(xué)會(huì)熟練設(shè)置表格邊框、背景色、單元格間距等屬性。【學(xué)習(xí)重點(diǎn)】 CSS樣式表的靈活運(yùn)用【學(xué)習(xí)難點(diǎn)】 理解表格的各個(gè)屬性、間距設(shè)置的意義【教學(xué)方式】案例分析式、任務(wù)教學(xué)【教學(xué)內(nèi)容】制作4X5的表格，并輸入相應(yīng)的文字內(nèi)容提示：沒(méi)有特殊合并格

9、式的表格，可以使用、標(biāo)簽完成?；蛑苯佑胐w生成。設(shè)置表格CSS樣式設(shè)置table的樣式為border-collapse:collapse;思考：可以用自己方法實(shí)現(xiàn)細(xì)表格線。到達(dá)效果一致即可。設(shè)置tbody、td的樣式為font:normal 12px/15px georgia;color:#333;padding:8px;border-right-width: 1px;border-bottom-width: 1px;border-right-style: solid;border-bottom-style: solid;border-right-color: #F60;border-bott

10、om-color: #F60;border-top-width: 1px;border-top-style: solid;border-left-style: solid;border-top-color: #F60;border-left-color: #F60;border-left-width: 1px;設(shè)置兩種顏色的表格單元格樣式類分別為inon，顏色可自行設(shè)計(jì)。并寫(xiě)出相應(yīng)的樣式代碼：效果圖如下所示學(xué)生自我評(píng)價(jià)局部：請(qǐng)?jiān)谙旅娣謩e列出完成局部可以獨(dú)立完成幫助下完成完成得比擬困難學(xué)習(xí)任務(wù)書(shū)教學(xué)任務(wù)二 仿照google日歷制作相應(yīng)的樣式表格【任務(wù)內(nèi)容】講解表格邊框與文字樣式的設(shè)置【任務(wù)目的】

11、使學(xué)生掌握表格樣式，學(xué)會(huì)熟練設(shè)置表格邊框與文字樣式，以及添加層的使用?！緦W(xué)習(xí)重點(diǎn)】 CSS樣式表的靈活運(yùn)用，以及層定位的設(shè)置【學(xué)習(xí)難點(diǎn)】 能夠?qū)崿F(xiàn)表格所有單元格等寬等高，以及表格多行多列細(xì)邊框線的實(shí)現(xiàn)【教學(xué)方式】案例分析式、任務(wù)教學(xué)【教學(xué)內(nèi)容】設(shè)置8X5表格，并設(shè)置表格頭，輸入相應(yīng)文字。設(shè)置表格邊框線參考樣式如下：table border-collapse:collapse;border: 1px solid #33C;font-family: 宋體;font-size: 12px;設(shè)置層的絕對(duì)定位添加div，直接在對(duì)話框里選擇新建新樣式點(diǎn)擊這里直接編寫(xiě)div的樣式表這個(gè)定位類型設(shè)置為絕對(duì)定位

12、，寬約200px，高約100px。設(shè)置層的定位。層的樣式表細(xì)節(jié)，請(qǐng)大家自己動(dòng)手調(diào)整，并到達(dá)如效果圖一致。 并寫(xiě)出相應(yīng)的樣式表代碼：最后實(shí)現(xiàn)效果圖如下：學(xué)生自我評(píng)價(jià)局部：請(qǐng)?jiān)谙旅娲蚬纯梢元?dú)立完成幫助下完成完成得比擬困難學(xué)習(xí)任務(wù)書(shū)教學(xué)任務(wù)三 制作彩色表單【任務(wù)內(nèi)容】講解表單制作，以及表單樣式表的設(shè)置，復(fù)合樣式表的使用方法【任務(wù)目的】使學(xué)生掌握表單樣式表設(shè)置，學(xué)會(huì)熟練制作表單?！緦W(xué)習(xí)重點(diǎn)】 CSS樣式表的靈活運(yùn)用，以及表單控件的制作、復(fù)合樣式表的使用【學(xué)習(xí)難點(diǎn)】 能夠?qū)崿F(xiàn)表單樣式效果、hover樣式的使用使鼠標(biāo)經(jīng)過(guò)時(shí)表單單元格變色?！窘虒W(xué)方式】案例分析式、任務(wù)教學(xué)【教學(xué)內(nèi)容】制作在線調(diào)查表單利用DW

13、添加表單，然后再添加一個(gè)12X1的表格，在各行內(nèi)分別插入不同的表單元素。利用這些快捷菜單創(chuàng)立樣圖的表單在網(wǎng)頁(yè)里添加一個(gè)form，所有表單元素都要包含在這個(gè)form里利用任務(wù)二得到的表格樣式，設(shè)置本次任務(wù)的表格樣式。參考如下：tableborder-collapse:collapse;text-align: left;tbody td font:normal 14px/15px georgia;color:#CCC;padding:8px;border: 1px solid #03F;思考：我們?cè)谇懊鎸W(xué)習(xí)了超鏈接樣式表時(shí)，能夠?qū)崿F(xiàn)鼠標(biāo)經(jīng)過(guò)時(shí)將超拉鏈顏色改變，那這種樣式表是否也可以適用在其他地方呢

14、？下面讓我們?cè)谶@個(gè)表單上試一下吧。提示：tr:hover請(qǐng)寫(xiě)出相應(yīng)的樣式代碼完成效果圖如下所示學(xué)生自我評(píng)價(jià)局部：請(qǐng)?jiān)谙旅娲蚬纯梢元?dú)立完成幫助下完成完成得比擬困難學(xué)習(xí)任務(wù)書(shū)教學(xué)任務(wù)四 綜合實(shí)例1、2【任務(wù)內(nèi)容】表格最根本的作用就是讓復(fù)雜的數(shù)據(jù)變得更有條理，讓人容易看懂，在設(shè)計(jì)頁(yè)面時(shí)，往往要利用表格來(lái)排列網(wǎng)頁(yè)元素。通過(guò)幾個(gè)實(shí)例掌握表格的使用技巧?！救蝿?wù)目的】使學(xué)生掌握表單樣式表設(shè)置，學(xué)會(huì)熟練制作用表格布局的網(wǎng)頁(yè)?！緦W(xué)習(xí)重點(diǎn)】 CSS樣式表的靈活運(yùn)用，以及復(fù)合樣式表的使用【學(xué)習(xí)難點(diǎn)】 能夠?qū)崿F(xiàn)表格樣式效果、hover樣式、復(fù)合樣式使用?！窘虒W(xué)方式】案例分析式、任務(wù)教學(xué)【教學(xué)內(nèi)容】綜合實(shí)例1：制作變換背景色的表格。步驟提示如下：翻開(kāi)素材文件，設(shè)計(jì)如下列圖所示網(wǎng)頁(yè)。任務(wù)要求：根據(jù)素材自己實(shí)現(xiàn)網(wǎng)頁(yè)效果。 (2)變換背景色的設(shè)置提示在標(biāo)記中輸入以下代碼。onMouseOver=this.style.backgroun