電子商務(wù)企業(yè)網(wǎng)站設(shè)計(jì)

1、 知識(shí)要點(diǎn)知識(shí)要點(diǎn) 能力要點(diǎn)能力要點(diǎn) 案例分析案例分析 技能訓(xùn)練技能訓(xùn)練 返返 回回 經(jīng)濟(jì)管理類專業(yè)核心課程 8/13/2021 1 知識(shí)要點(diǎn)知識(shí)要點(diǎn) 能力要點(diǎn)能力要點(diǎn) 案例分析案例分析 技能訓(xùn)練技能訓(xùn)練 返返 回回 了解企業(yè)網(wǎng)絡(luò)營(yíng)銷網(wǎng)站建設(shè)需要考慮了解企業(yè)網(wǎng)絡(luò)營(yíng)銷網(wǎng)站建設(shè)需要考慮 的因素；的因素； 掌握企業(yè)網(wǎng)絡(luò)營(yíng)銷網(wǎng)站建立的形式；掌握企業(yè)網(wǎng)絡(luò)營(yíng)銷網(wǎng)站建立的形式； 掌握域名設(shè)計(jì)的方法、域名申請(qǐng)與注掌握域名設(shè)計(jì)的方法、域名申請(qǐng)與注 冊(cè)的流程；冊(cè)的流程； 掌握企業(yè)網(wǎng)絡(luò)營(yíng)銷網(wǎng)站導(dǎo)航設(shè)計(jì)；掌握企業(yè)網(wǎng)絡(luò)營(yíng)銷網(wǎng)站導(dǎo)航設(shè)計(jì)； 8/13/2021 2 知識(shí)要點(diǎn)知識(shí)要點(diǎn) 能力要點(diǎn)能力要點(diǎn) 案例分析案例分析 技能

2、訓(xùn)練技能訓(xùn)練 返返 回回 具有進(jìn)行企業(yè)網(wǎng)絡(luò)營(yíng)銷網(wǎng)站的設(shè)計(jì)的具有進(jìn)行企業(yè)網(wǎng)絡(luò)營(yíng)銷網(wǎng)站的設(shè)計(jì)的 能力；能力； 具有企業(yè)網(wǎng)絡(luò)營(yíng)銷網(wǎng)站內(nèi)容設(shè)計(jì)的能具有企業(yè)網(wǎng)絡(luò)營(yíng)銷網(wǎng)站內(nèi)容設(shè)計(jì)的能 力；力； 具有域名設(shè)計(jì)、申請(qǐng)與注冊(cè)的能力；具有域名設(shè)計(jì)、申請(qǐng)與注冊(cè)的能力； 具有一定的網(wǎng)站色彩的搭配能力。具有一定的網(wǎng)站色彩的搭配能力。 8/13/2021 3 知識(shí)要點(diǎn)知識(shí)要點(diǎn) 能力要點(diǎn)能力要點(diǎn) 案例分析案例分析 技能訓(xùn)練技能訓(xùn)練 返返 回回 不同網(wǎng)頁(yè)之間通常具有一定的邏輯關(guān)系，比如先不同網(wǎng)頁(yè)之間通常具有一定的邏輯關(guān)系，比如先 后關(guān)系、包含關(guān)系、并列關(guān)系等，多個(gè)網(wǎng)頁(yè)按照它后關(guān)系、包含關(guān)系、并列關(guān)系等，多個(gè)網(wǎng)頁(yè)按照它 們之間

3、的邏輯關(guān)系組織在一起就形成了各種邏輯結(jié)們之間的邏輯關(guān)系組織在一起就形成了各種邏輯結(jié) 構(gòu)。在現(xiàn)在的網(wǎng)站中，最常見(jiàn)的邏輯結(jié)構(gòu)就是層次構(gòu)。在現(xiàn)在的網(wǎng)站中，最常見(jiàn)的邏輯結(jié)構(gòu)就是層次 型結(jié)構(gòu)，其次是線形結(jié)構(gòu)和網(wǎng)型結(jié)構(gòu)。型結(jié)構(gòu)，其次是線形結(jié)構(gòu)和網(wǎng)型結(jié)構(gòu)。 8/13/2021 4 知識(shí)要點(diǎn)知識(shí)要點(diǎn) 能力要點(diǎn)能力要點(diǎn) 案例分析案例分析 技能訓(xùn)練技能訓(xùn)練 返返 回回 1）線型結(jié)構(gòu)）線型結(jié)構(gòu) 線型結(jié)構(gòu)是最為簡(jiǎn)單的邏輯結(jié)構(gòu)，如圖線型結(jié)構(gòu)是最為簡(jiǎn)單的邏輯結(jié)構(gòu)，如圖3-1所所 示，它將多個(gè)網(wǎng)頁(yè)按照一定的先后順序鏈接起來(lái)，示，它將多個(gè)網(wǎng)頁(yè)按照一定的先后順序鏈接起來(lái)， 使得用戶在沒(méi)有完成上一個(gè)網(wǎng)頁(yè)的訪問(wèn)之前就無(wú)法使得用戶在

