網(wǎng)頁設(shè)計與制作第2章.ppt

1、1,第2章 網(wǎng)站建設(shè)概論,2,2.1 網(wǎng)站概論 2.1.1 網(wǎng)站的種類 根據(jù)不同的分類方式可以將網(wǎng)站分成不同的類型，下面列出幾種常見的網(wǎng)站分類方式。 1根據(jù)網(wǎng)站提供的服務(wù)分類 （1）信息類網(wǎng)站； （2）交易類網(wǎng)站； （3）互動游戲類網(wǎng)站； （4）有償信息類網(wǎng)站； （5）功能型網(wǎng)站； （6）綜合類網(wǎng)站。,3,2根據(jù)網(wǎng)站的性質(zhì)分類 （1）政府網(wǎng)站； （2）企業(yè)網(wǎng)站； （3）商業(yè)網(wǎng)站； （4）教育科研機構(gòu)網(wǎng)站； （5）個人網(wǎng)站； （6）非盈利機構(gòu)網(wǎng)站； （7）其它類型的網(wǎng)站。,4,3根據(jù)在大型搜索引擎上的設(shè)置分類 （1）娛樂與休閑類網(wǎng)站； （2）商業(yè)與經(jīng)濟類網(wǎng)站； （3）藝術(shù)與人文類網(wǎng)站； （4）健

2、康與醫(yī)藥類網(wǎng)站； （5）新聞與媒體類網(wǎng)站； （6）政府與政治類網(wǎng)站； （7）電腦與網(wǎng)絡(luò)類網(wǎng)站； （8）社會與文化類網(wǎng)站； （9）科學與教育類網(wǎng)站； （10）參考資料類網(wǎng)站。,5,2.1.2 網(wǎng)站建設(shè)的步驟 建設(shè)一個網(wǎng)站一般要經(jīng)過以下步驟：網(wǎng)站目標和主題的確定、網(wǎng)站的規(guī)劃、網(wǎng)站素材的準備、網(wǎng)站制作工具的選擇和確定、網(wǎng)站的建立、注冊域名和申請網(wǎng)頁空間、網(wǎng)站的測試和發(fā)布、網(wǎng)站的宣傳和推廣以及網(wǎng)站的更新和維護。 1網(wǎng)站目標和主題的確定 1）網(wǎng)站目標的確定 為什么要建立網(wǎng)站，是為了宣傳產(chǎn)品，進行電子商務(wù)，還是建立行業(yè)性網(wǎng)站？是企業(yè)的需要還是市場開拓的延伸？如果是個人網(wǎng)站，比如說是交朋友的、學習討論的還是

3、興趣愛好的？建立網(wǎng)站前目標要明確。另外還應(yīng)該知道誰是網(wǎng)站將來的訪問者，例如，明確該網(wǎng)站是面向于消費者？雇員？學生？朋友還是家庭的？只有知己知彼，才能避免在網(wǎng)站建設(shè)中出現(xiàn)很多問題，使網(wǎng)站建設(shè)能順利進行。,6,2）網(wǎng)站主題的確定 確定網(wǎng)站主題是賦予網(wǎng)站生命關(guān)鍵一步，網(wǎng)站的風格和創(chuàng)意點是生存的兩個重要因素，給網(wǎng)站取一個好名稱可以讓大家容易記住你。 （1）網(wǎng)站的主題 網(wǎng)站主題就是建立的網(wǎng)站所要包含的主要內(nèi)容，也就是網(wǎng)站的題材問題，一個網(wǎng)站必須要有一個明確的主題。 在選擇主題時還應(yīng)注意以下幾個問題： 主題選材要小而精。 最好選擇自己擅長或者感興趣的內(nèi)容。 選題不要太濫、目標定位不要太高。,7,（2）網(wǎng)站

4、的風格 一個優(yōu)秀網(wǎng)站都有自己的個性和文化，而且會從一開始就千方百計去體現(xiàn)它，樹立起屬于自己的風格。風格具有抽象性、獨特性和人性等特征。 風格的抽象性是指站點的整體形象給瀏覽者的綜合感受。 風格的獨特性是指該網(wǎng)站不同于其他網(wǎng)站的地方。 風格的人性體現(xiàn)在通過網(wǎng)站的外表、內(nèi)容、文字和交流可以概括出一個站點的個性與情緒，是溫文儒雅、執(zhí)著熱情，還是活潑易變、放任不羈。 有風格的網(wǎng)站與普通網(wǎng)站的區(qū)別在于：普通網(wǎng)站看到的只是堆砌在一起的信息，只能用理性感受來描述，比如信息量大小，瀏覽速度快慢。但如果瀏覽過有風格的網(wǎng)站后就能有更深一層的感性認識，比如站點有品位，和藹可親，是老師或朋友。 簡單地說，風格就是一句

