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

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

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

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

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

5、個人站點，并且將它發(fā)布到因特網(wǎng)上去，與大家分享和交流了。（板書：網(wǎng)站與網(wǎng)頁）二、講授新課（一）網(wǎng)站與網(wǎng)頁師：網(wǎng)頁設計制作是基礎，是建設網(wǎng)站的第一步。但網(wǎng)站的設計要復雜得多。據(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)站要進行仔細的思考和規(guī)劃。網(wǎng)站建設的一般流程是：選定網(wǎng)站主題、規(guī)劃結構、設計制作、測試修改、發(fā)布站點等。投影廣播網(wǎng)站建設的一般流程。師：下面我們來看看如何設計一個

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

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

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

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

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

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