PAGE第4頁(yè)《樹(shù)立網(wǎng)站整體風(fēng)格》教學(xué)設(shè)計(jì)鹽城市南洋中學(xué)王健【教材分析】《樹(shù)立網(wǎng)站整體風(fēng)格》是高中選修教材《網(wǎng)絡(luò)技術(shù)應(yīng)用》（教科版）第四章第2節(jié)的內(nèi)容。網(wǎng)站風(fēng)格是抽象的，是站點(diǎn)的整體形象給瀏覽者的綜合感受，這個(gè)整體形象往往從網(wǎng)站標(biāo)志、標(biāo)準(zhǔn)色彩、標(biāo)準(zhǔn)字體等元素中體現(xiàn)出來(lái)。通過(guò)對(duì)經(jīng)典案例的解讀，將抽象的內(nèi)容形象化，讓學(xué)生自己去總結(jié)發(fā)現(xiàn)設(shè)計(jì)中的規(guī)律與應(yīng)該注意的問(wèn)題，并通過(guò)適當(dāng)實(shí)踐，激發(fā)學(xué)生的創(chuàng)作熱情，使學(xué)生初步了解如何去樹(shù)立網(wǎng)站的整體風(fēng)格，并為以后的繼續(xù)學(xué)習(xí)和實(shí)踐提供指導(dǎo)?！緦W(xué)情分析】本案例的對(duì)象為高一年級(jí)第二學(xué)期的學(xué)生，前面已經(jīng)學(xué)習(xí)了網(wǎng)站的規(guī)劃、網(wǎng)站設(shè)計(jì)中的欄目的設(shè)置與版面設(shè)計(jì)，對(duì)美有一定欣賞和鑒賞能力，但對(duì)從哪些方面去樹(shù)立網(wǎng)站的整體風(fēng)格，還缺乏整體的認(rèn)識(shí)。FrontPage2000操作雖然上學(xué)期學(xué)過(guò)一點(diǎn)，但并不熟練?！窘虒W(xué)目標(biāo)】知識(shí)與技能：1、了解體現(xiàn)網(wǎng)站整體風(fēng)格的要素。2、了解網(wǎng)站Logo設(shè)計(jì)的常見(jiàn)方法和設(shè)計(jì)中應(yīng)該注意的問(wèn)題。3、了解色彩的感覺(jué)，能根據(jù)主題的需要設(shè)計(jì)標(biāo)準(zhǔn)色彩。4、了解字體的特點(diǎn)，能根據(jù)主題的需要設(shè)計(jì)標(biāo)準(zhǔn)字體。知道使用特殊字體時(shí)應(yīng)注意的問(wèn)題。過(guò)程與方法：通過(guò)對(duì)案例的解讀，讓學(xué)生自已去總結(jié)發(fā)現(xiàn)設(shè)計(jì)中的規(guī)律與應(yīng)該注意的問(wèn)題。情感、態(tài)度與價(jià)值觀目標(biāo)：提升學(xué)生的創(chuàng)新思維與審美能力?！窘虒W(xué)重點(diǎn)、難點(diǎn)】對(duì)如何樹(shù)立網(wǎng)站的整體風(fēng)格形成一個(gè)整體的認(rèn)識(shí)【教學(xué)準(zhǔn)備】資源：主題網(wǎng)站、教師展示課件工具：FrontPage2000軟件、ALogo3.10、IIS【教學(xué)策略】本課中首先通過(guò)與優(yōu)秀網(wǎng)站的對(duì)比，分析學(xué)生作品中的不足之處，然后在完善這個(gè)作品過(guò)程中，引導(dǎo)學(xué)生從網(wǎng)站標(biāo)志、標(biāo)準(zhǔn)色彩、標(biāo)準(zhǔn)字體方面樹(shù)立網(wǎng)站的整體風(fēng)格。通過(guò)自身的實(shí)踐，體驗(yàn)到網(wǎng)站設(shè)計(jì)的樂(lè)趣?！窘虒W(xué)過(guò)程】一、創(chuàng)設(shè)情境，引入課題1、請(qǐng)同學(xué)們欣賞幾張網(wǎng)頁(yè)，同時(shí)思考一下這些網(wǎng)頁(yè)具有怎樣的風(fēng)格？我們發(fā)現(xiàn)較好的網(wǎng)站往往都具有其獨(dú)特的風(fēng)格，有的活潑可愛(ài)、有的清新秀麗、有的溫文爾雅、有的執(zhí)著熱情……，那么如何來(lái)樹(shù)立網(wǎng)站的整體風(fēng)格呢，這就是我們今天這節(jié)課所要共同探討的問(wèn)題。2、展示幾個(gè)學(xué)生作品，分析存在不足：學(xué)生：顏色搭配不舒服字體雜亂……教師：網(wǎng)站的整體風(fēng)格是屬于外觀的設(shè)計(jì)，色彩與字體肯定是屬于風(fēng)格的一部分，那還有什么跟網(wǎng)站的風(fēng)格有關(guān)呢？設(shè)計(jì)意圖：通過(guò)幾張風(fēng)格迥異、視覺(jué)沖擊力比較強(qiáng)的網(wǎng)頁(yè)，引起學(xué)生的興趣，繼而旗幟鮮明地提出本節(jié)課的課題——樹(shù)立網(wǎng)站整體風(fēng)格。并通過(guò)一個(gè)具體問(wèn)題的提出，激發(fā)學(xué)生的求知欲與解決實(shí)際問(wèn)題的渴望。二、網(wǎng)站標(biāo)志（Logo）小游戲：（快速播放一組網(wǎng)頁(yè)截圖），比一比，記一記，看誰(shuí)記得多，并思考你是怎么知道這些網(wǎng)站的名稱(chēng)的？（部分截圖如下記網(wǎng)站，引起網(wǎng)站標(biāo)志）記網(wǎng)站，引起網(wǎng)站標(biāo)志設(shè)計(jì)意圖：在快速播放的一組網(wǎng)頁(yè)中，要想知道網(wǎng)站的名稱(chēng)，學(xué)生們很自然地會(huì)關(guān)注到網(wǎng)站的標(biāo)志。從而引出樹(shù)立網(wǎng)站整體風(fēng)格的第一步就是要設(shè)計(jì)出一個(gè)好的網(wǎng)站標(biāo)志。學(xué)生討論：討論在色彩的使用上應(yīng)該注意的問(wèn)題?？偨Y(jié)：1、設(shè)計(jì)網(wǎng)站的標(biāo)準(zhǔn)色彩，但一般不要超過(guò)3種2、總體協(xié)調(diào)，局部對(duì)比3、結(jié)合主題需要選擇合適的色彩設(shè)計(jì)意圖：適時(shí)歸納，總結(jié)規(guī)律。為學(xué)生的下一步實(shí)踐提供指導(dǎo)。再來(lái)看看我們的主題網(wǎng)站，你認(rèn)為應(yīng)該使用什么樣的色彩比較好呢？自已嘗試著搭配一下。學(xué)生活動(dòng)2：調(diào)整主題網(wǎng)站中頁(yè)面的色彩⑴在FrontPage2000中打開(kāi)主題網(wǎng)站中主頁(yè)（index.htm）。⑵嘗試為其進(jìn)行色彩的設(shè)計(jì)（網(wǎng)頁(yè)背景、表格背景、單元格背景、文字的顏色）。設(shè)計(jì)意圖：考慮到學(xué)生對(duì)FrontPage2000的操作不是很熟練，因此在設(shè)計(jì)這一實(shí)踐時(shí)，盡量避免復(fù)雜的操作步驟，并在實(shí)踐前將具體的操作步驟稍有演示，避免學(xué)生因技術(shù)的障礙而影響了設(shè)計(jì)的發(fā)揮。三、標(biāo)準(zhǔn)字體標(biāo)準(zhǔn)字體是網(wǎng)站中所采用的主要字體，中文字體有很多，它們都有各自的特點(diǎn)：黑體字：凝重宋體字：端莊隸書(shū)：飄逸楷體：淡雅仿宋體：專(zhuān)業(yè)廣告體：精美手寫(xiě)體：親切隨意一般網(wǎng)頁(yè)里默認(rèn)的字體是宋體。提出問(wèn)題：如果設(shè)計(jì)網(wǎng)站時(shí)使用了特別的字體，而瀏覽者電腦中卻沒(méi)有安裝這種字體，會(huì)有問(wèn)題嗎？如果有問(wèn)題該怎么辦呢？教師：在服務(wù)端編輯“環(huán)境保護(hù)”網(wǎng)站主頁(yè)中的字體，學(xué)生端通過(guò)IE瀏覽器觀察并討論。小結(jié)：設(shè)計(jì)網(wǎng)站的標(biāo)準(zhǔn)字體應(yīng)注意的問(wèn)題。1、根據(jù)網(wǎng)站內(nèi)涵，選擇貼切的字體。2、使用統(tǒng)一的標(biāo)準(zhǔn)字體，特別的字體最好采用圖片的形式。學(xué)生活動(dòng)3：調(diào)整主題網(wǎng)站中的字體。⑴繼續(xù)在FrontPage中調(diào)整字體，使其符合網(wǎng)站風(fēng)格。⑵完善作品后，小組評(píng)選出一個(gè)代表作。⑶按要求上傳小組代表作并在線進(jìn)行作品自評(píng)與互評(píng)。五、課堂小結(jié)今天這一節(jié)課，我們主要從網(wǎng)站標(biāo)志、標(biāo)準(zhǔn)色彩以及標(biāo)準(zhǔn)字體等方面探討了如何樹(shù)立網(wǎng)站的整體