網(wǎng)頁設(shè)計的教學設(shè)計

網(wǎng)頁的設(shè)計教學目標：1、掌握網(wǎng)頁元素和網(wǎng)頁構(gòu)件的使用：2、能進行簡單的網(wǎng)頁設(shè)計；教學重點：網(wǎng)頁構(gòu)件的使用；網(wǎng)頁設(shè)計；教學難點：網(wǎng)頁的設(shè)計；課時：第1課時導入：今天我們進入第六章網(wǎng)頁的設(shè)計與制作的學習，一個成功的網(wǎng)站不僅僅在于它的內(nèi)容的多少，功能的交互功能多強，設(shè)計也是關(guān)鍵的一項，它決定了網(wǎng)站的藝術(shù)美是否能吸引瀏覽者的眼球。新課：一、網(wǎng)頁元素的組成打開2007年全國中小學信息技術(shù)大賽中獲獎作品《鄱陽湖白鶴》，讓學生觀看并總結(jié)網(wǎng)頁的組成元素有？文字、圖片、動畫、聲音、超鏈接等。一般情況下，網(wǎng)頁都應(yīng)該具備這三種元素，但是也有的網(wǎng)頁只有其中的兩種，甚至只有一種。如有的網(wǎng)頁就是為了展示一篇文章，那么這個網(wǎng)頁就沒有必要放置圖像；有的網(wǎng)頁只用于顯示一幅大尺寸的照片，也可以沒有文字說明；而有的網(wǎng)頁純粹就是提供資料，就不必設(shè)置超鏈接，這樣，這個網(wǎng)頁就成為網(wǎng)絡(luò)中某一個信息鏈的“終點”，即只有別的網(wǎng)頁鏈接它。過渡：同學們想不想自己也做個網(wǎng)站呢？想做網(wǎng)站前提則是先設(shè)計網(wǎng)站，規(guī)劃網(wǎng)站的主題，畫出草圖。二、網(wǎng)頁設(shè)計現(xiàn)在給大家5分鐘的時間設(shè)計一個學校網(wǎng)站的主頁，內(nèi)容包括網(wǎng)頁的主題、思考內(nèi)容Angel網(wǎng)頁Music網(wǎng)頁怎樣突出的網(wǎng)頁的主題網(wǎng)頁的框架結(jié)構(gòu)及特點以什么色調(diào)為主及作用圖、文有何講究網(wǎng)頁版式設(shè)計的視覺因素為了增強人們對網(wǎng)頁的注意程度，提高對于網(wǎng)頁內(nèi)容的理解程度，從而影響人們的思想和行為，我們必須按照人的視覺生理和心理特征，去設(shè)計我們的網(wǎng)頁版式，以達到最佳的設(shè)計訴求。我們先來看一下人的視線移動規(guī)律：人眼的視線沿水平方向運動比沿垂直方向運動快而且不易疲勞。視線的變化習慣于從左到右，從上到下和順時針方向運動。當視線沿既不水平，也不垂直的斜線方向移動時，在水平方向上下約45o的范圍視線為從左到右移動，在垂直方向左右約45o的范圍內(nèi)，視線為從上到下移動。符合視覺規(guī)律文字橫向編排由于人眼的視線橫向移動比豎向移動快而且不易疲勞，因此將文字盡量橫向排布，除非一些有特殊設(shè)計要求的版式或書法字體的版式。同時，頁面盡量保持橫向尺寸固定，豎向尺寸不固定，目的是使人們能連續(xù)不間斷地瀏覽頁面。需要注意的是，應(yīng)避免頁面左右、上下都能滾動，這會給瀏覽者帶來極大的不便。2．重要信息置于“最佳視覺區(qū)域”在進行網(wǎng)頁版式設(shè)計時，要考慮將最重要的信息或視覺流程的停留上安排在注目價值高的位置，這就是“最佳視覺區(qū)域”。由于人們習慣于將視線從左到右、從上到下移動，因而視區(qū)中的不同位置注目程度不同。版面中的不同區(qū)域會產(chǎn)生不同的注目程度，給人的心理感受也不同。它們給人的心理感受也是不同的；上部有輕快、上升、積極、愉悅之感；下部有沉重、穩(wěn)定、壓抑、消沉之感；左側(cè)感覺輕松、舒展、自由、主動；右側(cè)感覺莊重、局限、拘謹、被動。因此，在進行網(wǎng)頁版式設(shè)計時，應(yīng)考慮將重要信息或視覺流程的停留點安排在頁面的“最佳視域”內(nèi)。3、避免視覺疲勞1．限制網(wǎng)頁長度盡可能將網(wǎng)頁限制在1屏以內(nèi)，即滿屏，瀏覽者不需要拖動滾動條就可以看到下面的導航信息。頁面不宜過長，一般控制在1—3屏，盡量不超過5屏。2．文字大小適中、行距合理在網(wǎng)頁設(shè)計時應(yīng)提供瀏覽者定制字體大小的功能。3．位置的一致減少交互的次數(shù)，按照人的閱讀習慣，固定導航的位置。免去用戶去找導航的麻煩。4．適量安排多媒體元素網(wǎng)頁中的動畫不是越多越好，而是要形成動靜相宜的效果，因此需要適量安排多媒體元素，并注意主次關(guān)系。5．合理配色如果將大篇幅極亮的文字設(shè)計在極暗的背景上，容易因視覺長時間過分緊張而產(chǎn)生疲勞。因此應(yīng)注意網(wǎng)頁的配色，使其適合瀏覽者長期瀏覽。網(wǎng)頁設(shè)計的構(gòu)成要素（一）、版式設(shè)計網(wǎng)頁的版式設(shè)計，就是將文字、圖形圖像、色彩、動畫、視頻等網(wǎng)頁界面的傳達要素，根據(jù)特定的內(nèi)容和主題，在網(wǎng)頁所限定的范圍內(nèi)，運用造型元素和形式原理進行視覺的關(guān)聯(lián)，從而將涉及意圖以視覺形式表現(xiàn)出來。版式設(shè)計將各元素組合配置，使頁面內(nèi)容一目了然，并獲得悅目的視覺效果。在設(shè)計時，需要運用統(tǒng)一、對比、對稱、均衡、節(jié)奏、韻律等形式原理，來構(gòu)造出和諧、流暢、自然的網(wǎng)頁界面。（展示兩幅體現(xiàn)出對比和調(diào)和的網(wǎng)頁的頁面，讓學生體會。）網(wǎng)頁板式構(gòu)成的類型：1、骨骼型也稱欄型，是一種規(guī)范的、理性的設(shè)計形式，類似于報刊的板式。常見的骨骼型有豎向的和橫向的通欄、雙欄、三欄、四欄等，這種版式給人以和諧、理性的美。這種版式常用于公司網(wǎng)站的設(shè)計。（展示頁面，學生意會）2、國字型口字型、同字型、回字形都歸屬于此類，是一些大型網(wǎng)站所喜歡的類型，即最上面是網(wǎng)站的標題、導航以及橫幅廣告條，接下來就是網(wǎng)站的主要內(nèi)容，左右分列一些小條內(nèi)容，中間是主要部分，最下面是網(wǎng)站的一些基本信息、聯(lián)系方式、版權(quán)聲明等。這種布局的優(yōu)點是充分利用版面，信息量大，缺點是頁面擁擠，不夠靈活。（展示頁面，學生根據(jù)設(shè)計理念分析優(yōu)缺點，重點分析）3、框架型有左右框架型、上下框架型和綜合框架型，這種版式常用語功能型的網(wǎng)站，如郵箱、論壇、博客等（展示頁面，學生意會）4、中軸型沿頁面的中軸將圖片、文字做水平或垂直方向的排列，給人穩(wěn)定、平靜、含蓄、舒暢的感覺。（展示頁面，學生意會）綠色常使人聯(lián)想起自然、和諧、安靜、堅定和生命。綠色具有黃色和藍色的某些特征，色環(huán)上綠色偏近黃色時，綠色就變得溫暖、稚嫩、活潑、健康而無危害性。如果再加進一些白色，就會給人以一種女性的柔和與輕盈的感覺。5.橙色橙色也像綠色一樣具有其他兩種原色的特征。橙色常給人的感覺是:快樂、開放、大方、親密、直接、熱烈、溫暖、秋天、無拘束、有活力和感情洋溢。人的行動在橙色的氛圍里沒有任何拘束，因此橙色很大程度上代表了溫暖和真摯的感情。6.紫色紫色令人聯(lián)想到昏暗、神秘、深刻、內(nèi)向、高貴、悲傷、禁止、魅力、曖昧、不可靠等等。它也同綠色、橙色一樣，具有相鄰的兩個原色的部分特征。紫色越深，則反映出的效果越呆板、嚴格、不近人情，并給人以強烈的神秘感。7.棕色它常被人視為一種堅固的、誠實的、親切、穩(wěn)定和安全的顏色。它讓人聯(lián)想到腳下的土地、結(jié)實耐用的物件、動物皮毛的溫暖、幾近于平淡和無聊、隨和、豪放、古典與懷舊、愛的嚴肅和值得信賴。（三）、文字的編排與設(shè)計要達到網(wǎng)頁文字傳達的有效性，必須重視文字編輯的整體效果，是網(wǎng)頁文字能給人以清晰的視覺印象，避免頁面繁雜零亂，減去不必要的轉(zhuǎn)世變化，使人易認、易懂、易讀。網(wǎng)頁文字的設(shè)計不能為了藝術(shù)造型而編輯，忘記了文字本身是傳達內(nèi)容和表達信息的主題。網(wǎng)頁字體與字體編排在網(wǎng)頁設(shè)計中，字體的處理與色彩、版式、圖形等其他設(shè)計元素的處理一樣非常關(guān)鍵。從藝術(shù)的角度可以將字體本身看成是一種藝術(shù)形式，它在個性和情感方面對人們有著很大影響。網(wǎng)頁文字設(shè)計技巧1.提高可讀性（1）讓你想表達的內(nèi)容清晰、醒目，讓瀏覽者一開始就可以明白你的意思。（2）避免使用不清晰的字體，否則容易使閱覽者產(chǎn)生反感和麻煩。（3）注意恰當?shù)倪x擇你所需要的字體，適當采用虛實對比、大小對比。（4）注意文字編排方向，注意安排閱覽者的視線，適當運用直線與曲線編排。（5）根據(jù)視覺流程的原理，通常將重點放在右邊。2.精于位置（1）注意文字的對齊、適當拉來間距、適當安排行距。（2）注意圖文交錯，既不要影響圖形的觀看，也不能影響文字的閱覽。（3）文字不要頂天立地，也不要支持邊角3.營造視覺美感文字作為網(wǎng)頁形象要素之一，具有傳達感情的功能，因而它必須具有視覺上的美感，能夠給人以美的感受。字型設(shè)計良好，組合巧妙的文字能使人感到愉快，留下美好的印象，從而獲得良好的心理反應(yīng)。反之，則使人看后心里不愉快，視覺上難以產(chǎn)生美感，甚至會讓觀眾拒而不看，這樣勢必難以傳達出作者想表現(xiàn)出的意圖和構(gòu)想。注意改變文字的位置和大小，適當調(diào)節(jié)字間距。對于段落文字的處理應(yīng)注意，字體加大后，段落之間的距離也應(yīng)該隨之調(diào)整。小字體同樣應(yīng)用這一規(guī)則，不過是相反的。4.富于創(chuàng)造性設(shè)計時，應(yīng)從字的形態(tài)特征與組合上進行探求，不斷修改，反復琢磨，這樣才能創(chuàng)造出富有個性的文字，使其外部形態(tài)和設(shè)計格調(diào)都能喚起人們的審美愉悅感受。加入感受在字體里面，對文字的大小、間距、透明度做些調(diào)整，就會是完全不同的效果了。差別就在這里，也許只是一點小改動，但是需要你思考的卻更多。有時候?qū)ξ淖值墓P畫做特殊的加工處理往往會產(chǎn)生一些意想不到的效果。而這樣的處理是帶有創(chuàng)造性的，同時人性化的味道也會更濃一些。這是電腦字體所無法替代的效果，帶給觀看者的感受自然會要強烈的多。網(wǎng)頁文字設(shè)計方法筆畫突變筆畫突變是指在局部的某個或者某些筆畫上采用不同于正常筆畫的形態(tài)造型，突出文字內(nèi)涵和特征。添加形象添加形象主要是通過在漢字局部筆畫上添加與漢字表義相關(guān)的圖像或圖形來增加漢字的表意功能。將某個筆畫換成有意義或有趣地圖形，會使整個視覺活躍起來，海爾網(wǎng)頁中“火”字的設(shè)計。.筆畫連接筆畫相連是通過一組文字筆畫上的連貫來表達文字間的關(guān)系，增強一組文字的視覺感染力。會意及象形會意及象形是指通過對所設(shè)計的漢字字意的深刻內(nèi)涵加以挖掘，以象形或者會意的形態(tài)來傳達文字的信息。表面裝飾字體的表面裝飾是通過對文字筆畫的局部或者整體裝飾，來增強文字傳達的效果和感染力。（四）、圖形圖像的創(chuàng)意與設(shè)計圖形圖像能將信息傳達得更具體、真實、直接、易于理解，從而高效率高質(zhì)量的表達設(shè)計理念，使網(wǎng)頁充滿強烈的感情色彩。在網(wǎng)頁中合理的應(yīng)用圖形圖像，能夠形成視覺信息的中心，有利于重要信息的傳構(gòu)成要素——點、線、面點、線、面是平面設(shè)計的基本元素和主要視覺語言，是一切構(gòu)成設(shè)計中最基本的造型要素，存在于任何造型設(shè)計之中。作為視覺形式的語言，構(gòu)成網(wǎng)頁設(shè)計圖形圖像的最基本的要素是點、線、面，通常被人們稱為“構(gòu)成三要素”。在網(wǎng)頁設(shè)計時，運用組合、對比、均衡、節(jié)奏、統(tǒng)一等構(gòu)成方法將它們進行安排，互相補充，互相襯托，就可以創(chuàng)造出形式多樣，引人注目的網(wǎng)頁，從而將網(wǎng)站的信息有效地傳達給瀏覽者。1.點點必須要以視覺的表現(xiàn)為前提，因此點是一種具有空間位置的視覺單位，而且有大小不同的面積和不同的外觀特征以及屬性。點可分為規(guī)則點和不規(guī)則點兩類，如圓點、方點、三角點屬于規(guī)則點，而鋸齒點、泥點、雨點則屬于不規(guī)則點。點無一定的大小和形狀，點的概念是相對的，是與周圍的視覺元素相比較而言的。只要與周圍其他造型要素共同比較時具有凝聚視覺的作用，都可以稱為點。點的判斷完全取決于它所在的空間的相互關(guān)系上面，越小的形體越能給人點的感覺，點的面積變大就成了面。2.線任何形態(tài)都可以通過線的界定而確定下來。因此在網(wǎng)頁設(shè)計中，線的布局安排主要體現(xiàn)在線的空間分割上。線的分割產(chǎn)生各種比例的面。在利用線進行頁面分割時，既要考慮各形態(tài)元素彼此間支配的形狀，又要注意空間所具有的聯(lián)系，保證良好的視覺秩序感，這就要求被劃分的空間有相應(yīng)的主次關(guān)系、呼應(yīng)關(guān)系和形式關(guān)系，以此來獲得整體和諧的視覺空間。網(wǎng)頁中的圖文在直線的空間分割下，會得到清晰、條理的秩序，同時求得統(tǒng)一和諧的因素。而通過不同比例的空間分割，頁面各空間將會產(chǎn)生對比與節(jié)奏感。線框的限定使網(wǎng)頁中的動感與情感獲得相應(yīng)的穩(wěn)定和規(guī)范。另外，線框細，版面則輕快而有彈性，當線框加粗，圖像有被強調(diào)的感覺，同時誘導視覺注意；但若線框過粗，版面則變得穩(wěn)定、呆板、空間封閉。線具有方向性、流動性、延續(xù)性，因此在網(wǎng)頁設(shè)計中可以運用重復、近似、漸變、對比、密集等構(gòu)成手法，將線進行不同方式的排列組合，會產(chǎn)生很多具有奇妙效果的視覺形態(tài)。3．面視覺形態(tài)中，面是一種形，體現(xiàn)了充實、厚重和整體并穩(wěn)定的視覺效果。面除了有大小，還具有位置、形狀、擺放角度等特征，在版面中具有平衡、豐富空間層次，烘托及深化主題的作用。經(jīng)分割所產(chǎn)生的比例關(guān)系，是決定頁面均衡、協(xié)調(diào)的重要因素。網(wǎng)頁設(shè)計中要對面進行多樣化處理，以避免重復、單調(diào)，做到相互襯托、相互呼應(yīng)。面分為幾何形和自由形兩大類。五、小結(jié)：同學們根據(jù)網(wǎng)頁設(shè)計的理念，修改duibi.html網(wǎng)頁，將網(wǎng)頁設(shè)計的構(gòu)成要素全部考慮在內(nèi)。六、作業(yè)：小組合作策劃網(wǎng)站主題，并繪出網(wǎng)頁設(shè)計圖紙教學設(shè)計思想：網(wǎng)頁作品的成敗取決于網(wǎng)頁的設(shè)計與制作，而網(wǎng)