4、沒(méi)有完成上一個(gè)網(wǎng)頁(yè)的訪問(wèn)之前就無(wú)法 進(jìn)入下一個(gè)網(wǎng)頁(yè)。進(jìn)入下一個(gè)網(wǎng)頁(yè)。 網(wǎng)頁(yè)網(wǎng)頁(yè)1網(wǎng)頁(yè)網(wǎng)頁(yè)2網(wǎng)頁(yè)網(wǎng)頁(yè)3網(wǎng)頁(yè)網(wǎng)頁(yè)4 圖圖3-1線型結(jié)構(gòu)線型結(jié)構(gòu) 8/13/2021 5 知識(shí)要點(diǎn)知識(shí)要點(diǎn) 能力要點(diǎn)能力要點(diǎn) 案例分析案例分析 技能訓(xùn)練技能訓(xùn)練 返返 回回 線型結(jié)構(gòu)最常用于需要按步驟進(jìn)行的欄目上，例線型結(jié)構(gòu)最常用于需要按步驟進(jìn)行的欄目上，例 如用戶注冊(cè)、建立定單、教程等。如用戶注冊(cè)、建立定單、教程等。 如在當(dāng)當(dāng)網(wǎng)購(gòu)買圖書(shū)或者音像制品，也必須按如在當(dāng)當(dāng)網(wǎng)購(gòu)買圖書(shū)或者音像制品，也必須按 順序進(jìn)行選擇商品、確認(rèn)購(gòu)物車、填寫(xiě)定單、生順序進(jìn)行選擇商品、確認(rèn)購(gòu)物車、填寫(xiě)定單、生 成定單四個(gè)步驟：如圖成定單四個(gè)步驟：

5、如圖3-2所示：所示： 選擇商品選擇商品確認(rèn)購(gòu)物確認(rèn)購(gòu)物填寫(xiě)定單填寫(xiě)定單生成定單生成定單 圖圖3-2當(dāng)當(dāng)網(wǎng)購(gòu)物流程當(dāng)當(dāng)網(wǎng)購(gòu)物流程 8/13/2021 6 知識(shí)要點(diǎn)知識(shí)要點(diǎn) 能力要點(diǎn)能力要點(diǎn) 案例分析案例分析 技能訓(xùn)練技能訓(xùn)練 返返 回回 2）層次型結(jié)構(gòu)）層次型結(jié)構(gòu) 層次型結(jié)構(gòu)是按照網(wǎng)頁(yè)之間的包含關(guān)系組織而層次型結(jié)構(gòu)是按照網(wǎng)頁(yè)之間的包含關(guān)系組織而 成。前面圖成。前面圖3-3就是一個(gè)典型的層次型結(jié)構(gòu)，它很像就是一個(gè)典型的層次型結(jié)構(gòu)，它很像 一棵倒置的樹(shù)。一棵倒置的樹(shù)。 層次型結(jié)構(gòu)簡(jiǎn)單而且直觀，能將所有的內(nèi)容劃層次型結(jié)構(gòu)簡(jiǎn)單而且直觀，能將所有的內(nèi)容劃 分得非常清晰且便于理解，所以很多網(wǎng)站都采用這分得

6、非常清晰且便于理解，所以很多網(wǎng)站都采用這 種結(jié)構(gòu)來(lái)進(jìn)行總體的欄目規(guī)劃。種結(jié)構(gòu)來(lái)進(jìn)行總體的欄目規(guī)劃。 8/13/2021 7 知識(shí)要點(diǎn)知識(shí)要點(diǎn) 能力要點(diǎn)能力要點(diǎn) 案例分析案例分析 技能訓(xùn)練技能訓(xùn)練 返返 回回 層次型結(jié)構(gòu)也有不好的地方，就是用戶如果層次型結(jié)構(gòu)也有不好的地方，就是用戶如果 要訪問(wèn)最底層的網(wǎng)頁(yè)就不得不按照層次從上到下一要訪問(wèn)最底層的網(wǎng)頁(yè)就不得不按照層次從上到下一 級(jí)一級(jí)地訪問(wèn)，最終到達(dá)想要訪問(wèn)的網(wǎng)頁(yè)。級(jí)一級(jí)地訪問(wèn)，最終到達(dá)想要訪問(wèn)的網(wǎng)頁(yè)。 所以過(guò)深過(guò)于復(fù)雜的層次型結(jié)構(gòu)反而會(huì)帶來(lái)很所以過(guò)深過(guò)于復(fù)雜的層次型結(jié)構(gòu)反而會(huì)帶來(lái)很 多不良的影響，最好的深度是三層，另外，建立一多不良的影響，最好的

