網(wǎng)頁設(shè)計藝術(shù)課件

網(wǎng)站網(wǎng)頁的基礎(chǔ)知識第一節(jié)網(wǎng)絡(luò)信息(information),已經(jīng)成為哲學、自然科學、技術(shù)科學和社會科學等各個領(lǐng)域所廣泛應(yīng)用的概念。隨著信息技術(shù)的發(fā)展，網(wǎng)絡(luò)成為人們共享信息的必然。建立網(wǎng)站也就是必然逝在必行。如何建好網(wǎng)站，如何建立有特色的網(wǎng)站將是我們這門課程所要講述的內(nèi)容。一、網(wǎng)絡(luò)的定義目前計算機網(wǎng)絡(luò)的比較公認的定義是：計算機網(wǎng)絡(luò)是指在網(wǎng)絡(luò)協(xié)議的控制下，通過通訊設(shè)備和線路來實現(xiàn)地理位置不同且具有獨立功能的多個計算機系統(tǒng)之間的連接，并通過網(wǎng)絡(luò)操作系統(tǒng)等網(wǎng)絡(luò)軟件來實現(xiàn)資源共享的系統(tǒng)。二、計算機網(wǎng)絡(luò)的定義和發(fā)展在20世紀50年代中期，許多系統(tǒng)都將地理上分散的多個終端通過通訊線路連接到一臺中心計算機上，這樣就是出現(xiàn)了計算機系統(tǒng)。隨著遠程終端的增多，在主機前增加了前端機，但是人們把計算機網(wǎng)絡(luò)定義為“以傳輸信息為目的的而連接起來，實現(xiàn)遠程信息處理或進一步達到資源共享的系統(tǒng)”，這就是網(wǎng)絡(luò)的趨形。20世紀70年代至80年代中期計算機網(wǎng)絡(luò)得到了迅速的發(fā)展。ISO在1984年頒布了OSI/RM。定義為新一代計算機網(wǎng)絡(luò)體系結(jié)構(gòu)的基礎(chǔ)，這七層模型分別為：物理層、鏈路層、網(wǎng)絡(luò)層、傳輸層、會話層、表示層、應(yīng)用層三、計算機網(wǎng)絡(luò)的分類計算機網(wǎng)絡(luò)分類方法多種多樣，常用的方法有：按網(wǎng)絡(luò)的拓撲結(jié)構(gòu)分類、按傳輸介質(zhì)分類、按速率的分類、按數(shù)據(jù)交換方式分類以及按網(wǎng)絡(luò)覆蓋的地理范圍分類。按照網(wǎng)絡(luò)覆蓋的地理位置范圍的大小分為：局域網(wǎng)，城域網(wǎng)，廣域網(wǎng)。我們通常說的上網(wǎng)是指廣域網(wǎng)。四、網(wǎng)絡(luò)的功能1數(shù)據(jù)通訊2資源共享第二節(jié)網(wǎng)站與網(wǎng)頁一、網(wǎng)站1、網(wǎng)站功能：網(wǎng)站是提供發(fā)布信息、收集信息的平臺。2、網(wǎng)站概念：簡單地說，網(wǎng)站是由網(wǎng)頁通過超級鏈接有機地集合而成，通過瀏覽器看到的畫面就是網(wǎng)頁。二、網(wǎng)站的分類從網(wǎng)站的目的將網(wǎng)站分為：企業(yè)網(wǎng)站；政府網(wǎng)站；專業(yè)網(wǎng)站；個人網(wǎng)站。三、網(wǎng)站的管理功能故障管理；計費管理；配置管理；性能管理；安全管理；站點信息管理。

對網(wǎng)絡(luò)的故障檢測和排除

記錄網(wǎng)絡(luò)資源實時計費

配置網(wǎng)絡(luò)優(yōu)化網(wǎng)絡(luò)

對通信效率評價

授權(quán)、訪問、加密機制管理

對信息的跟蹤確保完整可靠四、中國Internet概況CSNET中國科技網(wǎng)CERNET

中國教育網(wǎng)CHINANET

中國電信網(wǎng)CHINAGBN中國經(jīng)濟網(wǎng)UNINET中國聯(lián)通網(wǎng)中科院系統(tǒng)的12個分院和123個研究所(95年)中國公用計算機互聯(lián)網(wǎng)，即163、169原國家教委94年12月組織清華、北大等高校承建中國國家公用經(jīng)濟信息通信網(wǎng)（金橋網(wǎng)）中國聯(lián)通公司2000年Internet五、瀏覽器——Internet泛游之舟WWW采用客戶機/服務(wù)器系統(tǒng)。在客戶機方面（用戶）使用的程序叫做Web瀏覽器。服務(wù)器上則主要存放網(wǎng)頁文件，通常稱為Web站點或“Web網(wǎng)站”。在Web網(wǎng)站上除了Web網(wǎng)頁文件外，還有Web服務(wù)程序。Web服務(wù)器＋網(wǎng)頁文件＋IP地址＝Web網(wǎng)站1、網(wǎng)站成套網(wǎng)頁Web服務(wù)器瀏覽器客戶機六、IP地址正如每部電話必須有一個由郵電部門分配的唯一的電話號碼用戶才能與之通話一樣，IP地址相當于Internet系統(tǒng)的電話號碼。Internet將世界各地成千上萬個網(wǎng)絡(luò)互連起來，這些網(wǎng)絡(luò)上又各有許多計算機接入。為了使用戶上網(wǎng)后能從繁若星空的方便快捷地找到網(wǎng)上的某一臺主機，Internet采用所謂“IP地址”的方法，即為網(wǎng)上的每一個網(wǎng)絡(luò)和每臺提供服務(wù)的主機都分配一個網(wǎng)絡(luò)地址。這就是IP地址。對于因特網(wǎng)上的主機而言，這個地址是全球唯一的。IP地址為4個字節(jié)長，每個字節(jié)為一個小于256的十進制整數(shù)，字節(jié)間用點號分隔，形如：XXX.XXX.XXX.XXX。IP地址其結(jié)構(gòu)說明如下：計算機名.組織機構(gòu)名.網(wǎng)絡(luò)名.最高管理層名

