網(wǎng)頁設(shè)計(jì)及產(chǎn)品內(nèi)頁設(shè)計(jì)方法教程ppt

網(wǎng)頁設(shè)計(jì)&產(chǎn)品內(nèi)頁設(shè)計(jì)電子商務(wù)美工電子商務(wù)部目錄頁

CONTENTSPAGE

第二章產(chǎn)品頁設(shè)計(jì)第一章網(wǎng)頁設(shè)計(jì)目錄網(wǎng)頁設(shè)計(jì)第一章前臺(tái)網(wǎng)站后臺(tái)企業(yè)內(nèi)部信息系統(tǒng)物流中心支付中心認(rèn)證中心供應(yīng)者采購者第一章網(wǎng)頁設(shè)計(jì)1.電子商務(wù)網(wǎng)站概述1.1電子商務(wù)系統(tǒng)的構(gòu)成電子商務(wù)政策法律人才信用規(guī)范社會(huì)基礎(chǔ)支柱網(wǎng)絡(luò)平臺(tái)基礎(chǔ)平臺(tái)應(yīng)用平臺(tái)電子商務(wù)五大社會(huì)支柱第一章網(wǎng)頁設(shè)計(jì)1.電子商務(wù)網(wǎng)站概述1.2電子商務(wù)的體系結(jié)構(gòu)1、定義：電子商務(wù)網(wǎng)站市企業(yè)開展電子商務(wù)的基礎(chǔ)設(shè)施和信息平臺(tái)，是實(shí)施電子商務(wù)的公司或商家與服務(wù)對象之間的交互界面，是電子商務(wù)系統(tǒng)運(yùn)轉(zhuǎn)的承擔(dān)者和表現(xiàn)者。區(qū)別與一般web站點(diǎn)：以數(shù)據(jù)處理為主，數(shù)據(jù)類型復(fù)雜、數(shù)據(jù)流量大，數(shù)據(jù)交換頻繁。運(yùn)行效率和數(shù)據(jù)安全是影響電子商務(wù)網(wǎng)站架構(gòu)的重要因素。第一章網(wǎng)頁設(shè)計(jì)1.電子商務(wù)網(wǎng)站概述2、基本電子商務(wù)網(wǎng)站的構(gòu)成要素網(wǎng)站的域名及地點(diǎn)網(wǎng)站的頁面商品目錄購物車、付款臺(tái)、商品配送計(jì)數(shù)器、留言板會(huì)員管理商品庫存管理第一章網(wǎng)頁設(shè)計(jì)2.網(wǎng)站和網(wǎng)頁的區(qū)別1、網(wǎng)頁：當(dāng)瀏覽者輸入一個(gè)網(wǎng)址或者單擊一個(gè)鏈接，在瀏覽器上就會(huì)看到文字、圖像、動(dòng)畫、視頻、音頻等內(nèi)容，能夠承載這些內(nèi)容的頁面就稱為網(wǎng)頁。瀏覽網(wǎng)頁是互聯(lián)網(wǎng)應(yīng)用最廣的功能，網(wǎng)頁時(shí)網(wǎng)絡(luò)的基本組成部分。根據(jù)頁面內(nèi)容可以分首頁、主頁、專欄網(wǎng)頁、內(nèi)容網(wǎng)頁和功能網(wǎng)頁等類型；按制作技術(shù)分為靜態(tài)網(wǎng)頁與動(dòng)態(tài)網(wǎng)頁。

2、網(wǎng)站：網(wǎng)站就是把一些網(wǎng)頁等信息文件通過超鏈接的形式關(guān)聯(lián)起來形成的信息文件的集合。信息可以是網(wǎng)頁形式也可以是其他的文檔形式。HTML＋瀏覽器→網(wǎng)站網(wǎng)頁→第一章網(wǎng)頁設(shè)計(jì)2.網(wǎng)站和網(wǎng)頁的區(qū)別第一章網(wǎng)頁設(shè)計(jì)3.動(dòng)態(tài)網(wǎng)頁和靜態(tài)網(wǎng)頁動(dòng)態(tài)網(wǎng)頁與靜態(tài)網(wǎng)頁是相對應(yīng)的，網(wǎng)頁URL（統(tǒng)一資源定位符（URL，英語UniformResourceLocator的縮寫）也被稱為網(wǎng)頁地址，是因特網(wǎng)上標(biāo)準(zhǔn)的資源的地址。）的后綴以htm、html、shtml、xml等常見形式出現(xiàn)的，是靜態(tài)網(wǎng)頁。而網(wǎng)頁URL的后綴以asp、jsp、php、perl、cgi等形式出現(xiàn)的，就是動(dòng)態(tài)網(wǎng)頁。

