網(wǎng)站設(shè)計 公開課教學(xué)設(shè)計

設(shè)計網(wǎng)站欄目及版面一、教學(xué)目標(biāo)1．了解網(wǎng)站設(shè)計的基本內(nèi)容。2．依據(jù)主題設(shè)計網(wǎng)站的欄目和結(jié)構(gòu)。二、教材內(nèi)容分析設(shè)計網(wǎng)站欄目及版面是網(wǎng)站建設(shè)的關(guān)鍵步驟，欄目實質(zhì)是一個網(wǎng)站的大綱索引，將網(wǎng)站的主題明確顯示出來。設(shè)計好欄目，會使網(wǎng)站結(jié)構(gòu)清晰，方便擴充和維護(hù)。精美的網(wǎng)頁版面設(shè)計會吸引大量的網(wǎng)民，精巧的版面結(jié)構(gòu)能夠讓瀏覽者清楚、容易地理解作品傳達(dá)的信息，同時也是不同元素巧妙排列的方式。就像傳統(tǒng)的報刊雜志一樣，我們將網(wǎng)頁看作一張報紙或一本雜志中的一頁來進(jìn)行排版布局。設(shè)計版面時要把文字、圖片、空白當(dāng)作一個整體來看，采用平面分割方式，調(diào)動全部面積來構(gòu)建整個版面。信息技術(shù)發(fā)展日新月異，我們的教學(xué)重點應(yīng)放在培養(yǎng)學(xué)生適應(yīng)技術(shù)發(fā)展的能力上。在介紹基本概念、原理、方法以及一些相對穩(wěn)定的內(nèi)容時，要特別注重培養(yǎng)學(xué)生的思維方法。在該部分內(nèi)容的學(xué)習(xí)中，充分調(diào)動學(xué)生的積極性，激發(fā)學(xué)生的創(chuàng)作熱情和創(chuàng)新精神。三、教學(xué)方法及策略1．對已經(jīng)下載的部分網(wǎng)站進(jìn)行欄目和版面的分析比較。2．以學(xué)生為中心，教師指導(dǎo)，學(xué)生依據(jù)自選主題設(shè)計欄目和構(gòu)思版面。四、教學(xué)過程引入：網(wǎng)站設(shè)計是把一個網(wǎng)站由藍(lán)圖變?yōu)楝F(xiàn)實的第一個步驟，是搭建網(wǎng)站整體結(jié)構(gòu)的過程，能使后續(xù)工作有章可循，下面我們從欄目設(shè)置和版面設(shè)計入手。新授：（一）欄目設(shè)置1．讓學(xué)生瀏覽光盤上的“機器人做學(xué)玩”網(wǎng)站，歸納該網(wǎng)站的欄目設(shè)置。2．教師總結(jié)網(wǎng)站欄目設(shè)置要注意的事項：(1)緊扣主題。(2)重點突出。(3)方便瀏覽。3．根據(jù)以上三點，對課本第82頁同是“環(huán)境保護(hù)”主題的兩個欄目進(jìn)行評價。（二）版面設(shè)計1．讓學(xué)生打開\4-2\sucai文件夾中的幾個網(wǎng)頁，總結(jié)版面布局的幾種類型及特點。常見樣式特點示例“廠”字型優(yōu)點：結(jié)構(gòu)清晰，主次分明。缺點：呆板?！翱凇弊中蛢?yōu)點：信息量大，切換方便。缺點：頁面擁擠，不夠靈活。自由式（POP）優(yōu)點：漂亮、吸引人。缺點：顯示速度慢，文字信息少。2．教師舉例：繪制“走進(jìn)山東”網(wǎng)站的規(guī)劃圖。（第一張規(guī)劃圖）

（第二張規(guī)劃圖）