【域名示例】J(安慶職業(yè)技術(shù)學院）

(中國國際互聯(lián)網(wǎng)）

(北京大學）

(清華大學）

(合肥工業(yè)大學）最高域名機構(gòu)名網(wǎng)絡(luò)名主機名或網(wǎng)站名注：許多網(wǎng)站喜歡用“WWW”作主機名，表示是一個Web網(wǎng)站七、IP地址分類1動態(tài)地址2靜態(tài)地址八、網(wǎng)址用戶通過WWW（萬維網(wǎng)）訪問Internet，是在瀏覽器（BROWSER）的“地址”處鍵入所謂“網(wǎng)址”，術(shù)語叫“URL”（UniformResourceLocator,統(tǒng)一資源定位器）。URL看起來可能很長很復(fù)雜，但它一般是由四個部分構(gòu)成的，即協(xié)議、主機名、文件夾名（目錄）和文件名。網(wǎng)址有兩種形式：IP地址與域名。安慶職業(yè)技術(shù)學院網(wǎng)址：

域名：IP地址：

精品課程的網(wǎng)址：

第三節(jié)網(wǎng)頁設(shè)計所謂“網(wǎng)頁”，實際上是以“圖文并茂”、“有聲有色”(多媒體)系列專欄形式向公眾展示各種信息的網(wǎng)絡(luò)“宣傳欄”。常用的設(shè)計軟件和工具有哪些呢？一、HTML語言超文本文件的格式早在1945年就由VannevarBush提出，他在理論上建立了一個超文本文件系統(tǒng)。1965年TedNelson第一次使用“超文本”一詞來形容這種管理信息的系統(tǒng)。與Bush一樣，他的超文本文件系統(tǒng)“Xanadu”，最終也未獲得成功。1967年，在IBM資助下，世界上第一個真正運行成功的“超文本編輯系統(tǒng)”建成，這項研究由AndriesVanDam主持，在美國布朗大學最終完成。1969年，美國國防部高級研究計劃署建立了ARPA網(wǎng)，該網(wǎng)絡(luò)最成功的技術(shù)就是TCP/IP協(xié)議。二、HTML發(fā)展歷史美國國防部高級研究計劃署建立了ARPA網(wǎng)，該網(wǎng)絡(luò)最成功的技術(shù)就是TCP/IP協(xié)議。1945196519671969發(fā)展史TedNelson第一次使用“超文本”一詞來形容這種管理信息的系統(tǒng)。失敗告終。在IBM資助下，世界上第一個真正運行成功的“超文本編輯系統(tǒng)”建成，這項研究由AndriesVanDam主持，在美國布朗大學最終完成VannevarBush提出，他在理論上建立了一個超文本文件系統(tǒng)。人們在通過INTERNET獲取信息的同時，紛紛建立自己的主頁和網(wǎng)站，向世界展示自己。一個網(wǎng)站可以包含一個或多個網(wǎng)頁，這些網(wǎng)頁以一定的方式連接在一起，成為一個整體。而一個成功的網(wǎng)站的建設(shè)離不開其中每一張制作精美的網(wǎng)頁。如何設(shè)計呢?三、網(wǎng)頁制作的工具雖然HTML語言是功能強且語法簡單的網(wǎng)頁設(shè)計語言。但是，直接用HTML在普通的文本編輯器上編寫制作復(fù)雜精美的網(wǎng)頁是很不方便的。網(wǎng)頁設(shè)計者不得不花大量的時間去測試所寫的文檔是否合乎其語法規(guī)則，又不能在網(wǎng)頁設(shè)計的同時就了解文檔在瀏覽器上地顯示的確切效果。其次要記憶、掌握大量的HTML語言地語法規(guī)則也不是一件容易的事情。而現(xiàn)在可視化網(wǎng)頁設(shè)計工具可以使得設(shè)計者網(wǎng)頁設(shè)計輕松自如。網(wǎng)頁設(shè)計的工具很多，當前流行的工具有：網(wǎng)頁制作的工具之一：Frontpage它是建立和管理專業(yè)網(wǎng)站的簡易工具，用戶可以精確地將網(wǎng)頁中的每一個元素放置在網(wǎng)頁地任意位置上；用戶可以自定義主題。它具有方便地數(shù)據(jù)庫管理功能，還能提供靈活的網(wǎng)頁發(fā)布工具。網(wǎng)頁制作的工具之二：Dreamweaver它是Macromedia公司設(shè)計推出，可以最快的方式將Photoshop等文件移至網(wǎng)頁；它能夠通過網(wǎng)站地地圖快速制作網(wǎng)站雛形、設(shè)計、更新和重組網(wǎng)頁；提供了可視化編輯與原代碼編輯同步的設(shè)計工具；集成了動態(tài)出版可視編輯及電子商務(wù)功能，在動態(tài)網(wǎng)頁設(shè)計中網(wǎng)頁的預(yù)覽無需通過瀏覽器；利用它設(shè)計的網(wǎng)頁一般不受平臺的限制。網(wǎng)頁制作的工具之三：Flash它能制作可任意放大的動畫，使用方便，它提供的交互動畫文件容量很小，它的使用流技術(shù)播放動畫。以上三種網(wǎng)頁設(shè)計工具通常稱為“網(wǎng)頁設(shè)計三劍客”。四、網(wǎng)頁設(shè)計早期的網(wǎng)頁外觀是靜態(tài)的，只有文字與靜態(tài)的圖片，用戶只能被動地閱讀網(wǎng)頁制作者提供的信息。其網(wǎng)頁的內(nèi)容也是靜態(tài)的，若無外來干預(yù)，其內(nèi)容不會自動改變，也無法通過網(wǎng)頁實現(xiàn)與訪問網(wǎng)頁者交互信息的功能。因此，為了克服靜態(tài)網(wǎng)頁的呆板、缺乏交互性等缺點，使網(wǎng)頁變得絢麗多彩、充滿互動性，動態(tài)網(wǎng)頁便應(yīng)運而生。動態(tài)網(wǎng)頁技術(shù)包括網(wǎng)頁的動態(tài)表現(xiàn)技術(shù)與網(wǎng)頁的動態(tài)內(nèi)容技術(shù)，前者是網(wǎng)頁外觀的動態(tài)表現(xiàn)技術(shù)，如GIF動畫、FLASH技術(shù)、DHTML（動態(tài)HTML）技術(shù)、VHTML（虛擬HTML）技術(shù)、VRML（虛擬實現(xiàn)造型語言）技術(shù)等。而網(wǎng)頁的動態(tài)內(nèi)容技術(shù)是通過一定的計算機語言編程如CGI、ASP、JSP等，使得計算機按照網(wǎng)頁設(shè)計者設(shè)置的網(wǎng)頁格式，生成所需要內(nèi)容的網(wǎng)頁并傳送給訪問網(wǎng)頁者瀏覽。

五、多媒體表現(xiàn)音頻與視頻隨著多媒體技術(shù)的發(fā)展，人們已經(jīng)不滿足簡單的文件傳輸，電子郵件，遠程登陸等網(wǎng)絡(luò)應(yīng)用。人們希望網(wǎng)絡(luò)提供實時交互的服務(wù)，如：視頻會議、視頻點播、遠程多媒體教學和網(wǎng)上購物等。音頻：通過計算機的聲卡等多媒體設(shè)備來實現(xiàn)聲音的傳輸和播放。一般有Wave波形音頻、MIDI音頻和CD音頻，MP3視頻：通過視頻采集和處理實現(xiàn)圖象的傳輸和播放。一般有AVI，MOV，MPEG等格式的文件。第四節(jié)實例介紹HTML語言的設(shè)計例1含有超文本標識的網(wǎng)頁源程序。

<HTML><HEAD><TITLE>含有超文本標識的網(wǎng)頁源程序</TITLE></HEAD><BODY><H2>讀書人的三個意境</H2><OL><LI>昨夜西風凋碧樹，獨上高樓，望盡天涯路。

<LI>衣帶漸寬終不悔，為伊消得人憔悴。

<LI>眾里尋她千百度，驀然回首，那人卻在燈火闌珊處。

</OL><MARQUEEbgcolor="#87CEFA"width=75%scrollamount=1>⒈昨夜西風凋碧樹，獨上高樓，望盡天涯路。</MARQUEE><MARQUEEbgcolor="#FFC900"behavior=alternate>⒉衣帶漸寬終不悔，為伊消得人憔悴。</MARQUEE><FONTsize="3"color="#FFFFFF"><MARQUEEbgcolor=“#FF4500”>⒊眾里尋她千百度，驀然回首，那人卻在燈火闌珊處。</MARQUEE></FONT></BODY></HTML>其效果例2、簡單的表單設(shè)計<formaction=/cgi-bin/post-querymethod=post>

您的姓名:<inputtype=textname=網(wǎng)址value=http://><br>

密碼:<inputtype=passwordname=密碼><br><inputtype=submitvalue="發(fā)送"><inputtype=resetvalue="重設(shè)"></form>其效果第五節(jié)網(wǎng)頁制作素質(zhì)和修養(yǎng)

網(wǎng)頁制作是一個系統(tǒng)工程，一個網(wǎng)頁的優(yōu)劣完全取決于設(shè)計者的綜合素質(zhì)和動機。不僅僅是一個技術(shù)的問題，還要重視藝術(shù)性。并且不可以偏廢。技術(shù)是基礎(chǔ)，藝術(shù)是升華，藝術(shù)效果表現(xiàn)用技術(shù)來實現(xiàn)。好的網(wǎng)頁讓人留戀往返。這不僅僅是技術(shù)的高超，而是藝術(shù)效果吸引了瀏覽者的眼球。所以這是一個綜合的系統(tǒng)的工程。第六節(jié)網(wǎng)站與網(wǎng)頁的關(guān)系網(wǎng)站是一個主體，是“框架”；網(wǎng)站突出一個主題；網(wǎng)站的目標是組織；網(wǎng)站好比一本畫冊。網(wǎng)頁是被包含于網(wǎng)站之中的個體，是“磚瓦”；網(wǎng)頁圍繞網(wǎng)站主題各分項，豐富和烘托主題；網(wǎng)頁的目標是表現(xiàn)；網(wǎng)頁好比畫冊中的每一個分頁。網(wǎng)站是爸媽，網(wǎng)頁是她們的孩子；爸爸媽媽的行為影響她的孩子，也是孩子成長的燈塔；她的孩子的優(yōu)秀也使得爸爸媽媽的榮光。沒有爸爸媽媽的孩子是無人問，沒有孩子的爸爸媽媽只能孤獨一生。第七節(jié)習題1、通常怎樣對網(wǎng)頁頁面分區(qū)？各分區(qū)應(yīng)放置什么內(nèi)容？2、網(wǎng)頁元素包括哪些？打開，指出其中包含的網(wǎng)頁元素請闡述網(wǎng)頁設(shè)計與平面設(shè)計的異同點。3、網(wǎng)頁與網(wǎng)站有何不同？請舉例說明。4、請從不同角度闡述網(wǎng)頁的功能。5、請分析一下網(wǎng)頁設(shè)計的基本要素和潛能。6、請闡述網(wǎng)頁設(shè)計與平面設(shè)計的異同點。7、網(wǎng)頁構(gòu)成的基本元素是什么？8、怎樣使網(wǎng)頁內(nèi)容更具合理性？9、說出自己熟悉的3個網(wǎng)頁，并試分析它的歸類。10、按照網(wǎng)頁的分類，自擬主題設(shè)計一幀頁面。第二章網(wǎng)頁賞析本講內(nèi)容第一節(jié)網(wǎng)頁設(shè)計概述1第二節(jié)網(wǎng)頁賞析要求2第三節(jié)網(wǎng)頁設(shè)計的心理需要3第四節(jié)網(wǎng)頁的組織設(shè)計要求4第五節(jié)網(wǎng)頁設(shè)計與網(wǎng)站主題5第七節(jié)實例說明網(wǎng)頁設(shè)計效果7第六節(jié)網(wǎng)頁突破性設(shè)計的要素6第一節(jié)網(wǎng)頁設(shè)計概述

網(wǎng)頁界面的構(gòu)成要素，除了有傳統(tǒng)媒體的文字、圖形、色彩等基本構(gòu)成要素以外，還有聲音、視頻、動畫等多媒體要素，以及其他一些特效和交互功能。正因為如此，對于網(wǎng)頁的賞析、評測也將是多角度、全方位的。雖說網(wǎng)頁界面設(shè)計與平面設(shè)計非常類似，但也存在著一個很大的差異，那就是網(wǎng)頁界面作品具有明確的實用功能，而一般的藝術(shù)作品只具單純性觀念。實際賞析和評測網(wǎng)頁界面作品的第一點，是看它是否具有完整的功能，其次才是它的藝術(shù)效果。優(yōu)秀的網(wǎng)頁界面作品應(yīng)該是實用的物質(zhì)功能與審美的精神功能完美的結(jié)合。

每一個人由于經(jīng)歷、經(jīng)驗、思維方式的不同，對事物的看法、認識常常也是不一樣的。網(wǎng)絡(luò)的基本特征是資源共享，互聯(lián)網(wǎng)是大眾化的網(wǎng)絡(luò)，是“平民”網(wǎng)。雖然為了追求較完美的界面設(shè)計，我們在后面章節(jié)將從較專業(yè)的角度做了一些探討，但是為了使“平民”能夠接受，能夠認同，網(wǎng)頁的界面設(shè)計應(yīng)該貼近大眾，應(yīng)該服務(wù)于大眾。這就要求我們站在一般瀏覽者的角度，去設(shè)計、審視、理解網(wǎng)頁作品?！捌矫瘛睕]有理解達芬奇蒙娜麗莎的微笑,但心里知道蒙娜麗莎時時刻刻都有淡淡幸福，能給人們帶來無限的快樂。第二節(jié)網(wǎng)頁賞析要求1、網(wǎng)頁是一曲優(yōu)美詩詞：有的如十七八女子，蘊藉含蓄，體現(xiàn)陰柔之美；有的嚴肅、莊重，給人一種“生當作人杰，死亦為鬼雄”的豪情；有的迎合社會時尚或是社會的需求，發(fā)展時尚空間；有的另辟蹊徑，巧奪天公，在紛繁復(fù)雜的市場中吸引了更多人的注意；形式多樣，沒有辦法一一列舉。給我們網(wǎng)絡(luò)生活帶來了空前的發(fā)展，讓人們感受到了虛擬空間的現(xiàn)實化；讓人們能夠體會網(wǎng)絡(luò)時代的快捷、方便；讓人們在工作中享受了網(wǎng)絡(luò)藝術(shù)給心靈的愉悅；也能讓人們對現(xiàn)實生活有些厭倦的時候，網(wǎng)絡(luò)給這些人們提供了一種良好的精神生活的填補，讓人們在虛擬的藝術(shù)殿堂，尋找犒以精神的慰藉。2、網(wǎng)頁是一首贊歌：在點擊中吟誦，憧憬美好的未來。笑談人生。3、網(wǎng)頁是一段生活：品味人生，感受經(jīng)歷。4、網(wǎng)頁是美妙的音樂：聆聽創(chuàng)作者的心語，享受樂章的起伏，感受與作者心靈間的撞擊，難道不能說是進入了世外桃源的仙境？

不同的環(huán)境不同的心情看到相同的網(wǎng)頁都有不同的理解，給人的感受肯定也是不一樣的。所以賞析無定規(guī)，只看自已認同，用自己的認識水平去理解。第三節(jié)網(wǎng)頁設(shè)計的心理需要

紛繁復(fù)雜的社會造就了五彩繽紛的網(wǎng)頁。形態(tài)各異的網(wǎng)頁最終誰能夠占領(lǐng)市場，其相關(guān)的要素很多。但是與網(wǎng)頁的設(shè)計界面關(guān)系是不可以忽視的。一個網(wǎng)頁的頁面設(shè)計完美，震撼，給人們心靈的觸動，必然會在市場中有很高的點擊率。如何設(shè)計點擊率高的網(wǎng)頁，我們應(yīng)該從心理學的角度來考慮網(wǎng)頁的設(shè)計方案和組織。

心理學中說到“注意”是人的心理對一定對象的選擇集中。紛繁復(fù)雜的世界，有限的人腦只能在眾多的事物中挑選某些特定的對象或說事物來進行反映，而不管其他的事物。所以說“注意”是貫穿心理活動的始終。所以我們經(jīng)常說“心無二用”就是這個道理。網(wǎng)頁設(shè)計也是一樣，要使得人們?nèi)c擊，必須設(shè)計出合乎人的心理的網(wǎng)頁界面。《大學》中有句：心不在焉，視而不見，聽而不聞，食而不知其味。第四節(jié)網(wǎng)頁的組織設(shè)計要求【1】有強烈的刺激：一道強光，一聲巨響，一種鮮艷的顏色等，這些都會引起人們的注意；【2】有引人入勝的興趣：凡能滿足人的需要，符合人的直接興趣的事物，都容易引起人的注意。象球訊能引起球迷的注意，音樂廣告可以被音樂愛好者的注意，有知識性的信息會給渴望得到的人的注意。有興趣的話題，就會吸引相應(yīng)的人群?！?】有巧妙的創(chuàng)意：創(chuàng)意給人震撼，一種心靈的觸動，讓人們有如聽小說“欲說后事如何，且聽下回分解”，“余音繞梁，三日未絕”，給人期待和想象。

總之，在設(shè)計網(wǎng)頁之前，必須了解訪問者的心理，需要了解訪問者的瀏覽網(wǎng)頁的感受，了解他們的耐心程度、年齡和性別，并了解他們?yōu)g覽站點是為了娛樂、信息還是其他，這會給建立站點時確定色調(diào)和個性起到了十分重要的作用和決定性的影響。所以如果要想在眾多競爭對手中脫穎而出，在設(shè)計時要綜合考慮眾多因素：從技術(shù)角度看要盡量減少帶寬消耗因素，使網(wǎng)站去蕪存精，刪除不必要的細枝末節(jié)，讓低速訪問者也能得到較為理想的訪問速度；從訪問者的角度看要適當加入聲音和視頻等多媒體內(nèi)容，做到有聲有色，花開有聲。第五節(jié)網(wǎng)頁設(shè)計與網(wǎng)站主題

網(wǎng)頁設(shè)計與網(wǎng)站主題之間的關(guān)系歸納起來有如下三點：1第一、設(shè)計應(yīng)滿足主題的要求，應(yīng)該為主題服務(wù)；2第二、設(shè)計使藝術(shù)和技術(shù)交融，應(yīng)該是藝術(shù)和技術(shù)的完美結(jié)合。就是說，在保證“美”的前提下，不喪失網(wǎng)站的“功能”；3第三、是“美”，還是“功能”，都是為了更好地表達網(wǎng)站的主題思想。

總之，網(wǎng)頁設(shè)計的優(yōu)秀與否，取決于設(shè)計師對主題的理解與掌握程度，好的頁面設(shè)計肯定是服從于網(wǎng)站主題，鮮明地突出網(wǎng)站的訴求主題。要使網(wǎng)頁從形式上獲得良好的誘導(dǎo)力，可以通過對網(wǎng)頁的空間層次、主從關(guān)系、視覺秩序以及彼此之間的邏輯性來把握運用。第六節(jié)網(wǎng)頁突破性設(shè)計的要素主題合理的結(jié)構(gòu)創(chuàng)新的設(shè)計藝術(shù)性色彩1、主題鮮明:網(wǎng)頁設(shè)計的優(yōu)秀與否取決于設(shè)計者對主題的理解和把握程度，好的網(wǎng)頁肯定服從于網(wǎng)站的主題，鮮明地突出網(wǎng)站的訴求主題。網(wǎng)頁沒有表達網(wǎng)站的主題就好象癡人說夢。沒有邏輯，沒有條理性，無意義可談。2、藝術(shù)性色彩:色彩是自然美、生活美、藝術(shù)美的重要組成部分。它代表著情感（綠色代表生命，紅色代表熱情，白色代表純潔，藍色代表深邃），代表著生活。沒有色彩的世界是死寂而平淡的。在主題明確的前提下，網(wǎng)頁可以用豐富的色彩來烘托主題，讓瀏覽者耳目一新的感覺。給人清新，如坐春風，吃人生果，讓人感覺身上三萬六千個毛孔都滲透著激情。但多變的色彩不要干擾了瀏覽者的易讀，不可以濃妝艷抹，脫離主題。3、合理的結(jié)構(gòu)：網(wǎng)頁是傳播信息的載體，其結(jié)構(gòu)由各種視聽要素組成，以滿足人們實際的目標而設(shè)計。從整體結(jié)構(gòu)上看其合理性，形式上豐富有條理，組織上有秩序，不單調(diào)，不混亂。4、創(chuàng)新的設(shè)計：網(wǎng)頁設(shè)計最終能否有突破，其根本在于設(shè)計師的創(chuàng)新性，以及于這種創(chuàng)新性相互應(yīng)的藝術(shù)和技術(shù)的完美結(jié)合。

總之，欣賞、評析一幅網(wǎng)頁作品可以從主題的鮮明性、獨創(chuàng)性、結(jié)構(gòu)的合理性、色彩的藝術(shù)性以及內(nèi)容的針對性。最根本的是不能偏離主題，只有保證在正確的方向的前提下才能創(chuàng)新設(shè)計、合理布局、“涂脂抹粉”、才能獲得有效設(shè)計；否則，偏離主題的設(shè)計再好也只能“束之高閣”。第七節(jié)實例說明網(wǎng)頁設(shè)計效果我們還是用實例來說明吧！我們還是用實例來說明吧！北京2008奧運會

白色底為，表示純潔，競爭的公平；紅色加強了喜慶味和中國味。設(shè)計師大膽地采用了純度較高、對比強烈的顏色組合，造就了網(wǎng)站的生動活潑的個性。百度網(wǎng)站

無論從信息的流量還是業(yè)務(wù)范圍講，都稱得上搜索引擎類網(wǎng)站中的佼佼者。她簡潔明快的設(shè)計給人們提供了一個舒適的搜索空間，而且在諸多領(lǐng)域中的業(yè)務(wù)拓展，也贏得了廣大用戶的信任。這是主題和功能。在界面設(shè)計中使用全白色，醒目的徽標“百度”特別顯眼。無形中給人們帶到了一個廣袤無邊的宇宙空間，享受“眾里尋她千百度，驀然回首，那人卻在燈火闌珊處”的美好意境。WWW.HAO123.COM

百度是以“簡約”著稱。而HAO123卻象是一個“大賣場”，沒有奢華的色彩，沒有精品店裝飾的奪目耀眼。但是她強化了功能性的細分類，分設(shè)了新聞、科技、音樂、文學、電子商務(wù)、下載等等，并根據(jù)你的查詢提供搜索，可謂方便之極。你能不說她是真正好網(wǎng)站嗎？Pixar動畫制作室這是著名的Pixar動畫制作室的作品，Pixar動畫制作室運用藝術(shù)技巧在計算機動畫領(lǐng)域創(chuàng)造性地制作出了許多獨特新穎的動畫巨片，它創(chuàng)造的動畫常常能出其不意，又貼近生活，感染力極強。

中國故宮博物院

故宮的網(wǎng)頁設(shè)計凝重，有厚實的文化。給人有歷史的感覺。讓人遐想皇宮的生活，來點擊觀看這段歷史的希望。它采用了朱紅的色系，用有很多鉚釘?shù)拇箝T作背景，加上五爪金龍作近景，更加給人向往和森嚴感。打開門之后，又給人有種清新的感覺，又有歷史不陳舊味。中國黑客聯(lián)盟

中國黑客聯(lián)盟網(wǎng)站大量使用了黑色為底色，用蘭色的粗體大字來突顯站名，又用了反差較大的黃色很小的字“進入主站”來提示“站門”的所在，象遙遠處忽明忽暗燈塔還是幽靈的晃動？用色簡單質(zhì)樸，給人的感覺是怎樣呢？是威嚴還是恐怖？是進入了天堂還是地獄？進去吧，結(jié)果誰能知道呢？向往還是恐懼？這正是黑客的行為心理，突出了主題元素，表現(xiàn)得淋漓盡致。是不是還有點“未經(jīng)一番寒徹骨，焉得梅花撲鼻香”的感覺呢？柯達相機的廣告（1）豪放而不失風情。（2）驚心駭目，強烈的震撼。（3）色彩掩蓋不了它的豪邁氣派。氣象境界凌厲無前。（4）感嘆大聲鏗鏘，哪里還需要銅琵琶、鐵綽板來伴唱呢？此時的無聲勝有聲，花開有聲了。

百威啤酒作為啤酒生產(chǎn)商，百威網(wǎng)站的設(shè)計側(cè)重于文化，優(yōu)美的意境與情趣的追求。瀏覽者可以在這里領(lǐng)略到美與啤酒文化的完美結(jié)合。設(shè)計的顏色如同典雅、高貴、高品位的酒吧陳列柜，陳列了不同品種的啤酒，讓點擊者總能找到適合你的口味的百威啤酒。發(fā)揮藝術(shù)的感染力，讓人們不禁垂涎三尺，當然網(wǎng)站的客戶也就門庭若市。游戲

網(wǎng)站的用色豐富，非常講究，充滿了神秘之感。圖形和文字處理不落俗套，精細入微，三維立體感特別強烈，有穩(wěn)于泰山之勢，勝者為王的非凡氣度。游戲的賽場區(qū)域有很重的金屬氣息。這種設(shè)計為網(wǎng)站平添了幾分神秘的氣息?？偨Y(jié)主題合理的結(jié)構(gòu)創(chuàng)新的設(shè)計藝術(shù)性色彩總結(jié)在實際應(yīng)用中網(wǎng)頁應(yīng)當在滿足完成功能的前提下才能講究藝術(shù)，如果一幀頁面無法完成其基本的表現(xiàn)或操作功能，則這樣的頁面再“美”也是無用的，因為網(wǎng)頁的藝術(shù)性、欣賞性是服務(wù)于功能的。了解了網(wǎng)頁界面的設(shè)計技術(shù)和方法，并將其融入自己的思想，消化理解，構(gòu)成自己認識世界、認識設(shè)計的較完整的思維理念，才能有根有據(jù)、有憑有證，由里及表、由表及里地評測、鑒賞和判斷設(shè)計作品的優(yōu)劣。習題1.怎樣保證網(wǎng)頁界面設(shè)計主題的鮮明性？2.判斷網(wǎng)頁界面設(shè)計創(chuàng)新性的根本是什么？3.從哪些方面判斷網(wǎng)頁界面設(shè)計結(jié)構(gòu)的合理性？4.網(wǎng)頁界面設(shè)計使用色彩的作用是什么？色彩主要用來完成哪些工作？5.請舉例說明網(wǎng)頁界面設(shè)計中內(nèi)容與形式的關(guān)系。6.根據(jù)你的理解，綜述一下網(wǎng)頁賞析的要點。7.打開互聯(lián)網(wǎng)，選擇一個網(wǎng)站，根據(jù)所學知識分析、評測之。

第三章網(wǎng)頁的規(guī)劃與布局本講內(nèi)容一、網(wǎng)頁組織結(jié)構(gòu)1二、網(wǎng)頁內(nèi)容組織2三、網(wǎng)頁設(shè)計流程3四、網(wǎng)站規(guī)劃與建設(shè)6第一節(jié)網(wǎng)頁的組織結(jié)構(gòu)1、綜述網(wǎng)頁的內(nèi)容和組織取決于網(wǎng)站的主題和定位。確定了網(wǎng)站的定位和模式，就可以對網(wǎng)頁的內(nèi)容進行組織、規(guī)劃和布局。2、首頁的結(jié)構(gòu)首頁(又稱主頁)是網(wǎng)站的臉面,是企業(yè)、商家或政府機構(gòu)等形象代表。首頁一般包含主題、徽標、企業(yè)精神、經(jīng)營理念、旗幟廣告、首頁鏈接、最新報道、聯(lián)系方式、招賢納士和欄目簡介等。首頁應(yīng)視一件藝術(shù)品，精雕細琢，供瀏覽者欣賞和享用。特別注意不應(yīng)該放廣告，特別不能放很多。不應(yīng)虎頭蛇尾。不要機關(guān)重重。3、一般頁面的結(jié)構(gòu)一般頁面也稱子頁面，其結(jié)構(gòu)往往是依據(jù)要表現(xiàn)的內(nèi)容而定，形式比較單一。頁面的主題突出，取向性強，主要用于描述同一類事情，如圖片或文字，其表現(xiàn)力可以弱于首頁，但是風格、模式和色彩上應(yīng)與首頁保持一致。4、網(wǎng)站頁面的組織結(jié)構(gòu)頁面的內(nèi)容取決于網(wǎng)站的類型,而網(wǎng)站又是由一幀幀的頁面有機組合而成。網(wǎng)站除了內(nèi)容豐富、可讀性強以外，在內(nèi)容的組織上應(yīng)該做到層次分明、嚴謹清晰。一般來說，設(shè)計網(wǎng)站常常采用順序結(jié)構(gòu)、層次結(jié)構(gòu)、網(wǎng)狀結(jié)構(gòu)或復(fù)合結(jié)構(gòu)來組織頁面。1順序結(jié)構(gòu)它適合組織一些順序性較強的頁面內(nèi)容，如電子圖書，產(chǎn)品描述等，只需要簡單地按照一定的順序瀏覽即可，這樣的結(jié)構(gòu)很象幻燈片的演示。X1.HTM

X2.HTMX3.HTM2層次結(jié)構(gòu)是最基本的一種網(wǎng)頁組織形式。其優(yōu)點是前后順序清楚，關(guān)系明確。每一個頁面在水平方向有極為密切的上下級關(guān)系，在豎直方向上具有并列關(guān)系。X1.htmlX6.htmlX4.htmlX5.htmlX2.htmlX3.htmlX7.html3網(wǎng)狀結(jié)構(gòu)是網(wǎng)頁之間連接靈活，是一種較為人性化的設(shè)計。X1.htmlX6.htmlX4.htmlX5.htmlX2.htmlX3.htmlX7.html4復(fù)合結(jié)構(gòu)在網(wǎng)頁設(shè)計中頁面之間的組織結(jié)構(gòu)通常是不會采用以上單一的結(jié)構(gòu)。而是使用兩種或兩種以上的結(jié)構(gòu)，稱為復(fù)合結(jié)構(gòu)。第二節(jié)網(wǎng)頁內(nèi)容組織3.2.1綜述建設(shè)網(wǎng)站的第一步是收集資料，分門別類，將這些素材合理地分配到由超級連接組織的不同的網(wǎng)頁中，使得自己的網(wǎng)頁能夠吸引眾多的瀏覽者，網(wǎng)頁的內(nèi)容的有效組織是必不可少的。網(wǎng)站的內(nèi)容豐富，信息量大，應(yīng)該運用一定的方式將其條理化，同時在一定程度上加以歸納重復(fù)利用，使得網(wǎng)頁較為整齊，脈絡(luò)清晰，重點突出。3.2.2組織網(wǎng)頁的方法1.突出個性：要使所設(shè)計的網(wǎng)頁內(nèi)容獨特、個性鮮明，在網(wǎng)頁的設(shè)計初期要仔細斟酌每一幀網(wǎng)頁的性質(zhì)，突出本頁面的核心內(nèi)容。2.具有可讀性：每個網(wǎng)頁的內(nèi)容要精練，避免長篇累贅；背景顏色不可以太艷，背景圖案不可以花哨，不能喧賓奪主，要與正文適當?shù)拇钆洌子陂喿x。3.完整性強：應(yīng)當盡量把聯(lián)系緊密的內(nèi)容放在同一幀頁面中，使得每一幀的內(nèi)容相對較為獨立，具有較好的完整性。4.布局合理：網(wǎng)頁設(shè)計作為一種視覺語言，必定要講究編排和布局，雖然網(wǎng)頁設(shè)計不同平面設(shè)計，但是兩者有許多相近之處，可以充分加以利用和借鑒。網(wǎng)頁設(shè)計通過文字、圖片的恰當組合，表達和諧與美，使得整體布局合理、有序，做到既豐富多樣又簡潔明了?？梢酝ㄟ^視覺要素的理性分析和嚴格的形式構(gòu)成，來提高對整體頁面的把握能力和審美能力，使得頁面達到最佳的視覺表現(xiàn)效果，較完美地體現(xiàn)設(shè)計者的思想和本頁面的主題。5.重要信息放置在首頁：眼睛是心靈的窗戶。我們把報紙的最顯眼的地方稱報眼報紙的眼睛。網(wǎng)頁也是一樣有最顯眼的地方此處也是應(yīng)該較為重要的或是最新的內(nèi)容的放在主要的地方?？梢酝ㄟ^導(dǎo)航欄或?qū)⒅攸c信息、論點等置于頁面的醒目位置，還可以通過彈出窗口來發(fā)布重要要信息。3.2.3內(nèi)容組織原則11。建立秩序22。中心突出33。相互呼應(yīng)44。清晰易讀首先將頁面含蓋內(nèi)容的整體布局的需要進行分組歸納，進行內(nèi)在聯(lián)系的組織排列，反復(fù)推敲標題圖形與整體版面的關(guān)系，創(chuàng)造秩序使版面各元素成為豐富多彩而簡潔統(tǒng)一整體當許多構(gòu)成元素位于一個頁面時，必須考慮瀏覽者的視覺中心，中心一般放在屏幕的中央，或在中間偏上的部位。這樣可以突出重點，做到主次有別較長的文章或標題，不要編排在一起，要注意安排一定的距離。對待圖片的安排也是，要互相錯開，大小之間要有一定的間隔，這樣可以使頁面錯落有致，避免重心偏離形成不穩(wěn)定形態(tài)。頁面有很多內(nèi)容的時候很忌諱混亂，各部分內(nèi)容各自為政、跨度太大，這樣消弱了整體的可讀性，讓人抓不住核心內(nèi)容。3.2.4內(nèi)容組織建設(shè)網(wǎng)站的第一步是收集資料，怎樣分門別類，將這些素材合理地分配到由超鏈接組織起來的不同網(wǎng)頁中，使自己的網(wǎng)頁能吸引眾多的瀏覽者，網(wǎng)頁內(nèi)容的有效組織是必不可少的。網(wǎng)站內(nèi)容豐富，信息含量大，應(yīng)該運用一定的方式將其條理化，同時在一定程度上加以歸納后重復(fù)利用，使網(wǎng)頁較為整齊，脈絡(luò)清楚，讀起來也有重點。如文字的合理編排，圖片和文字的有機結(jié)合、前后呼應(yīng)等等。內(nèi)容較少的網(wǎng)站雖說同樣需要條理化，以達到更為富有變化和清晰的視覺效果，但相對于前者的難度將大為降低。只要安排合理，使頁面達到平衡，即使在頁面某處大面積留空，也不會使人感到空蕩，相反會給瀏覽者留下一個廣闊的思考空間，耐人回味。11。組織的內(nèi)容確實對瀏覽者有用，確實圍繞所定義的目標和所定向的群體，不要大而全覆蓋面過廣；22。內(nèi)容有特色，有自己的獨到見解，盡量避免平淡乏味；33。所提供的內(nèi)容、超鏈接等要保證正確無誤，設(shè)計完成之后一定要認真測試。3.3網(wǎng)頁設(shè)計流程

