《樹(shù)立網(wǎng)站整體風(fēng)格》教學(xué)設(shè)計(jì)

1、PAGE 第 PAGE 5 頁(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ì)美有一定欣

2、賞和鑒賞能力，但對(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)站、教

3、師展示課件工具：FrontPage2000軟件、A Logo 3.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é)生：顏色搭配不舒服字

4、體雜亂 教師：網(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)志）設(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)志。同

5、學(xué)們看看你們的主題網(wǎng)站里有沒(méi)有Logo的設(shè)計(jì)？那怎么來(lái)設(shè)計(jì)呢？ 網(wǎng)站標(biāo)志就如同企業(yè)的商標(biāo)一樣，看到它就應(yīng)該能夠聯(lián)想到你的網(wǎng)站。我們先來(lái)參考一下那么著名的網(wǎng)站，看看他們的網(wǎng)站標(biāo)志是怎么設(shè)計(jì)的吧。1、百度網(wǎng)站的Logo，采用了圖文結(jié)合的設(shè)計(jì)?！鞍俣取币辉~源于宋朝詞人辛棄疾的詩(shī)句“眾里尋他千百度”，“熊掌”圖標(biāo)的靈感來(lái)源于“獵人巡跡熊爪”，都有搜尋的意思，跟百度的搜索理念是相符合的。而且每逢重大節(jié)日的時(shí)候，百度還會(huì)邀請(qǐng)一些創(chuàng)意大師對(duì)Logo進(jìn)行修改，既烘托了節(jié)日的氣氛，更具有一定的藝術(shù)性和趣味性。這類(lèi)Logo的設(shè)計(jì)方法是選用與網(wǎng)站主題有關(guān)的，并具有代表性的人或物，用它們作為設(shè)計(jì)藍(lán)本，加以卡通化和藝術(shù)

6、化設(shè)計(jì)出來(lái)的。2、中國(guó)銀行、奔馳汽車(chē)企業(yè)網(wǎng)站的Logo，其采用的是本專(zhuān)業(yè)的有代表性的物品。 3、谷歌、中國(guó)雅虎、搜狗、聯(lián)想等網(wǎng)站的Logo，采用將自己網(wǎng)站的中文或者英文名稱(chēng)作為網(wǎng)站標(biāo)志的設(shè)計(jì)方法。這是最常用也是最簡(jiǎn)單的一種設(shè)計(jì)方法，將自己的名稱(chēng)采用不同的字體、字母的變形與組合，可以很容易地制作出自己的標(biāo)志。設(shè)計(jì)意圖：通過(guò)對(duì)幾個(gè)知名網(wǎng)站的Logo的解讀，使學(xué)生了解網(wǎng)站Logo設(shè)計(jì)通常采用的幾種方法，從而為學(xué)生的下一步實(shí)踐提供指導(dǎo)。以及在解讀的過(guò)程中，注意指明一些Logo設(shè)計(jì)的成功所在，引導(dǎo)學(xué)生發(fā)現(xiàn)其規(guī)律。提問(wèn)：一個(gè)設(shè)計(jì)成功的Logo往往具備哪些特點(diǎn)呢？請(qǐng)討論回答。學(xué)生活動(dòng)：討論一個(gè)設(shè)計(jì)成功的Lo

