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

1、網(wǎng)頁的設(shè)教目：、掌握網(wǎng)頁元素和網(wǎng)頁構(gòu)件的使用：、能進行簡單的網(wǎng)頁設(shè)計；教重：網(wǎng)頁構(gòu)件的使用；網(wǎng)頁設(shè)計；教難：網(wǎng)頁的設(shè)計；課： 時導(dǎo)：今天我們進入第六章網(wǎng)頁的設(shè)計與制作的學(xué)習(xí)成功的網(wǎng)站不僅僅在于它的內(nèi)容的多少的交互功能多強， 設(shè)計也是關(guān)鍵的一項，它決定了網(wǎng)站的藝術(shù)美是否能吸引瀏覽者的眼球。新：一網(wǎng)元的成打開 2007 年國中小學(xué)信息技術(shù)大賽中獲獎作品鄱陽湖鶴生看并總結(jié)網(wǎng)頁的組成元素有？文字、圖 片、動畫、聲音、超鏈接等。一般情況下，網(wǎng)頁都應(yīng)該具備這三種元素，但是也有的網(wǎng)頁只有其中的兩種，甚至只有一種。有的網(wǎng)頁就是 為了展示一篇文章，那么這個網(wǎng)頁就沒有必要放置圖像；有的網(wǎng)頁只用于顯示一幅大尺寸的照

2、，也可以沒有文字 說明；而有的網(wǎng)頁純粹就是提供資料，就不必設(shè)置超鏈接，這樣，這個網(wǎng)頁就成為網(wǎng)絡(luò)中某一信息鏈終點， 即只有別的網(wǎng)頁鏈接它。過渡：同學(xué)們想不想自己也做個網(wǎng)站呢？想做網(wǎng)站前提則是先設(shè)計網(wǎng)站，規(guī)劃網(wǎng)站的主題，畫草圖。二網(wǎng)設(shè)現(xiàn)在給大家 鐘的時間設(shè)計一個學(xué)校網(wǎng)站的主頁，內(nèi)容包括網(wǎng)頁的主題、思考內(nèi)容 怎樣突出的網(wǎng)頁的主題 網(wǎng)頁的框架結(jié)構(gòu)及特點 以什么色調(diào)為主及作用圖、文有何講究Angel 網(wǎng)頁Music 網(wǎng)網(wǎng)版設(shè)的覺素為了增強人們對網(wǎng)頁的注意程度，提高對于網(wǎng)頁內(nèi)容的理解程度，從而影響人們的思想和行為我們必須按照 人的視覺生理和心理特征，去設(shè)計我們的網(wǎng)頁版式，以達到最佳的設(shè)計訴求。我們先來看一

3、下的視線移動規(guī)律： 人的視線沿水平方向運動比沿垂直方向運動快而且不易疲勞。 視的變化習(xí)慣于從左到右，從上到下和順時針方向運動。 當(dāng)線沿既不水平也垂直的斜線方向移動時在水平方向上約 45o 的圍視線為從到右 移動，在垂直方向左右約 45o 的圍內(nèi)，視線為從上到下移動。符合視覺規(guī)律 文字橫向編排由于人眼的視線橫向移動比豎向移動快而且不易疲勞，因此將文字盡量橫向排布，除非一些有殊設(shè)計要 求的版式或書法字體的版式。同時，頁面盡量保持橫向尺寸固定，豎向尺寸不固定，目的是使們能連續(xù)不間斷地 瀏覽頁面。需要注意的是，應(yīng)避免頁面左右、上下都能滾動，這會給瀏覽者帶來極大的不便。 重要信息置于最佳視覺區(qū)”在進行網(wǎng)