確定目標和風格內(nèi)容組織網(wǎng)頁制作

反饋、評測發(fā)布、推廣測試

3.3.1網(wǎng)頁目標和風格網(wǎng)站包含著眾多內(nèi)容各異，錯綜復(fù)雜的網(wǎng)頁，這些網(wǎng)頁的內(nèi)容組織，材料收集和處理工作通?？梢詮膬蓚€方面入手。一是根據(jù)所需發(fā)布的信息確定主題，每個主題由專人負責收集相關(guān)資料和內(nèi)容。二是組織、精選一些能突出本網(wǎng)頁特色的內(nèi)容，烘托和突出主題，使本頁面與網(wǎng)站其他網(wǎng)頁有明顯的不同。

3.3.2內(nèi)容組織建設(shè)網(wǎng)站的第一步是收集資料，怎樣分門別類，將這些素材合理地分配到由超鏈接組織起來的不同網(wǎng)頁中，使自己的網(wǎng)頁能吸引眾多的瀏覽者，網(wǎng)頁內(nèi)容的有效組織是必不可少的。網(wǎng)站內(nèi)容豐富，信息含量大，應(yīng)該運用一定的方式將其條理化，同時在一定程度上加以歸納后重復(fù)利用，使網(wǎng)頁較為整齊，脈絡(luò)清楚，讀起來也有重點。如文字的合理編排，圖片和文字的有機結(jié)合、前后呼應(yīng)等等。內(nèi)容較少的網(wǎng)站雖說同樣需要條理化，以達到更為富有變化和清晰的視覺效果，但相對于前者的難度將大為降低。只要安排合理，使頁面達到平衡，即使在頁面某處大面積留空，也不會使人感到空蕩，相反會給瀏覽者留下一個廣闊的思考空間，耐人回味。3.3.3網(wǎng)頁制作網(wǎng)站包含著眾多內(nèi)容各異，錯綜復(fù)雜的網(wǎng)頁，這些網(wǎng)頁的內(nèi)容組織，材料收集和處理工作通?？梢詮膬蓚€方面入手。一是根據(jù)所需發(fā)布的信息確定主題，每個主題由專人負責收集相關(guān)資料和內(nèi)容。二是組織、精選一些能突出本網(wǎng)頁特色的內(nèi)容，烘托和突出主題，使本頁面與網(wǎng)站其他網(wǎng)頁有明顯的不同。除了突出主題，形成特色以外，還應(yīng)該調(diào)查用戶群的需求，通過了解他們的興趣愛好、關(guān)心話題、反饋意見，不斷地調(diào)整和修改網(wǎng)頁內(nèi)容，以求吸引更多的瀏覽者。3.3.4網(wǎng)頁內(nèi)容的組織、整理遵從原則