7、深度是三層，另外，建立一 個(gè)良好的導(dǎo)航系統(tǒng)也可以彌補(bǔ)層次型結(jié)構(gòu)這方面的個(gè)良好的導(dǎo)航系統(tǒng)也可以彌補(bǔ)層次型結(jié)構(gòu)這方面的 缺點(diǎn)。缺點(diǎn)。 8/13/2021 8 知識(shí)要點(diǎn)知識(shí)要點(diǎn) 能力要點(diǎn)能力要點(diǎn) 案例分析案例分析 技能訓(xùn)練技能訓(xùn)練 返返 回回 3）網(wǎng)絡(luò)型結(jié)構(gòu)）網(wǎng)絡(luò)型結(jié)構(gòu) 如圖如圖3-3所示，網(wǎng)絡(luò)型結(jié)構(gòu)是指多個(gè)網(wǎng)頁(yè)相互之間所示，網(wǎng)絡(luò)型結(jié)構(gòu)是指多個(gè)網(wǎng)頁(yè)相互之間 都超鏈接的一種結(jié)構(gòu)，這些網(wǎng)頁(yè)可以是層次結(jié)構(gòu)上都超鏈接的一種結(jié)構(gòu)，這些網(wǎng)頁(yè)可以是層次結(jié)構(gòu)上 的任意網(wǎng)頁(yè)，但是因?yàn)閷?dǎo)航的需要或者內(nèi)容上的相的任意網(wǎng)頁(yè)，但是因?yàn)閷?dǎo)航的需要或者內(nèi)容上的相 關(guān)性而鏈接在一起。關(guān)性而鏈接在一起。 網(wǎng)頁(yè)網(wǎng)頁(yè) 網(wǎng)頁(yè)網(wǎng)頁(yè) 網(wǎng)頁(yè)網(wǎng)頁(yè)

8、 網(wǎng)頁(yè)網(wǎng)頁(yè) 圖圖3-3網(wǎng)絡(luò)型結(jié)構(gòu)網(wǎng)絡(luò)型結(jié)構(gòu) 8/13/2021 9 知識(shí)要點(diǎn)知識(shí)要點(diǎn) 能力要點(diǎn)能力要點(diǎn) 案例分析案例分析 技能訓(xùn)練技能訓(xùn)練 返返 回回 網(wǎng)絡(luò)型結(jié)構(gòu)的實(shí)現(xiàn)在于所有相關(guān)的網(wǎng)頁(yè)上保留到其網(wǎng)絡(luò)型結(jié)構(gòu)的實(shí)現(xiàn)在于所有相關(guān)的網(wǎng)頁(yè)上保留到其 他網(wǎng)頁(yè)的超鏈接。這種結(jié)構(gòu)使用戶更方便地在網(wǎng)絡(luò)他網(wǎng)頁(yè)的超鏈接。這種結(jié)構(gòu)使用戶更方便地在網(wǎng)絡(luò) 上遨游，但同時(shí)也帶來(lái)一個(gè)龐大的超鏈接數(shù)的問(wèn)題。上遨游，但同時(shí)也帶來(lái)一個(gè)龐大的超鏈接數(shù)的問(wèn)題。 一般來(lái)說(shuō)，總的超鏈接數(shù)應(yīng)該等于網(wǎng)頁(yè)數(shù)乘以網(wǎng)頁(yè)一般來(lái)說(shuō)，總的超鏈接數(shù)應(yīng)該等于網(wǎng)頁(yè)數(shù)乘以網(wǎng)頁(yè) 數(shù)減一，如有數(shù)減一，如有10個(gè)網(wǎng)頁(yè)，那么就有個(gè)網(wǎng)頁(yè)，那么就有99個(gè)超鏈接，這個(gè)超鏈接

9、，這 么龐大的超鏈接數(shù)維護(hù)起來(lái)相當(dāng)麻煩，某個(gè)網(wǎng)頁(yè)的么龐大的超鏈接數(shù)維護(hù)起來(lái)相當(dāng)麻煩，某個(gè)網(wǎng)頁(yè)的 8/13/2021 10 知識(shí)要點(diǎn)知識(shí)要點(diǎn) 能力要點(diǎn)能力要點(diǎn) 案例分析案例分析 技能訓(xùn)練技能訓(xùn)練 返返 回回 改動(dòng)（如改名、刪除、增加）就可能同時(shí)需要對(duì)所改動(dòng)（如改名、刪除、增加）就可能同時(shí)需要對(duì)所 有的網(wǎng)頁(yè)進(jìn)行相應(yīng)的修改，所以在網(wǎng)站中需要謹(jǐn)慎有的網(wǎng)頁(yè)進(jìn)行相應(yīng)的修改，所以在網(wǎng)站中需要謹(jǐn)慎 使用這種結(jié)構(gòu)。使用這種結(jié)構(gòu)。 4、網(wǎng)站目錄結(jié)構(gòu)設(shè)計(jì)、網(wǎng)站目錄結(jié)構(gòu)設(shè)計(jì) 目錄結(jié)構(gòu)又稱為物理結(jié)構(gòu)，它設(shè)計(jì)解決的是如何目錄結(jié)構(gòu)又稱為物理結(jié)構(gòu)，它設(shè)計(jì)解決的是如何 在硬盤(pán)上更好地存放包括網(wǎng)頁(yè)、圖片、在硬盤(pán)上更好地存放包括網(wǎng)