4、頁版式設(shè)計時，要考慮將最重要的信息或視覺流程的停留上安排在注目價值高的位置，就是“最佳 視覺區(qū)域于人們習(xí)慣于將線從左到右、從上到下移動，因而視區(qū)中的不同位置注目程度不同。版面中的不同區(qū)域會產(chǎn)生不同的注目程度給人的心理感受也不同它們給人的心理感受也是不的；上部有 輕快、上升、積極、愉悅之感；下部有沉重、穩(wěn)定、壓抑、消沉之感；左側(cè)感覺輕松、舒展、由、主動；右側(cè)感 覺莊重、局限、拘謹(jǐn)、被動。因此，在進行網(wǎng)頁版式設(shè)計時，應(yīng)考慮將重要信息或視覺流程的留點安排在頁面的 “最佳視域”內(nèi)。、避免視覺疲勞 限制網(wǎng)頁長度盡可能將網(wǎng)頁限制在 1 屏內(nèi)，即滿屏，瀏覽者不需要拖動滾動條就可以看到下面的導(dǎo)航信息。頁面宜過

5、長，一 般控制在 13 屏，盡量不超過 屏 文字大小適中、行距合理在網(wǎng)頁設(shè)計時應(yīng)提供瀏覽者定制字體大小的功能。 位置的一致減少交互的次數(shù)，按照人的閱讀習(xí)慣，固定導(dǎo)航的位置。免去用戶去找導(dǎo)航的麻煩。 適量安排多媒體元素網(wǎng)頁中的動畫不是越多越好，而是要形成動靜相宜的效果，因此需要適量安排多媒體元素，并意主次關(guān)系。 合理配色如果將大篇幅極亮的文字設(shè)計在極暗的背景上，容易因視覺長時間過分緊張而產(chǎn)生疲勞。因此注意網(wǎng)頁的配色， 使其適合瀏覽者長期瀏覽。網(wǎng)設(shè)的成素（一式計網(wǎng)頁的版式設(shè)計就將文字形圖像色動視頻等網(wǎng)頁界面的傳達要素根據(jù)特定的容和主題， 在網(wǎng)頁所限定的范圍內(nèi)，運用造型元素和形式原理進行視覺的關(guān)聯(lián)，

6、從而將涉及意圖以視覺形表現(xiàn)出來。版式設(shè) 計將各元素組合配置，使頁面內(nèi)容一目了然，并獲得悅目的視覺效果。在設(shè)計時，需要運用統(tǒng)、對比、對稱、均 衡、節(jié)奏、韻律等形式原理，來構(gòu)造出和諧、流暢、自然的網(wǎng)頁界面幅現(xiàn)出對比和調(diào)和的網(wǎng)頁的頁面， 讓學(xué)生體會網(wǎng)頁板式構(gòu)成的類型：、骨骼型 也欄，是一種規(guī)范的、理性的設(shè)計形式，類似于報刊的板式。常見的骨骼型有豎向的和橫向 的通欄、雙欄、三欄、四欄等，這種版式給人以和諧、理性的美。這種版式常用于公司網(wǎng)站的計示面， 學(xué)生意會）、國字型 口型同字型、回字形都歸屬于此類，是一些大型網(wǎng)站所喜歡的類型，即最上面是網(wǎng)站的標(biāo)題、 導(dǎo)航以及橫幅廣告條，接下來就是網(wǎng)站的主要內(nèi)容，左右

7、分列一些小條內(nèi)容，中間是主要部分最下面是網(wǎng)站的一 些基本信息、聯(lián)系方式、版權(quán)聲明等。這種布局的優(yōu)點是充分利用版面，信息量大，缺點是頁擁擠，不夠靈活。 （展頁，生據(jù)計理分優(yōu)點重分）、框架型 有右架型、上下框架型和綜合框架型，這種版式常用語功能型的網(wǎng)站，如郵箱、論壇、博客 等（展示頁面，學(xué)生意會）、中軸型 沿面中軸將圖片、文字做水平或垂直方向的排列，給人穩(wěn)定、平靜、蓄、舒暢的感覺 示頁面，學(xué)生意會）可能有差異，不同的色彩對人產(chǎn)生的心理效應(yīng)更不同。不同地域、文化、年齡、性格、興趣等同因素， 是決定色彩感受異同的根源這從人類社會數(shù)年來的發(fā)展所有的高級情感的角度來談一下不同彩的象征意義 和心理暗示。 網(wǎng)