11。組織的內(nèi)容確實對瀏覽者有用，確實圍繞所定義的目標和所定向的群體，不要大而全覆蓋面過廣；22。內(nèi)容有特色，有自己的獨到見解，盡量避免平淡乏味；33。所提供的內(nèi)容、超鏈接等要保證正確無誤，設(shè)計完成之后一定要認真測試3.3.5測試當所有網(wǎng)站頁面制作完成之后，我們需要對每一幀頁面進行審查和測試，測試內(nèi)容主要包括功能性測試和完整性測試兩個方面。所謂功能性測試就是要保證網(wǎng)頁的可用性，是否達到最初的設(shè)計目標和所要表達的內(nèi)容，實現(xiàn)所規(guī)定的功能；瀏覽者是否可以方便、快速地尋找到所需要的內(nèi)容。完整性測試就是保證頁面內(nèi)容顯示正確，鏈接準確無誤，無差錯無遺漏。3.3.6發(fā)布、推廣整個網(wǎng)站設(shè)計、測試完成以后，就可以去尋找ISP(InternetServiceProvider，互聯(lián)網(wǎng)服務(wù)提供商)，將網(wǎng)站的所有內(nèi)容上載到互聯(lián)網(wǎng)上。發(fā)布網(wǎng)站的方案有多種，其中主要采用三種方案：①虛擬主機；②主機托管；③主機租用。在選擇ISP時，最好還能了解ISP具有的服務(wù)能力和服務(wù)環(huán)境等內(nèi)容，如：⑴服務(wù)器的硬件配置(包括服務(wù)器的類型、CPU、硬盤速度、內(nèi)存大小、網(wǎng)卡速度等)⑵服務(wù)器所在的網(wǎng)內(nèi)環(huán)境與速度⑶服務(wù)器所在的網(wǎng)絡(luò)環(huán)境與Internet骨干網(wǎng)相聯(lián)的速率⑷ChinaNet的國際出口速率⑸ISP與ChinaNet之間的專線速率⑹ISP向客戶端開放的端口接入速率⑺用戶自己的計算機配置、Modem的速率、接入線路的質(zhì)量等上載后的網(wǎng)站往往希望大量的瀏覽者訪問，提高自身的知名度，提升網(wǎng)站所有者的形象。我們可以嘗試使用以下方法：⑴利用傳統(tǒng)媒體(如廣告、公關(guān)文檔、促售宣傳等)；⑵像對待商標一樣，將網(wǎng)址印制在商品的包裝和宣傳品上；⑶與其他網(wǎng)站交換鏈接或購買其他網(wǎng)站的圖標廣告；⑷向互聯(lián)網(wǎng)的搜索引擎網(wǎng)站提交本站點的網(wǎng)址和關(guān)鍵詞；⑸在主頁面的原代碼中，使用META、TITLE標識加入網(wǎng)站的關(guān)鍵詞，以利識別檢索；⑹向訪問率較高的導(dǎo)航網(wǎng)站，如雅虎、搜虎等注冊；⑺通過在網(wǎng)站上設(shè)立有獎競賽的方式，提高點擊率。3.3.7反饋、評測網(wǎng)頁設(shè)計的優(yōu)劣是通過瀏覽者的認可而得出的，我們可以使用計數(shù)器、計時器、留言板、調(diào)查表以及有獎問答等形式收集數(shù)據(jù)，分析網(wǎng)站或某個網(wǎng)頁被訪問的次數(shù)或瀏覽者停留的時間，評測網(wǎng)頁的設(shè)計或內(nèi)容的新穎程度。設(shè)計出達到用戶目的的網(wǎng)頁，吸引盡可能多的人參觀訪問是一個值得研究的課題材。一定要注重信息的調(diào)整、更新和修改，使網(wǎng)頁內(nèi)容始終處于一個不斷發(fā)展，日趨完善的動態(tài)環(huán)境中。能夠吸引大量的瀏覽者訪問網(wǎng)站只是成功的一半，若以新奇的版式、獨特的內(nèi)容和服務(wù)使瀏覽者再度來訪，或向其他人介紹網(wǎng)址，宣傳網(wǎng)站的內(nèi)容，才可能是真正的成功。3.3.8網(wǎng)頁設(shè)計中應(yīng)注意的問題1、有計劃分階段實施2、網(wǎng)頁內(nèi)容組織清晰3、鏈接要少而精、易于漫游4、適當加入多媒體5、網(wǎng)頁內(nèi)容需要不斷動態(tài)更新6、網(wǎng)頁色彩適宜主題7、明確標示瀏覽者瀏覽位置3.4網(wǎng)站的規(guī)劃與建設(shè)1：網(wǎng)站的規(guī)劃網(wǎng)站的主要功能是提供發(fā)布信息、收集信息的平臺。因此，根據(jù)網(wǎng)站的主要內(nèi)容及網(wǎng)站的目的將網(wǎng)站分為：企業(yè)網(wǎng)站（是以宣傳企業(yè)形象、擴大企業(yè)影響、樹立行業(yè)品牌、瞄準目標市場、突出產(chǎn)品特點、開發(fā)潛在的客戶、增強服務(wù)品位、完善服務(wù)體系、維系客戶基礎(chǔ)為目的）、政府網(wǎng)站（是以宣傳政府法令、法規(guī)為目的）、專業(yè)信息網(wǎng)站（是以提供某一專業(yè)信息作為網(wǎng)站內(nèi)容）、商業(yè)網(wǎng)站（是提供商業(yè)服務(wù)為目的，提供買賣雙方的商務(wù)咨詢、洽談、網(wǎng)上訂購和支付等服務(wù)）、個人網(wǎng)站（是以宣傳個人為主要的目的，也提供某一方面的信息或資料）。網(wǎng)站規(guī)劃將圍繞各自的目標研究制作各自的解決方案主要表現(xiàn)在如下各個方面：服務(wù)對象規(guī)劃、目標規(guī)劃、開發(fā)目標規(guī)劃、網(wǎng)站應(yīng)用規(guī)劃、系統(tǒng)實現(xiàn)規(guī)劃2：服務(wù)對象規(guī)劃深入服務(wù)對象，確保服務(wù)對象的需求；3：目標規(guī)劃它是進行網(wǎng)站系統(tǒng)創(chuàng)建的動力，它涉及服務(wù)分類、用戶分類、安全分類等；4：開發(fā)目標規(guī)劃是對實現(xiàn)整個目標所做出的總體實施細則和詳盡的開發(fā)說明；5：網(wǎng)站應(yīng)用規(guī)劃它是指網(wǎng)站向用戶提供的服務(wù)范圍，它涉及對用戶所提供的服務(wù)和對系統(tǒng)開發(fā)人員提供的服務(wù)；6：系統(tǒng)實現(xiàn)規(guī)劃確定網(wǎng)站所需開發(fā)時間和所需的計算機硬件條件。3.5網(wǎng)站設(shè)計1.設(shè)計步驟【1】對用戶的需求進行分析并確定系統(tǒng)目標【2】建立基礎(chǔ)網(wǎng)絡(luò)。涉及主干網(wǎng)、互聯(lián)、網(wǎng)速、吞吐量和性能等【3】選擇網(wǎng)絡(luò)操作系統(tǒng)及軟件配置。協(xié)議和數(shù)據(jù)庫平臺【4】提供INTERNET服務(wù)主機上安裝服務(wù)軟件【5】選擇主頁制作工具，實現(xiàn)WEB與數(shù)據(jù)庫的連接【6】實現(xiàn)與INTERNET的連接。即建立網(wǎng)上環(huán)境，目前有三種方案：虛擬主機，服務(wù)器托管、專線接入。【7】完善網(wǎng)站功能2、站點規(guī)劃：站點欄目的規(guī)劃：建設(shè)此網(wǎng)站是為了構(gòu)架一個為企業(yè)或者某機構(gòu)交流和管理的平臺，經(jīng)過與最終的用戶的討論達成一致：要求建立哪些欄目等做出相應(yīng)詳細的規(guī)劃。網(wǎng)站頁面尺寸的規(guī)劃：網(wǎng)站主要內(nèi)容呈現(xiàn)區(qū)域規(guī)劃在右邊，占整個版面的三分之二，接近0.618的黃金比。頁面左上角根據(jù)用戶體驗理念放置公司的標志，加深留給訪問者的印象。通過設(shè)計初稿確定版面的尺寸為多少，主要動態(tài)內(nèi)容呈現(xiàn)區(qū)域為多少等細節(jié)。規(guī)劃色調(diào)：網(wǎng)站選用哪種為主要色調(diào)，要求穩(wěn)重還是活潑。從各種因素來考慮用色，如何就用色來達到親和力。在背景中用色要與頁面達成對比。頁面動態(tài)的規(guī)劃：在開始Flash制作之前，應(yīng)先在圖形制作軟件中設(shè)計出頁面的最初形態(tài)，根據(jù)此來規(guī)劃頁面元素的運動路徑、運動順序等等。程序規(guī)劃：程序規(guī)劃是網(wǎng)站的重點。通過上述的步驟規(guī)劃我們將要對其實現(xiàn)。實現(xiàn)的效果也有了比較清晰的想法，那么就如何用程序?qū)崿F(xiàn)，使用什么語言，使用哪些技巧，最重要的是在調(diào)試程序時如何避開其他的程序的干擾，也要有所考慮。3.6網(wǎng)站測試網(wǎng)站設(shè)計完成后必須對其進行測試，測試分為：【1】連通測試：首先在服務(wù)器上安裝網(wǎng)絡(luò)操作系統(tǒng)，啟動計算機，登陸網(wǎng)絡(luò)操作系統(tǒng)，進行遠程訪問設(shè)置，添加IP地址，TCP/IP網(wǎng)絡(luò)設(shè)置，然后，先測試計算機到網(wǎng)絡(luò)路由器之間的網(wǎng)絡(luò)連接是否正常，再測試能否連通ISP的路由器，前面兩項測試正常后再測試是否連接其他因特網(wǎng)上的主機。【2】FTP測試：觀察能否看到自己的文件及目錄；【3】網(wǎng)頁測試：包括連接測試，外觀測試，速度測試，腳本和程序測試，租用ISP硬盤空間等。3.７本章總結(jié)本章對網(wǎng)站規(guī)劃管理做出了詳細的說明。通過上述內(nèi)容的分析，將對實現(xiàn)網(wǎng)站建設(shè)的效果有了比較清晰的想法；讓我們可以深入了解不同類型的交互界面從設(shè)計到最終制作完成的整個流程，可以看出無論采用什么技術(shù)手段來完成網(wǎng)站的設(shè)計，最初的內(nèi)容規(guī)劃與設(shè)計界面初稿都是至關(guān)重要的，設(shè)計時要把設(shè)計理論融合在自己的作品中，注意總結(jié)自己的設(shè)計得失。3.8習題1、網(wǎng)站的首頁與一般頁面之間的區(qū)別是什么？2、網(wǎng)站首頁一般包含哪些內(nèi)容？企業(yè)網(wǎng)站的首頁主要應(yīng)該突出哪些方面？3、網(wǎng)站頁面采用怎樣的組織結(jié)構(gòu)才能對瀏覽者形成較強烈的視覺沖擊？4、網(wǎng)狀結(jié)構(gòu)有何優(yōu)、缺點？用什么方法解決。5、網(wǎng)站的頁面之間通常采用什么樣的組織結(jié)構(gòu)？6、我們通常采用什么方法組織網(wǎng)頁的內(nèi)容？

