網(wǎng)頁(yè)中的表格整理

1、網(wǎng)頁(yè)中的表格教學(xué)設(shè)計(jì)一、教學(xué)設(shè)計(jì)部分 教學(xué)內(nèi)容分析 本課的主要內(nèi)容與地位 網(wǎng)頁(yè)中，常用表格來(lái)對(duì)網(wǎng)頁(yè)中其它元素定位，將復(fù)雜的元素有條理的分布到網(wǎng)頁(yè)各個(gè)位置網(wǎng)頁(yè)布局。另外，當(dāng)我們把表格的寬度定為固定像素值后，還能保證網(wǎng)頁(yè)布局不會(huì)隨瀏覽器窗口的大小變化而變化，當(dāng)我們?cè)诰W(wǎng)頁(yè)中輸入文字的時(shí)候，就可以讓文字頂滿(mǎn)格后自動(dòng)換行，方便我們對(duì)文字的編輯。 由此可見(jiàn)，網(wǎng)頁(yè)中只有利用表格進(jìn)行布局，才能稱(chēng)得上真正意義上的網(wǎng)頁(yè)設(shè)計(jì)。 本課與前后內(nèi)容的關(guān)系 利用表格布局網(wǎng)頁(yè)，將上一節(jié)設(shè)計(jì)的網(wǎng)站首頁(yè)中的各種素材進(jìn)行合理的分布，是對(duì)學(xué)生進(jìn)行網(wǎng)頁(yè)設(shè)計(jì)技能上的提升；利用表

2、格布局網(wǎng)頁(yè)也是整個(gè)網(wǎng)站設(shè)計(jì)中一個(gè)非常重要技術(shù)手段，應(yīng)用非常廣泛。 教學(xué)目標(biāo)分析 知識(shí)目標(biāo)/技能目標(biāo) ·知識(shí)目標(biāo) 理解表格在網(wǎng)頁(yè)設(shè)計(jì)中的重要作用。 ·技能目標(biāo) 掌握使用表格布局網(wǎng)頁(yè)。 靈活掌握表格調(diào)整的方法。 過(guò)程與方法目標(biāo) 能夠合理利用表格對(duì)網(wǎng)頁(yè)進(jìn)行布局和規(guī)劃。 情感態(tài)度與價(jià)值觀目標(biāo) 了解學(xué)校概貌，發(fā)現(xiàn)校園之美，理解規(guī)矩與方圓的關(guān)系，養(yǎng)成良好的生活和學(xué)習(xí)習(xí)慣。 本課的重難點(diǎn) 重點(diǎn)和難點(diǎn)：掌握利用表格對(duì)網(wǎng)頁(yè)進(jìn)行布局的方法 本課的課時(shí)分配建

3、議 一課時(shí) 教學(xué)策略設(shè)計(jì)建議 教法建議 由于關(guān)于表格的基本操作（插入表格、調(diào)整表格：調(diào)整行高或列寬、合并或拆分單元格、插入或刪除行或列、平均分布行或列）在Word中已經(jīng)有較詳細(xì)的操作方法。在本課教學(xué)過(guò)程中，教師教學(xué)的重點(diǎn)應(yīng)放在由學(xué)生探究以上基本操作的基礎(chǔ)上的表格的使用如何利用表格布局網(wǎng)頁(yè)，讓網(wǎng)頁(yè)中的素材合理的在網(wǎng)頁(yè)上分布。 另外，網(wǎng)頁(yè)模板是提高建站效率的有效手段，教師要注意引導(dǎo)學(xué)生對(duì)網(wǎng)頁(yè)模板的使用。 學(xué)法建議 注意觀察和借鑒樣板網(wǎng)站中表格的運(yùn)用情況，剛開(kāi)始使用表格設(shè)計(jì)網(wǎng)頁(yè)時(shí)可將其邊框粗細(xì)的值設(shè)為1，以觀察調(diào)整表格的過(guò)程，從而

4、掌握表格調(diào)整的技巧。 教學(xué)資源與環(huán)境建議 本課教學(xué)資源索引 1第二課的半成品網(wǎng)頁(yè)：Indexhtm、Parentshtm 教學(xué)評(píng)價(jià)建議 自評(píng)、互評(píng)、師評(píng)要注意的問(wèn)題 學(xué)生制作的網(wǎng)頁(yè)是否通過(guò)表格的布局達(dá)到美化、整齊和排列有序的目的。 教學(xué)過(guò)程參考案例 第一階段：導(dǎo)入新課，明確學(xué)習(xí)目標(biāo)教學(xué)環(huán)節(jié)教師活動(dòng)學(xué)生活動(dòng)設(shè)計(jì)理念導(dǎo)入新課指導(dǎo)學(xué)生“讀一讀”，討論兩幅圖之間的相似之處。 師：校園內(nèi)的建筑通過(guò)道路和綠化帶進(jìn)行區(qū)域上的劃分，網(wǎng)頁(yè)中的素材是通過(guò)表格進(jìn)行合理的安排，但如何安排呢？ 這就是本節(jié)課的學(xué)習(xí)內(nèi)容網(wǎng)頁(yè)

