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

2、進行網頁設計的能力。學習重點：分析并制作出網頁表格、表單的樣式表。學習難點及其化解方法 學習難點：指導學生的自主學習和正確評價自己和他人的設計多看優秀的表單表格設計例子，例如google的日歷視圖等網頁上實例。教學準備教學設備：電腦、投影、PowerPoint軟件、Dreamweaver軟件教學準備： 例如網頁、素材圖片、任務書教學組織流程方案任務:1通過學習和實踐，會使用CSS設置表格各種邊框樣式。2通過學習和實踐，會利用CSS設置仿Google日歷表格樣式。3通過學習和實踐，會利用CSS設置多彩的表單樣式。4通過學習和實踐，完成書本206頁綜合實例。教學情景創設與流程設計： 播放酷站網頁、

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

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

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

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

7、二步將表格邊框線按上例設置成細邊框線。第三步添加層，并置于最頂層，放在相關位置顯示日歷事項。任務三：制作彩色表單。任務分析：第一步參照樣表，制作好表單。第二步將表格邊框線按上例設置成細邊框線。第三步制作樣式表，設置thtd的顏色。第四步設置樣式表，當鼠標經過過改變單元格顏色。任務四：按書本206頁要求完成綜合實例。以及209頁的操作題。任務分析：第一步利用onmouseoveronmouseout事件改變表格背景色。第二步設置表格樣式。認真看書，動手實踐。思考，確定主題及表達主題所需要的素材。自主學習，到達教師要求。設計評價小組互評，推薦優秀作業。教師展示優秀作業，對學生從主題、內容、效果、技

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

9、式的表格，可以使用、標簽完成。或直接用dw生成。設置表格CSS樣式設置table的樣式為border-collapse:collapse;思考：可以用自己方法實現細表格線。到達效果一致即可。設置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;設置兩種顏色的表格單元格樣式類分別為inon，顏色可自行設計。并寫出相應的樣式代碼：效果圖如下所示學生自我評價局部：請在下面分別列出完成局部可以獨立完成幫助下完成完成得比擬困難學習任務書教學任務二 仿照google日歷制作相應的樣式表格【任務內容】講解表格邊框與文字樣式的設置【任務目的】

11、使學生掌握表格樣式，學會熟練設置表格邊框與文字樣式，以及添加層的使用。【學習重點】 CSS樣式表的靈活運用，以及層定位的設置【學習難點】 能夠實現表格所有單元格等寬等高，以及表格多行多列細邊框線的實現【教學方式】案例分析式、任務教學【教學內容】設置8X5表格，并設置表格頭，輸入相應文字。設置表格邊框線參考樣式如下：table border-collapse:collapse;border: 1px solid #33C;font-family: 宋體;font-size: 12px;設置層的絕對定位添加div，直接在對話框里選擇新建新樣式點擊這里直接編寫div的樣式表這個定位類型設置為絕對定位

12、，寬約200px，高約100px。設置層的定位。層的樣式表細節，請大家自己動手調整，并到達如效果圖一致。 并寫出相應的樣式表代碼：最后實現效果圖如下：學生自我評價局部：請在下面打勾可以獨立完成幫助下完成完成得比擬困難學習任務書教學任務三 制作彩色表單【任務內容】講解表單制作，以及表單樣式表的設置，復合樣式表的使用方法【任務目的】使學生掌握表單樣式表設置，學會熟練制作表單。【學習重點】 CSS樣式表的靈活運用，以及表單控件的制作、復合樣式表的使用【學習難點】 能夠實現表單樣式效果、hover樣式的使用使鼠標經過時表單單元格變色。【教學方式】案例分析式、任務教學【教學內容】制作在線調查表單利用DW

13、添加表單，然后再添加一個12X1的表格，在各行內分別插入不同的表單元素。利用這些快捷菜單創立樣圖的表單在網頁里添加一個form，所有表單元素都要包含在這個form里利用任務二得到的表格樣式，設置本次任務的表格樣式。參考如下：tableborder-collapse:collapse;text-align: left;tbody td font:normal 14px/15px georgia;color:#CCC;padding:8px;border: 1px solid #03F;思考：我們在前面學習了超鏈接樣式表時，能夠實現鼠標經過時將超拉鏈顏色改變，那這種樣式表是否也可以適用在其他地方呢

14、？下面讓我們在這個表單上試一下吧。提示：tr:hover請寫出相應的樣式代碼完成效果圖如下所示學生自我評價局部：請在下面打勾可以獨立完成幫助下完成完成得比擬困難學習任務書教學任務四 綜合實例1、2【任務內容】表格最根本的作用就是讓復雜的數據變得更有條理，讓人容易看懂，在設計頁面時，往往要利用表格來排列網頁元素。通過幾個實例掌握表格的使用技巧。【任務目的】使學生掌握表單樣式表設置，學會熟練制作用表格布局的網頁。【學習重點】 CSS樣式表的靈活運用，以及復合樣式表的使用【學習難點】 能夠實現表格樣式效果、hover樣式、復合樣式使用。【教學方式】案例分析式、任務教學【教學內容】綜合實例1：制作變換背景色的表格。步驟提示如下：翻開素材文件，設計如下列圖所示網頁。任務要求：根據素材自己實現網頁效果。 (2)變換背景色的設置提示在標記中輸入以下代碼。onMouseOver=this.style.backgroun