本章內(nèi)容4.1概述

14.2網(wǎng)頁設(shè)計中的創(chuàng)意思維

24.3網(wǎng)頁設(shè)計的創(chuàng)意方法

34.4網(wǎng)頁創(chuàng)意設(shè)計中的基本要素

44.4網(wǎng)頁創(chuàng)意設(shè)計中的基本要素

54.1概述

網(wǎng)頁不只是傳遞信息的媒介，同時也是網(wǎng)絡(luò)上的藝術(shù)品。如何讓瀏覽者以輕松愜意的心態(tài)吸收網(wǎng)頁傳遞的信息，是一個值得研究的課題。

一.創(chuàng)意的類型：1.改良型創(chuàng)意2.創(chuàng)新型創(chuàng)意二.創(chuàng)意的功能:1.提高作品的審美價值，使作品充滿張力。2.滿足受眾的情感需求，更好的推銷作品。4.2網(wǎng)頁設(shè)計中的創(chuàng)意思維

在網(wǎng)頁設(shè)計中為了創(chuàng)造出高質(zhì)量的作品，我們往往需要多種思維方式來開發(fā)對事物的理解，不斷發(fā)現(xiàn)事物全新的含義，并賦予其新的表現(xiàn)形式和生命力。一．發(fā)展思維以思維的中心點向外輻射、擴散，積極的思考和聯(lián)想，產(chǎn)生多方向，多角度的捕捉創(chuàng)作靈感的觸角。發(fā)展思維的結(jié)構(gòu)形式：樹型結(jié)構(gòu)、傘型結(jié)構(gòu)、網(wǎng)狀結(jié)構(gòu)4.2網(wǎng)頁設(shè)計中的創(chuàng)意思維二.逆向思維打破原有思維定式，將思維的方向和邏輯順序完全顛倒過來。反其道而行。以達到異、新、奇的視覺效果。例如：網(wǎng)頁設(shè)計中非均衡的視覺效果及色彩的反向運用等。三.獨特思維勇于挑戰(zhàn)，超越常規(guī)、習慣的認識模式，綜合復(fù)雜環(huán)境中的多種元素，產(chǎn)生一種新穎的不同凡響的視覺效果。如圖(4-1)獨特的視角,給人以新奇的感覺。法則：人無我有，人有我變。圖4-1非常態(tài)界面4.2網(wǎng)頁設(shè)計中的創(chuàng)意思維四.思維的靈活性思維的靈活性指改變思維的能力。1.舉一反三，觸類旁通。2.思維擴散、聚合。五.思維進程的跨越性創(chuàng)意超越了思維的步驟，因某一事物激發(fā)起突然的頓悟。如：2008奧運會徽“中國印.舞動的北京”及中國申奧標志。圖4-2圖4-34.2網(wǎng)頁設(shè)計中的創(chuàng)意思維六.思維效果的整體性整體性是創(chuàng)新性思維的基本要求，脫離整體性作品就會顯得凌亂。如圖4-3世界著名搜索引擎Google的徽標設(shè)計(圖4-3～4-4)，丹尼斯·黃將簡約雅潔的設(shè)計風格與“Google”巧妙結(jié)合，自然天成，使徽標充滿靈氣。圖4-3圖4-44.2網(wǎng)頁設(shè)計中的創(chuàng)意思維七.思維認識的深刻性明察秋毫、入木三分、見微知著。抓住事物的本質(zhì)和發(fā)展趨向。如圖4-5是推銷女用香水。畫面中的尺和剪刀，表面上與香水風馬牛不相及，而實質(zhì)上則表示量體、裁衣，香水香味如為女士量身定制一般。圖4-54.2網(wǎng)頁設(shè)計中的創(chuàng)意思維八．思維表達的流暢性任何一件作品要想完整、準確、高效的表現(xiàn)出來，思維的連貫性是非常必要的。流暢性是對思維速度和效率的綜合評價。如圖4-6畫面中色彩的呼應(yīng)，排版的承接都為思維的連續(xù)表達創(chuàng)造了條件。影響思維流暢性的因素：1.知識儲備2.思維的敏銳度圖4-64.3網(wǎng)頁設(shè)計的創(chuàng)意方法