(1)靜態(tài)網(wǎng)頁每個(gè)網(wǎng)頁都有一個(gè)固定的URL，且網(wǎng)頁URL以.htm、.html、.shtml等常見形式為后綴，而不含有“?”;(2)網(wǎng)頁內(nèi)容一經(jīng)發(fā)布到網(wǎng)站服務(wù)器上，無論是否有用戶訪問，每個(gè)靜態(tài)網(wǎng)頁的內(nèi)容都是保存在網(wǎng)站服務(wù)器上的，也就是說，靜態(tài)網(wǎng)頁是實(shí)實(shí)在在保存在服務(wù)器上的文件，每個(gè)網(wǎng)頁都是一個(gè)獨(dú)立的文件;(3)靜態(tài)網(wǎng)頁的內(nèi)容相對穩(wěn)定，因此容易被搜索引擎檢索;(4)靜態(tài)網(wǎng)頁沒有數(shù)據(jù)庫的支持，在網(wǎng)站制作和維護(hù)方面工作量較大，因此當(dāng)網(wǎng)站信息量很大時(shí)完全依靠靜態(tài)網(wǎng)頁制作方式比較困難;(5)靜態(tài)網(wǎng)頁的交互性差，在功能方面有較大的限制。(1)動(dòng)態(tài)網(wǎng)頁以數(shù)據(jù)庫技術(shù)為基礎(chǔ)，可以大大降低網(wǎng)站維護(hù)的工作量;

(2)采用動(dòng)態(tài)網(wǎng)頁技術(shù)的網(wǎng)站可以實(shí)現(xiàn)更多的功能，如用戶注冊、用戶登錄、在線調(diào)查、用戶管理、訂單管理等等;

(3)動(dòng)態(tài)網(wǎng)頁實(shí)際上并不是獨(dú)立存在于服務(wù)器上的網(wǎng)頁文件，只有當(dāng)用戶請求時(shí)服務(wù)器才返回一個(gè)完整的網(wǎng)頁;

(4)動(dòng)態(tài)網(wǎng)頁中的“?”對搜索引擎檢索存在一定的問題，搜索引擎一般不可能從一個(gè)網(wǎng)站的數(shù)據(jù)庫中訪問全部網(wǎng)頁，或者出于技術(shù)方面的考慮，搜索蜘蛛不去抓取網(wǎng)址中“?”后面的內(nèi)容，因此采用動(dòng)態(tài)網(wǎng)頁的網(wǎng)站在進(jìn)行搜索引擎推廣時(shí)需要做一定的技術(shù)處理才能適應(yīng)搜索引擎的要求。動(dòng)態(tài)網(wǎng)頁可以是純文本內(nèi)容的，也可以是包含各種動(dòng)畫內(nèi)容的，這些都是網(wǎng)頁具體內(nèi)容的表現(xiàn)方式，無論網(wǎng)頁是否有動(dòng)態(tài)效果，采用動(dòng)態(tài)網(wǎng)站技術(shù)生成的網(wǎng)頁都稱為動(dòng)態(tài)網(wǎng)頁。從網(wǎng)站瀏覽者的角度來看，無論是動(dòng)態(tài)網(wǎng)頁還是靜態(tài)網(wǎng)頁，都可以展示基本的文字和圖片信息，但是從網(wǎng)站開發(fā)、管理、維護(hù)的角度來看就有很大的差別。靜態(tài)網(wǎng)頁的特點(diǎn)：動(dòng)態(tài)網(wǎng)頁的一般特點(diǎn)：

