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

1、PAGE 第 PAGE 5 頁樹立網(wǎng)站整體風(fēng)格教學(xué)設(shè)計鹽城市南洋中學(xué) 王健【教材分析】樹立網(wǎng)站整體風(fēng)格是高中選修教材網(wǎng)絡(luò)技術(shù)應(yīng)用（教科版）第四章第2節(jié)的內(nèi)容。網(wǎng)站風(fēng)格是抽象的，是站點的整體形象給瀏覽者的綜合感受，這個整體形象往往從網(wǎng)站標志、標準色彩、標準字體等元素中體現(xiàn)出來。通過對經(jīng)典案例的解讀，將抽象的內(nèi)容形象化，讓學(xué)生自己去總結(jié)發(fā)現(xiàn)設(shè)計中的規(guī)律與應(yīng)該注意的問題，并通過適當實踐，激發(fā)學(xué)生的創(chuàng)作熱情，使學(xué)生初步了解如何去樹立網(wǎng)站的整體風(fēng)格，并為以后的繼續(xù)學(xué)習(xí)和實踐提供指導(dǎo)?！緦W(xué)情分析】本案例的對象為高一年級第二學(xué)期的學(xué)生，前面已經(jīng)學(xué)習(xí)了網(wǎng)站的規(guī)劃、網(wǎng)站設(shè)計中的欄目的設(shè)置與版面設(shè)計，對美有一定欣

2、賞和鑒賞能力，但對從哪些方面去樹立網(wǎng)站的整體風(fēng)格，還缺乏整體的認識。FrontPage2000操作雖然上學(xué)期學(xué)過一點，但并不熟練?！窘虒W(xué)目標】知識與技能：1、了解體現(xiàn)網(wǎng)站整體風(fēng)格的要素。2、了解網(wǎng)站Logo設(shè)計的常見方法和設(shè)計中應(yīng)該注意的問題。3、了解色彩的感覺，能根據(jù)主題的需要設(shè)計標準色彩。4、了解字體的特點，能根據(jù)主題的需要設(shè)計標準字體。知道使用特殊字體時應(yīng)注意的問題。過程與方法：通過對案例的解讀，讓學(xué)生自已去總結(jié)發(fā)現(xiàn)設(shè)計中的規(guī)律與應(yīng)該注意的問題。情感、態(tài)度與價值觀目標：提升學(xué)生的創(chuàng)新思維與審美能力?！窘虒W(xué)重點、難點】對如何樹立網(wǎng)站的整體風(fēng)格形成一個整體的認識【教學(xué)準備】資源：主題網(wǎng)站、教

3、師展示課件工具：FrontPage2000軟件、A Logo 3.10、IIS【教學(xué)策略】本課中首先通過與優(yōu)秀網(wǎng)站的對比，分析學(xué)生作品中的不足之處，然后在完善這個作品過程中，引導(dǎo)學(xué)生從網(wǎng)站標志、標準色彩、標準字體方面樹立網(wǎng)站的整體風(fēng)格。通過自身的實踐，體驗到網(wǎng)站設(shè)計的樂趣?！窘虒W(xué)過程】一、創(chuàng)設(shè)情境，引入課題1、請同學(xué)們欣賞幾張網(wǎng)頁，同時思考一下這些網(wǎng)頁具有怎樣的風(fēng)格？我們發(fā)現(xiàn)較好的網(wǎng)站往往都具有其獨特的風(fēng)格，有的活潑可愛、有的清新秀麗、有的溫文爾雅、有的執(zhí)著熱情 ，那么如何來樹立網(wǎng)站的整體風(fēng)格呢，這就是我們今天這節(jié)課所要共同探討的問題。2、展示幾個學(xué)生作品，分析存在不足：學(xué)生：顏色搭配不舒服字

4、體雜亂 教師：網(wǎng)站的整體風(fēng)格是屬于外觀的設(shè)計，色彩與字體肯定是屬于風(fēng)格的一部分，那還有什么跟網(wǎng)站的風(fēng)格有關(guān)呢？設(shè)計意圖：通過幾張風(fēng)格迥異、視覺沖擊力比較強的網(wǎng)頁，引起學(xué)生的興趣，繼而旗幟鮮明地提出本節(jié)課的課題樹立網(wǎng)站整體風(fēng)格。并通過一個具體問題的提出，激發(fā)學(xué)生的求知欲與解決實際問題的渴望。二、網(wǎng)站標志（Logo）小游戲：（快速播放一組網(wǎng)頁截圖），比一比，記一記，看誰記得多，并思考你是怎么知道這些網(wǎng)站的名稱的？（部分截圖如下記網(wǎng)站，引起網(wǎng)站標志）設(shè)計意圖：在快速播放的一組網(wǎng)頁中，要想知道網(wǎng)站的名稱，學(xué)生們很自然地會關(guān)注到網(wǎng)站的標志。從而引出樹立網(wǎng)站整體風(fēng)格的第一步就是要設(shè)計出一個好的網(wǎng)站標志。同

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

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

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

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

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

10、？請同學(xué)們討論回答。學(xué)生討論：討論在色彩的使用上應(yīng)該注意的問題。總結(jié)：1、設(shè)計網(wǎng)站的標準色彩，但一般不要超過3種2、總體協(xié)調(diào)，局部對比3、結(jié)合主題需要選擇合適的色彩設(shè)計意圖：適時歸納，總結(jié)規(guī)律。為學(xué)生的下一步實踐提供指導(dǎo)。再來看看我們的主題網(wǎng)站，你認為應(yīng)該使用什么樣的色彩比較好呢？自已嘗試著搭配一下。學(xué)生活動2：調(diào)整主題網(wǎng)站中頁面的色彩在FrontPage2000中打開主題網(wǎng)站中主頁（index.htm）。嘗試為其進行色彩的設(shè)計（網(wǎng)頁背景、表格背景、單元格背景、文字的顏色）。設(shè)計意圖：考慮到學(xué)生對FrontPage2000的操作不是很熟練，因此在設(shè)計這一實踐時，盡量避免復(fù)雜的操作步驟，并在實踐

11、前將具體的操作步驟稍有演示，避免學(xué)生因技術(shù)的障礙而影響了設(shè)計的發(fā)揮。三、標準字體標準字體是網(wǎng)站中所采用的主要字體，中文字體有很多，它們都有各自的特點：黑體字：凝重 宋體字：端莊 隸書：飄逸 楷體：淡雅仿宋體：專業(yè) 廣告體：精美 手寫體：親切隨意一般網(wǎng)頁里默認的字體是宋體。提出問題：如果設(shè)計網(wǎng)站時使用了特別的字體，而瀏覽者電腦中卻沒有安裝這種字體，會有問題嗎？如果有問題該怎么辦呢？教師：在服務(wù)端編輯“環(huán)境保護”網(wǎng)站主頁中的字體，學(xué)生端通過IE瀏覽器觀察并討論。小結(jié)：設(shè)計網(wǎng)站的標準字體應(yīng)注意的問題。 1、根據(jù)網(wǎng)站內(nèi)涵，選擇貼切的字體。2、使用統(tǒng)一的標準字體，特別的字體最好采用圖片的形式。學(xué)生活動3：調(diào)整主題網(wǎng)站中的字體。繼續(xù)在FrontPage中調(diào)整字體，使其符合網(wǎng)站風(fēng)格。完善作品后，小組評選出一個代表