創(chuàng)意思維為構(gòu)筑優(yōu)美網(wǎng)頁繪制了設(shè)計藍圖,而創(chuàng)意方法則在藍圖的基礎(chǔ)上對“大廈”進行裝飾.只有經(jīng)過裝飾的網(wǎng)頁能使主題表現(xiàn)的更生動有趣，更具有審美享受。因而德國設(shè)計師霍戈爾.馬蒂斯把創(chuàng)意手段稱為“視覺修飾”。一.聯(lián)想與想象聯(lián)想即由A事物想到B事物的心理過程。如圖4-7由喜慶的煙花

圖4-74.2網(wǎng)頁設(shè)計中的創(chuàng)意思維構(gòu)成威嚴的雄師，雄師是中國古代千年文化的象征。人們一看到雄師也自然會聯(lián)想到中華民族。聯(lián)想的種類：虛實聯(lián)想、接近聯(lián)想、類似聯(lián)想、對比聯(lián)想、因果聯(lián)想創(chuàng)意的聯(lián)想方式：形體聯(lián)想（圖4-84-9）、材料聯(lián)想（圖4-10）、功能聯(lián)想（圖4-11）

圖4-8圖4-11圖4-10圖4-94.3網(wǎng)頁設(shè)計的創(chuàng)意方法二.比喻與擬人比喻是把要表達的內(nèi)容作為本體，通過相關(guān)聯(lián)的喻體去表現(xiàn)內(nèi)容的本質(zhì)特征。

要求：比體與本體之間要求相類似的特征。比喻的種類：明喻、暗喻、借喻比擬。分為兩種，擬人或擬物。

比擬離不開聯(lián)想和想象，其效果使網(wǎng)頁中內(nèi)容更形象、生動，從而增強感染力，比擬可以讓靜態(tài)變得生動起來，讓呆板的變得有生機活力，讓抽象的形象變得具體，從而增加作品的藝術(shù)魅力。4.3網(wǎng)頁設(shè)計的創(chuàng)意方法三.夸張與變形夸張就是把作品中所宣傳對象的特征、性質(zhì)特意放大或渲染，突出自然形態(tài)中最本質(zhì)、最典型的部分，使主體特征更加鮮明突出。變形手法在實際運用中的表現(xiàn)方式：拉伸、壓縮、扭曲、畸變或?qū)⒛骋徊糠滞怀鲣秩尽?/p>

四.借代不直接說出要說的人或事物，而是借與說的人或事物有密切、象征關(guān)系的其它某些事物來代替說明的一種修辭方法。

4.3網(wǎng)頁設(shè)計的創(chuàng)意方法圖4-12圖4-134.3網(wǎng)頁設(shè)計的創(chuàng)意方法五.幽默幽默的手法優(yōu)點是抓住人或事物的某些特征，運用喜劇性的手法造就一種耐人尋味引人發(fā)笑的幽默意境，撞擊瀏覽者的心靈。

六.象征用具體的事物表現(xiàn)某種特殊意境，是對事物原型的延伸,是超越性的存在。

七.對比把兩種不同事物或同一種事物的不同方面放在一起，相互比較，運用對比使對立事物的矛盾突出揭示本質(zhì)，給人以深刻的啟示，留下深刻的印象。

4.4網(wǎng)頁創(chuàng)意設(shè)計中的基本要素

色彩圖像文字4.4.1網(wǎng)頁中的文字在網(wǎng)頁中,字體往往占據(jù)了很大的空間和頁面,單一形態(tài)大小、顏色的字體，雖能傳遞信息，但不免讓人們感到疲勞乏味。

一.字體的設(shè)計方法：根據(jù)文字內(nèi)容的屬性及網(wǎng)站的主題可以適當?shù)淖魅缦禄?.改變文字大小、比例人們已經(jīng)習慣正常的視覺大小,突然間的變化會產(chǎn)生新的視覺感受,產(chǎn)生重新審視的興趣。2.改變字體形態(tài)局部改變整體改變

3.4.1網(wǎng)頁中的文字措施:拉伸、擠壓、扭曲、撕裂、切除、省略、替換、粗細變化。

3.文字的三維效果真實的空間：眼睛看得見，手能摸得到的。虛擬的空間：眼睛看得見，而不能觸摸得到的。措施：添加投影、浮雕、透視效果，產(chǎn)生矛盾空間。

4.色彩的改變色相、純度、明度