偽靜態(tài)是相對真實(shí)靜態(tài)來講的。通常我們?yōu)榱烁玫木徑夥?wù)器壓力，和增強(qiáng)搜索引擎的友好面。都將文章內(nèi)容生成靜態(tài)頁面。但是有的朋友為了實(shí)時(shí)的顯示一些信息。或者還想運(yùn)用動(dòng)態(tài)腳本解決一些問題。不能用靜態(tài)的方式來展示網(wǎng)站內(nèi)容。但是這就損失了對搜索引擎的友好面。怎么樣在兩者之間找個(gè)中間方法呢，這就產(chǎn)生了偽靜態(tài)技術(shù)。就是展示出來的是以.html一類的靜態(tài)頁面形式，但其實(shí)是用ASP一類的動(dòng)態(tài)腳本來處理的。第一章網(wǎng)頁設(shè)計(jì)3.動(dòng)態(tài)網(wǎng)頁和靜態(tài)網(wǎng)頁偽靜態(tài):如何分辨動(dòng)態(tài)網(wǎng)頁和靜態(tài)網(wǎng)頁？打開你想判斷的網(wǎng)站后，再在網(wǎng)址框中輸入javascript:alert(document.lastModified)

IE5以上...，此方法可以判斷一個(gè)網(wǎng)頁的最后更新時(shí)間，如果這個(gè)時(shí)間與現(xiàn)在的時(shí)間相同，說明是偽靜態(tài)的，反之為靜態(tài)的。第一章網(wǎng)頁設(shè)計(jì)4.網(wǎng)頁的基本構(gòu)成元素網(wǎng)頁由網(wǎng)址（URL）來識(shí)別與存取，當(dāng)訪問者在瀏覽器的地址欄中輸入網(wǎng)址后，通過一段時(shí)復(fù)雜而又快捷的程序，網(wǎng)頁文件會(huì)被傳送到訪問者的計(jì)算機(jī)內(nèi)，然后通過瀏覽器把這些HTML代碼“翻譯”成圖文并茂的網(wǎng)頁。Flash動(dòng)畫圖像文字視頻圖像鏈接構(gòu)成元素含義文本和圖像這是網(wǎng)頁中兩個(gè)最基本的構(gòu)成元素，目前所有的網(wǎng)頁中都有他們的身影。超鏈接網(wǎng)頁中的鏈接又可分為文字連接和圖像鏈接兩種，只要訪問者用鼠標(biāo)來單擊帶有鏈接的文字或者圖像，就可以自動(dòng)鏈接到對應(yīng)的其他文件，這樣才讓網(wǎng)頁能夠鏈接成為一個(gè)整體，超鏈接也是整個(gè)網(wǎng)絡(luò)的基礎(chǔ)。動(dòng)畫網(wǎng)頁中的動(dòng)畫可以分為GIF動(dòng)畫和Flash動(dòng)畫兩種。動(dòng)態(tài)的內(nèi)容總是要比靜止的內(nèi)容能夠吸引人們的注意力，因此精彩的動(dòng)畫能夠讓網(wǎng)頁更加豐富。表單這是一種可以再訪問者和服務(wù)器之間進(jìn)行信息交互的技術(shù)，使用表單可以完成搜索、登錄、發(fā)送郵件等交互功能。音頻/視頻隨著網(wǎng)絡(luò)技術(shù)的不斷發(fā)展，網(wǎng)站上已經(jīng)不再是單調(diào)的圖像和文字內(nèi)容，越來越多的設(shè)計(jì)人員會(huì)在網(wǎng)頁中加入視頻、背景音樂等，讓網(wǎng)站更加富有個(gè)性、時(shí)尚和魅力。第一章網(wǎng)頁設(shè)計(jì)5.網(wǎng)頁設(shè)計(jì)的基本原則一個(gè)優(yōu)秀的網(wǎng)站要有一個(gè)明確的主題，整個(gè)網(wǎng)站設(shè)計(jì)要圍繞這個(gè)主題進(jìn)行制作，也就是說在網(wǎng)頁設(shè)計(jì)之前要明確網(wǎng)站的目的，所有網(wǎng)頁都是要圍繞著這個(gè)內(nèi)容來制作。首頁設(shè)計(jì)得如何是整個(gè)網(wǎng)站成功與否的關(guān)鍵，反映整個(gè)網(wǎng)站給人的整體感覺。能否吸引訪問者，全在于首頁的設(shè)計(jì)效果。首頁最好要清楚，具有人性化的類別選項(xiàng)，讓訪問者可以快速的找到自己想要的內(nèi)容。網(wǎng)站的分類也十分重要，可以按主題分類、按性質(zhì)分類、按組織結(jié)構(gòu)分類，或者按人們的思考方式分類等等。無論是哪一種分類的方法，都要讓訪客很容易的找到目標(biāo)。