5、中的表格。  閱讀，討論、思考、回答。從學(xué)生身邊最熟悉的環(huán)境入手，導(dǎo)入他們陌生的知識(shí)點(diǎn)，幫助學(xué)生通過(guò)對(duì)二者的比較理解新知識(shí)。 第二階段：范例精講，學(xué)生自主探究，完成范例教學(xué)環(huán)節(jié)教師活動(dòng)學(xué)生活動(dòng)設(shè)計(jì)理念學(xué)習(xí)與探究教師講解表格在網(wǎng)頁(yè)時(shí)的重要作用。 任務(wù)一：插入表格 師：如果我們想要在網(wǎng)頁(yè)中使用表格必須先插入表格，操作方法與Word差不多，自己嘗試著在一個(gè)新網(wǎng)頁(yè)中插入不同設(shè)置的表格，并填寫(xiě)表1-3-1。 教師指導(dǎo)學(xué)生參照?qǐng)D1-3-4在主頁(yè)文件Indexhtm中插入表格： 任務(wù)二：表格的調(diào)整 師：此部分內(nèi)容與Word中的操

6、作也是非常相似，根據(jù)教材內(nèi)容分組完成表格的調(diào)整。調(diào)整結(jié)束后將第二課中已經(jīng)輸入的內(nèi)容移動(dòng)到表格中。 任務(wù)三：設(shè)計(jì)網(wǎng)頁(yè)模板 師：設(shè)計(jì)網(wǎng)站時(shí)為提高工作效率，我們一般使用模板，現(xiàn)在我們就來(lái)定制屬于我們自己的網(wǎng)頁(yè)模板。  插入默認(rèn)值的表格，分組插入修改不同參數(shù)值的表格，討論并填寫(xiě)表格。  實(shí)踐表格的調(diào)整方法，體驗(yàn)表格對(duì)網(wǎng)頁(yè)布局的重要作用。   根據(jù)教材提示，將首頁(yè)保存為模板。    對(duì)于學(xué)生熟悉的知識(shí)點(diǎn)，完全放手給學(xué)生探究完成。    

7、嘗試通過(guò)不同途徑解決同一問(wèn)題，提高辦事效率。 第三階段：知識(shí)、情感拓展教學(xué)環(huán)節(jié)教師活動(dòng)學(xué)生活動(dòng)設(shè)計(jì)理念知識(shí)與情感師：請(qǐng)同學(xué)們?cè)俅晤A(yù)覽使用表格布局的網(wǎng)頁(yè)，然后改變?yōu)g覽器窗口的大小，網(wǎng)頁(yè)版面發(fā)生變化嗎？這說(shuō)明什么問(wèn)題呢？ 師：在生活中，你能體會(huì)到父母對(duì)自己的關(guān)心和愛(ài)護(hù)嗎？請(qǐng)大家課下完成“一日護(hù)蛋”的實(shí)踐活動(dòng)，設(shè)計(jì)新網(wǎng)頁(yè)“Feelinghtm”。學(xué)生分組預(yù)覽網(wǎng)頁(yè)。   生：表格可以保護(hù)網(wǎng)頁(yè)的布局。由表格對(duì)網(wǎng)頁(yè)布局的保護(hù)延伸到父母對(duì)子女的愛(ài)。讓學(xué)生從護(hù)蛋活動(dòng)中體會(huì)這種愛(ài)護(hù)要付出多大的精力。 第四階段：綜合實(shí)踐，鞏固與提高，自由創(chuàng)作，遷移運(yùn)用教

8、學(xué)環(huán)節(jié)教師活動(dòng)學(xué)生活動(dòng)設(shè)計(jì)理念實(shí)踐與創(chuàng)新師：通過(guò)本節(jié)課的學(xué)習(xí)，你是否感覺(jué)上一節(jié)課設(shè)計(jì)的二級(jí)網(wǎng)頁(yè)“Parentshtm”需要使用表格重新布局一下呢？ 教師巡視指導(dǎo) ：剛才我們學(xué)習(xí)了網(wǎng)頁(yè)模板的保存，下面請(qǐng)同學(xué)們使用模板設(shè)計(jì)xx頁(yè)表中所列的三個(gè)網(wǎng)頁(yè)。 師：請(qǐng)大家思考：能否為實(shí)踐活動(dòng)網(wǎng)頁(yè)設(shè)計(jì)統(tǒng)一的模板？使用表格重新布局網(wǎng)頁(yè)。 設(shè)計(jì)新網(wǎng)頁(yè)，體驗(yàn)?zāi)０宓闹匾饔谩Ｖ攸c(diǎn)實(shí)現(xiàn)示例網(wǎng)頁(yè)Neighborhtm中的表格設(shè)計(jì)效果。   學(xué)以致用，鞏固提高。 第五階段：教學(xué)總結(jié)，設(shè)疑激趣，為下一節(jié)課作好鋪墊教學(xué)環(huán)節(jié)教師活動(dòng)學(xué)生活動(dòng)設(shè)計(jì)理念課堂