10、頁(yè)、圖片、Flash動(dòng)畫(huà)、動(dòng)畫(huà)、 JavaApplet、數(shù)據(jù)庫(kù)等各種資源在內(nèi)的所有網(wǎng)站、數(shù)據(jù)庫(kù)等各種資源在內(nèi)的所有網(wǎng)站 資源。資源。 8/13/2021 11 知識(shí)要點(diǎn)知識(shí)要點(diǎn) 能力要點(diǎn)能力要點(diǎn) 案例分析案例分析 技能訓(xùn)練技能訓(xùn)練 返返 回回 目錄結(jié)構(gòu)是否合理，對(duì)網(wǎng)站的創(chuàng)建效率會(huì)產(chǎn)生目錄結(jié)構(gòu)是否合理，對(duì)網(wǎng)站的創(chuàng)建效率會(huì)產(chǎn)生 較大的影響，但更主要的，會(huì)對(duì)未來(lái)網(wǎng)站的性能、較大的影響，但更主要的，會(huì)對(duì)未來(lái)網(wǎng)站的性能、 網(wǎng)站的維護(hù)及擴(kuò)展產(chǎn)生很大的影響。網(wǎng)站的維護(hù)及擴(kuò)展產(chǎn)生很大的影響。 目錄結(jié)構(gòu)對(duì)用戶來(lái)說(shuō)是不可見(jiàn)的，它只針對(duì)網(wǎng)目錄結(jié)構(gòu)對(duì)用戶來(lái)說(shuō)是不可見(jiàn)的，它只針對(duì)網(wǎng) 站管理員，所以它的設(shè)計(jì)是為了網(wǎng)站管理

11、員能從文站管理員，所以它的設(shè)計(jì)是為了網(wǎng)站管理員能從文 件的角度更好地管理網(wǎng)站的所有資源。件的角度更好地管理網(wǎng)站的所有資源。 8/13/2021 12 知識(shí)要點(diǎn)知識(shí)要點(diǎn) 能力要點(diǎn)能力要點(diǎn) 案例分析案例分析 技能訓(xùn)練技能訓(xùn)練 返返 回回 目錄結(jié)構(gòu)的設(shè)計(jì)通常需要遵循以下原則：目錄結(jié)構(gòu)的設(shè)計(jì)通常需要遵循以下原則： 1）不要將所有的文件都放在根目錄下）不要將所有的文件都放在根目錄下 2）根據(jù)欄目規(guī)劃來(lái)設(shè)計(jì)目錄結(jié)構(gòu)）根據(jù)欄目規(guī)劃來(lái)設(shè)計(jì)目錄結(jié)構(gòu) 3）每個(gè)目錄下都建立獨(dú)立的）每個(gè)目錄下都建立獨(dú)立的images子目錄子目錄 4）目錄的層次不要太深）目錄的層次不要太深 5）不要使用中文目錄名）不要使用中文目錄名

12、6）可執(zhí)行文件和不可執(zhí)行文件分開(kāi)）可執(zhí)行文件和不可執(zhí)行文件分開(kāi) 7）數(shù)據(jù)庫(kù)文件單獨(dú)放置）數(shù)據(jù)庫(kù)文件單獨(dú)放置 8）不要使用過(guò)長(zhǎng)的目錄）不要使用過(guò)長(zhǎng)的目錄 8/13/2021 13 知識(shí)要點(diǎn)知識(shí)要點(diǎn) 能力要點(diǎn)能力要點(diǎn) 案例分析案例分析 技能訓(xùn)練技能訓(xùn)練 返返 回回 一、要求與目的一、要求與目的 掌握網(wǎng)站的色彩搭配掌握網(wǎng)站的色彩搭配 掌握網(wǎng)站的版面布局設(shè)計(jì)掌握網(wǎng)站的版面布局設(shè)計(jì) 掌握網(wǎng)站的導(dǎo)航設(shè)計(jì)掌握網(wǎng)站的導(dǎo)航設(shè)計(jì) 二、規(guī)劃分析過(guò)程二、規(guī)劃分析過(guò)程 1、風(fēng)格設(shè)計(jì)：、風(fēng)格設(shè)計(jì)： 風(fēng)格設(shè)計(jì)包含很多內(nèi)容，為了體現(xiàn)個(gè)人風(fēng)格，風(fēng)格設(shè)計(jì)包含很多內(nèi)容，為了體現(xiàn)個(gè)人風(fēng)格， 符合網(wǎng)站的名稱和定位，下面我們?cè)谏蚀钆浜?/p>

13、版符合網(wǎng)站的名稱和定位，下面我們?cè)谏蚀钆浜桶?面布局方面做一些規(guī)劃和設(shè)計(jì)。面布局方面做一些規(guī)劃和設(shè)計(jì)。 8/13/2021 14 知識(shí)要點(diǎn)知識(shí)要點(diǎn) 能力要點(diǎn)能力要點(diǎn) 案例分析案例分析 技能訓(xùn)練技能訓(xùn)練 返返 回回 “T”結(jié)構(gòu)結(jié)構(gòu):所謂所謂“T”結(jié)構(gòu)，就是指網(wǎng)頁(yè)上邊結(jié)構(gòu)，就是指網(wǎng)頁(yè)上邊 和左邊相結(jié)合，頁(yè)面頂部為橫條網(wǎng)站標(biāo)志和廣告條，和左邊相結(jié)合，頁(yè)面頂部為橫條網(wǎng)站標(biāo)志和廣告條， 下方左面為主菜單，右面顯示內(nèi)容的布局，這是網(wǎng)下方左面為主菜單，右面顯示內(nèi)容的布局，這是網(wǎng) 頁(yè)設(shè)計(jì)中用得最廣泛的一種布局方式。頁(yè)設(shè)計(jì)中用得最廣泛的一種布局方式。 這樣的布局有其固有的優(yōu)點(diǎn)，因?yàn)槿说淖⒁饬@樣的布局有其固有