8、頁主色調(diào)是綠色，鋪蓋面積比較大。于高亮度的顏色會給人過輕、沒分量的感覺，因此設(shè)計師采 用起輔助效果的黑色，鎮(zhèn)住輕飄的感覺，起到了很好的平衡作用。如果黑色出現(xiàn)在左上角，會高亮 度的綠色產(chǎn)生很強的對比，不適合以健康為主題的表達，設(shè)計師把深綠色放置在右上角，形成彩均 衡的做法是十分明智的。主色調(diào)是掌握整個網(wǎng)頁色彩氣氛的主要因素，而輔色面積小，起強調(diào)或緩沖調(diào)和的作用。起強作用 的輔色是空間中動感和活力的來源，還可以因其色彩“點”的作用使主色在整個網(wǎng)頁中得到連。輔 色一般為醒目突出的色彩。網(wǎng)頁配色準(zhǔn)則色彩和所表達的內(nèi)容氣氛相適合，選擇色彩要和你網(wǎng)頁的內(nèi)涵相關(guān)聯(lián)。所使用的色彩產(chǎn)生的聯(lián)不能與所 表達的基調(diào)相

9、違背。遵循色彩適應(yīng)性原則，避免可能發(fā)生的視覺混淆。配色的運用因人而異，要為追求色彩的和 諧與穩(wěn)定。 背景與文字如果一個網(wǎng)站用了背景顏色，必須要考慮到背景顏色的用色與前景文字的搭配等問題。一般的站側(cè) 重的是文字，所以背景顏色可以選擇純度或者明度較低的色彩，文字用較為突出的亮色，讓人一了然。 為了讓瀏覽者對網(wǎng)站留有深刻的印象，有些網(wǎng)站設(shè)計了獨特的背景、同類色調(diào) 同色調(diào)能增強網(wǎng)頁的統(tǒng)一效果。網(wǎng)頁中基調(diào)有大面積的同類色產(chǎn)生，改變同類色彩的明度、 純度構(gòu)成千變?nèi)f化的色彩效果。、藍色調(diào) 強精密性、穩(wěn)重型、科技型的網(wǎng)站，多采用藍色調(diào)。因為深藍色傳清高的感情色彩，是科 技時代的代表色彩網(wǎng)頁，生意會）、動感色調(diào)

10、 娛、體育、兒童網(wǎng)站等多數(shù)需要表現(xiàn)出活潑、動感的視覺效果，盡量是用鮮艷的顏色會穩(wěn) 妥些，避免使用嚴(yán)肅、莊重的黑色，加入一些白色，會是頁面具有單純、明亮的感覺頁學(xué)生意會）、時尚色調(diào) 表時尚感，可以采用冷色調(diào)，并搭配少量暖色作為點綴，當(dāng)頁面色彩過于豐富時，可以通 過白色來緩解網(wǎng)，學(xué)生會）、高雅色調(diào) 這網(wǎng)站可用紫色、褐色、土黃色等來營造高雅氛圍。對比色的調(diào)和對比色的調(diào)和方法有：提高或降低對比色的純度，在對比色之間插入分割色（金、銀、黑、白灰等 用雙方面積大小不同的處理方法，對比色之間加入相近的類似色。黑在繪畫和藝術(shù)設(shè)計中它是可以任何顏色相配的極色。它體現(xiàn)了高貴、高雅、消極、悲傷、沉穩(wěn)、沉悶、 死亡、