明確主題1

首頁很重要2

分類3好的網(wǎng)站必須與使用者有良好的互動(dòng)性，包括在整個(gè)設(shè)計(jì)呈現(xiàn)、使用介面導(dǎo)引上等等，都應(yīng)該掌握互動(dòng)的原則，讓使用者感覺他的每一步都確實(shí)得到適當(dāng)?shù)幕貞?yīng)，這部分需要一些設(shè)計(jì)上的技巧與軟硬件支持。事實(shí)上，好的網(wǎng)站設(shè)計(jì)必須加上個(gè)人技巧、經(jīng)驗(yàn)累積以及軟硬件技術(shù)的配合運(yùn)用等。

互動(dòng)性4技術(shù)是令人著迷的東西，許多人也喜歡使用技術(shù)。專家普遍指出，好的技術(shù)運(yùn)用會(huì)讓網(wǎng)頁栩栩如生，令人嘆為觀止；但不當(dāng)?shù)募夹g(shù)則適得其反，反而成為網(wǎng)頁的大敗筆。首先，使用技術(shù)時(shí)一定要考慮傳輸時(shí)間，不要成為他人觀看的沉重負(fù)擔(dān)；其次，技術(shù)一定要與本身網(wǎng)站的性質(zhì)及內(nèi)容相配合，不要耍了一大堆不相干的技術(shù)。最后，技術(shù)最好不要用得太過多樣而復(fù)雜，有些人似乎不展現(xiàn)功力就不快樂，所以也不管合不合適，就把所有可用技術(shù)全部用在里面，這時(shí)大家就會(huì)看到一個(gè)慘不忍睹的頁面。圖片是網(wǎng)站的特色之一，它帶有醒目、吸引人以及傳達(dá)信息的功能，好的圖片應(yīng)用可以讓網(wǎng)頁增色不少，但不當(dāng)?shù)膱D片應(yīng)用則會(huì)帶來反效果，而其中又以大量使用無意義及大型的圖片成為網(wǎng)頁設(shè)計(jì)的敗筆。目前國內(nèi)的網(wǎng)絡(luò)傳輸資源極為有限，因此使用圖片時(shí)一定要考慮傳輸時(shí)間的問題。根據(jù)經(jīng)驗(yàn)與統(tǒng)計(jì)，使用者可以忍受的最長等待時(shí)間大約是30秒鐘，如果您的網(wǎng)頁無法在這段時(shí)間內(nèi)傳輸并顯示完畢，那么使用者就會(huì)毫不留情掉頭離去。因此必須依據(jù)HTML文件、圖片文件的大小，考慮傳輸速率、延遲時(shí)間、網(wǎng)絡(luò)交通狀況，以及服務(wù)端與使用者端的軟硬件條件，估算網(wǎng)頁的傳輸與顯示時(shí)間。在圖片使用上，盡量采用一般瀏覽器均可支持的壓縮圖片格式，例如JPEG與gif等，而其中JPEG的壓縮效果較好，適合中大型的圖片，可以節(jié)省傳輸時(shí)間第一章網(wǎng)頁設(shè)計(jì)5.網(wǎng)頁設(shè)計(jì)的基本原則

圖像應(yīng)用技巧5

避免濫用技術(shù)6

及時(shí)的更新和維護(hù)7訪問者希望看到新鮮的東西，沒有人對過時(shí)的信息感興趣，因此網(wǎng)站的信息一定要及時(shí)及時(shí)性，時(shí)刻保持著新鮮感是很重要的。啟－互動(dòng)開場，引起興趣2信息：有價(jià)值的內(nèi)容才會(huì)吸引訪問者1整體布局：好的網(wǎng)頁應(yīng)該干凈、整潔、條理清楚、布局清晰5文字的可讀性：選用常用的字體，用于正文和標(biāo)題、利于閱讀4圖像和版面設(shè)計(jì)：圖像和版面應(yīng)集中反映網(wǎng)站所傳達(dá)的主要信息內(nèi)容6多媒體功能應(yīng)用：動(dòng)畫視頻更能吸引注意力，但需要考慮客戶端的傳輸速度3下載速度：確保打開頁面速度盡可能快，一般人不會(huì)很有耐心的等導(dǎo)向清晰：按照人們的閱讀習(xí)慣去設(shè)置人性化的導(dǎo)向7第一章網(wǎng)頁設(shè)計(jì)6.網(wǎng)頁設(shè)計(jì)的成功要素設(shè)計(jì)一個(gè)成功的網(wǎng)站，具體有下列幾條基本因素，這些因素對網(wǎng)站的成功與否有著重要的影響。