14、的優(yōu)點(diǎn)，因?yàn)槿说淖⒁饬?主要在右下角，所以企業(yè)想要發(fā)布給用戶的信息都主要在右下角，所以企業(yè)想要發(fā)布給用戶的信息都 能被用戶以最大可能性獲取；其次是頁(yè)面結(jié)構(gòu)清晰。能被用戶以最大可能性獲?。黄浯问琼?yè)面結(jié)構(gòu)清晰。 缺點(diǎn)是規(guī)矩呆板，如果細(xì)節(jié)色彩上不注意，很缺點(diǎn)是規(guī)矩呆板，如果細(xì)節(jié)色彩上不注意，很 容易讓人容易讓人“看之無(wú)味看之無(wú)味”。 8/13/2021 15 知識(shí)要點(diǎn)知識(shí)要點(diǎn) 能力要點(diǎn)能力要點(diǎn) 案例分析案例分析 技能訓(xùn)練技能訓(xùn)練 返返 回回 （1）正常平衡：正常平衡亦稱）正常平衡：正常平衡亦稱“勻稱勻稱”。多指左。多指左 右、上下對(duì)照形式，主要強(qiáng)調(diào)秩序，能達(dá)到安定右、上下對(duì)照形式，主要強(qiáng)調(diào)秩序，能達(dá)

15、到安定 誠(chéng)實(shí)、信賴的效果。誠(chéng)實(shí)、信賴的效果。 （2）異常平衡：異常平衡即非對(duì)照形式，都是不）異常平衡：異常平衡即非對(duì)照形式，都是不 均衡的，此種布局能達(dá)到強(qiáng)調(diào)性、不安性、高注均衡的，此種布局能達(dá)到強(qiáng)調(diào)性、不安性、高注 目性的效果。目性的效果。 （3）對(duì)比：所謂對(duì)比，不僅利用色彩、色調(diào)等技）對(duì)比：所謂對(duì)比，不僅利用色彩、色調(diào)等技 巧來(lái)作表現(xiàn)，在內(nèi)容上也可涉及古與今、新與舊、巧來(lái)作表現(xiàn)，在內(nèi)容上也可涉及古與今、新與舊、 貧與富等對(duì)比。貧與富等對(duì)比。 （4）空白：這種表現(xiàn)方法對(duì)體現(xiàn)網(wǎng)頁(yè)的格調(diào)十分）空白：這種表現(xiàn)方法對(duì)體現(xiàn)網(wǎng)頁(yè)的格調(diào)十分 有效。有效。 8/13/2021 16 知識(shí)要點(diǎn)知識(shí)要點(diǎn) 能力要

16、點(diǎn)能力要點(diǎn) 案例分析案例分析 技能訓(xùn)練技能訓(xùn)練 返返 回回 網(wǎng)頁(yè)中最難處理的就是色彩搭配的問(wèn)題網(wǎng)頁(yè)中最難處理的就是色彩搭配的問(wèn)題 所以網(wǎng)頁(yè)設(shè)計(jì)不僅僅涉及到技術(shù)問(wèn)題，還包含了所以網(wǎng)頁(yè)設(shè)計(jì)不僅僅涉及到技術(shù)問(wèn)題，還包含了 很重的藝術(shù)因素很重的藝術(shù)因素 根據(jù)專業(yè)的研究機(jī)構(gòu)研究表明：彩色的記憶效果根據(jù)專業(yè)的研究機(jī)構(gòu)研究表明：彩色的記憶效果 是黑白色的是黑白色的3.5倍，也就是說(shuō)，在一般情況下，倍，也就是說(shuō)，在一般情況下， 彩色頁(yè)面較黑白頁(yè)面更加吸引人。彩色頁(yè)面較黑白頁(yè)面更加吸引人。 網(wǎng)頁(yè)色彩搭配的原理網(wǎng)頁(yè)色彩搭配的原理 網(wǎng)頁(yè)色彩搭配的技巧網(wǎng)頁(yè)色彩搭配的技巧 8/13/2021 17 知識(shí)要點(diǎn)知識(shí)要點(diǎn) 能

