《網(wǎng)頁中的表格》教學設計.doc

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