第一章網(wǎng)頁設(shè)計(jì)7.網(wǎng)頁的風(fēng)格網(wǎng)頁的風(fēng)格風(fēng)格（style）是抽象的，是指站點(diǎn)的整體形象給瀏覽者的綜合感受。這個(gè)“整體形象”包括站點(diǎn)的CI“CorporateIdentitySystem”企業(yè)形象識(shí)別系統(tǒng)”（標(biāo)志、色彩、字體、標(biāo)語）、版面布局、瀏覽方式、交互性、文字、語氣、內(nèi)容價(jià)值、存在意義、站點(diǎn)榮譽(yù)等等諸多因素。風(fēng)格的形成需要在開發(fā)中不斷強(qiáng)化、調(diào)整和修飾，也需要不斷向優(yōu)秀網(wǎng)站學(xué)習(xí)。具體設(shè)計(jì)時(shí)，對于不同性質(zhì)的行業(yè)，應(yīng)體現(xiàn)出不同的網(wǎng)站設(shè)計(jì)風(fēng)格。一般情況下，政府部門的網(wǎng)站風(fēng)格應(yīng)比較莊重沉穩(wěn)，文化教育部門的網(wǎng)站應(yīng)該高雅大方，娛樂行業(yè)的網(wǎng)站可以活潑生動(dòng)一些，商務(wù)網(wǎng)站可以貼近民俗，而個(gè)人網(wǎng)站則可以不拘一格，更多地結(jié)合內(nèi)容和設(shè)計(jì)者的興趣，充分彰顯個(gè)性。