5、話：與眾不同！ 如何樹立網(wǎng)站風格呢？可以分這樣幾個步驟來實現(xiàn)。 確信風格是建立在有價值內(nèi)容之上的。 需要徹底弄清楚希望站點給人的印象是什么。 在明確網(wǎng)站印象后，開始努力建立和加強這種印象。,8,經(jīng)過第二步印象的“量化”后，需要進一步找出其中最有特色的東西，就是最能體現(xiàn)網(wǎng)站風格的東西，并以它作為網(wǎng)站的特色加以重點強化和宣傳。下面提供一些參考。 將網(wǎng)站的標志（Logo），盡可能出現(xiàn)在每個頁面上，或者出現(xiàn)在頁眉、頁腳、背景上。 突出網(wǎng)站的標準色彩。文字的鏈接色彩、圖片的主色彩、背景色、邊框等色彩盡量使用與標準色彩一致的色彩。 突出網(wǎng)站的標準字體。在關(guān)鍵的標題、菜單和圖片里使用統(tǒng)一的標準字體。 想一條

6、朗朗上口的宣傳標語，把它做在網(wǎng)站的橫幅（Banner）里，或者放在醒目的位置上，告訴大家本網(wǎng)站的特色是。 使用統(tǒng)一的語氣和人稱。即使是多人合作維護，也要讓讀者覺得是同一個人寫的。 使用統(tǒng)一的圖片處理效果。例如，陰影效果的方向、厚度、模糊度都必須一樣。 創(chuàng)造一個網(wǎng)站特有的符號或圖標。例如在一句鏈接前的一個點，可以使用、等符號，雖然很簡單的一個變化，卻給人與眾不同的感覺。 使用自己設(shè)計的花邊、線條和點。 展示網(wǎng)站的榮譽和成功作品。 告訴網(wǎng)友關(guān)于你個人真實的故事和想法。,9,（3）網(wǎng)站的創(chuàng)意 創(chuàng)意是網(wǎng)站生存的關(guān)鍵。實質(zhì)上，創(chuàng)意是傳達信息的一種特別方式。 創(chuàng)意并不是天才者的靈感，而是思考的結(jié)果。根據(jù)美

7、國廣告學教授詹姆斯的研究，創(chuàng)意思考的過程分為5階段。 準備期：研究所搜集的資料，根據(jù)舊經(jīng)驗，啟發(fā)新創(chuàng)意。 孵化期：將資料咀嚼消化，使意識自由發(fā)展，任意結(jié)合。 啟示期：意識發(fā)展并結(jié)合，產(chǎn)生創(chuàng)意。 驗證期：將產(chǎn)生的創(chuàng)意討論修正。 形成期：設(shè)計制作網(wǎng)頁，將創(chuàng)意具體化。,10,（4）網(wǎng)站名稱 一個好的網(wǎng)站應(yīng)該有一個容易使人記住的名稱，就像人名一樣，取得別致又不艱澀難懂會使人記憶深刻。例如：網(wǎng)易，其直觀的意思就是告訴人們“網(wǎng)絡(luò)是容易使用的”，而其域名更是借用了中國電信最早的撥號網(wǎng)絡(luò)的名稱，使用戶在瀏覽網(wǎng)站時很容易就聯(lián)想到它；例如搜狐，顧名思義就是以搜索引擎為特色服務(wù)的門戶網(wǎng)站。,11,2網(wǎng)站的規(guī)劃 網(wǎng)站