11、邪惡、明確和堅定。網(wǎng)頁設(shè)計中黑色的使用常常能達到四兩撥千斤的作用，使與之鄰近界面信息成為視覺 的焦點。白 黑色相對的顏色，同樣也是極色，可以與任何顏色相配。它常給人以純潔的、完美的、正義的不可 觸及的、不可接近的、不可解釋的、整潔的、神圣的、空洞的、無限的、沉默等心理暗示。灰也是一種可以與任何顏色相配顏色?；疑纳室庀?，在商業(yè)設(shè)計中，灰色具有柔和，高雅的意象，而 且屬于中間性格，男女皆能接受，所以灰色也是永遠流行的主要顏色，使用灰色時，大多利用同的層次變化組合 或他配其他色彩，才不會過于素、沉悶，而有呆板，僵硬的感覺。 紅在繪畫和藝術(shù)設(shè)計的范疇里紅往往給人以力量活的愉悅高度的感覺紅傳達著熱量

12、力、 友好、喜慶和個人魅力。紅色有些時候用來做心理上的警示。 藍藍在視覺上往往給人一種被動、靜謐、深邃、寒冷、潮濕、謹(jǐn)慎、憂郁、宗教、科技、冷靜與智的 感覺。瑞士的兩個色彩心理學(xué)專家對藍色已有以下定:種透徹的、女性化的顏色，可以制造安靜、松弛的氣氛。 反之，它會引起人夢幻、童話、整潔、清爽的感覺。3.色人們常常通過黃色聯(lián)想到:太陽、溫暖、自由、年輕、快樂、開放、奇特、樂觀等等人們使用黃色往往 是在心理上尋求一種朝氣和活力、自主、自由不被拘束、幸運而舒適的感覺。 4.綠色綠色常使人聯(lián)想起自然、和諧、安靜、堅定和生命。綠色具有黃色和藍色的某些特征，色環(huán)上色偏 近黃色時，綠色就變得溫暖、稚嫩、活潑、

13、健康而無危害性。如果再加進一些白色，就會給人一種女性的柔和與 輕盈的感覺。 5.橙色橙色也像綠色一樣具有其他兩種原色的特征。橙色常給人的感覺:快樂、開放、大方、親密、直、 熱烈、溫暖、秋天、無拘束、有活力和感情洋溢。人的行動在橙色的氛圍里沒有任何拘束，因橙色很大程度上代 表了溫暖和真摯的感情。 6.紫色紫色令人聯(lián)想到昏暗、神秘、深刻、內(nèi)向、高貴、悲傷、禁止、魅力、曖昧、不可靠等等。它同綠色、 橙色一樣，具有相鄰的兩個原色的部分特征。紫色越深，則反映出的效果越呆板、嚴(yán)格、不近情，并給人以強烈 的神秘感。棕色它常被人視為一種堅固的、誠實的、親切、穩(wěn)定和安全的顏色。它讓人聯(lián)想到腳下的土地、結(jié)耐用 的

14、物件、動物皮毛的溫暖、幾近于平淡和無聊、隨和、豪放、古典與懷舊、愛的嚴(yán)肅和值得信。（三字編排與設(shè)計要達到網(wǎng)頁文字傳達的有效性，必須重視文字編輯的整體效果，是網(wǎng)頁文字能給人以清晰的視印象，避免頁 面繁雜零亂，減去不必要的轉(zhuǎn)世變化，使人易認(rèn)、易懂、易讀。網(wǎng)頁文字的設(shè)計不能為了藝術(shù)型而編輯，忘記了 文字本身是傳達內(nèi)容和表達信息的主題。網(wǎng)頁字體與字體編排在網(wǎng)頁設(shè)計中，字體的處理與色彩、版式、圖形等其他設(shè)計元素的處理一樣非常關(guān)鍵。從藝術(shù)角度可以將字 體本身看成是一種藝術(shù)形式，它在個性和情感方面對人們有著很大影響。網(wǎng)頁文字設(shè)計技巧 1.提高可讀性（1讓你想表達的內(nèi)容清晰、醒目，讓瀏覽者一開始就可以明白你的