第*頁第一章網(wǎng)頁設(shè)計(jì)8.網(wǎng)頁的色彩搭配三原色人眼對紅、綠、藍(lán)最為敏感，人的眼睛像一個(gè)三色接收器的體系，大多數(shù)的顏色可以通過紅、綠、藍(lán)三色按照不同的比例合成產(chǎn)生。同樣，絕大多數(shù)單色光也可以分解成紅、綠、藍(lán)三種色光，這是色度學(xué)的最基本的原理，也稱三原色原理。紅色+綠色=黃色綠色+藍(lán)色=青色紅色+藍(lán)色=品紅紅色+綠色+藍(lán)色=白色冷暖色ColorCircle色環(huán)WarmColor暖色我們將火苗的顏色：紅、黃和橙色歸為暖色。試驗(yàn)表明在紅色的燈光下，我們的身體會(huì)不自覺地分泌更多的腎上腺素，同時(shí)血壓升高、血液循環(huán)加快，體溫上升。ColdColor冷色那些在藍(lán)色和綠色區(qū)域內(nèi)的則被稱為冷色。藍(lán)色和綠色很容易讓人聯(lián)想起水和樹所特有的鎮(zhèn)定的品質(zhì)。實(shí)驗(yàn)顯示藍(lán)色和綠色的光線能夠緩和心跳，降低體溫，放松肌肉。第一章網(wǎng)頁設(shè)計(jì)8.網(wǎng)頁的色彩搭配色彩與情感第一章網(wǎng)頁設(shè)計(jì)8.網(wǎng)頁的色彩搭配色彩與情感第一章網(wǎng)頁設(shè)計(jì)8.網(wǎng)頁的色彩搭配紅色:橙色：黃色：綠色：藍(lán)色：白色：活力、力量、溫暖、堅(jiān)持、憤怒、急躁喜悅、安全、創(chuàng)造力、刺激、快樂、樂觀、擔(dān)心和諧、放松、和平、真誠、滿意、慷慨和平、寬廣、希望、忠誠、靈活、容忍和平、純潔、孤立、寬廣神秘、沉穩(wěn)、嚴(yán)肅、氣質(zhì)黑色：這兩個(gè)色塊一樣大嗎？色彩與品牌第一章網(wǎng)頁設(shè)計(jì)8.網(wǎng)頁的色彩搭配網(wǎng)站用色第一章網(wǎng)頁設(shè)計(jì)8.網(wǎng)頁的色彩搭配無論是平面設(shè)計(jì)、還是網(wǎng)頁設(shè)計(jì)、色彩永遠(yuǎn)是最重要的一環(huán)。當(dāng)距離顯示屏較遠(yuǎn)的時(shí)候，看到的不是優(yōu)美的版式設(shè)計(jì)或者美麗的圖片，而是網(wǎng)頁的色彩。用一種色彩，先選定一種色彩，然后調(diào)整透明度或者飽和度，這樣的頁面看起來色彩統(tǒng)一，有層次感。用兩種色彩，先選中一種色彩，然后選擇它的對比色。用一個(gè)色系，簡單地說就是用一個(gè)感覺的色彩，例如淡藍(lán)、淡黃、淡綠、或者土黃、土灰、土藍(lán)。注意：在網(wǎng)頁配色中，還要切記一些誤區(qū)：1、不要將所有顏色都用到，盡量控制在三至五種色彩以內(nèi)。2、背景和前文的對比盡量要大（絕對不要用花紋繁復(fù)的圖案做背景），以便突出主要文字內(nèi)容。第一章網(wǎng)頁設(shè)計(jì)8.網(wǎng)頁的色彩搭配第一章網(wǎng)頁設(shè)計(jì)8.網(wǎng)頁的色彩搭配第一章網(wǎng)頁設(shè)計(jì)8.網(wǎng)頁的色彩搭配虎彩商城用色？紅色代表著吉祥、喜氣、熱烈、奔放、激情；黑色代表著神秘、沉穩(wěn)、氣質(zhì)，當(dāng)兩者搭配在一起的時(shí)候，無論從哪個(gè)角度看，從哪個(gè)季節(jié)看，它都是那么時(shí)尚搶眼。第一章網(wǎng)頁設(shè)計(jì)8.網(wǎng)頁的色彩搭配同樣用紅黑色的網(wǎng)站名鞋店杰克瓊斯京東店杰克瓊斯天貓店聚尚網(wǎng)第一章網(wǎng)頁設(shè)計(jì)9.網(wǎng)頁設(shè)計(jì)的可用性原則（用戶體驗(yàn)）不是閱讀，而是掃描①總是很忙②不必閱讀所有的內(nèi)容③善于掃描不做最佳選擇，而是滿意即可①總是很忙碌②如同消防員不追根究底，而是勉強(qiáng)應(yīng)付①如果發(fā)現(xiàn)某個(gè)東西能用，我們會(huì)一直用它人們是用web的幾個(gè)事實(shí)第一章網(wǎng)頁設(shè)計(jì)9.網(wǎng)頁設(shè)計(jì)的可用性原則（用戶體驗(yàn)）Don’tMakeMeThinkKrug可用性第一定律A、網(wǎng)頁應(yīng)該設(shè)計(jì)得不言而喻B、網(wǎng)頁避免強(qiáng)迫用戶思考的地方C、如果做不到一切不言而喻，起碼做到讓頁面自我解釋A、不言而喻第一章網(wǎng)頁設(shè)計(jì)9.網(wǎng)頁設(shè)計(jì)的可用性原則（用戶體驗(yàn)）B、網(wǎng)頁應(yīng)避免強(qiáng)迫用戶思考的地方第一章網(wǎng)頁設(shè)計(jì)9.網(wǎng)頁設(shè)計(jì)的可用性原則（用戶體驗(yàn)）C、如果做不到一切不言而喻，起碼做到讓頁面自我解釋●頁面的自我解釋即用戶對頁面稍加學(xué)習(xí)就可以明白，用戶能夠更加專注于他要做的事情?！裉貏e是在進(jìn)行一些嶄新的，開拓性或者非常復(fù)雜的頁面設(shè)計(jì)時(shí)，也許只能做到自我解釋(Self-explanatory)。第一章網(wǎng)頁設(shè)計(jì)9.網(wǎng)頁設(shè)計(jì)的可用性原則（用戶體驗(yàn)）這是什么網(wǎng)站？網(wǎng)站上有些什么？為什么我應(yīng)該在這里，而不是在別的地方？我能在這里做什么？第一章網(wǎng)頁設(shè)計(jì)9.網(wǎng)頁設(shè)計(jì)的可用性原則（用戶體驗(yàn)）主頁的作用在進(jìn)入一個(gè)新網(wǎng)站時(shí)，主頁應(yīng)回答我頭腦里的四個(gè)問題準(zhǔn)確、快速的傳達(dá)一個(gè)整體形象每個(gè)人都想在主頁上垂一根線下來，而且他們想要一份好餌（大而吸引眼球的鏈接）和一個(gè)好地方（首要位置）。主頁需要額外考慮的問題每個(gè)人都想占一席之地想要參與的人太多設(shè)計(jì)要滿足所有人第一章網(wǎng)頁設(shè)計(jì)9.網(wǎng)頁設(shè)計(jì)的可用性原則（用戶體驗(yàn)）可用性實(shí)踐中需要注意的問題團(tuán)隊(duì)中可用性的討論現(xiàn)狀：無休止的信仰大戰(zhàn)本質(zhì)：浪費(fèi)時(shí)間關(guān)鍵：沒有什么所謂的普通用戶唯一改變的方法是實(shí)際的用戶體驗(yàn)測試第一章網(wǎng)頁設(shè)計(jì)9.網(wǎng)頁設(shè)計(jì)的可用性原則（用戶體驗(yàn)）不同職位的人對理想網(wǎng)頁的理解第一章網(wǎng)頁設(shè)計(jì)9.網(wǎng)頁設(shè)計(jì)的可用性原則（用戶體驗(yàn)）第一章網(wǎng)頁設(shè)計(jì)10.網(wǎng)頁設(shè)計(jì)的實(shí)現(xiàn)網(wǎng)頁布局設(shè)計(jì)流程圖確定主色調(diào)用戶需求規(guī)劃站點(diǎn)搜集素材前期策劃頁面版式和布局分析設(shè)計(jì)頁面整體切割和優(yōu)化頁面制作HTML文件添加網(wǎng)頁后臺(tái)程序測試并上線其他頁面設(shè)計(jì)元素1、前期策劃一件事的成功與否，其前期策劃舉足輕重，網(wǎng)頁設(shè)計(jì)也是如此。網(wǎng)站策劃是網(wǎng)頁策劃的前奏，主要包括確定網(wǎng)站的用戶群和定位網(wǎng)站的主題，還有形象策劃、制作策劃和后期宣傳推廣等方面的內(nèi)容。作為建設(shè)網(wǎng)站的第一步，網(wǎng)站策劃應(yīng)該切實(shí)地遵循“以人為本”的創(chuàng)作思路。2、收集素材前期策劃完成后，接下來就是按照確定的做主題進(jìn)行資料和素材的收集、整理了。這一步也是特別重要的，有了好的想法，如果沒有內(nèi)容來充實(shí)，那么肯定是不能實(shí)現(xiàn)的。收集回來的資料一定要整理好，歸類清楚，方便以后使用。第一章網(wǎng)頁設(shè)計(jì)10.網(wǎng)頁設(shè)計(jì)的實(shí)現(xiàn)3、頁面的版式與布局分析A、頁面的尺寸由于頁面尺寸和顯示器大小和顯示器的大小及分辨率有關(guān)，網(wǎng)頁的局限性就在于無法突破顯示器的范圍，而且瀏覽器也占用了不少空間，所以留給頁面的空間會(huì)更小。目前最流行的頁面寬度分辨率是：新浪：950px網(wǎng)易：960px騰訊：1000px京東商城：1210px天貓：1190px鳳凰網(wǎng)：1000px搜狐：950px中學(xué)生學(xué)習(xí)網(wǎng)：960px校內(nèi)網(wǎng)：960pxcsdn：960pxB、整體造型造型就是創(chuàng)造出來的物體形象。這里指頁面的整體形象，這種形象應(yīng)該是一個(gè)整體，圖形與文本的結(jié)合應(yīng)該是層疊有序的，雖然顯示器和瀏覽器都是矩形，但是對于頁面的造型可以充分運(yùn)用自然界中的其他形狀以及它們的組合（矩形、圓形、三角形、菱形等。）第一章網(wǎng)頁設(shè)計(jì)10.網(wǎng)頁設(shè)計(jì)的實(shí)現(xiàn)C、頁頭頁頭又可稱為頁眉，頁眉的作用是定義頁面的主題。例如，一個(gè)站點(diǎn)的名字多數(shù)都顯示在頁眉里，這樣訪問者能很快知道這個(gè)站點(diǎn)是什么內(nèi)容。頁頭是整個(gè)頁面設(shè)計(jì)的關(guān)鍵，它將牽涉到下面的更多設(shè)計(jì)和整個(gè)頁面的協(xié)調(diào)性。頁頭常放置站點(diǎn)名稱和公司標(biāo)志。D、文本文本在頁面中多數(shù)以行或者段落出現(xiàn)，它們的擺放位置決定著整個(gè)頁面布局的可視性。第一章網(wǎng)頁設(shè)計(jì)10.網(wǎng)頁設(shè)計(jì)的實(shí)現(xiàn)E、頁腳頁腳和頁頭相呼應(yīng)，頁頭是放置站點(diǎn)主題的地方，而頁腳是放置制作者或者公司信息的地方。F、圖片圖片和文本是網(wǎng)頁的兩大構(gòu)成元素，缺一不可。如何處理好圖片和文本的位置是整個(gè)頁面布局的關(guān)鍵。G、多媒體除了文本和圖片，還有聲音、動(dòng)畫、視頻等其他媒體。雖然它們不是經(jīng)常被用到，但是隨著網(wǎng)絡(luò)的發(fā)展，它們在網(wǎng)頁布局上的作用也將變得更重要。第一章網(wǎng)頁設(shè)計(jì)10.網(wǎng)頁設(shè)計(jì)的實(shí)現(xiàn)4、確定網(wǎng)站的主色調(diào)色彩是藝術(shù)表現(xiàn)的要素之一，色彩有聯(lián)想與象征的特質(zhì)。在網(wǎng)頁設(shè)計(jì)中，根據(jù)和諧、均衡和重點(diǎn)突出的原則，將不同的色彩進(jìn)行組合搭配起來構(gòu)成的美麗頁面。同時(shí)應(yīng)該根據(jù)色彩對人們心里的影響，合理地加以運(yùn)用。按照色彩的記憶性原則，一般暖色比冷色的記憶性強(qiáng)。色彩還具有聯(lián)想與象征的特質(zhì)。一般情況下，先根據(jù)總體風(fēng)格的要求定出一到兩種主色調(diào)，有CIS（企業(yè)形象識(shí)別系統(tǒng)）的，更應(yīng)該按照其中的VI進(jìn)行色彩運(yùn)用?；疑唧w聯(lián)想：抽象聯(lián)想：第一章網(wǎng)頁設(shè)計(jì)10.網(wǎng)頁設(shè)計(jì)的實(shí)現(xiàn)樹皮、烏云、水泥、油漆等。平凡、失意、謙遜、成熟、穩(wěn)重、消極等。5、設(shè)計(jì)頁面整體在版式布局完成的基礎(chǔ)上，將確定需要的功能模塊（功能模塊主要包含網(wǎng)站標(biāo)志、主菜單、新聞、搜索、友情鏈接、廣告條、郵件列表、版權(quán)信息等）、圖片、文字等放置到頁面上。需要注意的是，這里必須遵循突出重點(diǎn)、平衡協(xié)調(diào)的原則，將網(wǎng)站標(biāo)志、主菜單等最重要的模塊放在最顯眼、最突出的位置，然后再考慮次要模塊的擺放。6、其它頁面元素的設(shè)計(jì)這里的其他頁面元素主要是指按鈕、圖標(biāo)、圖片邊框等一些裝飾性的東西，這些按鈕和小圖標(biāo)不僅能夠裝飾頁面效果，有時(shí)還分擔(dān)了一定的瀏覽和檢索的功能。第一章網(wǎng)頁設(shè)計(jì)10.網(wǎng)頁設(shè)計(jì)的實(shí)現(xiàn)7、切割和優(yōu)化頁面整體的頁面效果制作好以后，就要考慮如何把頁面分割開來，使用什么樣的方法可以使最后生成的頁面的文件量最小。對頁面進(jìn)行切割與優(yōu)化是具有一定的規(guī)律和技巧的。第一章網(wǎng)頁設(shè)計(jì)10.網(wǎng)頁設(shè)計(jì)的實(shí)現(xiàn)8、制作HTML頁面這一步就是具體的制作階段，也就是常說的網(wǎng)頁制作。目前主流的網(wǎng)頁可視化編輯軟件是Adobe公司的Dreamweaver，它具有強(qiáng)大的網(wǎng)頁編輯功能，適