網頁中的表格教學設計一、教學設計部分?教學內容分析R本課的主要內容與地位網頁中，常用表格來對網頁中其它元素定位，將復雜的元素有條理的分布到網頁各個位置網頁布局。另外，當我們把表格的寬度定為固定像素值后，還能保證網頁布局不會隨瀏覽器窗口的大小變化而變化，當我們在網頁中輸入文字的時候，就可以讓文字頂滿格后自動換行，方便我們對文字的編輯。由此可見，網頁中只有利用表格進行布局，才能稱得上真正意義上的網頁設計。R本課與前后內容的關系利用表格布局網頁，將上一節設計的網站首頁中的各種素材進行合理的分布，是對學生進行網頁設計技能上的提升；利用表格布局網頁也是整個網站設計中一個非常重要技術手段，應用非常廣泛。?教學目標分析R知識目標/技能目標知識目標理解表格在網頁設計中的重要作用。技能目標掌握使用表格布局網頁。靈活掌握表格調整的方法。R過程與方法目標能夠合理利用表格對網頁進行布局和規劃。R情感態度與價值觀目標了解學校概貌，發現校園之美，理解規矩與方圓的關系，養成良好的生活和學習習慣。R本課的重難點重點和難點：掌握利用表格對網頁進行布局的方法R本課的課時分配建議一課時?教學策略設計建議R教法建議由于關于表格的基本操作（插入表格、調整表格：調整行高或列寬、合并或拆分單元格、插入或刪除行或列、平均分布行或列）在Word中已經有較詳細的操作方法。在本課教學過程中，教師教學的重點應放在由學生探究以上基本操作的基礎上的表格的使用如何利用表格布局網頁，讓網頁中的素材合理的在網頁上分布。另外，網頁模板是提高建站效率的有效手段，教師要注意引導學生對網頁模板的使用。R學法建議注意觀察和借鑒樣板網站中表格的運用情況，剛開始使用表格設計網頁時可將其邊框粗細的值設為1，以觀察調整表格的過程，從而掌握表格調整的技巧。?教學資源與環境建議R本課教學資源索引1第二課的半成品網頁：Indexhtm、Parentshtm?教學評價建議R自評、互評、師評要注意的問題學生制作的網頁是否通過表格的布局達到美化、整齊和排列有序的目的。?教學過程參考案例第一階段：導入新課，明確學習目標教學環節教師活動學生活動設計理念導入新課指導學生“讀一讀”，討論兩幅圖之間的相似之處。師：校園內的建筑通過道路和綠化帶進行區域上的劃分，網頁中的素材是通過表格進行合理的安排，但如何安排呢？這就是本節課的學習內容網頁中的表格。閱讀，討論、思考、回答。從學生身邊最熟悉的環境入手，導入他們陌生的知識點，幫助學生通過對二者的比較理解新知識。第二階段：范例精講，學生自主探究，完成范例教學環節教師活動學生活動設計理念學習與探究教師講解表格在網頁時的重要作用。任務一：插入表格師：如果我們想要在網頁中使用表格必須先插入表格，操作方法與Word差不多，自己嘗試著在一個新網頁中插入不同設置的表格，并填寫表1-3-1。教師指導學生參照圖1-3-4在主頁文件Indexhtm中插入表格：任務二：表格的調整師：此部分內容與Word中的操作也是非常相似，根據教材內容分組完成表格的調整。調整結束后將第二課中已經輸入的內容移動到表格中。任務三：設計網頁模板師：設計網站時為提高工作效率，我們一般使用模板，現在我們就來定制屬于我們自己的網頁模板。插入默認值的表格，分組插入修改不同參數值的表格，討論并填寫表格。實踐表格的調整方法，體驗表格對網頁布局的重要作用。根據教材提示，將首頁保存為模板。對于學生熟悉的知識點，完全放手給學生探究完成。嘗試通過不同途徑解決同一問題，提高辦事效率。第三階段：知識、情感拓展教學環節教師活動學生活動設計理念知識與情感師：請同學們再次預覽使用表格布局的網頁，然后改變瀏覽器窗口的大小，網頁版面發生變化嗎？這說明什么問題呢？師：在生活中，你能體會到父母對自己的關心和愛護嗎？請大家課下完成“一日護蛋”的實踐活動，設計新網頁“Feelinghtm”。學生分組預覽網頁。生：表格可以保護網頁的布局。由表格對網頁布局的保護延伸到父母對子女的愛。讓學生從護蛋活動中體會這種愛護要付出多大的精力。第四階段：綜合實踐，鞏固與提高，自由創作，遷移運用教學環節教師活動學生活動設計理念實踐與創新師：通過本節課的學習，你是否感覺上一節課設計的二級網頁“Parentshtm”需要使用表格重新布局一下呢？教師巡視指導：剛才我們學習了網頁模板的保存，下面請同學們使用模板設計xx頁表中所列的三個網頁。師：請大家思考：能否為實踐活動網頁設計統一的模板？使用表格重新布局網頁。設計新網頁，體驗模板的重要作用。重點實現示例網頁Neighborhtm中的表格設計效果。學以致用，鞏固提高。第五階段：教學總結，設疑激趣，為下一節課作好鋪墊教學環節教師活動學生活動設計理念課堂小結課堂小結本節課的學習內容。師：通過本節課的學習，同學們是否覺得自己做出的網頁在形式上還有些單調？我們能否把網頁做得更漂亮呢？請同學們課后預習下一課的內容網頁美化。重新審視自己的網頁，并與樣例對比，查找出自己網站需要改進的地方。通過對比查找不足，做到有的放矢，激發學生自主探究的熱情。?教學反思（教學設計理念）本節課的主要內容與Word中的表格操作有很多相似之處，但又有很大的不同。所以，教師應讓學生通過實踐理解表格在Word和網頁設計中的不同作用。網頁模板是一個新知識點，只有通過實際操作才能體會它的作用，所以安排學生使用模板設計新網頁的環節。二、補充資料部分?1課件與學件R學生用學件名稱文件名在網頁中插入表格插入表格swf表格的調整表格調整swf設計網頁模板網頁模板swf?2資料庫網站版面的布局設計版面設計也可以理解為布局設計，就是我們在瀏覽器上看到的一個完整的頁面。如何將所有要體現的內容有機地整合和分布，達到某種視覺效果，這就叫做版面布局設計。我們將如何做好網站的版面設計呢？首先我認為是“過程注定了結果”，重視你所做的每一步并把它盡量做到最好，相信結果也不會偏離軌道。下面先讓我們來了解一些版面設計的步驟。一、構思（結構的搭建）在構思之前我們總需要進行網站的需求分析、定位和受眾群等很多方面的事情。如果我們連這些問題都還不清楚的話，請先不要去想著設計，因為在不了解需求的情況下，盲目地去把頁面設計達到某種視覺效果是很難的。當我們真正確定需求后，便可以盡可能地發揮自己的想象力，將自己想到的“構思”畫上去（用筆和紙或者軟件都可以，根據自己的習慣而定）。這是屬于一個構思的過程，不講究細膩工整，也不必考慮到一些細節的部分，只要用幾條粗陋的線條勾畫出創意的輪廓即可。盡可能多構思一些，以便選擇一個最適合的進行搭建。二、粗略布局這個階段是個試用期，我們只要把重要的元素和網頁結構相結合，看看框架是否合理，如果不適合則進行相應的修改。三、完善布局當我們已經有一個很好的框架時，我們需要根據網站設計時的構思將其所需的內容有條理地融入于整個的框架中。我們需要通過對圖片的處理、空間的合理利用進行編排。下面是廣告大師樊志育在廣告制作中所提到的，希望對大家在布局的理論上面有所幫助。1正常平衡亦稱“勻稱”。多指左右、上下對照形式，主要強調秩序，能達到安定誠實、信賴的效果。2異常平衡即非對照形式，但也要平衡和韻律，當然都是不均整的，此種布局能達到強調性、不安性、高注目性的效果。3對比所謂對比，不僅利用色彩、色調等技巧來做表現，在內容上也可涉及古與今、新與舊、貧與富等對比。4凝視所謂凝視是利用頁面中人物視線，使瀏覽者仿照跟隨的心理，以達到注視頁面的效果，一般多用明星凝視狀。5空白空白有兩種作用，一方面對其他網站表示突出卓越，另一方面也表示網頁品位的優越感，這種表現方法對體顯網頁的格調十分有效。6盡量用圖片解說此法對不能用語言說服、或