網(wǎng)站的設(shè)計教學(xué)設(shè)計.doc

“網(wǎng)站的設(shè)計”教學(xué)設(shè)計【教材分析】：“網(wǎng)站的設(shè)計”是上海科技教育出版社網(wǎng)絡(luò)技術(shù)應(yīng)用（選修）第四章第一單元“了解與設(shè)計網(wǎng)站”的第二課時，它是學(xué)生進(jìn)行網(wǎng)站制作的前提工作，對后期學(xué)生利用網(wǎng)頁制作工具具體實現(xiàn)網(wǎng)站起到重要的引導(dǎo)作用。本課內(nèi)容在整個網(wǎng)站建設(shè)中是非常關(guān)鍵的，在這部分教學(xué)中，要求動腦思考的內(nèi)容比較多，所以對于本節(jié)課內(nèi)容只在于讓學(xué)生了解主題網(wǎng)站設(shè)計的重要性。在網(wǎng)站設(shè)計中，一份詳細(xì)的網(wǎng)站規(guī)劃表有利于指導(dǎo)創(chuàng)作過程，而策劃主題風(fēng)格同樣至關(guān)重要，它以顯性的方式向人們展示了網(wǎng)站的主題、個性等，這部分內(nèi)容同樣也是要求學(xué)生進(jìn)行深入思考的?！緦W(xué)情分析】：本節(jié)課的授課對象為高二年級第二學(xué)期的學(xué)生。學(xué)生在初中，高一都已使用過Frontpage來制作主題網(wǎng)站，對網(wǎng)站的制作已有了初步的了解，但對網(wǎng)站的開發(fā)流程沒有進(jìn)行系統(tǒng)的學(xué)習(xí)。在上學(xué)期，他們已經(jīng)掌握了上網(wǎng)的相關(guān)操作（如：接入Internet、瀏覽網(wǎng)頁，從因特網(wǎng)上獲取信息等等），通過觀察，他們對上網(wǎng)很感興趣。同時也發(fā)現(xiàn)了許許多多內(nèi)容豐富、創(chuàng)意新穎、設(shè)計獨特的網(wǎng)頁，也有學(xué)生在詢問如何制作個人網(wǎng)站并把它傳到網(wǎng)上去，達(dá)到宣揚自己的目的。由此可見，他們對網(wǎng)站的設(shè)計也是很有興趣、有信心的?！窘虒W(xué)目標(biāo)】： 知識與技能：1、了解優(yōu)秀網(wǎng)站應(yīng)具備的一些特征要素；2、讓學(xué)生明確“網(wǎng)站的設(shè)計”的重要性；3、能根據(jù)主題設(shè)計網(wǎng)站。過程與方法：1、通過網(wǎng)站的欣賞及對比，探究網(wǎng)站設(shè)計中應(yīng)考慮的一般要素；2、初步確定小組網(wǎng)站的主題；3、通過同學(xué)“網(wǎng)站設(shè)計”主題網(wǎng)站的活動，使學(xué)生學(xué)會科學(xué)、合理地整理與規(guī)劃信息，提高學(xué)生的信息素養(yǎng)。情感態(tài)度價值觀：1、在分析、探討中學(xué)會欣賞，學(xué)會客觀的評價自我以及他人；2、引導(dǎo)學(xué)生對任務(wù)進(jìn)行分解，學(xué)會適當(dāng)?shù)姆止づc合作?！局攸c難點】：重點是網(wǎng)站設(shè)計的過程和方法。難點是網(wǎng)站的整體構(gòu)思，也就是依據(jù)自己的興趣愛好，選擇網(wǎng)站主題，創(chuàng)作網(wǎng)站名稱，設(shè)計網(wǎng)站的欄目、結(jié)構(gòu)、風(fēng)格和布局等?！窘虒W(xué)方法】：講授法、任務(wù)驅(qū)動法、小組協(xié)作法相結(jié)合的教學(xué)方法【教學(xué)設(shè)想】：1、課前向?qū)W生調(diào)查他們平常喜歡的網(wǎng)站，利用截圖的方式在教學(xué)課件ppt中展示出來，引起他們的學(xué)習(xí)欲望，從而了解不同布局的網(wǎng)站，它們的設(shè)計都是差不多的，都有各自的主題、內(nèi)容、風(fēng)格等；2、由于網(wǎng)站設(shè)計是個大任務(wù)，要建設(shè)一個網(wǎng)站往往需要多人合作才能完成，因而采用小組協(xié)作法充分發(fā)揮學(xué)生各自的特長，關(guān)注到每一個學(xué)生的發(fā)展。還能煉就他們良好的團(tuán)隊協(xié)作精神，而且小組成員的知識程度、學(xué)習(xí)能力和思維方式都有差異，可以通過討論、交流與合作，取長補短、拓展思維。3、新課教學(xué)環(huán)節(jié)，采用新知傳授和實例相結(jié)合的方式來進(jìn)行。這樣學(xué)生會比較感興趣，因為這些網(wǎng)站都是他們喜歡的；4、由于網(wǎng)站設(shè)計是個大任務(wù)，要建設(shè)一個網(wǎng)站往往需要多人合作才能完成，因而采用小組協(xié)作法，從而充分發(fā)揮學(xué)生自己的特長，關(guān)注到每一個學(xué)生的全面發(fā)展。還能鍛煉他們良好的團(tuán)隊協(xié)作精神，而且小組成員的知識程度、學(xué)習(xí)能力和思維方式都有差異，可以通過討論、交流與合作，取長補短、拓展思維。5、課堂上，還要充分考慮學(xué)生的認(rèn)知水平不同，給個別組的學(xué)生增設(shè)任務(wù)拓展：完成快的小組可以使用FrontPage中的表格來規(guī)劃設(shè)計網(wǎng)站主頁面。【教學(xué)環(huán)境】：網(wǎng)絡(luò)教室 + PPT演示文稿 【教學(xué)過程】一、創(chuàng)設(shè)情境，引入課題：【教師活動】：在開學(xué)的第一周，各位同學(xué)已經(jīng)知道我們這個學(xué)期的主要任務(wù)就是建一個主題網(wǎng)站，在上節(jié)課我們一起了解了網(wǎng)站的一些基本概念以及動態(tài)網(wǎng)站和靜態(tài)網(wǎng)站的工作原理，還要求各位同學(xué)按照各自的興趣、愛好2-5人一組，確定本學(xué)期要制作的網(wǎng)站主題，并收集相應(yīng)的信息內(nèi)容。接下來大家是不是想我們就要開始使用網(wǎng)頁制作軟件來制作我們的主題網(wǎng)站了呢？先請各位同學(xué)觀看網(wǎng)上截取的一些網(wǎng)站截圖：ppt播放幾張網(wǎng)頁的截圖：（時光網(wǎng)、豆瓣網(wǎng)、新浪網(wǎng)、中國教育信息網(wǎng)、音樂極限網(wǎng)等）【學(xué)生活動】：觀看幻燈片截圖【教師活動】：看了這些截圖以后，提問：1、你們記住了幾個網(wǎng)站，分別是哪些？2、這些網(wǎng)站分別表達(dá)了什么主題？3、網(wǎng)站最吸引你的地方在哪里？（網(wǎng)站名稱、主題內(nèi)容、風(fēng)格、結(jié)構(gòu)、色彩、布局等方面去分析）4、各位同學(xué)都很喜歡上網(wǎng)，在打開一個網(wǎng)站的第一時間你們最關(guān)注的是網(wǎng)站的什么東西？是它的名稱、主題、內(nèi)容或是色彩等？【學(xué)生活動】：思考并回答問題【教師活動】：PPT展示幾個網(wǎng)站的主題、風(fēng)格和色彩的描述等。【教師提問】：還有就是播放截圖之前問大家的一個問題：在我們認(rèn)識了網(wǎng)站的一些基本概念之后，是否馬上可以利用網(wǎng)頁制作工具來制作網(wǎng)站了呢？【學(xué)生回答】：【教師總結(jié)】：經(jīng)驗告訴我們，建立一個網(wǎng)站好比寫一篇文章，首先要擬好提綱，文章才能主題明確，層次清晰；也好比造一座高樓，首先要設(shè)計好框架圖紙，才能使樓房結(jié)構(gòu)合理。因此，在建一個網(wǎng)站之前必須有一個總體的設(shè)計?！驹O(shè)計目的】：讓學(xué)生迅速集中注意力到課堂，用學(xué)生熟悉的內(nèi)容創(chuàng)設(shè)情景，引起學(xué)習(xí)興趣，激發(fā)學(xué)生的求知欲望。二、新知講授：網(wǎng)站的策劃與設(shè)計：【教師活動】：剛才我們所看的幾個網(wǎng)站，都有自己的主題，自己的結(jié)構(gòu)設(shè)計和網(wǎng)站的欄目，以及一部分內(nèi)容等。其實，網(wǎng)站設(shè)計就是對網(wǎng)站的主題、內(nèi)容、風(fēng)格、布局等進(jìn)行的一個總體設(shè)計。【學(xué)生活動】:學(xué)生了解什么是網(wǎng)站設(shè)計【設(shè)計目的】：為下面的主題網(wǎng)站設(shè)計打下基礎(chǔ)【教師活動】：在對主題網(wǎng)站進(jìn)行設(shè)計之前，我們必須先來了解學(xué)習(xí)指引中一些關(guān)于網(wǎng)站策劃與設(shè)計的知識：網(wǎng)站的生存與發(fā)展取決于網(wǎng)站的主題、內(nèi)容和布局等，因此，在正式開始建設(shè)網(wǎng)站之前，需要對其進(jìn)行全面的策劃與設(shè)計。1、 主題及內(nèi)容的選擇與定位網(wǎng)站的選題，就是要根據(jù)網(wǎng)站的開發(fā)目標(biāo)和訪問網(wǎng)站的用戶群，確立網(wǎng)站的主題，并給網(wǎng)站起一個簡練響亮的名字（與主題緊密相關(guān)、有意義）。網(wǎng)站的主題就是網(wǎng)站要表達(dá)的主要內(nèi)容，在動手制作網(wǎng)站之前，首先要考慮的就是建個什么樣的網(wǎng)站，放些什么內(nèi)容，希望吸引哪些訪問者。選擇網(wǎng)站主題和內(nèi)容應(yīng)從以下幾個方面考慮： 熟悉的、擅長的題材； 主題小而精、要易記有特色； 內(nèi)容要有創(chuàng)新； 兼顧網(wǎng)站主要訪問群體的興趣和瀏覽習(xí)慣等。2、 欄目的設(shè)計：制作網(wǎng)站前要設(shè)計好網(wǎng)站的欄目，網(wǎng)站的欄目可以有多級，但并不是級數(shù)越多越好，以能夠恰當(dāng)?shù)伢w現(xiàn)網(wǎng)站主題為好。此外，每個欄目應(yīng)有一個大致的內(nèi)容描述，以表達(dá)該欄目的設(shè)計思路。也就是說，我們在確定好主題后，需要把網(wǎng)站的內(nèi)容按一定的方法進(jìn)行分類，并設(shè)置專門的欄目，欄目設(shè)置的原則有三個：緊扣主題，盡可能刪除與主題無關(guān)的欄目；盡可能將網(wǎng)站最有吸引力的內(nèi)容列在欄目上；盡可能方便訪問者的瀏覽和查詢。3、 網(wǎng)站的風(fēng)格設(shè)計風(fēng)格是指網(wǎng)站的整體形象給瀏覽者的綜合感受。有的嚴(yán)肅，有的溫馨，有的深沉，有的活潑，有的典雅，有的豪邁。風(fēng)格設(shè)計與主題是密不可分的，是為突出主題服務(wù)的。就像每個人都有自己的穿衣風(fēng)格一樣，有人喜歡休閑、有人喜歡時尚、也有人喜歡中規(guī)中矩、也有人喜歡淑女等。要想讓網(wǎng)站吸引人們的注意，就必須確立自己的風(fēng)格，網(wǎng)站的風(fēng)格設(shè)計一般從色彩、圖片、字體、語言風(fēng)格等幾個方面進(jìn)行考慮。4、 網(wǎng)站內(nèi)容的收集和篩選在創(chuàng)建網(wǎng)站時，資料收集的過程是必不可少的，資料的收集要有一個明確的界定范圍，不要把與網(wǎng)站主題無關(guān)的內(nèi)容塞到網(wǎng)站里，也不要收得太多太雜。5、 網(wǎng)站結(jié)構(gòu)和超級鏈接的設(shè)計考慮采用哪種網(wǎng)站結(jié)構(gòu)（樹形、星形和混合形），是否需要放導(dǎo)航欄，導(dǎo)航欄放在哪里，是否需要放返回主頁的鏈接，哪些內(nèi)容要鏈接到主頁，哪些內(nèi)容要鏈接到其他級的頁面，是否設(shè)置搜索引擎等。6、 網(wǎng)頁的布局在網(wǎng)站設(shè)計中，頁面的布局也很重要，導(dǎo)航欄的位置、文字的位置、圖片的位置，都是設(shè)計者需要考慮的內(nèi)容。網(wǎng)頁布局大致可分為：國字型、拐角型、標(biāo)題正文型、左右框架型、上下框架型、綜合框架型、封面型、Flash型及變化型等。設(shè)計網(wǎng)頁布局的主要參考要素有： 平衡：指頁面的圖片、文字的視覺分量在左右、上下幾個方位基本相等，分布均勻。色彩表現(xiàn)也要平衡，給人一種協(xié)調(diào)的感覺。 呼應(yīng)：使一種元素同時出現(xiàn)在不同的地方，形成相互聯(lián)系 對比：利用不同的色彩、線條等元素相互并置，造成畫面的多種變化，達(dá)到豐富視覺的效果。 疏密：即空白的合理運用，太滿、太密、太平均是布局設(shè)計的大忌，適當(dāng)?shù)氖杳艽钆淇梢允巩嬅娈a(chǎn)生節(jié)奏感，體現(xiàn)出網(wǎng)站的格調(diào)與品位。7、 網(wǎng)站建設(shè)技術(shù)和工具的選擇網(wǎng)站的主題、風(fēng)格、布局等內(nèi)容的設(shè)計，決定了是否需要考慮采用動態(tài)網(wǎng)頁及應(yīng)該采用何種形式的動態(tài)網(wǎng)頁。然后可以根據(jù)需要選擇相應(yīng)的網(wǎng)站建設(shè)技術(shù)和網(wǎng)頁制作工具?！緦W(xué)生活動】:學(xué)生了解網(wǎng)站設(shè)計的基本要求【設(shè)計目的】：為主題網(wǎng)站設(shè)計提供知識點三、任務(wù)體驗：【教師活動】任務(wù)布置：對網(wǎng)站的策劃及設(shè)計了解以后，請各位同學(xué)按照上節(jié)課各小組所確定的主題、搜集的內(nèi)容填寫“網(wǎng)站設(shè)計規(guī)劃表”?！緦W(xué)生活動】:學(xué)生討論并填寫“網(wǎng)站設(shè)計規(guī)劃表”網(wǎng) 站 設(shè) 計 規(guī) 劃 表班級： 組長： 編號： 主題網(wǎng)站名稱網(wǎng)站主題建立網(wǎng)站的目的（開發(fā)目標(biāo)）網(wǎng)站的面向?qū)ο缶W(wǎng)站結(jié)構(gòu)小組長小組成員網(wǎng)站欄目安排欄目一內(nèi)容描述欄目二內(nèi)容描述欄目三內(nèi)容描述欄目四內(nèi)容描述欄目五內(nèi)容描述欄目六內(nèi)容描述小 組 分 工 情 況主題網(wǎng)站任務(wù)負(fù)責(zé)人設(shè)想網(wǎng)站設(shè)計網(wǎng)站制作資料收集整理網(wǎng)站測試網(wǎng)站發(fā)布于維護(hù)可能存在的困難和要求四、總結(jié)評價，任務(wù)拓展：【學(xué)生活動】：小組展示方案，介紹設(shè)計思路。【師生互動】：師生共同對填寫好的網(wǎng)站規(guī)劃表進(jìn)行分析并評選出優(yōu)秀的方案?！救蝿?wù)拓展】：完成快的小組可以使用FrontPage中的表格來規(guī)劃設(shè)計網(wǎng)站主頁面。【學(xué)生活動】：學(xué)生完成附件1（學(xué)案）的作業(yè)【設(shè)計目的】：學(xué)生通過對主題網(wǎng)站設(shè)計規(guī)劃表的填寫，體驗網(wǎng)站的設(shè)計過程；通過小組互評、教師點評，讓學(xué)生在評價過程中體驗到設(shè)計網(wǎng)站的過程，為下節(jié)課的學(xué)習(xí)打下基礎(chǔ)。學(xué)案作業(yè)的完成，讓學(xué)生更好的掌握優(yōu)秀網(wǎng)站的必備要素，為自己網(wǎng)站的建設(shè)提供參考。【活動評價】：請各小組填寫任務(wù)評價表評 價 表小組編號： 得分： 網(wǎng)站設(shè)計規(guī)劃表評價細(xì)則具體指標(biāo)標(biāo)準(zhǔn)得分是否全組參與10活動過程中是否積極、主動10網(wǎng)站建設(shè)的目的是否明確10網(wǎng)站的主題是否鮮明，內(nèi)容是否都和主題相關(guān)20網(wǎng)站的名稱是否具有新意、吸引力與主題相關(guān)15網(wǎng)站的內(nèi)容是否科學(xué)、準(zhǔn)確、全面15網(wǎng)站的風(fēng)格是否和主題相符10網(wǎng)站的欄目是否緊扣主題10附1：【學(xué)案】網(wǎng)站的設(shè)計班級 姓名 一、針對各自小組