5.機理及質(zhì)地4.4.1網(wǎng)頁中的文字紋理的改變及不同質(zhì)感效果6.置換及同構(gòu)將文字中部分筆畫用實物、圖形、符號、色塊等替換，或利用文字外形與某一事物的相似點進行變化。二.文字的組合方法與形式1.字體的大小組合將大小不等的文字放到一個平面上進行組合，這樣大的文字相當于一個圖形，而小的文字就成為可供閱讀的文字，或?qū)⑿〉奈淖志幣懦蓤D形而大的圖形成為主要的文字4.4.1網(wǎng)頁中的文字2.漢字與拉丁字母的組合如：“HONGKONG”與“喜”字的組合。3.漢字與具象形體的組合如：“永久”牌自行車標志圖4-14,“胖子”服飾。4.文字組合的處理手段(1).添加法根據(jù)文字內(nèi)容、筆畫的多少進行添加文字的組合因素。A.添加與內(nèi)容相關(guān)的文字B.添加與寓意相關(guān)的圖形圖4-14(2).重疊法將文字組合因素重疊為一體，產(chǎn)生富有層次的效果。(3).刪除法在不影響識別的前提下將某些筆畫刪除。(4).連筆法將文字組合因素產(chǎn)生連貫的整體感，可將兩個以上的文字筆畫連起來。如圖4-15圖4-154.4.1網(wǎng)頁中的文字（5）.適形法將文字組合因素適合在一個圖形內(nèi)，產(chǎn)生適合圖形的效果。

（6）.共用法將所設(shè)計內(nèi)容的兩個以上的文字筆畫偏旁部首共用，產(chǎn)生你中有我我中有你的視覺趣味。4.4.1網(wǎng)頁中的文字(7).虛實形共用實為筆畫，虛為背景。利用實形周圍空底顯示字的形產(chǎn)生虛實相間的視覺效果。(8).幾何形利用不同的幾何形狀構(gòu)成文字,給人以自由和輕松感，現(xiàn)代感強

5.文字編排的形式:A.豎排式B.橫排式C.斜排式D.曲線式4.4.1網(wǎng)頁中的文字E.漸變式運用文字字體大小產(chǎn)生漸變的效果。F.重疊式由句子重疊體現(xiàn)構(gòu)成圖形。G.分離式拉大字與字之間距離，形成點壯效果。

(2).文字的頭尾編排形式A.齊頭散尾式B.散頭齊尾式C.齊頭齊尾式D.中軸分離式4.4.1網(wǎng)頁中的文字文字排列時從中間向兩邊分開,突出中間的垂直空間。E.分插式行與行之間的關(guān)系上、下、左、右曲直交叉，長短參差、錯落地排列。F.自由式行與行不規(guī)則地排列，形成繁雜的視覺效果，其閱讀功能減弱，作為背景圖形用。(3).圖形化的文字編排效果運用大量的文字組成平面的或立體的圖形，文字與圖形的結(jié)合形成了有趣的、有視覺內(nèi)涵的編排形式。

4.4.2網(wǎng)頁中的圖像

圖形是一種視覺信息傳遞媒介，較符號文字在傳遞信息上的優(yōu)勢：易識別、不受地域、國度、知識體系等眾多因素的影響。圖形圖象往往來源于現(xiàn)實世界的影像照片，在造型規(guī)律上有很強的客觀制約性。所以設(shè)計師在對網(wǎng)頁優(yōu)化時應(yīng)對圖片作二次處理、加工，而處理時應(yīng)從以下方面入手。圖形圖像的基本表現(xiàn)技巧：一.面積與視角圖像在網(wǎng)頁中所占比例的大小直接影響整個頁面的視覺效果和情感表達。面積大的圖像在畫面中占的份量重，表達情感直接。容易吸引瀏覽者的注意。面積小的圖像通常在頁面中作點綴和呼應(yīng)，表達情感含蓄，給人4.4.2網(wǎng)頁中的圖像精巧細致的感覺。1.平直的視角給人一種平穩(wěn)、安定、規(guī)矩的感覺。2.非常規(guī)的視角如：倒置、旋轉(zhuǎn)、仰視、俯視增強畫面動感，更具強烈的視覺沖擊。二.局部與特寫對于整體的圖像局部與特寫能讓視線更加集中，這種手法有點到為止，意猶未盡的感覺。局部放大，重點表現(xiàn)這一部分，稱為特寫。特寫能對圖像產(chǎn)生瞬間的凝視，引發(fā)瀏覽者的興趣點。圖4-16為突出本款車的最新性能，而將車創(chuàng)新的部位放大，以特寫的形式展現(xiàn)。起到更有力的宣傳4.4.2網(wǎng)頁中的圖像三.合成與組合效果。圖4-164.4.2網(wǎng)頁中的圖像圖像的合成是指用計算機將多幅圖片的不同內(nèi)容有選擇的合成一個圖像，合成后的圖像傳達更豐富的信息，能更集中的體現(xiàn)創(chuàng)意。圖像的重要程度可以因面積、擺放位置、組合方式的不同而有所不同。四.虛實和影調(diào)

圖像的虛實對比能夠產(chǎn)生空間感，實的物體感覺近，虛的物體感覺遠。五.退底與輪廓圖像的退底是僅保留所選圖像，而將沿圖像邊緣的背景去掉，退底后的形象的外輪廓成自由形狀，具體清晰分明的視覺形態(tài)，顯得靈活自如。

4.4.3網(wǎng)頁設(shè)計中色彩的屬性及其應(yīng)用設(shè)計精良的網(wǎng)站總有其色調(diào)構(gòu)成的總體傾向,以一種顏色或幾種臨近顏色為主導(dǎo),使全呈現(xiàn)在某種和諧、統(tǒng)一的色彩傾向，如同人穿衣服。要想恰如其分的表現(xiàn)網(wǎng)頁中的內(nèi)容，在競爭對手脫穎而出的，信息空間的構(gòu)造也需要恰如其分的包裝和表達。一.與網(wǎng)站風格色彩是網(wǎng)頁設(shè)計中很難把握的重要方面，是確立網(wǎng)站風格的前提，網(wǎng)站色彩的傾向，決定著網(wǎng)站給瀏覽者的第一印象。如：活潑、莊重、雅致（如圖4-17）或熱烈。二.色彩原理“色彩是破碎了的光，太陽的光與地球相撞，破碎分散，因而使整個地球形成美麗的色彩?！?.4.3網(wǎng)頁設(shè)計中色彩的屬性及其應(yīng)用圖4-174.4.3網(wǎng)頁設(shè)計中色彩的屬性及其應(yīng)用1.色彩的三要素明度、色相和飽和度構(gòu)成色彩的三要素。自然界中的顏色可以分為非彩色和彩色兩大類。非彩色指黑色、白色和各種深淺不一的灰色，而其它所有的顏色均屬于彩色，任何一種色彩都具有明度、純度、飽和度三大屬性。(1).明度明度指色彩的明暗程度。(2).色相色相指色彩的相貌。如：紅、黃、藍、綠等。(3).純度純度指色彩的純凈程度，純度越高，色相感越強。

色環(huán)

圖4-184.4.3網(wǎng)頁設(shè)計中色彩的屬性及其應(yīng)用2.色彩的分類：原色、間色、鄰近色、對比色、互補色3.色彩與心理色彩對人們頭腦和精神心理的影響是客觀存在的，如：色彩的知覺力，色彩的辨別力，色彩的象征力及情感。(1).色彩的冷暖感覺A.暖色色彩的冷暖與人們對世界的經(jīng)驗分不開。如：陽光呈現(xiàn)紅、橙、黃、等顏色，所以人們一看到紅、橙、黃等色就聯(lián)想到火熱和烈日給人們的感受，故稱“暖色”B.冷色當人們看到綠、青藍色時會與寒冷相聯(lián)系.如冰川、海洋、夜空、樹蔭等(2).色彩的進退和脹縮感覺

色彩對比圖4-194.4.3網(wǎng)頁設(shè)計中色彩的屬性及其應(yīng)用a.長波長的暖色有前進的睡眠的感覺，短波的冷色有退縮的感覺b.明度高的色彩光量多、色刺激犬，有前進膨脹的感覺，反之有退縮的感覺c.不同北京的襯托也能產(chǎn)生前進、漲縮的感覺(3).色彩的輕重和軟硬感覺明度高的色彩給人輕的感覺，明度低的色彩給人重的感覺。在色相方面，暖色給人輕的感覺，冷色給人重的感覺給人輕的感覺的顏色均有軟的感覺，給人重的感覺的顏色均有硬的感覺

4.4.3網(wǎng)頁設(shè)計中色彩的屬性及其應(yīng)用(4).色彩的艷麗與素雅色彩飽和度高，亮度高的色彩艷麗，反之素雅(5).色彩的記憶性人們對色彩的記憶，由于年齡、性別、個性、職業(yè)、經(jīng)歷、所受教育、自然環(huán)境、社會背景的不同，差異很大。一般說來記憶性色彩強的色彩為：暖色、名度高、純度高記憶性弱的色彩：冷色、明度低、純度低(6).色彩的聯(lián)想與象征色彩的聯(lián)想是通過以往的經(jīng)驗、記憶或知識將當前的色彩與其他具象或抽象及相聯(lián)系起來的過程

4.4.3網(wǎng)頁設(shè)計中色彩的屬性及其應(yīng)用常見顏色的聯(lián)想：A.具象聯(lián)想紅色：血、火、太陽橙色：燈光、柑橘、秋葉、都市黃色：光、檸檬、迎春花、食品綠色：草地、樹葉、禾苗藍色：天空、宇宙、水、冰紫色：丁香花、葡萄、茄子黑色：夜晚、墨、石炭白色：雪、牛奶、白云、面粉灰色：烏云、鐵、木

B.抽象聯(lián)想4.4.3網(wǎng)頁設(shè)計中色彩的屬性及其應(yīng)用紅色：熱烈熱情危險活力吉祥喜慶夏季傳統(tǒng)橙色：溫暖歡喜嫉妒華麗甜蜜興奮黃色：光明希望快活平凡權(quán)利清爽安靜藍色：平靜神秘悠久理智深遠科學快捷紫色：優(yōu)雅高貴注重浪漫神秘女性溫柔虛幻魅力黑色：嚴肅剛健恐怖死亡罪惡堅硬沉默絕望悲哀男性機械灰色：平凡天意謙遜灰心無聊消極謙虛隨便（7）人對色彩的情感