8、的規(guī)劃包括總體結(jié)構(gòu)的設(shè)置、目錄的設(shè)置和鏈接結(jié)構(gòu)的設(shè)置。 1）網(wǎng)站總體結(jié)構(gòu)的確立 網(wǎng)站總體結(jié)構(gòu)的確立至關(guān)重要，它是網(wǎng)站設(shè)計能否成功的關(guān)鍵所在。規(guī)劃一個網(wǎng)站結(jié)構(gòu)，可以用樹狀結(jié)構(gòu)先把每個頁面的內(nèi)容大綱列出來，尤其是要制作一個有很多頁面的大網(wǎng)站時，特別需要把這個架構(gòu)規(guī)劃好，同時要考慮到以后可能的擴充性，免得做好以后又要一改再改整個網(wǎng)站的架構(gòu)，十分累人，也十分費時。,12,2）網(wǎng)站目錄的設(shè)置 網(wǎng)站的目錄是指創(chuàng)建網(wǎng)站時建立的目錄。下面是建立目錄結(jié)構(gòu)的一些建議。 （1）不要將所有文件都存放在根目錄下，這樣會產(chǎn)生如下不利影響。 文件管理混亂。 上傳速度慢。 （2）按欄目內(nèi)容建立子目錄。 子目錄的建立首先按主菜

9、單欄目建立。 其他的次要的欄目類似最新更新、友情鏈接等欄目，內(nèi)容較多的且需要經(jīng)常更新的可以建立獨立的子目錄。而一些相關(guān)性強，不需要經(jīng)常更新的欄目，例如：關(guān)于本站、關(guān)于站長、站點經(jīng)歷等可以合并放在一個統(tǒng)一目錄下。 所有程序一般都存放在特定目錄下。 （3）在每個主目錄下都建立獨立的images目錄。 （4）目錄的層次不要太深。 （5）不要使用中文目錄, 不要使用過長的目錄。,13,3）網(wǎng)站鏈接結(jié)構(gòu)的設(shè)置 網(wǎng)站鏈接結(jié)構(gòu)是指頁面之間相互鏈接的拓撲結(jié)構(gòu)。它建立在目錄結(jié)構(gòu)基礎(chǔ)之上，但可以跨越目錄。研究網(wǎng)站鏈接結(jié)構(gòu)的目的在于：用最少的鏈接，使得瀏覽最有效率。 建立網(wǎng)站鏈接結(jié)構(gòu)一般有兩種基本方式： （1）樹狀

10、鏈接結(jié)構(gòu)（一對一）。優(yōu)點是條理清晰，訪問者明確知道自己在什么位置，不會“迷路”；缺點是瀏覽效率低，一個欄目下的子頁面到另一個欄目下的子頁面，必須繞經(jīng)首頁。 （2）星狀鏈接結(jié)構(gòu)（一對多）。類似網(wǎng)絡(luò)服務(wù)器的鏈接，每個頁面相互之間都建立有鏈接，立體結(jié)構(gòu)像東方明珠電視塔上的鋼球。這種鏈接結(jié)構(gòu)的優(yōu)點是瀏覽方便，隨時可以到達自己喜歡的頁面；缺點是鏈接太多，容易使瀏覽者迷路，弄不清自己在什么位置，已經(jīng)看了多少內(nèi)容。,14,這兩種基本結(jié)構(gòu)都只是理想方式，在實際的網(wǎng)站設(shè)計中，總是將這兩種結(jié)構(gòu)混合起來使用，希望瀏覽者既可以方便快速地到達自己需要的頁面，又可以清晰地知道自己的位置。所以，最好的辦法是：首頁和一級頁面

11、之間用星狀鏈接結(jié)構(gòu)，一級和二級頁面之間用樹狀鏈接結(jié)構(gòu)。,15,3網(wǎng)站素材的準備 網(wǎng)站素材的準備工作包括搜集、整理加工、制作和存儲等環(huán)節(jié)。 4網(wǎng)站制作工具的選擇和確定 目前制作網(wǎng)頁涉及的工具比較多，對于網(wǎng)頁制作工具，目前通常選用的都是所見即所得的編輯工具，其中的優(yōu)秀者當然是Dreamweaver和FrontPage了；如果是初學者，F(xiàn)rontPage是首選。除此之外，還有：圖片編輯工具，如Photoshop、Fireworks等；動畫制作工具，如Flash、Cool 3D等；還有網(wǎng)頁特效工具，如網(wǎng)頁特效精靈、有聲有色等。,16,5網(wǎng)站的建立 按照先大后小、先簡單后復雜的原則制作出所有的頁面。所謂

