設(shè)計一個簡單的網(wǎng)站教學(xué)設(shè)計

1、第十一課 設(shè)計一個簡單的網(wǎng)站 教學(xué)設(shè)計教材簡析本課是第三單元網(wǎng)站建設(shè)的第一課，重點介紹學(xué)習(xí)網(wǎng)站與網(wǎng)頁、網(wǎng)站主題設(shè)計、結(jié)構(gòu)設(shè)計、主頁布局與色彩設(shè)計等基礎(chǔ)知識，這些都是網(wǎng)站建設(shè)的基礎(chǔ)知識。從教材的結(jié)構(gòu)和內(nèi)容來看，通過前面Word、Powerpoint、網(wǎng)上沖浪的學(xué)習(xí)，學(xué)生完全具備對相應(yīng)知識學(xué)習(xí)的接受能力和心理承受能力。本課學(xué)習(xí)制作網(wǎng)頁對培養(yǎng)信息表達(dá)的能力，加強(qiáng)學(xué)生的信息意識，提高信息處理的能力有著重要的作用；網(wǎng)頁的設(shè)計也給學(xué)生提供了展示個性、自主創(chuàng)新的機(jī)會，促使他們主動地學(xué)、創(chuàng)造性地學(xué)；網(wǎng)頁的頁面布局及色彩搭配的風(fēng)格等能力培養(yǎng)，可以提高他們的藝術(shù)修養(yǎng)和審美情趣。教學(xué)目標(biāo)1知識目標(biāo)了解如何明確網(wǎng)站主

2、題；了解如何組織網(wǎng)站的結(jié)構(gòu)。2能力目標(biāo)讓學(xué)生認(rèn)識網(wǎng)站與網(wǎng)頁、常見網(wǎng)頁布局，并且通過設(shè)計一個簡單的網(wǎng)站，讓學(xué)生掌握如何確定網(wǎng)站的主題、設(shè)計網(wǎng)站的結(jié)構(gòu)、設(shè)計主頁的布局與色彩、繪制網(wǎng)頁布局等，通過學(xué)生的操作和協(xié)作探討，培養(yǎng)學(xué)生的自主學(xué)習(xí)、協(xié)作學(xué)習(xí)的能力；通過知識的再現(xiàn)培養(yǎng)學(xué)生的創(chuàng)新能力和創(chuàng)新意識。3情感目標(biāo)通過作品展示和評價，讓學(xué)生體驗成功的喜悅，激發(fā)學(xué)生的創(chuàng)造熱情；通過小組的協(xié)作，培養(yǎng)學(xué)生的合作精神和集體主義精神。教學(xué)重點了解如何明確網(wǎng)站主題；了解如何組織網(wǎng)站的結(jié)構(gòu)。教學(xué)難點了解如何明確網(wǎng)站主題；了解如何組織網(wǎng)站的結(jié)構(gòu)。學(xué)情分析本課面向八年級學(xué)生，學(xué)生已經(jīng)學(xué)習(xí)了Word、Powerpoint與上網(wǎng)

3、瀏覽信息，對計算機(jī)的基本操作（Word中文檔的編輯，網(wǎng)頁的瀏覽等）比較熟練。這使得學(xué)生主動探索、自主學(xué)習(xí)、在因特網(wǎng)上展示自我成為可能。但本課主要的內(nèi)容為基礎(chǔ)知識，重在講授，可操作性差，學(xué)生動手操作在一定程度上受到壓抑，所以教師在講授本課時，多引用內(nèi)容豐富、形式新穎、符合八年級心理特征的網(wǎng)站進(jìn)行講解說明，激發(fā)學(xué)生學(xué)習(xí)興趣。培養(yǎng)學(xué)生獲取信息、處理信息、整合信息的應(yīng)用能力，培養(yǎng)學(xué)生的信息素養(yǎng)和獨立分析問題、解決問題的能力，提高學(xué)生的創(chuàng)新能力、自學(xué)能力、理論聯(lián)系實踐能力，增強(qiáng)學(xué)生的獨立意識，培養(yǎng)學(xué)生的團(tuán)隊協(xié)作精神。教學(xué)方法情景導(dǎo)入法、任務(wù)驅(qū)動法。所用課時 2課時。教學(xué)環(huán)境多媒體機(jī)房。4人為一個小組，每