17、力要點(diǎn)能力要點(diǎn) 案例分析案例分析 技能訓(xùn)練技能訓(xùn)練 返返 回回 色彩的鮮明性：引人注目色彩的鮮明性：引人注目 色彩的獨(dú)特性：突出企業(yè)形象色彩的獨(dú)特性：突出企業(yè)形象 色彩的合適性：要與網(wǎng)站的主題相符色彩的合適性：要與網(wǎng)站的主題相符 色彩的聯(lián)想性：與網(wǎng)站的內(nèi)容相關(guān)聯(lián)色彩的聯(lián)想性：與網(wǎng)站的內(nèi)容相關(guān)聯(lián) 8/13/2021 18 知識(shí)要點(diǎn)知識(shí)要點(diǎn) 能力要點(diǎn)能力要點(diǎn) 案例分析案例分析 技能訓(xùn)練技能訓(xùn)練 返返 回回 相同色系色彩相同色系色彩 運(yùn)用對(duì)比色或互補(bǔ)色運(yùn)用對(duì)比色或互補(bǔ)色 盡量控制在三種色彩以內(nèi)盡量控制在三種色彩以內(nèi) 背景和文字色差對(duì)比大背景和文字色差對(duì)比大 根據(jù)區(qū)域或客戶群的構(gòu)成選擇根據(jù)區(qū)域或客戶群

18、的構(gòu)成選擇 8/13/2021 19 知識(shí)要點(diǎn)知識(shí)要點(diǎn) 能力要點(diǎn)能力要點(diǎn) 案例分析案例分析 技能訓(xùn)練技能訓(xùn)練 返返 回回 首頁(yè)是一個(gè)網(wǎng)站的首頁(yè)是一個(gè)網(wǎng)站的“門面門面”，馬虎不得，馬虎不得 網(wǎng)站是否能夠吸引瀏覽者，能否促使瀏覽者繼續(xù)網(wǎng)站是否能夠吸引瀏覽者，能否促使瀏覽者繼續(xù) 點(diǎn)擊進(jìn)入，首頁(yè)至關(guān)重要點(diǎn)擊進(jìn)入，首頁(yè)至關(guān)重要 首頁(yè)的設(shè)計(jì)應(yīng)該遵循：快速、簡(jiǎn)潔、吸引人、信首頁(yè)的設(shè)計(jì)應(yīng)該遵循：快速、簡(jiǎn)潔、吸引人、信 息概括能力強(qiáng)、易于導(dǎo)航的原則，同時(shí)融入企業(yè)息概括能力強(qiáng)、易于導(dǎo)航的原則，同時(shí)融入企業(yè) 形象，突出企業(yè)特點(diǎn)，爭(zhēng)取在第一時(shí)間吸引瀏覽形象，突出企業(yè)特點(diǎn)，爭(zhēng)取在第一時(shí)間吸引瀏覽 者的眼球者的眼球 8/

19、13/2021 20 知識(shí)要點(diǎn)知識(shí)要點(diǎn) 能力要點(diǎn)能力要點(diǎn) 案例分析案例分析 技能訓(xùn)練技能訓(xùn)練 返返 回回 版權(quán)信息、聯(lián)絡(luò)信息、電版權(quán)信息、聯(lián)絡(luò)信息、電 子郵件地址子郵件地址 廣告條廣告條通常應(yīng)體現(xiàn)出企業(yè)網(wǎng)站的主題通常應(yīng)體現(xiàn)出企業(yè)網(wǎng)站的主題 企業(yè)的名稱、標(biāo)企業(yè)的名稱、標(biāo) 語(yǔ)、徽號(hào)或圖像語(yǔ)、徽號(hào)或圖像 主主 菜菜 單單 最新消息最新消息 搜索搜索 友情鏈接友情鏈接 郵件列表郵件列表 計(jì)數(shù)器計(jì)數(shù)器 用戶登錄用戶登錄 視覺(jué)興趣點(diǎn)視覺(jué)興趣點(diǎn)通通 常是一幅圖片，表常是一幅圖片，表 示企業(yè)最新的產(chǎn)品、示企業(yè)最新的產(chǎn)品、 最新的服務(wù)等；或最新的服務(wù)等；或 是一些重點(diǎn)推薦的是一些重點(diǎn)推薦的 產(chǎn)品產(chǎn)品 頁(yè)頭頁(yè)頭

20、內(nèi)內(nèi) 容容 頁(yè)頁(yè) 頁(yè)尾頁(yè)尾 8/13/2021 21 知識(shí)要點(diǎn)知識(shí)要點(diǎn) 能力要點(diǎn)能力要點(diǎn) 案例分析案例分析 技能訓(xùn)練技能訓(xùn)練 返返 回回 商業(yè)網(wǎng)站要避免封面問(wèn)題，只有一個(gè)商業(yè)網(wǎng)站要避免封面問(wèn)題，只有一個(gè)Logo的首頁(yè)的首頁(yè) 是不合適的是不合適的 首頁(yè)明確，主題突出。使瀏覽者進(jìn)入網(wǎng)站就知道該首頁(yè)明確，主題突出。使瀏覽者進(jìn)入網(wǎng)站就知道該 網(wǎng)站的類型、業(yè)務(wù)，最好有一個(gè)突出的主題句，除網(wǎng)站的類型、業(yè)務(wù)，最好有一個(gè)突出的主題句，除 非你的知名度非你的知名度=可口可樂(lè)可口可樂(lè) 盡可能縮短下載時(shí)間。合理運(yùn)用圖片和新技術(shù)，注盡可能縮短下載時(shí)間。合理運(yùn)用圖片和新技術(shù)，注 意圖片的大小意圖片的大小 考慮不同顯示器