12、先大后小是指在制作網(wǎng)頁時，先把大的結(jié)構(gòu)設(shè)計好，然后再逐步完善小的結(jié)構(gòu)設(shè)計；所謂先簡單后復雜是指先設(shè)計出簡單的內(nèi)容，然后再設(shè)計復雜的內(nèi)容，以便在出現(xiàn)問題時好修改。注意在制作網(wǎng)頁時要多靈活運用軟件配備的設(shè)計模板，這樣可以大大提高制作效率。,17,6注冊域名和申請網(wǎng)頁空間 對于個人網(wǎng)站，在申請免費網(wǎng)頁空間的同時也完成了域名的注冊；還有很多的ISP（Internet Service Provider，互聯(lián)網(wǎng)服務(wù)提供商）提供域名注冊和網(wǎng)頁空間申請的收費服務(wù)功能，用戶根據(jù)自己的情況進行選擇。,18,7網(wǎng)站的測試和發(fā)布 網(wǎng)站制作完畢，可以先利用軟件自帶的測試功能對網(wǎng)站進行內(nèi)部測試來發(fā)現(xiàn)和修改基本的問題，最后

13、將網(wǎng)站發(fā)布到Web服務(wù)器上?，F(xiàn)在發(fā)布的工具有很多，有些網(wǎng)頁制作工具本身就帶有上傳功能，另外利用FTP上傳工具，可以很方便地把網(wǎng)站發(fā)布到自己申請的主頁存放服務(wù)器上。網(wǎng)站發(fā)布以后，在瀏覽器中打開自己的網(wǎng)站，逐頁逐個鏈接地再進行測試，發(fā)現(xiàn)問題，及時修改，然后再上傳、再測試，如此循環(huán)直到滿意為止。,19,8網(wǎng)站的宣傳和推廣 網(wǎng)站發(fā)布后，還要不斷地進行宣傳，這樣才能讓更多的朋友認識它，提高網(wǎng)站的訪問率和知名度。網(wǎng)站宣傳和推廣的方法有很多，例如到搜索引擎上注冊，與別的網(wǎng)站交換鏈接，運用網(wǎng)絡(luò)廣告等。 9網(wǎng)站的更新和維護 網(wǎng)站是需要經(jīng)常維護和更新內(nèi)容的，必須不斷給它補充新的內(nèi)容，才能夠長期吸引住瀏覽者。,20

14、,2.1.3 網(wǎng)站建設(shè)的原則 下面介紹一些非常實用的網(wǎng)站建設(shè)原則： 1牢記內(nèi)容第一的原則 2網(wǎng)頁文件命名原則 3圖片命名的原則 4重視網(wǎng)頁標題的設(shè)計 5網(wǎng)站導航設(shè)計要清晰 6網(wǎng)頁長度應(yīng)限定在三個整屏以內(nèi) 7. 善用圖像元素 8網(wǎng)站中所有路徑都采用相對路徑 9確保鏈接的有效性，鏈接層次不要太深 10善用表格來布局，但表格的嵌套層次要控制在三層左右 11遵循3次點擊規(guī)則 12兼顧下載速度與美觀 13. 及時更新網(wǎng)頁 14. 避免濫用技術(shù) 15要保護好個人信息,21,2.2 網(wǎng)頁的可視化設(shè)計概論 2.2.1 網(wǎng)頁的版面布局 1網(wǎng)頁版面布局的基本概念 版面指的是瀏覽器看到的一個完整的頁面。布局，就是以

15、最適合瀏覽的方式將圖片和文字排放在頁面的不同位置。 （1）頁面尺寸 由于頁面尺寸和顯示器大小及分辨率有關(guān)，一般分辨率在800 x600像素的情況下，頁面的顯示尺寸為：780 x428個像素；分辨率在640 x480像素的情況下，頁面的顯示尺寸為：620X311個像素；分辨率在1024X768像素的情況下，頁面的顯示尺寸為：1007x600像素。目前頁面的尺寸一般選800X600像素的分辨率為約定俗成的瀏覽模式。 （2）整體造型 造型就是創(chuàng)造出來的物體形象。這里是指頁面的整體形象，這種形象應(yīng)該是一個整體，圖形與文本的接合應(yīng)該是層疊有序。雖然，顯示器和瀏覽器都是矩形，但對于頁面的造型，可以充分運用

