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

《網(wǎng)頁設(shè)計(jì)的教學(xué)設(shè)計(jì).doc》由會(huì)員分享，可在線閱讀，更多相關(guān)《網(wǎng)頁設(shè)計(jì)的教學(xué)設(shè)計(jì).doc（7頁珍藏版）》請?jiān)谘b配圖網(wǎng)上搜索。

網(wǎng)頁的設(shè)計(jì) 教學(xué)目標(biāo)： 1、掌握網(wǎng)頁元素和網(wǎng)頁構(gòu)件的使用： 2、能進(jìn)行簡單的網(wǎng)頁設(shè)計(jì)； 教學(xué)重點(diǎn)： 網(wǎng)頁構(gòu)件的使用；網(wǎng)頁設(shè)計(jì)； 教學(xué)難點(diǎn)： 網(wǎng)頁的設(shè)計(jì)； 課時(shí)：第1課時(shí) 導(dǎo)入： 今天我們進(jìn)入第六章網(wǎng)頁的設(shè)計(jì)與制作的學(xué)習(xí)，一個(gè)成功的網(wǎng)站不僅僅在于它的內(nèi)容的多少，功能的交互功能多強(qiáng)，設(shè)計(jì)也是關(guān)鍵的一項(xiàng)，它決定了網(wǎng)站的藝術(shù)美是否能吸引瀏覽者的眼球。 新課： 一、網(wǎng)頁元素的組成 打開2007年全國中小學(xué)信息技術(shù)大賽中獲獎(jiǎng)作品《鄱陽湖白鶴》，讓學(xué)生觀看并總結(jié)網(wǎng)頁的組成元素有？文字、圖片、動(dòng)畫、聲音、超鏈接等。 一般情況下，網(wǎng)頁都應(yīng)該具備這三種元素，但是也有的網(wǎng)頁只有其中的兩種，甚至只有一種。如有的網(wǎng)頁就是為了展示一篇文章，那么這個(gè)網(wǎng)頁就沒有必要放置圖像；有的網(wǎng)頁只用于顯示一幅大尺寸的照片，也可以沒有文字說明；而有的網(wǎng)頁純粹就是提供資料，就不必設(shè)置超鏈接，這樣，這個(gè)網(wǎng)頁就成為網(wǎng)絡(luò)中某一個(gè)信息鏈的“終點(diǎn)”，即只有別的網(wǎng)頁鏈接它。 過渡：同學(xué)們想不想自己也做個(gè)網(wǎng)站呢？想做網(wǎng)站前提則是先設(shè)計(jì)網(wǎng)站，規(guī)劃網(wǎng)站的主題，畫出草圖。 二、網(wǎng)頁設(shè)計(jì) 現(xiàn)在給大家5分鐘的時(shí)間設(shè)計(jì)一個(gè)學(xué)校網(wǎng)站的主頁，內(nèi)容包括網(wǎng)頁的主題、 思考內(nèi)容 Angel網(wǎng)頁 Music網(wǎng)頁 怎樣突出的網(wǎng)頁的主題 網(wǎng)頁的框架結(jié)構(gòu)及特點(diǎn) 以什么色調(diào)為主及作用 圖、文有何講究 網(wǎng)頁版式設(shè)計(jì)的視覺因素 為了增強(qiáng)人們對(duì)網(wǎng)頁的注意程度，提高對(duì)于網(wǎng)頁內(nèi)容的理解程度，從而影響人們的思想和行為，我們必須按照人的視覺生理和心理特征，去設(shè)計(jì)我們的網(wǎng)頁版式，以達(dá)到最佳的設(shè)計(jì)訴求。我們先來看一下人的視線移動(dòng)規(guī)律： u 人眼的視線沿水平方向運(yùn)動(dòng)比沿垂直方向運(yùn)動(dòng)快而且不易疲勞。 u 視線的變化習(xí)慣于從左到右，從上到下和順時(shí)針方向運(yùn)動(dòng)。 u 當(dāng)視線沿既不水平，也不垂直的斜線方向移動(dòng)時(shí)，在水平方向上下約45o的范圍視線為從左到右移動(dòng)，在垂直方向左右約45o的范圍內(nèi)，視線為從上到下移動(dòng)。 符合視覺規(guī)律 文字橫向編排 由于人眼的視線橫向移動(dòng)比豎向移動(dòng)快而且不易疲勞，因此將文字盡量橫向排布，除非一些有特殊設(shè)計(jì)要求的版式或書法字體的版式。同時(shí)，頁面盡量保持橫向尺寸固定，豎向尺寸不固定，目的是使人們能連續(xù)不間斷地瀏覽頁面。需要注意的是，應(yīng)避免頁面左右、上下都能滾動(dòng)，這會(huì)給瀏覽者帶來極大的不便。 2．重要信息置于“最佳視覺區(qū)域” 在進(jìn)行網(wǎng)頁版式設(shè)計(jì)時(shí)，要考慮將最重要的信息或視覺流程的停留上安排在注目價(jià)值高的位置，這就是“最佳視覺區(qū)域”。由于人們習(xí)慣于將視線從左到右、從上到下移動(dòng)，因而視區(qū)中的不同位置注目程度不同。 版面中的不同區(qū)域會(huì)產(chǎn)生不同的注目程度，給人的心理感受也不同。它們給人的心理感受也是不同的；上部有輕快、上升、積極、愉悅之感；下部有沉重、穩(wěn)定、壓抑、消沉之感；左側(cè)感覺輕松、舒展、自由、主動(dòng)；右側(cè)感覺莊重、局限、拘謹(jǐn)、被動(dòng)。因此，在進(jìn)行網(wǎng)頁版式設(shè)計(jì)時(shí)，應(yīng)考慮將重要信息或視覺流程的停留點(diǎn)安排在頁面的“最佳視域”內(nèi)。 3、避免視覺疲勞 1．限制網(wǎng)頁長度 盡可能將網(wǎng)頁限制在1屏以內(nèi)，即滿屏，瀏覽者不需要拖動(dòng)滾動(dòng)條就可以看到下面的導(dǎo)航信息。頁面不宜過長，一般控制在1—3屏，盡量不超過5屏。 2．文字大小適中、行距合理 在網(wǎng)頁設(shè)計(jì)時(shí)應(yīng)提供瀏覽者定制字體大小的功能。 3．位置的一致 減少交互的次數(shù)，按照人的閱讀習(xí)慣，固定導(dǎo)航的位置。免去用戶去找導(dǎo)航的麻煩。 4．適量安排多媒體元素 網(wǎng)頁中的動(dòng)畫不是越多越好，而是要形成動(dòng)靜相宜的效果，因此需要適量安排多媒體元素，并注意主次關(guān)系。 5．合理配色 如果將大篇幅極亮的文字設(shè)計(jì)在極暗的背景上，容易因視覺長時(shí)間過分緊張而產(chǎn)生疲勞。因此應(yīng)注意網(wǎng)頁的配色，使其適合瀏覽者長期瀏覽。 網(wǎng)頁設(shè)計(jì)的構(gòu)成要素 （一）、版式設(shè)計(jì) 網(wǎng)頁的版式設(shè)計(jì)，就是將文字、圖形圖像、色彩、動(dòng)畫、視頻等網(wǎng)頁界面的傳達(dá)要素，根據(jù)特定的內(nèi)容和主題，在網(wǎng)頁所限定的范圍內(nèi)，運(yùn)用造型元素和形式原理進(jìn)行視覺的關(guān)聯(lián)，從而將涉及意圖以視覺形式表現(xiàn)出來。版式設(shè)計(jì)將各元素組合配置，使頁面內(nèi)容一目了然，并獲得悅目的視覺效果。在設(shè)計(jì)時(shí)，需要運(yùn)用統(tǒng)一、對(duì)比、對(duì)稱、均衡、節(jié)奏、韻律等形式原理，來構(gòu)造出和諧、流暢、自然的網(wǎng)頁界面。（展示兩幅體現(xiàn)出對(duì)比和調(diào)和的網(wǎng)頁的頁面，讓學(xué)生體會(huì)。） 網(wǎng)頁板式構(gòu)成的類型： 1、骨骼型 也稱欄型，是一種規(guī)范的、理性的設(shè)計(jì)形式，類似于報(bào)刊的板式。常見的骨骼型有豎向的和橫向的通欄、雙欄、三欄、四欄等，這種版式給人以和諧、理性的美。這種版式常用于公司網(wǎng)站的設(shè)計(jì)。（展示頁面，學(xué)生意會(huì)） 2、國字型 口字型、同字型、回字形都?xì)w屬于此類，是一些大型網(wǎng)站所喜歡的類型，即最上面是網(wǎng)站的標(biāo)題、導(dǎo)航以及橫幅廣告條，接下來就是網(wǎng)站的主要內(nèi)容，左右分列一些小條內(nèi)容，中間是主要部分，最下面是網(wǎng)站的一些基本信息、聯(lián)系方式、版權(quán)聲明等。這種布局的優(yōu)點(diǎn)是充分利用版面，信息量大，缺點(diǎn)是頁面擁擠，不夠靈活。（展示頁面，學(xué)生根據(jù)設(shè)計(jì)理念分析優(yōu)缺點(diǎn)，重點(diǎn)分析） 3、框架型 有左右框架型、上下框架型和綜合框架型，這種版式常用語功能型的網(wǎng)站，如郵箱、論壇、博客等（展示頁面，學(xué)生意會(huì)） 4、中軸型 沿頁面的中軸將圖片、文字做水平或垂直方向的排列，給人穩(wěn)定、平靜、含蓄、舒暢的感覺。（展示頁面，學(xué)生意會(huì)） 5、 “匡”型布局或“T”型 布局可歸于此類，“匡”型布局中，常見的類型有上面是標(biāo)題與導(dǎo)航，左側(cè)是展示圖片的類型和最上面是標(biāo)題及廣告，左側(cè)是導(dǎo)航鏈接的類型?！癟”布局就是指頁面頂部為橫條網(wǎng)站標(biāo)志與廣告條，下方左面為主菜單，右面顯示內(nèi)容的布局，因?yàn)椴藛伪尘吧瘦^深，整體效果類似英文字母“T”，我們稱之為“T”形布局。這種布局的優(yōu)點(diǎn)是頁面結(jié)構(gòu)清晰，主次分明，是初學(xué)者最容易上手的布局方法。缺點(diǎn)是規(guī)矩呆板，如果細(xì)節(jié)色彩上不注意，很容易讓人感覺枯燥無味。 6、 圖片或文字在頁面上作流線的編排構(gòu)成，產(chǎn)生韻律與節(jié)奏。 焦點(diǎn)型、滿版型、分割型、拐角型、流線型、對(duì)稱型等等。（展示頁面，學(xué)生意會(huì)） （二）、色彩搭配 頁面的色彩設(shè)計(jì)，直接影響閱讀者的觀賞興趣，彩色的網(wǎng)頁總是勝于單色的網(wǎng)頁，網(wǎng)頁也是一件藝術(shù)品，因?yàn)樗纫笪淖值膬?yōu)美流暢，有要求頁面的新穎、整潔，使用色彩可以產(chǎn)生強(qiáng)烈的視覺效果，是頁面更加生動(dòng)。所以我們在制作時(shí)一定要先確定網(wǎng)站的主題色，以下介紹幾種色調(diào)。 1、同類色 比鄰近色更加接近的顏色，它主要指在同一色相中不同的顏色變化。例如，紅顏色中有紫紅、深紅、玫瑰紅、大紅、朱紅、桔紅等等種類，黃顏色中又有深黃、土黃、中黃、桔黃、淡黃、檸檬黃等等區(qū)別。它起到色彩調(diào)和統(tǒng)一，又有微妙變化的作用。第一眼看上去給人溫柔、雅致、安寧的心理感受，便可知該組同類色系非常調(diào)和統(tǒng)一。只運(yùn)用同類色系配色，是十分謹(jǐn)慎穩(wěn)妥的做法，但是有時(shí)會(huì)有單調(diào)感。添加少許相鄰或?qū)Ρ壬担梢泽w現(xiàn)出頁面的活躍感和強(qiáng)度。 2、暖色，如圖中的黃色，橙色，紅色，紫色等都屬于暖色系列。暖色系的飽和度越高，其溫暖特性越明顯?？梢源碳と说呐d奮性，使體溫有所升高。暖色跟黑色調(diào)和可以達(dá)到很好的效果。高明度高純度的色彩搭配，把頁面表達(dá)得鮮艷炫目，有非常強(qiáng)烈刺激的視覺表現(xiàn)力。 冷色，如圖中的綠色，藍(lán)色，藍(lán)紫色等等都屬于冷色系列。冷色系亮度越高，其特性越明顯，能夠使人的心情平靜，清爽。冷色一般跟白色調(diào)和可以達(dá)到一種很好的效果。 3、冷暖色 與此同時(shí)，在一個(gè)環(huán)境、區(qū)域范圍里，色彩的屬性、性能特性是相對(duì)的。例如黃色在藍(lán)色、綠色這兩個(gè)區(qū)域環(huán)境下，黃色可以說這個(gè)時(shí)候是呈暖色，而出現(xiàn)在桔紅、朱紅、深紅這幾個(gè)區(qū)域環(huán)境下，黃色可以說在這個(gè)時(shí)候是呈冷色。同樣的，藍(lán)色相對(duì)綠色是冷色，紫色相對(duì)藍(lán)色是暖色等等?？筛鶕?jù)網(wǎng)頁設(shè)計(jì)主題的目的要求，環(huán)境協(xié)調(diào)度的需要等等做相應(yīng)的搭配調(diào)整。 色相對(duì)比 色相對(duì)比是指因色相之間的差別形成的對(duì)比。要增強(qiáng)色彩的表現(xiàn)力，當(dāng)主色相確定后，必須考慮其他色彩與主色相是什么關(guān)系，要表現(xiàn)什么內(nèi)容及效果。不同色相對(duì)比取得的效果有所不同，兩色越接近，對(duì)比效果越柔和。 明度對(duì)比 明度對(duì)比是色彩明暗程度的對(duì)比，也稱色彩的黑白度對(duì)比。兩種不同明度的色彩并列時(shí)，會(huì)使明色更亮，而暗色更暗。將同明度的灰色置于白底和黑底上，會(huì)感覺黑底上的灰色較亮；而白底上的灰色明度較暗。 純度對(duì)比 純度對(duì)比是指不同色彩之間純度的差別而形成的對(duì)比。色彩純度可大致分為高純度、中純度、低純度三種。未經(jīng)調(diào)和過的原色純度是最高的，而間色多屬中純度的色彩，復(fù)色其本身純度偏低而屬低純度的色彩范圍。 冷暖對(duì)比 冷暖對(duì)比是指不同色彩之間的冷暖差別形成的對(duì)比。色彩的冷暖對(duì)比還受明度與純度的影響，白光反射高而感覺冷，黑色吸收率高而感覺暖。冷暖對(duì)比的應(yīng)用，通常在休閑娛樂網(wǎng)站、食品網(wǎng)站出現(xiàn)比較多。將這兩個(gè)色系的色彩安排在同一畫面時(shí)，其對(duì)比效果極為強(qiáng)烈。 面積對(duì)比 是指兩個(gè)或更多色塊的對(duì)比，這是一種多與少、大與小之間的對(duì)比。面積的對(duì)比，可以是中高低明度差的面積變化及中高低純度差的面積變化。同一種色彩，面積越大，明度、純度越強(qiáng)，面積越小，明度、純度越低。 同種色的調(diào)和 同種色的調(diào)和是相同色相、不同明度和純度的色彩調(diào)和，使之產(chǎn)生秩序的漸進(jìn)，在明度、純度的變化上，為了不至于讓整個(gè)頁面呈現(xiàn)過于單調(diào)平淡，有些頁面則是加入極其小的其它顏色做點(diǎn)綴。該頁面使用了同種色的綠色系，淡綠、草綠、墨綠通過明度、純度的微妙變化產(chǎn)生緩和的節(jié)奏美感。 色彩的心理效應(yīng) 色彩給人的感受是豐富而奇妙的。色彩的心理效應(yīng)源于人們的生活經(jīng)驗(yàn)。每個(gè)人對(duì)相同的網(wǎng)頁色彩的感受可能有差異，不同的色彩對(duì)人產(chǎn)生的心理效應(yīng)更不同。不同地域、文化、年齡、性格、興趣等異同因素，是決定色彩感受異同的根源。在這里從人類社會(huì)數(shù)年來的發(fā)展所有的高級(jí)情感的角度來談一下不同色彩的象征意義和心理暗示。 l 網(wǎng)頁主色調(diào)是綠色，鋪蓋面積比較大。由于高亮度的顏色會(huì)給人過輕、沒分量的感覺，因此設(shè)計(jì)師采用起輔助效果的黑色，鎮(zhèn)住輕飄的感覺，起到了很好的平衡作用。如果黑色出現(xiàn)在左上角，會(huì)和高亮度的綠色產(chǎn)生很強(qiáng)的對(duì)比，不適合以健康為主題的表達(dá)，設(shè)計(jì)師把深綠色放置在右上角，形成色彩均衡的做法是十分明智的。 l 主色調(diào)是掌握整個(gè)網(wǎng)頁色彩氣氛的主要因素，而輔色面積小，起強(qiáng)調(diào)或緩沖調(diào)和的作用。起強(qiáng)調(diào)作用的輔色是空間中動(dòng)感和活力的來源，還可以因其色彩“點(diǎn)”的作用使主色在整個(gè)網(wǎng)頁中得到連貫。輔色一般為醒目突出的色彩。 網(wǎng)頁配色準(zhǔn)則 色彩和所表達(dá)的內(nèi)容氣氛相適合，選擇色彩要和你網(wǎng)頁的內(nèi)涵相關(guān)聯(lián)。所使用的色彩產(chǎn)生的聯(lián)想不能與所表達(dá)的基調(diào)相違背。遵循色彩適應(yīng)性原則，避免可能發(fā)生的視覺混淆。配色的運(yùn)用因人而異，主要為追求色彩的和諧與穩(wěn)定。 背景與文字 如果一個(gè)網(wǎng)站用了背景顏色，必須要考慮到背景顏色的用色與前景文字的搭配等問題。一般的網(wǎng)站側(cè)重的是文字，所以背景顏色可以選擇純度或者明度較低的色彩，文字用較為突出的亮色，讓人一目了然。為了讓瀏覽者對(duì)網(wǎng)站留有深刻的印象，有些網(wǎng)站設(shè)計(jì)了獨(dú)特的背景 1、同類色調(diào) 同類色調(diào)能增強(qiáng)網(wǎng)頁的統(tǒng)一效果。網(wǎng)頁中基調(diào)有大面積的同類色產(chǎn)生，改變同類色彩的明度、純度構(gòu)成千變?nèi)f化的色彩效果。 2、藍(lán)色調(diào) 強(qiáng)調(diào)精密性、穩(wěn)重型、科技型的網(wǎng)站，多采用藍(lán)色調(diào)。因?yàn)樯钏{(lán)色傳達(dá)清高的感情色彩，是科技時(shí)代的代表色彩。（附網(wǎng)頁，學(xué)生意會(huì)） 3、動(dòng)感色調(diào) 娛樂、體育、兒童網(wǎng)站等多數(shù)需要表現(xiàn)出活潑、動(dòng)感的視覺效果，盡量是用鮮艷的顏色會(huì)穩(wěn)妥些，避免使用嚴(yán)肅、莊重的黑色，加入一些白色，會(huì)是頁面具有單純、明亮的感覺。（附網(wǎng)頁，學(xué)生意會(huì)） 4、時(shí)尚色調(diào) 表現(xiàn)時(shí)尚感，可以采用冷色調(diào)，并搭配少量暖色作為點(diǎn)綴，當(dāng)頁面色彩過于豐富時(shí)，可以通過白色來緩解。（附網(wǎng)頁，學(xué)生意會(huì)） 5、高雅色調(diào) 這類網(wǎng)站可用紫色、褐色、土黃色等來營造高雅氛圍。 對(duì)比色的調(diào)和 對(duì)比色的調(diào)和方法有：提高或降低對(duì)比色的純度，在對(duì)比色之間插入分割色（金、銀、黑、白、灰等），采用雙方面積大小不同的處理方法，對(duì)比色之間加入相近的類似色。 黑色在繪畫和藝術(shù)設(shè)計(jì)中它是可以與任何顏色相配的極色。它體現(xiàn)了高貴、高雅、消極、悲傷、沉穩(wěn)、沉悶、死亡、邪惡、明確和堅(jiān)定。網(wǎng)頁設(shè)計(jì)中黑色的使用常常能達(dá)到四兩撥千斤的作用，使與之鄰近的界面信息成為視覺的焦點(diǎn)。 白色與黑色相對(duì)的顏色，同樣也是極色，可以與任何顏色相配。它常給人以“純潔的、完美的、正義的、不可觸及的、不可接近的、不可解釋的、整潔的、神圣的、空洞的、無限的、沉默的”等心理暗示。 灰色也是一種可以與任何顏色相配的顏色?；疑纳室庀?，在商業(yè)設(shè)計(jì)中，灰色具有柔和，高雅的意象，而且屬于中間性格，男女皆能接受，所以灰色也是永遠(yuǎn)流行的主要顏色，使用灰色時(shí)，大多利用不同的層次變化組合或他配其他色彩，才不會(huì)過于素、沉悶，而有呆板，僵硬的感覺。 紅色 在繪畫和藝術(shù)設(shè)計(jì)的范疇里，紅色往往給人以力量、生活的愉悅、高強(qiáng)度的感覺。紅色傳達(dá)著熱量、魅力、友好、喜慶和個(gè)人魅力。紅色有些時(shí)候用來做心理上的警示。 2.藍(lán)色 藍(lán)色在視覺上往往給人一種被動(dòng)、靜謐、深邃、寒冷、潮濕、謹(jǐn)慎、憂郁、宗教、科技、冷靜與理智的感覺。瑞士的兩個(gè)色彩心理學(xué)專家對(duì)藍(lán)色已有以下定論:一種透徹的、女性化的顏色，可以制造安靜、松弛的氣氛。反之，它會(huì)引起人夢幻、童話、整潔、清爽的感覺。 3.黃色 人們常常通過黃色聯(lián)想到:太陽、溫暖、自由、年輕、快樂、開放、奇特、樂觀等等。人們使用黃色往往是在心理上尋求一種朝氣和活力、自主、自由不被拘束、幸運(yùn)而舒適的感覺。 4.綠色 綠色常使人聯(lián)想起自然、和諧、安靜、堅(jiān)定和生命。綠色具有黃色和藍(lán)色的某些特征，色環(huán)上綠色偏近黃色時(shí)，綠色就變得溫暖、稚嫩、活潑、健康而無危害性。如果再加進(jìn)一些白色，就會(huì)給人以一種女性的柔和與輕盈的感覺。 5.橙色 橙色也像綠色一樣具有其他兩種原色的特征。橙色常給人的感覺是:快樂、開放、大方、親密、直接、熱烈、溫暖、秋天、無拘束、有活力和感情洋溢。人的行動(dòng)在橙色的氛圍里沒有任何拘束，因此橙色很大程度上代表了溫暖和真摯的感情。 6.紫色 紫色令人聯(lián)想到昏暗、神秘、深刻、內(nèi)向、高貴、悲傷、禁止、魅力、曖昧、不可靠等等。它也同綠色、橙色一樣，具有相鄰的兩個(gè)原色的部分特征。紫色越深，則反映出的效果越呆板、嚴(yán)格、不近人情，并給人以強(qiáng)烈的神秘感。 7.棕色 它常被人視為一種堅(jiān)固的、誠實(shí)的、親切、穩(wěn)定和安全的顏色。它讓人聯(lián)想到腳下的土地、結(jié)實(shí)耐用的物件、動(dòng)物皮毛的溫暖、幾近于平淡和無聊、隨和、豪放、古典與懷舊、愛的嚴(yán)肅和值得信賴。 （三）、文字的編排與設(shè)計(jì) 要達(dá)到網(wǎng)頁文字傳達(dá)的有效性，必須重視文字編輯的整體效果，是網(wǎng)頁文字能給人以清晰的視覺印象，避免頁面繁雜零亂，減去不必要的轉(zhuǎn)世變化，使人易認(rèn)、易懂、易讀。網(wǎng)頁文字的設(shè)計(jì)不能為了藝術(shù)造型而編輯，忘記了文字本身是傳達(dá)內(nèi)容和表達(dá)信息的主題。 網(wǎng)頁字體與字體編排 在網(wǎng)頁設(shè)計(jì)中，字體的處理與色彩、版式、圖形等其他設(shè)計(jì)元素的處理一樣非常關(guān)鍵。從藝術(shù)的角度可以將字體本身看成是一種藝術(shù)形式，它在個(gè)性和情感方面對(duì)人們有著很大影響。 網(wǎng)頁文字設(shè)計(jì)技巧 1.提高可讀性 （1）讓你想表達(dá)的內(nèi)容清晰、醒目，讓瀏覽者一開始就可以明白你的意思。 （2）避免使用不清晰的字體，否則容易使閱覽者產(chǎn)生反感和麻煩。 （3）注意恰當(dāng)?shù)倪x擇你所需要的字體，適當(dāng)采用虛實(shí)對(duì)比、大小對(duì)比。 （4）注意文字編排方向，注意安排閱覽者的視線，適當(dāng)運(yùn)用直線與曲線編排。 （5）根據(jù)視覺流程的原理，通常將重點(diǎn)放在右邊。 2. 精于位置 （1）注意文字的對(duì)齊、適當(dāng)拉來間距、適當(dāng)安排行距。 （2）注意圖文交錯(cuò)，既不要影響圖形的觀看，也不能影響文字的閱覽。 （3）文字不要頂天立地，也不要支持邊角 3. 營造視覺美感 文字作為網(wǎng)頁形象要素之一，具有傳達(dá)感情的功能，因而它必須具有視覺上的美感，能夠給人以美的感受。字型設(shè)計(jì)良好，組合巧妙的文字能使人感到愉快，留下美好的印象，從而獲得良好的心理反應(yīng)。反之，則使人看后心里不愉快，視覺上難以產(chǎn)生美感，甚至?xí)層^眾拒而不看，這樣勢必難以傳達(dá)出作者想表現(xiàn)出的意圖和構(gòu)想。注意改變文字的位置和大小，適當(dāng)調(diào)節(jié)字間距。對(duì)于段落文字的處理應(yīng)注意，字體加大后，段落之間的距離也應(yīng)該隨之調(diào)整。小字體同樣應(yīng)用這一規(guī)則，不過是相反的。 4.富于創(chuàng)造性 設(shè)計(jì)時(shí)，應(yīng)從字的形態(tài)特征與組合上進(jìn)行探求，不斷修改，反復(fù)琢磨，這樣才能創(chuàng)造出富有個(gè)性的文字，使其外部形態(tài)和設(shè)計(jì)格調(diào)都能喚起人們的審美愉悅感受。加入感受在字體里面，對(duì)文字的大小、間距、透明度做些調(diào)整，就會(huì)是完全不同的效果了。差別就在這里，也許只是一點(diǎn)小改動(dòng)，但是需要你思考的卻更多。有時(shí)候?qū)ξ淖值墓P畫做特殊的加工處理往往會(huì)產(chǎn)生一些意想不到的效果。而這樣的處理是帶有創(chuàng)造性的，同時(shí)人性化的味道也會(huì)更濃一些。這是電腦字體所無法替代的效果，帶給觀看者的感受自然會(huì)要強(qiáng)烈的多。 網(wǎng)頁文字設(shè)計(jì)方法 筆畫突變 筆畫突變是指在局部的某個(gè)或者某些筆畫上采用不同于正常筆畫的形態(tài)造型，突出文字內(nèi)涵和特征。 添加形象 添加形象主要是通過在漢字局部筆畫上添加與漢字表義相關(guān)的圖像或圖形來增加漢字的表意功能。將某個(gè)筆畫換成有意義或有趣地圖形，會(huì)使整個(gè)視覺活躍起來，海爾網(wǎng)頁中“火”字的設(shè)計(jì) 。 . 筆畫連接 筆畫相連是通過一組文字筆畫上的連貫來表達(dá)文字間的關(guān)系，增強(qiáng)一組文字的視覺感染力。 會(huì)意及象形 會(huì)意及象形是指通過對(duì)所設(shè)計(jì)的漢字字意的深刻內(nèi)涵加以挖掘，以象形或者會(huì)意的形態(tài)來傳達(dá)文字的信息 。 表面裝飾 字體的表面裝飾是通過對(duì)文字筆畫的局部或者整體裝飾，來增強(qiáng)文字傳達(dá)的效果和感染力。 （四）、圖形圖像的創(chuàng)意與設(shè)計(jì) 圖形圖像能將信息傳達(dá)得更具體、真實(shí)、直接、易于理解，從而高效率高質(zhì)量的表達(dá)設(shè)計(jì)理念，使網(wǎng)頁充滿強(qiáng)烈的感情色彩。在網(wǎng)頁中合理的應(yīng)用圖形圖像，能夠形成視覺信息的中心，有利于重要信息的傳 構(gòu)成要素——點(diǎn)、線、面 點(diǎn)、線、面是平面設(shè)計(jì)的基本元素和主要視覺語言，是一切構(gòu)成設(shè)計(jì)中最基本的造型要素，存在于任何造型設(shè)計(jì)之中。作為視覺形式的語言，構(gòu)成網(wǎng)頁設(shè)計(jì)圖形圖像的最基本的要素是點(diǎn)、線、面，通常被人們稱為“構(gòu)成三要素”。在網(wǎng)頁設(shè)計(jì)時(shí)，運(yùn)用組合、對(duì)比、均衡、節(jié)奏、統(tǒng)一等構(gòu)成方法將它們進(jìn)行安排，互相補(bǔ)充，互相襯托，就可以創(chuàng)造出形式多樣，引人注目的網(wǎng)頁，從而將網(wǎng)站的信息有效地傳達(dá)給瀏覽者。 1.點(diǎn) 點(diǎn)必須要以視覺的表現(xiàn)為前提，因此點(diǎn)是一種具有空間位置的視覺單位，而且有大小不同的面積和不同的外觀特征以及屬性。點(diǎn)可分為規(guī)則點(diǎn)和不規(guī)則點(diǎn)兩類，如圓點(diǎn)、方點(diǎn)、三角點(diǎn)屬于規(guī)則點(diǎn)，而鋸齒點(diǎn)、泥點(diǎn)、雨點(diǎn)則屬于不規(guī)則點(diǎn)。 點(diǎn)無一定的大小和形狀，點(diǎn)的概念是相對(duì)的，是與周圍的視覺元素相比較而言的。只要與周圍其他造型要素共同比較時(shí)具有凝聚視覺的作用，都可以稱為點(diǎn)。點(diǎn)的判斷完全取決于它所在的空間的相互關(guān)系上面，越小的形體越能給人點(diǎn)的感覺，點(diǎn)的面積變大就成了面。 2.線 任何形態(tài)都可以通過線的界定而確定下來。因此在網(wǎng)頁設(shè)計(jì)中，線的布局安排主要體現(xiàn)在線的空間分割上。線的分割產(chǎn)生各種比例的面。在利用線進(jìn)行頁面分割時(shí)，既要考慮各形態(tài)元素彼此間支配的形狀，又要注意空間所具有的聯(lián)系，保證良好的視覺秩序感，這就要求被劃分的空間有相應(yīng)的主次關(guān)系、呼應(yīng)關(guān)系和形式關(guān)系，以此來獲得整體和諧的視覺空間。 網(wǎng)頁中的圖文在直線的空間分割下，會(huì)得到清晰、條理的秩序，同時(shí)求得統(tǒng)一和諧的因素。而通過不同比例的空間分割，頁面各空間將會(huì)產(chǎn)生對(duì)比與節(jié)奏感。 線框的限定使網(wǎng)頁中的動(dòng)感與情感獲得相應(yīng)的穩(wěn)定和規(guī)范。另外，線框細(xì)，版面則輕快而有彈性，當(dāng)線框加粗，圖像有被強(qiáng)調(diào)的感覺，同時(shí)誘導(dǎo)視覺注意；但若線框過粗，版面則變得穩(wěn)定、呆板、空間封閉。 線具有方向性、流動(dòng)性、延續(xù)性，因此在網(wǎng)頁設(shè)計(jì)中可以運(yùn)用重復(fù)、近似、漸變、對(duì)比、密集等構(gòu)成手法，將線進(jìn)行不同方式的排列組合，會(huì)產(chǎn)生很多具有奇妙效果的視覺形態(tài)。 3．面 視覺形態(tài)中，面是一種形，體現(xiàn)了充實(shí)、厚重和整體并穩(wěn)定的視覺效果。面除了有大小，還具有位置、形狀、擺放角度等特征，在版面中具有平衡、豐富空間層次，烘托及深化主題的作用。經(jīng)分割所產(chǎn)生的比例關(guān)系，是決定頁面均衡、協(xié)調(diào)的重要因素。網(wǎng)頁設(shè)計(jì)中要對(duì)面進(jìn)行多樣化處理，以避免重復(fù)、單調(diào)，做到相互襯托、相互呼應(yīng)。面分為幾何形和自由形兩大類。 五、小結(jié)： 同學(xué)們根據(jù)網(wǎng)頁設(shè)計(jì)的理念，修改duibi.html網(wǎng)頁，將網(wǎng)頁設(shè)計(jì)的構(gòu)成要素全部考慮在內(nèi)。 六、作業(yè)： 小組合作策劃網(wǎng)站主題，并繪出網(wǎng)頁設(shè)計(jì)圖紙 教學(xué)設(shè)計(jì)思想： 網(wǎng)頁作品的成敗取決于網(wǎng)頁的設(shè)計(jì)與制作，而網(wǎng)頁的設(shè)計(jì)是制作的前期規(guī)劃，所以很有必要將網(wǎng)頁設(shè)計(jì)的理念傳輸給同學(xué)們。作為網(wǎng)頁設(shè)計(jì)與制作的第一課時(shí)，重點(diǎn)則側(cè)重于設(shè)計(jì)，因?yàn)橥瑢W(xué)們都有上互聯(lián)網(wǎng)的經(jīng)歷，親身體驗(yàn)了網(wǎng)頁的功能，所以對(duì)于萬維網(wǎng)的基本結(jié)構(gòu)和網(wǎng)頁元素已有認(rèn)識(shí)，故而不必再展開學(xué)習(xí)。對(duì)于設(shè)計(jì)，我們當(dāng)然更多的是欣賞為主，但是一味的欣賞又會(huì)使我們的設(shè)計(jì)定格無思考，因而我采用探究式教學(xué)，讓學(xué)生在自己現(xiàn)有的水準(zhǔn)上去提升創(chuàng)意。為了抓住學(xué)生的眼球，此課件的首頁我用班級(jí)活動(dòng)照片做了點(diǎn)綴。另外網(wǎng)頁設(shè)計(jì)是一門集美工與技術(shù)于一身的交叉學(xué)科，一節(jié)課的時(shí)間學(xué)習(xí)是很有限的，所以著重從網(wǎng)頁元素的設(shè)計(jì)起始。