21、的分辨率，不同的瀏覽軟件版本兼考慮不同顯示器的分辨率，不同的瀏覽軟件版本兼 容容 8/13/2021 22 知識(shí)要點(diǎn)知識(shí)要點(diǎn) 能力要點(diǎn)能力要點(diǎn) 案例分析案例分析 技能訓(xùn)練技能訓(xùn)練 返返 回回 1）色彩的選取及搭配）色彩的選取及搭配 本網(wǎng)站名為本網(wǎng)站名為“淡藍(lán)的天空淡藍(lán)的天空”，因此整個(gè)網(wǎng)站擬采，因此整個(gè)網(wǎng)站擬采 用藍(lán)色為主要色調(diào)，再輔助于一些綠等其它顏色，用藍(lán)色為主要色調(diào)，再輔助于一些綠等其它顏色， 體現(xiàn)涼爽、清新、淡雅、浪漫的氛圍。比如首頁(yè)就體現(xiàn)涼爽、清新、淡雅、浪漫的氛圍。比如首頁(yè)就 采用一副包含網(wǎng)站名稱、各主要欄目，以藍(lán)色為主采用一副包含網(wǎng)站名稱、各主要欄目，以藍(lán)色為主 要色調(diào)的圖片來(lái)作

22、為整個(gè)首頁(yè)的界面，如圖要色調(diào)的圖片來(lái)作為整個(gè)首頁(yè)的界面，如圖3-4所所 示。示。 8/13/2021 23 知識(shí)要點(diǎn)知識(shí)要點(diǎn) 能力要點(diǎn)能力要點(diǎn) 案例分析案例分析 技能訓(xùn)練技能訓(xùn)練 返返 回回 圖圖3-4“淡藍(lán)的天空淡藍(lán)的天空”首頁(yè)圖形界面首頁(yè)圖形界面 8/13/2021 24 知識(shí)要點(diǎn)知識(shí)要點(diǎn) 能力要點(diǎn)能力要點(diǎn) 案例分析案例分析 技能訓(xùn)練技能訓(xùn)練 返返 回回 2）版面布局）版面布局 首頁(yè)布局：首頁(yè)布局： 首頁(yè)雖然采用圖首頁(yè)雖然采用圖310的圖片作為整個(gè)網(wǎng)頁(yè)的的圖片作為整個(gè)網(wǎng)頁(yè)的 界面，但在布局上基本屬于圖界面，但在布局上基本屬于圖311所示的布局所示的布局 方式。方式。 8/13/2021 2

23、5 知識(shí)要點(diǎn)知識(shí)要點(diǎn) 能力要點(diǎn)能力要點(diǎn) 案例分析案例分析 技能訓(xùn)練技能訓(xùn)練 返返 回回 圖圖 標(biāo)題標(biāo)題 文字文字欄目欄目 圖圖3-5“淡藍(lán)的天空淡藍(lán)的天空”首頁(yè)版面布局首頁(yè)版面布局 8/13/2021 26 知識(shí)要點(diǎn)知識(shí)要點(diǎn) 能力要點(diǎn)能力要點(diǎn) 案例分析案例分析 技能訓(xùn)練技能訓(xùn)練 返返 回回 “感動(dòng)你的心靈感動(dòng)你的心靈”欄目主要是文摘、網(wǎng)文、雜欄目主要是文摘、網(wǎng)文、雜 文、專欄等，界面利用圖形設(shè)計(jì)成一本打開(kāi)的書(shū)文、專欄等，界面利用圖形設(shè)計(jì)成一本打開(kāi)的書(shū) 如圖如圖36所示，但在版面布局上采用如圖所示，但在版面布局上采用如圖37所所 示的布局方式。示的布局方式。 8/13/2021 27 知識(shí)要點(diǎn)知

24、識(shí)要點(diǎn) 能力要點(diǎn)能力要點(diǎn) 案例分析案例分析 技能訓(xùn)練技能訓(xùn)練 返返 回回 圖圖3-6“感動(dòng)你的心靈感動(dòng)你的心靈”欄目圖欄目圖 8/13/2021 28 知識(shí)要點(diǎn)知識(shí)要點(diǎn) 能力要點(diǎn)能力要點(diǎn) 案例分析案例分析 技能訓(xùn)練技能訓(xùn)練 返返 回回 圖圖3-7“感動(dòng)你的心靈感動(dòng)你的心靈” 版面布局圖版面布局圖 交替變化的圖交替變化的圖欄目?jī)?nèi)容欄目?jī)?nèi)容 子子 欄欄 目目 目目 錄錄 8/13/2021 29 知識(shí)要點(diǎn)知識(shí)要點(diǎn) 能力要點(diǎn)能力要點(diǎn) 案例分析案例分析 技能訓(xùn)練技能訓(xùn)練 返返 回回 其他欄目布局基本采用類似的布局方式。其他欄目布局基本采用類似的布局方式。 3）導(dǎo)航設(shè)計(jì)）導(dǎo)航設(shè)計(jì) 由于本案例欄目數(shù)量、網(wǎng)