16、自然界中的其它形狀以及它們的組合：矩形、圓形、三角形、菱形等。,22,（3）頁頭 頁頭也叫頁眉，頁眉的作用是定義頁面的主題。頁頭是整個頁面設(shè)計的關(guān)鍵，它牽涉到下面的更多設(shè)計和整個頁面的協(xié)調(diào)性。頁頭常放置站點名字的圖片和公司標志以及旗幟廣告。 （4）文本 文本在頁面中出現(xiàn)都是以行或者塊(段落)出現(xiàn)，它們的擺放位置決定著整個頁面布局的可視性。 （5）頁腳 頁腳和頁頭相呼應(yīng)。頁頭是放置站點主題的地方，而頁腳是放置制作者或者公司信息的地方。 （6）圖片 圖片和文本是網(wǎng)頁的兩大構(gòu)成元素，缺一不可。如何處理好圖片和文本的位置成了整個頁面布局的關(guān)鍵。 （7）多媒體 除了文本和圖片，還有聲音、動畫、視頻等其它

17、網(wǎng)頁元素。雖然它們不是經(jīng)常被利用，但隨著動態(tài)網(wǎng)頁的興起，它們在網(wǎng)頁布局上也將變得更重要。,23,2網(wǎng)頁版面布局技術(shù) （1）表格布局 （2）框架布局 （3）層疊樣式表的應(yīng)用 3網(wǎng)頁版面布局的原則 （1）主次分明，中心突出 （2）大小搭配，相互呼應(yīng) （3）圖文并茂，相得益彰,24,4網(wǎng)頁版面布局的步驟 網(wǎng)頁版面布局分以下幾個步驟： （1）草案 （2）粗略布局 （3）定案,25,5網(wǎng)頁版面布局的類型 網(wǎng)頁版面布局大致可分為“國”字型、拐角型、“三”型、對稱對比型、標題正文型、框架型、封面型、Flash型等，下面分別介紹。 （1）“國”字型也稱為“同”字型或“口”字型，是一些大型網(wǎng)站所喜歡的類型。最上

18、面是網(wǎng)站的標題以及橫幅廣告條，接下來就是網(wǎng)站的主要內(nèi)容，左右分列兩小條內(nèi)容，有時左面是主菜單，右面放友情連接等；中間是主要部分，與左右一起羅列到底，最下面是網(wǎng)站的一些基本信息、聯(lián)系方式、版權(quán)聲明、廣告等。這種結(jié)構(gòu)在網(wǎng)上最常見，其優(yōu)點是能充分利用版面，信息量大，缺點是頁面擁擠，不夠靈活，如圖2-1所示，網(wǎng)址為： 。,26,圖2-1 “國”字型,27,“國”字型,例如“國”字型的網(wǎng)站還有。,28,（2）拐角型 這種結(jié)構(gòu)類型與上一種其實只是形式上的區(qū)別，非常相近，上面也是橫條網(wǎng)站標志+廣告條，接下來的左側(cè)是一窄列鏈接等，右列是很寬的正文，下面也是一些網(wǎng)站的輔助信息。這是網(wǎng)頁設(shè)計中用的最廣泛的一種布局

19、方式。這種布局的優(yōu)點是頁面結(jié)構(gòu)清晰，主次分明。是初學者最容易上手的布局方法。缺點是規(guī)矩呆板，如果細節(jié)色彩上不注意，很容易讓人看之無味。如圖2-2所示，網(wǎng)址為：。如果沒有下面的網(wǎng)站輔助信息欄的結(jié)構(gòu)，有時又稱為“T”形結(jié)構(gòu)。,29,圖2-2 拐角型布局,30,（3）“三”型 “三”型結(jié)構(gòu)多用于國外站點，國內(nèi)用的不多。特點是頁面上橫向兩條色塊將頁面整體分割為四部分，色塊中大多放廣告條，如圖2-3所示，網(wǎng)址為：http:/www.re-。,31,圖2-3 “三”型布局,32,（4）對稱對比型 對稱對比型是采取左右或者上下對稱的一種布局方法，一半深色，一半淺色，一般用于設(shè)計型站點。優(yōu)點是視覺沖擊力強，缺