4、個小組選出一名學(xué)生出任組長。教師針對學(xué)生的能力水平進(jìn)行適當(dāng)調(diào)整，以達(dá)到各個小組的力量均衡。本課教學(xué)應(yīng)至少一人或兩人一機(jī)，投影機(jī)一臺或機(jī)房配備廣播系統(tǒng)，整個機(jī)房以寬帶的形式接入因特網(wǎng)，網(wǎng)速較快。教學(xué)過程一、創(chuàng)設(shè)教學(xué)情景，激發(fā)學(xué)生學(xué)習(xí)興趣師：同學(xué)們，因特網(wǎng)作為重要的信息發(fā)布與交流方式，在以驚人的速度發(fā)展。也許就在你看完這段文字的幾分鐘時間里，全世界又誕生了幾十個網(wǎng)站。看著風(fēng)格各異的網(wǎng)站，相信許多同學(xué)心里一定有一個愿望，讓自己也在網(wǎng)上安個家制作一個網(wǎng)站，在這個單元中，就讓我們一起來實現(xiàn)這個愿望吧。從本課開始，我們就一起來學(xué)習(xí)如何創(chuàng)建一個個人站點。學(xué)完本單元的全部內(nèi)容后，同學(xué)們就可以創(chuàng)建出有自己風(fēng)格的

5、個人站點，并且將它發(fā)布到因特網(wǎng)上去，與大家分享和交流了。（板書：網(wǎng)站與網(wǎng)頁）二、講授新課（一）網(wǎng)站與網(wǎng)頁師：網(wǎng)頁設(shè)計制作是基礎(chǔ)，是建設(shè)網(wǎng)站的第一步。但網(wǎng)站的設(shè)計要復(fù)雜得多。據(jù)2006年5月發(fā)布的第五次中國互聯(lián)網(wǎng)信息資源調(diào)查報告，全國網(wǎng)站數(shù)約為69.4萬個，全國網(wǎng)頁總數(shù)約24億個，平均每個網(wǎng)站的網(wǎng)頁數(shù)為3748個。某些大型網(wǎng)站的網(wǎng)頁數(shù)目更是以百萬計。將數(shù)量如此眾多的網(wǎng)頁有條理地組合在一起，形成一個網(wǎng)站，可不是一件容易的事。因此，在制作網(wǎng)站要進(jìn)行仔細(xì)的思考和規(guī)劃。網(wǎng)站建設(shè)的一般流程是：選定網(wǎng)站主題、規(guī)劃結(jié)構(gòu)、設(shè)計制作、測試修改、發(fā)布站點等。投影廣播網(wǎng)站建設(shè)的一般流程。師：下面我們來看看如何設(shè)計一個

6、簡單網(wǎng)站。（板書：設(shè)計一個簡單網(wǎng)站）（二）設(shè)計一個簡單網(wǎng)站1確定網(wǎng)站的主題師：主題的選擇關(guān)鍵在于好的創(chuàng)意和特色，如何做到這一點呢？在選擇時應(yīng)注意以下幾點：投影展示確定網(wǎng)站主題要點。（1）主題定位要準(zhǔn)，內(nèi)容要精。如果我們想制作一個包羅萬象的站點，把所有認(rèn)為精彩的東西都放在上面，那么往往會事與愿違，給人的感覺是沒有主題，沒有特色。（2）題材最好是自己擅長或者喜愛的內(nèi)容。比如：擅長編程，就可以建立一個編程愛好者網(wǎng)站；對足球感興趣，可以報道最新的戰(zhàn)況，球星動態(tài)等。這樣在制作時，才不會覺得無聊或者力不從心。興趣是制作網(wǎng)站的動力，沒有熱情，很難設(shè)計制作出杰出的作品。投影廣播Google網(wǎng)站。（3）網(wǎng)站名稱

7、也是網(wǎng)站設(shè)計的一部分。名稱要易記、有特色。根據(jù)中文網(wǎng)站瀏覽者的特點，除非特定需要，網(wǎng)站名稱最好用中文名稱。Google是由英文單詞“googol”變化而來?！癵oogol”是美國數(shù)學(xué)家Edward Kasner的侄子Milton Sirotta創(chuàng)造的一個詞，表示1后邊帶有100個零的數(shù)字。Google使用這個詞代表想征服網(wǎng)上無窮無盡資料的雄心。 圖312 Google標(biāo)識師：了解了網(wǎng)站建設(shè)的要點后，我們來欣賞一下這些網(wǎng)站。投影廣播一些優(yōu)秀網(wǎng)站的截圖。2設(shè)計網(wǎng)站基本結(jié)構(gòu)師：網(wǎng)站的主題確定后，下一步的任務(wù)就是根據(jù)主題，將所要表達(dá)的信息進(jìn)行劃分，確定網(wǎng)站的基本結(jié)構(gòu)，最終完成網(wǎng)站的欄目設(shè)計。建立一個網(wǎng)