25、頁(yè)數(shù)量都不多，導(dǎo)航由于本案例欄目數(shù)量、網(wǎng)頁(yè)數(shù)量都不多，導(dǎo)航 系統(tǒng)選擇欄目名稱直接導(dǎo)航的形式。系統(tǒng)選擇欄目名稱直接導(dǎo)航的形式。 三、本案例知識(shí)點(diǎn)三、本案例知識(shí)點(diǎn) 1、網(wǎng)站的風(fēng)格設(shè)計(jì)、網(wǎng)站的風(fēng)格設(shè)計(jì) 網(wǎng)站的風(fēng)格是抽象的，它往往無(wú)法用一個(gè)具體網(wǎng)站的風(fēng)格是抽象的，它往往無(wú)法用一個(gè)具體 的物體來(lái)描述，它是指用戶的物體來(lái)描述，它是指用戶 8/13/2021 30 知識(shí)要點(diǎn)知識(shí)要點(diǎn) 能力要點(diǎn)能力要點(diǎn) 案例分析案例分析 技能訓(xùn)練技能訓(xùn)練 返返 回回 對(duì)網(wǎng)站整體形象的一種感覺(jué)。這個(gè)整體形象包括網(wǎng)站對(duì)網(wǎng)站整體形象的一種感覺(jué)。這個(gè)整體形象包括網(wǎng)站 標(biāo)志、色彩、版面布局、交互方式、文字編排、圖片、標(biāo)志、色彩、版面布局

26、、交互方式、文字編排、圖片、 動(dòng)畫(huà)等諸多因素。動(dòng)畫(huà)等諸多因素。 風(fēng)格又是獨(dú)特的，是網(wǎng)站最不同于其他網(wǎng)站的地風(fēng)格又是獨(dú)特的，是網(wǎng)站最不同于其他網(wǎng)站的地 方。統(tǒng)一的風(fēng)格使用戶無(wú)論處在網(wǎng)站的哪一頁(yè)，都明方。統(tǒng)一的風(fēng)格使用戶無(wú)論處在網(wǎng)站的哪一頁(yè)，都明 確知道自己正在訪問(wèn)的是這個(gè)網(wǎng)站。比如，微軟公司確知道自己正在訪問(wèn)的是這個(gè)網(wǎng)站。比如，微軟公司 的網(wǎng)站，任何一個(gè)網(wǎng)頁(yè)都有微軟特有的藍(lán)色和的網(wǎng)站，任何一個(gè)網(wǎng)頁(yè)都有微軟特有的藍(lán)色和 “Microsoft”網(wǎng)站標(biāo)志。網(wǎng)站標(biāo)志。 8/13/2021 31 知識(shí)要點(diǎn)知識(shí)要點(diǎn) 能力要點(diǎn)能力要點(diǎn) 案例分析案例分析 技能訓(xùn)練技能訓(xùn)練 返返 回回 1）色彩搭配）色彩搭配 網(wǎng)

27、站的色彩是最影響網(wǎng)站整體風(fēng)格的因素，也網(wǎng)站的色彩是最影響網(wǎng)站整體風(fēng)格的因素，也 是站點(diǎn)美工設(shè)計(jì)中最令人頭疼的問(wèn)題。因此，在介是站點(diǎn)美工設(shè)計(jì)中最令人頭疼的問(wèn)題。因此，在介 紹色彩搭配之前，先來(lái)看看色彩的基本知識(shí)。紹色彩搭配之前，先來(lái)看看色彩的基本知識(shí)。 色彩的基本知識(shí)色彩的基本知識(shí) 在物理學(xué)中，顏色是因?yàn)楣獾恼凵涠a(chǎn)生的。顏在物理學(xué)中，顏色是因?yàn)楣獾恼凵涠a(chǎn)生的。顏 色不同，光的波長(zhǎng)也就不同，紅、綠、藍(lán)是自然界色不同，光的波長(zhǎng)也就不同，紅、綠、藍(lán)是自然界 的三原色，的三原色， 8/13/2021 32 知識(shí)要點(diǎn)知識(shí)要點(diǎn) 能力要點(diǎn)能力要點(diǎn) 案例分析案例分析 技能訓(xùn)練技能訓(xùn)練 返返 回回 紅色：紅色：是一種激奮的色彩，給人以沖動(dòng)、憤怒、熱情和活力的感是一種激奮的色彩，給人以沖動(dòng)、憤怒、熱情和活力的感 覺(jué)。覺(jué)。 綠色：綠色：介于冷暖兩種色彩的中間，顯得和睦、寧?kù)o、健康、安全。介于冷暖兩種色彩的中間，顯得和睦、寧?kù)o、健康、安全。 它和金黃、淡白搭配，可以產(chǎn)生優(yōu)雅、舒適的氣氛。它和金黃、淡白搭配，可以產(chǎn)生優(yōu)雅、舒適的氣氛。 橙色：橙色：也是一種激奮的色彩，具有輕快、歡欣、熱烈、溫馨和時(shí)也是一種激奮的色彩，具有輕快、歡欣、熱烈、溫馨和時(shí) 尚的效果。尚的效果。 黃色：黃色：充滿快樂(lè)、希