20、點是將兩部分有機的結(jié)合比較困難，如圖2-4所示，網(wǎng)址為：。,33,圖2-4 對稱對比布局,34,（5）標題正文型這種結(jié)構(gòu)類型即最上面是標題或類似的一些東西，下面是正文，比如一些文章頁面或注冊頁面就是這種，如圖2-5所示，網(wǎng)址為：,35,圖2-5 標題正文型,36,（6）框架型框架型又可以分為左右框架型、上下框架型、綜合框架型。 左右框架型是指一種左右為分別兩頁的框架結(jié)構(gòu)，一般左面是導航鏈接，有時最上面會有一個小的標題或標志，右面是正文，大部分的大型論壇都采用這種結(jié)構(gòu)，有一些企業(yè)網(wǎng)站也喜歡采用這種結(jié)構(gòu)。這種類型結(jié)構(gòu)非常清晰，一目了然，如圖2-6所示，網(wǎng)址為： 。 上下框架型與左右框架型類似，區(qū)別

21、僅僅在于上下框架型是一種上下分為兩頁的框架結(jié)構(gòu)。 綜合框架型是左右框架型和上下框架型兩種結(jié)構(gòu)的結(jié)合，是相對復雜的一種框架結(jié)構(gòu)，較為常見的是類似于“拐角型”結(jié)構(gòu)的，只是采用了框架結(jié)構(gòu)。,37,圖2-6 左右框架型,38,左右框架型,例如“左右”框架型的網(wǎng)站還有網(wǎng)址為：。,39,（7）封面型 也稱為“POP”型。這種結(jié)構(gòu)常用于時尚類站點和個人網(wǎng)站的首頁，大部分為一些精美的平面設(shè)計結(jié)合一些小動畫，放上幾個簡單的鏈接或者僅是一個“進入”的鏈接甚至直接在首頁的圖片上做上欄目鏈接。這種結(jié)構(gòu)的優(yōu)點是漂亮吸引人，缺點就是速度有時比較慢。例如ELLE時尚類的主站點，如圖2-7所示，網(wǎng)址為：。,40,圖2-7 封

22、面型,41,（8）Flash型 Flash型與封面型結(jié)構(gòu)類似，只是Flash型采用了目前非常流行的Flash，與封面型不同的是，由于Flash強大的功能，頁面所表達的信息更豐富，其視覺效果及聽覺效果如果處理得當，絕不差于傳統(tǒng)的多媒體，如圖2-8所示，網(wǎng)址為：。,42,圖2-8 Flash型,43,2.2.2 網(wǎng)頁的色彩搭配 1色彩的基礎(chǔ)知識 紅，黃，藍是三原色，其它的色彩都可以用這三種色彩調(diào)和而成。顏色分非彩色和彩色兩類。非彩色是指黑、白、灰三種系統(tǒng)色。彩色是指除了非彩色以外的所有色彩。網(wǎng)頁制作用彩色還是非彩色好呢？根據(jù)專業(yè)的研究機構(gòu)研究表明：彩色的記憶效果是黑白的3.5倍。也就是說，在一般情

23、況下，彩色頁面較完全黑白頁面更加吸引人。,44,不同的顏色會給瀏覽者不同的心理感受。下面來看看常用顏色的蘊涵。 紅色的色感溫暖。 黃色與紅色相比，其視覺接受度要容易些。 藍色容易讓人聯(lián)想到天空、海洋，現(xiàn)代人還把屬于冷色調(diào)的藍色視為代表著科學的象征色。 綠色是具有黃色和藍色兩種成份的色。 紫色的明度在所有彩色的色料中是最低的。紫色的低明度給人一種沉悶、神秘的感覺。當紫色偏紅時，其感覺具有壓抑感、威脅感；當紫色偏黑時，其感覺就趨于沉悶、傷感、恐怖；當紫色偏白時，可使紫色沉悶的性格消失，變得優(yōu)雅、嬌氣并充滿女性的魅力。 橙色也是一種激奮的色彩，具有輕快、歡欣、熱烈、溫馨、時尚的效果。 白色的色感光明