9、小結(jié)課堂小結(jié)本節(jié)課的學(xué)習(xí)內(nèi)容。 師：通過(guò)本節(jié)課的學(xué)習(xí)，同學(xué)們是否覺(jué)得自己做出的網(wǎng)頁(yè)在形式上還有些單調(diào)？我們能否把網(wǎng)頁(yè)做得更漂亮呢？請(qǐng)同學(xué)們課后預(yù)習(xí)下一課的內(nèi)容網(wǎng)頁(yè)美化。 重新審視自己的網(wǎng)頁(yè)，并與樣例對(duì)比，查找出自己網(wǎng)站需要改進(jìn)的地方。 通過(guò)對(duì)比查找不足，做到有的放矢，激發(fā)學(xué)生自主探究的熱情。 教學(xué)反思（教學(xué)設(shè)計(jì)理念） 本節(jié)課的主要內(nèi)容與Word中的表格操作有很多相似之處，但又有很大的不同。所以，教師應(yīng)讓學(xué)生通過(guò)實(shí)踐理解表格在Word和網(wǎng)頁(yè)設(shè)計(jì)中的不同作用。 網(wǎng)頁(yè)模板是一個(gè)新知識(shí)點(diǎn)，只有通過(guò)實(shí)際操作才能體會(huì)它的作用，所以安排學(xué)生使用模板

10、設(shè)計(jì)新網(wǎng)頁(yè)的環(huán)節(jié)。 二、補(bǔ)充資料部分 1課件與學(xué)件 R學(xué)生用學(xué)件 名稱(chēng)文件名在網(wǎng)頁(yè)中插入表格插入表格swf表格的調(diào)整表格調(diào)整swf設(shè)計(jì)網(wǎng)頁(yè)模板網(wǎng)頁(yè)模板swf 2資料庫(kù) 網(wǎng)站版面的布局設(shè)計(jì) 版面設(shè)計(jì)也可以理解為布局設(shè)計(jì)，就是我們?cè)跒g覽器上看到的一個(gè)完整的頁(yè)面。如何將所有要體現(xiàn)的內(nèi)容有機(jī)地整合和分布，達(dá)到某種視覺(jué)效果，這就叫做版面布局設(shè)計(jì)。我們將如何做好網(wǎng)站的版面設(shè)計(jì)呢？首先我認(rèn)為是“過(guò)程注定了結(jié)果”，重視你所做的每一步并把它盡量做到最好，相信結(jié)果也不會(huì)偏離軌道。 下面先讓我們來(lái)了解一些版面設(shè)計(jì)的步驟。 一、

11、構(gòu)思（結(jié)構(gòu)的搭建） 在構(gòu)思之前我們總需要進(jìn)行網(wǎng)站的需求分析、定位和受眾群等很多方面的事情。如果我們連這些問(wèn)題都還不清楚的話(huà)，請(qǐng)先不要去想著設(shè)計(jì)，因?yàn)樵诓涣私庑枨蟮那闆r下，盲目地去把頁(yè)面設(shè)計(jì)達(dá)到某種視覺(jué)效果是很難的。 當(dāng)我們真正確定需求后，便可以盡可能地發(fā)揮自己的想象力，將自己想到的“構(gòu)思”畫(huà)上去（用筆和紙或者軟件都可以，根據(jù)自己的習(xí)慣而定）。這是屬于一個(gè)構(gòu)思的過(guò)程，不講究細(xì)膩工整，也不必考慮到一些細(xì)節(jié)的部分，只要用幾條粗陋的線(xiàn)條勾畫(huà)出創(chuàng)意的輪廓即可。盡可能多構(gòu)思一些，以便選擇一個(gè)最適合的進(jìn)行搭建。 二、粗略布局 這個(gè)階段是個(gè)試用期，我們只要把重要的元素和

12、網(wǎng)頁(yè)結(jié)構(gòu)相結(jié)合，看看框架是否合理，如果不適合則進(jìn)行相應(yīng)的修改。 三、完善布局 當(dāng)我們已經(jīng)有一個(gè)很好的框架時(shí)，我們需要根據(jù)網(wǎng)站設(shè)計(jì)時(shí)的構(gòu)思將其所需的內(nèi)容有條理地融入于整個(gè)的框架中。我們需要通過(guò)對(duì)圖片的處理、空間的合理利用進(jìn)行編排。 下面是廣告大師樊志育在廣告制作中所提到的，希望對(duì)大家在布局的理論上面有所幫助。 1正常平衡亦稱(chēng)“勻稱(chēng)”。多指左右、上下對(duì)照形式，主要強(qiáng)調(diào)秩序，能達(dá)到安定誠(chéng)實(shí)、信賴(lài)的效果。 2異常平衡即非對(duì)照形式，但也要平衡和韻律，當(dāng)然都是不均整的，此種布局能達(dá)到強(qiáng)調(diào)性、不安性、高注目性的效果。 3對(duì)比所謂對(duì)比，不僅利用色彩、色調(diào)等技巧來(lái)做表現(xiàn)，在內(nèi)容上也可涉及古與今、新與舊、貧與富等對(duì)比。 4凝視所謂凝視是利用頁(yè)面中人物視線(xiàn)，使瀏覽者仿照跟隨的心理，以達(dá)到注視