15、意思。（2避免使用不清晰的字體，否則容易使閱覽者產(chǎn)生反感和麻煩。（3注意恰當(dāng)?shù)倪x擇你所需要的字體，適當(dāng)采用虛實對比、大小對比。（4注意文字編排方向，注意安排閱覽者的視線，適當(dāng)運用直線與曲線編排。（5根據(jù)視覺流程的原理，通常將重點放在右邊。 2. 精位置（1注意文字的對齊、適當(dāng)拉來間距、適當(dāng)安排行距。（2注意圖文交錯，既不要影響圖形的觀看，也不能影響文字的閱覽。（3文字不要頂天立地，也不要支持邊角 3. 營視覺美感文字作為網(wǎng)頁形象要素之一，具有傳達感情的功能，因而它必須具有視覺上的美感，能夠給人美的 感受。字型設(shè)計良好，組合巧妙的文字能使人感到愉快，留下美好的印象，從而獲得良好的心反應(yīng)。反之，則

16、使 人看后心里不愉快，視覺上難以產(chǎn)生美感，甚至?xí)層^眾拒而不看，這樣勢必難以傳達出作者表現(xiàn)出的意圖和構(gòu) 想。注意改變文字的位置和大小，適當(dāng)調(diào)節(jié)字間距。對于段落文字的處理應(yīng)注意，字體加大后段落之間的距離也 應(yīng)該隨之調(diào)整。小字體同樣應(yīng)用這一規(guī)則，不過是相反的。 4.富于創(chuàng)造性設(shè)計時，應(yīng)從字的形態(tài)特征與組合上進行探求，不斷修改，反復(fù)琢磨，這樣才能創(chuàng)造出富有個的文 字，使其外部形態(tài)和設(shè)計格調(diào)都能喚起人們的審美愉悅感受。加入感受在字體里面，對文字的小、間距、透明度 做些調(diào)整，就會是完全不同的效果了。差別就在這里，也許只是一點小改動，但是需要你思考卻更多。有時候?qū)?文字的筆畫做特殊的加工處理往往會產(chǎn)生一些

17、意想不到的效果這的處理是帶有創(chuàng)造性的同時人性化的味道 也會更濃一些。這是電腦字體所無法替代的效果，帶給觀看者的感受自然會要強烈的多。網(wǎng)頁文字設(shè)計方法 筆突變筆畫突變是指在局部的某個或者某些筆畫上采用不同于正常筆畫的形態(tài)造型，突出文字內(nèi)涵和征。 添形象添加形象主要是通過在漢字局部筆畫上添加與漢字表義相關(guān)的圖像或圖形來增加漢字的表意功個筆畫換成有意義或有趣地圖形，會使整個視覺活躍起來，海爾網(wǎng)頁火字的設(shè)計 。 筆連接筆畫相連是通過一組文字筆畫上的連貫來表達文字間的關(guān)系，增強一組文字的視覺感染力。 會及象形會意及象形是指通過對所設(shè)計的漢字字意的深刻內(nèi)涵加以挖掘，以象形或者會意的形態(tài)來傳達字的 信息 。

18、表面裝飾字體的表面裝飾是通過對文字筆畫的局部或者整體裝飾，來增強文字傳達的效果和感染力。（四形像的創(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)成方法將它們進行安排，互相補，互相襯托，就 可以

19、創(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)系，以 此來獲得整體和諧的視覺空間。網(wǎng)頁中的圖文在直線的空間分割下，會得到清晰、條理的秩序，同時求得統(tǒng)一和諧的因素。而過不 同比例的空間分割，頁面各空間將會產(chǎn)生對比與節(jié)奏感。線框的限定使網(wǎng)頁中的動感與情感獲得相應(yīng)的穩(wěn)定