最基本的情感表現(xiàn)：好惡情感的差異的原因：4.4.3網(wǎng)頁設(shè)計中色彩的屬性及其應(yīng)用a.年齡差異年齡高：冷色明度純度低年齡低：明度純度高b．性別差異男性：冷色或純度高的色彩（如黑.灰）→色調(diào)集中女性：暖色.純度較低的粉色及白色→色調(diào)分散c.種族差異原因：生活環(huán)境.社會文化.歷史.宗教信仰等不同中國：紅黃藍天藍淺藍美國：淡黃紅明灰明藍法國：黑灰紅藍綠白德國：黑白天藍咖啡最基本的情感表現(xiàn)：好惡4.4.3網(wǎng)頁設(shè)計中色彩的屬性及其應(yīng)用菲律賓：淡黃藍綠印度：紅黃藍綠埃及：綠紅黑藍綠三.web設(shè)計中的色彩應(yīng)用原理確立網(wǎng)站色調(diào)確立網(wǎng)站色調(diào)的過程⑴決定主體色⑵選擇輔助色

⑶選擇背景色4.4.3網(wǎng)頁設(shè)計中色彩的屬性及其應(yīng)用圖4-20圖4-214.4.3網(wǎng)頁設(shè)計中色彩的屬性及其應(yīng)用⑷色彩調(diào)整確定主頁的題材后，要了解哪些顏色適合哪些網(wǎng)站，如影視題材的站點，基本任何顏色都適合，但用黑色或深色則更符合夜間觀眾的視覺感受頁面色彩搭配⑴色相相比⑵明度對比⑶飽和度對比⑷補色對比⑸面積對比⑹調(diào)和色調(diào)3.調(diào)和色彩的基本法則

4.4.3網(wǎng)頁設(shè)計中色彩的屬性及其應(yīng)用⑴建立主調(diào)統(tǒng)率頁面色彩關(guān)系⑵善用金銀黑白灰等中性色緩解中和，以烘托主題⑶拉開距離（從純度和明度.面積上著手）四.色彩意象的設(shè)計應(yīng)用當我們看到色彩時，除了感覺其對生理和物理方面的影響,心理也會立即產(chǎn)生感覺，這就是色彩的意象1.紅色的色彩意象由于紅色容易引起注意，所以在各種媒體中被廣的運用；除了具有較佳的明視效果之外，更被用來傳達有力.熱誠.溫暖.前進等涵義的企業(yè)精神與形象。另外紅也常用來作為警告.危險.禁止.防火等標志用色.(例:中國人一看見紅色就充滿了喜悅和激情)4.4.3網(wǎng)頁設(shè)計中色彩的屬性及其應(yīng)用2.橙色的色彩意象橙色明視度高，在工業(yè)安全用色中。橙色是警戒色。如火車頭、登山服飾、救生衣的設(shè)計大都含有橙色。由于橙色明亮刺眼，有時會產(chǎn)生負面低俗的意象。所以運用時，要注意色彩的搭配及表現(xiàn)形式。由于符合大自然創(chuàng)造的色彩搭配模式，橙色與具有一定灰度的綠色搭配效果較好。3.黃色的色彩意象黃色明視度高，同樣在生活中屬警戒色（如交通標志上黃燈）高亮度的黃色在頁面設(shè)計中很少大塊面的出現(xiàn)，多半由于顏色本身過于刺眼，造成瀏4.4.3網(wǎng)頁設(shè)計中色彩的屬性及其應(yīng)用覽者視覺的不愉快。但與黑色搭配較好，會強烈突出主體。在細節(jié)部分使用效果更加。4.綠色的色彩意象在頁面設(shè)計中，綠色所傳達的清爽、理想、希望、生長的意象。符合人們接近自然的生理需求。綠色在設(shè)計中應(yīng)用很廣，在工業(yè)上許多機械采用綠色，醫(yī)療機構(gòu)場所，也常用綠色作空間色彩規(guī)劃。5．藍色的色彩意象

由于藍色沉穩(wěn)的特性，具有理智、準確的意象。在商業(yè)設(shè)計中，強調(diào)科技、效率的商品或企業(yè)形象。大多選用藍色作標準色。如：電腦、汽車、攝影器材等。另外受西方文化的影響。藍色作為頁面基調(diào)能營造出深邃、憂郁的意境。用其展示博大的胸懷或感性訴求方面比較合適。4.4.3網(wǎng)頁設(shè)計中色彩的屬性及其應(yīng)用6．紫色的色彩意境紫色由于其強烈的女性化的性格，在商業(yè)設(shè)計用色中，受到相等大的限制，除了女性有關(guān)的商品或企業(yè)形象外，其它類設(shè)計不常作為主色調(diào)使用。紫色被稱為“魔鬼”顏色。深紫色會造成恐怖的氣氛，對比氣體顏色較難控制紫色也有其優(yōu)點：是高貴的象征。明度低的紫色有清澈爽朗的感覺，而且有一定灰度的淺紫色會有纖巧雅致的感覺，適合表現(xiàn)女性有關(guān)的題材。7.褐色的色彩意象在商業(yè)上褐色用來表示原始材料的質(zhì)感。如麻、木材等。或用來傳達莫些產(chǎn)品的色澤及味感，如咖啡、茶、麥類等，或強調(diào)古典優(yōu)雅的企業(yè)或商品形象。

4.4.3網(wǎng)頁設(shè)計中色彩的屬性及其應(yīng)用8.白色的色彩意象白色具有高級，科技的意象。痛需和其他色彩搭配使用。純白色繪入寒冷，嚴峻的感覺。所以在使用白色時，都會搭配一些其他顏色。如象牙白、米白、乳白等。白色是永遠流行的主色調(diào)，是能和任何顏色搭配的萬能色。較容易控制如圖（4-22）。9.黑色的色彩意象黑色具有高貴、穩(wěn)重、科技莊嚴的意象。黑色也是一種流行的主色調(diào)。適合與許多色彩搭配。以黑色為主色調(diào)可以創(chuàng)造出神秘的氣氛，另外穩(wěn)重的黑色可以烘托主體超凡氣質(zhì)和美感。10.灰色的色彩意象4.4.3網(wǎng)頁設(shè)計中色彩的屬性及其應(yīng)用圖4-224.4.3網(wǎng)頁設(shè)計中色彩的屬性及其應(yīng)用灰色具有柔和，高雅的意象。屬中間色，男女皆能接受，所以，灰色也是永遠的主要顏色。許多科技產(chǎn)品，尤其是和金屬材料有關(guān)的，凡平卻來用灰色來傳達高級，科技的形象。以灰色作為設(shè)計的基調(diào)是當前設(shè)計流行的做法，在緩和過對比造成的強烈的反差，灰色顯示了其杰出的能力。五.網(wǎng)頁設(shè)計的配色技巧

色彩的意象可以延伸設(shè)計潛制的效果。網(wǎng)頁設(shè)計新手可能喜歡選用一些漂亮的圖片作為色彩背景。但瀏覽一下大型網(wǎng)站，會發(fā)現(xiàn)它們更多的運用的是黑、灰、藍、綠、黃等。其他的色彩作為背景。使得網(wǎng)頁顯得典雅，溫馨而又不失活潑，同時大大加快了網(wǎng)頁加載的速度。

4.4.3網(wǎng)頁設(shè)計中色彩的屬性及其應(yīng)用1.運用色素這里指在主色調(diào)選定的基礎(chǔ)上，調(diào)整色彩的透明度或飽和度。將色彩變淡或加深調(diào)出新色彩或選用鄰近色，使用頁色彩統(tǒng)一、有層次感。2.使用對比色可以充分的利用補色原理進行搭配，同時注意使用灰色調(diào)進行調(diào)和，這樣的作為色彩豐富，意境深遠。3.用黑色與明度、純度、飽和度高的色彩搭配

對比強烈，不光雅致的同時更容易吸引眼球。4.文字與背景色的搭配深色字體配素淡，柔和的色彩，讀起來自然流暢，深色字體搭配鮮明的字體。如字體作為裝飾性來表現(xiàn)出觀而選擇中間色調(diào)明時，純度可適當降低如圖（4-23）。4.4.3網(wǎng)頁設(shè)計中色彩的屬性及其應(yīng)用

總結(jié):要想將色彩自然和諧的運用于網(wǎng)頁設(shè)計中，使網(wǎng)頁獲得生命力。大自然是最好的老師。春夏秋冬都恩能夠使設(shè)計和諧優(yōu)美。色彩運用中應(yīng)注意的問題；國家、種族、宗教信仰、風俗地理位置、文化修養(yǎng)、性別、年齡。

例:兒童喜歡對比強烈，生活在草原上的人喜歡紅色，生活在鬧市中的人喜歡淡雅的顏色，生活在大沙漠中的人喜歡綠色。圖4-234.5網(wǎng)頁創(chuàng)意設(shè)計的程序

3.5.1前期策劃13.5.2后期更新及維護24.5.1前期策劃一.明確設(shè)計任務(wù)一個設(shè)計師:在接受任務(wù)之前,必須搞清楚服務(wù)對象的基本情況和意圖,弄清楚所要設(shè)計的是一個什么樣的任務(wù).企業(yè)設(shè)計網(wǎng)站的原因很多:(1)宣傳新公司或服務(wù)的需要(2)舊網(wǎng)站的改版、更新二.調(diào)查研究與分析任何主頁都要根據(jù)主題的內(nèi)容形成風格,只有熟悉題材和內(nèi)容設(shè)計工作才能有的放矢,取得理想效果.分析的內(nèi)容包括:1.目標市場分析分析受眾群體的文化水平,價值觀念,所在的國家,4.5.2后期更新及維護

族及其喜好等.2.同類行業(yè)網(wǎng)站分析同類行業(yè)網(wǎng)站的總體色彩風格,排版布局,頁面內(nèi)容的選擇及表現(xiàn)形式等。三.創(chuàng)意開發(fā)由單圖表現(xiàn)開始,確定設(shè)計方向,題材,構(gòu)思多個方案,嘗試從不同角度,方向,不同方式對網(wǎng)頁主題進行挖掘和表現(xiàn),然后將材料進行整理,選擇其中較好的進行發(fā)散.四.修改及定案應(yīng)收時的聽取多方面的意見及時對收集材料匯集整理,修改,并最終定稿.4.5.2后期更新及維護

網(wǎng)站中隨著新信息的加入,老信息的刪除,要不斷的對網(wǎng)頁進行更新并維護,使其能始終正常運行。更新前的準備：1.了解市場需求大多網(wǎng)頁數(shù)網(wǎng)頁都或多或少的與經(jīng)濟利益相掛鉤,應(yīng)以市場的導(dǎo)向，為其服務(wù).2.了解詢問者的心理設(shè)計網(wǎng)頁需要了解你的觀眾,了解什么東西在吸引他們,需要了解他們的感受,則有助于你建立站點的色調(diào)和個性.1.如何才能在作品中充分體現(xiàn)創(chuàng)意2.簡述圖形圖象的創(chuàng)意技巧3.簡述色彩的性格對突出網(wǎng)頁設(shè)計主題的作用4.什么是創(chuàng)新性思維