7、go往往具有哪些特點(diǎn)?？偨Y(jié)：1、能夠契合網(wǎng)站的主題 2、符合大眾的審美習(xí)慣、清楚易記。3、體現(xiàn)一定的創(chuàng)意，設(shè)計(jì)美觀，有藝術(shù)價(jià)值 設(shè)計(jì)意圖：通過(guò)前面對(duì)幾個(gè)案例的解讀，學(xué)生已經(jīng)發(fā)現(xiàn)了一些網(wǎng)站標(biāo)志設(shè)計(jì)的規(guī)律，對(duì)網(wǎng)站標(biāo)志具有了初步的鑒賞能力，因此讓學(xué)生自己去歸納總結(jié)出設(shè)計(jì)優(yōu)秀的LOGO往往所具備的一些特點(diǎn)，然后教師再進(jìn)行進(jìn)一步的總結(jié)，使學(xué)生對(duì)“網(wǎng)站標(biāo)志”從初步的感知上升到理論的認(rèn)識(shí)，并為下一步的實(shí)踐提供指導(dǎo)。在了解了Logo設(shè)計(jì)的理念和常見(jiàn)方法之后，同學(xué)們一定也想自已實(shí)踐一下了吧，下面請(qǐng)同學(xué)們?yōu)楦髯缘闹黝}網(wǎng)站設(shè)計(jì)一個(gè)符合它主題的Logo吧：學(xué)生活動(dòng)1：為主題網(wǎng)站設(shè)計(jì)Logo小組討論，對(duì)要設(shè)計(jì)的Logo

8、進(jìn)行規(guī)劃。利用 “A Logo 3.10”軟件提供的模板進(jìn)行輔助設(shè)計(jì)。設(shè)計(jì)的支架不夠設(shè)計(jì)意圖：此時(shí)的學(xué)生一定躍躍欲試，有自己實(shí)踐創(chuàng)作的渴望。通過(guò)這一實(shí)踐讓學(xué)生初步了解設(shè)計(jì)的過(guò)程，體驗(yàn)創(chuàng)作所帶來(lái)的成就感。通過(guò)A Logo提供的模板，學(xué)生只需幾個(gè)簡(jiǎn)單的步驟就能創(chuàng)作出漂亮的Logo，降低了初次設(shè)計(jì)的難度。三、標(biāo)準(zhǔn)色彩標(biāo)準(zhǔn)色彩就是你網(wǎng)站中所使用的主要色彩，生活中每種色彩都有自己的語(yǔ)言，代表了一定的含義，我們先來(lái)測(cè)試一下，同學(xué)們對(duì)色彩的理解吧：紅 聯(lián)想到火、太陽(yáng)，代表熱情、喜悅、慶典。綠 清新、健康、環(huán)保、是生命的象征。橙 青春、歡樂(lè)、時(shí)尚，有動(dòng)感。藍(lán) 聯(lián)想到天空、大海等，給人以寧?kù)o、信任的感覺(jué)。紫 有

9、點(diǎn)可愛(ài)，優(yōu)雅，是一種女性化的色彩。白 代表干凈、純潔、簡(jiǎn)單、公正 黒 莊重、肅穆、神秘。 設(shè)計(jì)意圖：初步了解色彩的語(yǔ)言。設(shè)計(jì)網(wǎng)站的時(shí)候一般要選用多種顏色進(jìn)行搭配，合理的顏色搭配，不但可以產(chǎn)生良好的視覺(jué)效果，而且還能更好的烘托主題。網(wǎng)頁(yè)1：中國(guó)法律法規(guī)網(wǎng)信息系統(tǒng)。以藍(lán)色和白色為主，紅色是國(guó)徽，具有象征意義，切合網(wǎng)站的主題，強(qiáng)調(diào)權(quán)威與真實(shí)。網(wǎng)頁(yè)2：新浪網(wǎng)：大塊的橙色圖片、按鈕，感覺(jué)頁(yè)面輕快時(shí)尚，白色的背景，藍(lán)色的文字，使的閱讀的時(shí)候眼睛非常舒適，符合新聞?lì)惥W(wǎng)站的風(fēng)格。設(shè)計(jì)意圖：通過(guò)對(duì)兩張網(wǎng)頁(yè)其色彩設(shè)計(jì)的解讀，引導(dǎo)學(xué)生發(fā)現(xiàn)其設(shè)計(jì)中存在的規(guī)律及應(yīng)該注意的問(wèn)題。提問(wèn)：那么我們?cè)谏实氖褂蒙弦⒁庑┦裁茨?/p>

10、？請(qǐng)同學(xué)們討論回答。學(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í)踐

11、前將具體的操作步驟稍有演示，避免學(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è)代表