24、，具有圣潔的不容侵犯性，如果在白色中加入其它任何色，都會影響其純潔性。 黑色在中國文化里有沉重的神秘感，給人莊重而嚴肅的感覺，也常讓人聯(lián)想到黑暗、悲痛、恐怖、死亡。 灰色具有中庸、平凡、溫和、謙讓、中立和高雅的感覺。,45,2網(wǎng)頁色彩的搭配 1）網(wǎng)頁色彩搭配的原理 （1）色彩的鮮明性。 （2）色彩的獨特性。 （3）色彩的合適性。 （4）色彩的聯(lián)想性。 （5）色彩的合理性。 （6）色彩的時尚性。,46,2）網(wǎng)頁色彩搭配的技巧 （1）用一種色彩。 （2）用對比色調(diào)。 （3）用一個色系。 （4）用黑色和一種彩色。 （5）黑白是最基本和最簡單的搭配。 （6）象征色。 （7）風格色。 不管色彩如何搭配，

25、都要注意網(wǎng)頁中的標準色彩不要超過三種的原則。標準色彩是指展示網(wǎng)站形象和延伸內(nèi)涵的色調(diào)。如果一個網(wǎng)站標準色彩超過三種則讓人眼花繚亂。標準色彩主要用于網(wǎng)站的標志，標題，主菜單和大色塊，給人以整體統(tǒng)一的感覺，至于其它色彩的使用，只可作為點綴和襯托，絕不能喧賓奪主。,47,3）網(wǎng)頁各組成部分色彩的設(shè)計方法 網(wǎng)頁一般是由網(wǎng)頁內(nèi)容、網(wǎng)頁標頭、導航菜單等幾部分組成的，它們的用色方法如下： （1）網(wǎng)頁內(nèi)容。它是信息存儲空間，一般要求背景要亮，文字要暗(反之亦然)，對比度要大。許多網(wǎng)頁都用白底黑字。而有的網(wǎng)頁則是用自身Logo的顏色作為內(nèi)容的顏色。如北京大學的首頁，Logo用的是藍色，它的網(wǎng)頁內(nèi)容也用的是藍色，

26、整體顏色顯得很協(xié)調(diào)。,48,（2）網(wǎng)頁標頭。它主要是logo放置的地方，一般用深色，具有較高對比度，以便用戶能非常方便地看到它在該站點的所在位置。標題通常與頁面其他部分有不同的“風貌”。它可以使用與頁面內(nèi)容非常不同的字體或顏色組合，也可以采用頁面內(nèi)容的反色。如中央美術(shù)學院的首頁（舊版本），它的Logo是綠色的，而整個界面用了橘紅色的漸變色的背景，對比明顯，突出了主體。 （3）導航菜單所在區(qū)域。把菜單背景顏色設(shè)置暗一些，然后依靠較高的顏色對比度，比較強烈的圖形元素或獨特的字體將網(wǎng)頁內(nèi)容和菜單的不同準確地區(qū)分開來。 （4）側(cè)欄。盡管不是所有網(wǎng)頁都會使用側(cè)欄，但它仍不失為顯示附加信息的一個有用方式，

27、在色彩上的使用要注意和網(wǎng)頁內(nèi)容應(yīng)清楚地區(qū)分開，同時也要易于閱讀。 （5）頁腳。這一項最不重要，不應(yīng)該喧賓奪主，可以考慮和側(cè)欄相同的顏色或稍微壓深一些的顏色。,49,4）網(wǎng)頁色彩設(shè)計的趨勢 隨著網(wǎng)頁制作經(jīng)驗的積累，設(shè)計者用色有這樣的一個趨勢：單色五彩繽紛標準色單色。,50,2.2.3 網(wǎng)頁的藝術(shù)設(shè)計原則 需要遵循的藝術(shù)原則主要有：對比原則、協(xié)調(diào)原則、平衡原則和趣味原則。 1對比原則 兩事物的相對比較稱為對比。常用的對比方法有以下8種： 1) 大小的對比 2) 明暗的對比 3) 粗細的對比 4) 曲線與直線的對比 5) 水平線與垂直線 6) 質(zhì)感的對比 7) 位置的對比 8) 多重對比,51,圖2