3．版面布局可按創(chuàng)意草案——粗略布局——最后定稿三個步驟進(jìn)行。根據(jù)網(wǎng)站主題的需要，從整體上設(shè)計各網(wǎng)頁的內(nèi)容、各網(wǎng)頁之間的鏈接關(guān)系以及各網(wǎng)頁的版面，畫出網(wǎng)站的規(guī)劃圖。對規(guī)劃圖，一開始不必考慮細(xì)節(jié)功能，只是粗線條地勾畫出規(guī)劃的草案即可；在草案的基礎(chǔ)上，將需要的功能模塊安排到頁面上，然后細(xì)化每項內(nèi)容。規(guī)劃并不是一成不變的，時常需要根據(jù)素材進(jìn)行調(diào)整和完善。[布置任務(wù)]分析“機器人做學(xué)玩”的版面布局。除以上提到的，你還知道其他的布局類型嗎？你最喜歡哪一種？樹立網(wǎng)站整體風(fēng)格以及素材的搜集一、教學(xué)目標(biāo)1．解不同色彩的含義，培養(yǎng)學(xué)生的色彩運用能力。2．進(jìn)一步掌握搜索技巧，提高學(xué)生利用網(wǎng)絡(luò)的能力以及辨別信息的能力。3．通過小組合作，自由發(fā)揮的形式，既增強學(xué)生的責(zé)任感，鼓勵個性發(fā)揮，同時，在共同完成的過程中，培養(yǎng)學(xué)生合作、協(xié)助精神。二、教學(xué)方法及策略充分強調(diào)以學(xué)生為中心，以教師為主導(dǎo)的新課改主張，把更多的時間、更多的自主空間留給學(xué)生，培養(yǎng)學(xué)生自學(xué)能力、個人責(zé)任感以及相互合作、協(xié)助的精神。三、教學(xué)準(zhǔn)備1．在服務(wù)器上以組為單位，建立文件夾并用每組的網(wǎng)站主題命名。以便學(xué)生將資料上傳保存。2．配置校園網(wǎng)Web服務(wù)器。四、教學(xué)過程教學(xué)程序教學(xué)內(nèi)容要點教法設(shè)計教師活動學(xué)生活動引入

激發(fā)學(xué)生學(xué)習(xí)興趣。展示各種顏色的卡片。并請幾位同學(xué)起來說說對不同顏色的不同感受。幾名學(xué)生回答問題。正課讓學(xué)生了解不同色彩所表達(dá)的不同含義為后面確立網(wǎng)站的整體風(fēng)格埋下伏筆。布置任務(wù)：通過網(wǎng)絡(luò)查找不同色彩的不同含義。填寫表格4-3。學(xué)生完成任務(wù)并填好表格4-3。通過網(wǎng)上鄰居上傳至服務(wù)器。確立網(wǎng)站整體風(fēng)格。培養(yǎng)學(xué)生色彩搭配能力以及與人協(xié)作的能力。布置任務(wù)：根據(jù)各組的網(wǎng)站主題，確定本組網(wǎng)站的色調(diào)。填寫表格4-4。學(xué)生討論完成并填好表格4-4。將結(jié)果上傳至服務(wù)器。搜集網(wǎng)站所需素材1．培養(yǎng)學(xué)生獨立完成任務(wù)的能力，增強責(zé)任感。2．培養(yǎng)學(xué)生搜集信息的能力。布置任務(wù)：每組成員按照所分配的任務(wù)，分頭搜集網(wǎng)站所需要的素材。學(xué)生在相互協(xié)助的基礎(chǔ)上，獨立完成各自任務(wù)。

教學(xué)程序教學(xué)內(nèi)容要點教法設(shè)計教師活動學(xué)生活動正課素材整理應(yīng)注意的問題。

布置任務(wù)：由組長帶領(lǐng)，將搜集的素材進(jìn)行相關(guān)整理，填寫表格4-5。學(xué)生完成任務(wù)并填好表格4-5。通過網(wǎng)上鄰居上傳至服務(wù)器。總結(jié)明確任務(wù)應(yīng)完成情況，督促進(jìn)度慢的小組及相關(guān)負(fù)責(zé)成員。適度加深學(xué)生對課堂操作的印象。1．介紹各小組完成情況。2．就出現(xiàn)的問題進(jìn)行適當(dāng)?shù)闹v解。聽講。

附表格4-3色彩名稱視覺效果簡述紅

綠

橙

黃

藍(lán)

紫

白

黑

灰

表格4-4組別網(wǎng)站選用