8、站好比寫一篇文章，首先要擬好提綱，文章才能主題明確，層次清晰；也好比造一座高樓，首先要設(shè)計好框架圖紙，才能使樓房結(jié)構(gòu)合理。3設(shè)計主頁的布局與色彩師：了解了網(wǎng)站的基本結(jié)構(gòu)，我們再來看看網(wǎng)站的主頁。主頁是進(jìn)入網(wǎng)站時，我們打開的第一個網(wǎng)頁。因此，主頁的設(shè)計十分重要。主頁的布局應(yīng)根據(jù)網(wǎng)站的類型而設(shè)計，不同的網(wǎng)站有不同的風(fēng)格，但應(yīng)具備標(biāo)題、網(wǎng)站標(biāo)識（logo）、導(dǎo)航、網(wǎng)頁內(nèi)容等基本布局元素。投影展示迪斯尼網(wǎng)站的主頁，教師逐一講解標(biāo)題、網(wǎng)站標(biāo)識、導(dǎo)航條等。標(biāo)題是網(wǎng)頁用來標(biāo)識網(wǎng)頁性質(zhì)和內(nèi)容的，標(biāo)題將顯示在瀏覽器的標(biāo)題欄里。網(wǎng)站標(biāo)識（logo）一般放在網(wǎng)頁中最顯眼的位置，目的是加深瀏覽者對網(wǎng)站的印象，同時標(biāo)識

9、又代表網(wǎng)站的形象，所以標(biāo)識都是通過精心設(shè)計的。導(dǎo)航提供網(wǎng)站欄目的索引，通過導(dǎo)航可以方便的瀏覽到網(wǎng)站的每一個欄目。一個合理的導(dǎo)航設(shè)計將使網(wǎng)站變得簡單易用。（1）常見的網(wǎng)頁布局師：雖然網(wǎng)站形形色色，但如果把整個首頁面當(dāng)成一個整體去觀察，它們的布局主要有以下幾種：“同”字形網(wǎng)頁結(jié)構(gòu)、“匡”字形網(wǎng)頁結(jié)構(gòu)、“回”字形網(wǎng)頁結(jié)構(gòu)、“川”字形網(wǎng)頁結(jié)構(gòu)投影展示以上幾種類型網(wǎng)站。師：除以上幾種外，還有自由格式網(wǎng)頁結(jié)構(gòu)布局，它的風(fēng)格較為隨意，完成后的頁面就像一張精美的圖片或極具創(chuàng)意的廣告。同學(xué)們在上網(wǎng)的過程中看到結(jié)構(gòu)新穎的網(wǎng)頁可以將他們保存起來，也許能為今后的創(chuàng)作提供靈感。（2）色彩搭配師：了解網(wǎng)站的布局后，下面我

10、們再來看看網(wǎng)站的色彩搭配，設(shè)計網(wǎng)站如同人的衣著打扮一樣，也需要恰如其分的包裝和表達(dá)。不同的顏色會給瀏覽者不同的心理感受，產(chǎn)生不同的聯(lián)想，選擇色彩要和網(wǎng)頁的內(nèi)涵相關(guān)聯(lián)。網(wǎng)頁色彩搭配時，網(wǎng)頁的色彩要容易引人注目，色彩和表達(dá)的內(nèi)容氣氛相適合。投影展示中學(xué)生校園生活網(wǎng)站：如：“中學(xué)生校園生活”網(wǎng)站主要采用了淺黃綠色，體現(xiàn)了中學(xué)生青春、清新、自然的視覺意境。清新自然、溫馨淡雅的設(shè)計，讓人感覺到校園青春的氣息撲面而來，是一個比較好的設(shè)計。師：在這里，老師給同學(xué)們介紹幾種常用的配色方案：暖色調(diào)。即紅色、橙色、黃色、赭色等色彩的搭配。這種色調(diào)的運用，可使主頁呈現(xiàn)溫馨、和煦、熱情的氛圍。冷色調(diào)。即青色、綠色、紫

11、色等色彩的搭配。這種色調(diào)的運用，可使主頁呈現(xiàn)寧靜、清涼、高雅的氛圍。對比色調(diào)?？傮w的色調(diào)應(yīng)該是統(tǒng)一和諧的，局部的地方可以有一些小的強(qiáng)烈對比。除了顏色搭配外，還要考慮主頁底色（背景色）的深、淺。有些主頁，底色是黑的，但文字也選用了較深的色彩，由于色彩的明度比較接近，讀者在閱覽時，眼睛就會感覺很吃力，影響了閱讀效果。當(dāng)然，色彩的明度也不能變化太大，否則屏幕上的亮度反差太強(qiáng)，同樣也會使瀏覽者的眼睛感到不舒服。三、授課完畢，課程總結(jié)本節(jié)課主要講了以下幾個知識點：1.了解如何明確網(wǎng)站主題；2.了解如何組織網(wǎng)站的結(jié)構(gòu)。四、課堂作業(yè)分組設(shè)計制作不同主題(如班級主題、家鄉(xiāng)的旅游資源、保護(hù)環(huán)境、歷史人物等主題)網(wǎng)站。五、教學(xué)反思 網(wǎng)站的建設(shè)在中學(xué)信息技術(shù)課中也是學(xué)生比較喜歡的內(nèi)容。本節(jié)課主要是讓學(xué)生對網(wǎng)站有個整體的認(rèn)識，比如網(wǎng)站的主題、網(wǎng)站的基本結(jié)構(gòu)、主頁的布局與色彩。由于是對網(wǎng)站的認(rèn)識，所以我采用了案例分