28、-9 對比,52,2協(xié)調(diào)原則 協(xié)調(diào)原則是相對于對比原則而言的。所謂協(xié)調(diào)，就是將界面上的各種元素之間的關(guān)系進行統(tǒng)一處理，合理搭配，使之構(gòu)成和諧統(tǒng)一的整體。協(xié)調(diào)主要體現(xiàn)在以下4個方面： 1) 主與從 2) 動與靜 3) 入與出 4) 統(tǒng)一與協(xié)調(diào),53,圖2-10 協(xié)調(diào),54,3平衡原則 界面是否平衡是非常重要的。例如在一個介紹電腦的界面上，將一臺電腦放在界面的左邊，看起來似乎要倒向右邊，但在界面的左邊設(shè)計者安排了粗體的標題和文字，恰好起到了支撐作用，使人感覺非常平穩(wěn)，這就是平衡帶來的藝術(shù)效果。達到平衡的一種方法是將界面在高度上三等分，圖形的中軸落在下三分之一劃分線上，這樣就可以保持空間上的平衡。

29、平衡并不是對稱。以一點為起點，向左右同時展開的形態(tài)，稱為左右對稱形，應(yīng)用對稱的原理可以發(fā)展出旋渦等形狀復雜的平衡狀態(tài)。我國的古典藝術(shù)，大多講究對稱原則。應(yīng)用對稱，可以使用戶產(chǎn)生莊重威嚴感，但缺少活潑性。在界面設(shè)計上，一般不認可對稱原則?，F(xiàn)代造型藝術(shù)也向“非對稱”方向發(fā)展。當然，在畫面需要表達傳統(tǒng)風格時，對稱仍是較好的表現(xiàn)手段。 中心也是平衡的一個方面。在人的感覺上，左右會有微妙的差異。如果某界面右下角有一處吸引力特別強的地方，考慮左右平衡時，如何處理這個地方，就成為關(guān)鍵問題。人的視覺對從左上到右下的流向較為自然。將右下角空著來編排標題與插圖，就會產(chǎn)生一種自然的流向，反之，就會失去平衡而顯得不自

30、然。,55,圖2-11 平衡,56,4趣味原則 在界面設(shè)計中注意“趣味性”可以“寓用于樂”。除了運用形象、直觀、生動的圖形優(yōu)化界面來提高趣味性，利用以下方法也能提高趣味性。 1）比例 2）強調(diào) 3）凝聚與擴散 4）形態(tài)的意向 5）變化率 6）規(guī)律感 7）導向 8）空白區(qū) 9）屏幕上的文字,57,圖2-12 趣味,58,2.2.4 網(wǎng)頁的點、線、面的運用 點、線、面是構(gòu)成視覺空間的基本元素，是表現(xiàn)視覺形象的基本設(shè)計語言。 1）點的視覺構(gòu)成 在網(wǎng)頁中，一個單獨而細小的形象可以稱之為點。點是相比較而言的，比如一個漢字是由很多筆劃組成的，但是在整個頁面中，它可以稱為一個點。點也可以是一個網(wǎng)頁中相對微小

31、單純的視覺形象，如一個按鈕、一個Logo等。點是相對線和面而存在的視覺元素。點是構(gòu)成網(wǎng)頁的最基本單位，使用得當，可以畫龍點睛。一個網(wǎng)頁往往需要有數(shù)量不等、形狀各異的點來構(gòu)成。點的形狀、方向、大小、位置、聚集和發(fā)散，能夠給人帶來不同的心理感受。下面以具體的頁面為例介紹點的運用和表現(xiàn)。,59,圖2-13 點的構(gòu)成,60,圖2-13 點的構(gòu)成,61,2）線的視覺構(gòu)成 點的延伸形成線。線在頁面中的作用在于表示方向、位置、長短、寬度、形狀、質(zhì)量和情緒。線是分割頁面的主要元素之一，是決定頁面現(xiàn)象的基本要素。 線的總體形狀有垂直、水平、傾斜、幾何曲線、自由線這幾種。將不同的線運用到頁面設(shè)計中，會獲得不同的效果。根據(jù)情況運用線條，可以充分地表達所要體現(xiàn)的東西。線條除了體現(xiàn)情感外，還能夠利用粗細、虛實、漸變、放射產(chǎn)生深度空間和廣度空間。,62,圖2-15 線的構(gòu)成,63,圖2-16 線的構(gòu)成,64,3）面的視覺構(gòu)成 線的推移形成面。面是無數(shù)點和線的組合。面具有一定的面積和質(zhì)量，占據(jù)空間的位置最多，因而相比點和線來說，視覺沖擊力更大更強烈。面的形狀可以分為以下幾種：方、圓、三角、多邊型