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

企業(yè)網(wǎng)站設計經(jīng)濟管理類專業(yè)核心課程1/15/20231知識要點★了解企業(yè)網(wǎng)絡營銷網(wǎng)站建設需要考慮的因素；★掌握企業(yè)網(wǎng)絡營銷網(wǎng)站建立的形式；★掌握域名設計的方法、域名申請與注冊的流程；★掌握企業(yè)網(wǎng)絡營銷網(wǎng)站導航設計；1/15/20232能力要點★具有進行企業(yè)網(wǎng)絡營銷網(wǎng)站的設計的能力；★具有企業(yè)網(wǎng)絡營銷網(wǎng)站內(nèi)容設計的能力；★具有域名設計、申請與注冊的能力；★具有一定的網(wǎng)站色彩的搭配能力。1/15/20233

不同網(wǎng)頁之間通常具有一定的邏輯關系，比如先后關系、包含關系、并列關系等，多個網(wǎng)頁按照它們之間的邏輯關系組織在一起就形成了各種邏輯結構。在現(xiàn)在的網(wǎng)站中，最常見的邏輯結構就是層次型結構，其次是線形結構和網(wǎng)型結構。

網(wǎng)站的邏輯結構設計1/15/202341）線型結構線型結構是最為簡單的邏輯結構，如圖3-1所示，它將多個網(wǎng)頁按照一定的先后順序鏈接起來，使得用戶在沒有完成上一個網(wǎng)頁的訪問之前就無法進入下一個網(wǎng)頁。網(wǎng)頁1網(wǎng)頁2網(wǎng)頁3網(wǎng)頁4圖3-1線型結構1/15/20235

線型結構最常用于需要按步驟進行的欄目上，例如用戶注冊、建立定單、教程等。如在當當網(wǎng)購買圖書或者音像制品，也必須按順序進行選擇商品、確認購物車、填寫定單、生成定單四個步驟：如圖3-2所示：選擇商品確認購物填寫定單生成定單圖3-2當當網(wǎng)購物流程1/15/202362）層次型結構層次型結構是按照網(wǎng)頁之間的包含關系組織而成。前面圖3-3就是一個典型的層次型結構，它很像一棵倒置的樹。層次型結構簡單而且直觀，能將所有的內(nèi)容劃分得非常清晰且便于理解，所以很多網(wǎng)站都采用這種結構來進行總體的欄目規(guī)劃。1/15/20237

層次型結構也有不好的地方，就是用戶如果要訪問最底層的網(wǎng)頁就不得不按照層次從上到下一級一級地訪問，最終到達想要訪問的網(wǎng)頁。所以過深過于復雜的層次型結構反而會帶來很多不良的影響，最好的深度是三層，另外，建立一個良好的導航系統(tǒng)也可以彌補層次型結構這方面的缺點。1/15/202383）網(wǎng)絡型結構如圖3-3所示，網(wǎng)絡型結構是指多個網(wǎng)頁相互之間都超鏈接的一種結構，這些網(wǎng)頁可以是層次結構上的任意網(wǎng)頁，但是因為導航的需要或者內(nèi)容上的相關性而鏈接在一起。網(wǎng)頁網(wǎng)頁網(wǎng)頁網(wǎng)頁圖3-3

網(wǎng)絡型結構1/15/20239

網(wǎng)絡型結構的實現(xiàn)在于所有相關的網(wǎng)頁上保留到其他網(wǎng)頁的超鏈接。這種結構使用戶更方便地在網(wǎng)絡上遨游，但同時也帶來一個龐大的超鏈接數(shù)的問題。一般來說，總的超鏈接數(shù)應該等于網(wǎng)頁數(shù)乘以網(wǎng)頁數(shù)減一，如有10個網(wǎng)頁，那么就有99個超鏈接，這么龐大的超鏈接數(shù)維護起來相當麻煩，某個網(wǎng)頁的1/15/202310改動（（如改改名、、刪除除、增增加））就可可能同同時需需要對對所有有的網(wǎng)網(wǎng)頁進進行相相應的的修改改，所所以在在網(wǎng)站站中需需要謹謹慎使使用這這種結結構。。4、網(wǎng)網(wǎng)站目目錄結結構設設計目錄結結構又又稱為為物理理結構構，它它設計計解決決的是是如何何在硬硬盤上上更好好地存存放包包括網(wǎng)網(wǎng)頁、、圖片片、Flash動畫畫、JavaApplet、、數(shù)據(jù)據(jù)庫等等各種種資源源在內(nèi)內(nèi)的所所有網(wǎng)網(wǎng)站資資源。。12/31/202211目錄結結構是是否合合理，，對網(wǎng)網(wǎng)站的的創(chuàng)建建效率率會產(chǎn)產(chǎn)生較較大的的影響響，但但更主主要的的，會會對未未來網(wǎng)網(wǎng)站的的性能能、網(wǎng)網(wǎng)站的的維護護及擴擴展產(chǎn)產(chǎn)生很很大的的影響響。目錄結結構對對用戶戶來說說是不不可見見的，，它只只針對對網(wǎng)站站管理理員，，所以以它的的設計計是為為了網(wǎng)網(wǎng)站管管理員員能從從文件件的角角度更更好地地管理理網(wǎng)站站的所所有資資源。。12/31/202212目錄結構的的設計通常常需要遵循循以下原則則：1）不要將將所有的文文件都放在在根目錄下下2）根據(jù)欄欄目規(guī)劃來來設計目錄錄結構3）每個目目錄下都建建立獨立的的images子目目錄4）目錄的的層次不要要太深5）不要使使用中文目目錄名6）可執(zhí)行行文件和不不可執(zhí)行文文件分開7）數(shù)據(jù)庫庫文件單獨獨放置8）不要使使用過長的的目錄12/31/202213實例3－1“淡藍藍的天空””個人網(wǎng)站站的欄目設設計一、要求與與目的掌握網(wǎng)站的的色彩搭配配掌握網(wǎng)站的的版面布局局設計掌握網(wǎng)站的的導航設計計二、規(guī)劃分分析過程1、風格設設計：風格設計包包含很多內(nèi)內(nèi)容，為了了體現(xiàn)個人人風格，符符合網(wǎng)站的的名稱和定定位，下面面我們在色色彩搭配和和版面布局局方面做一一些規(guī)劃和和設計。12/31/202214常見的版面面布局形式式----“T”結結構“T”結構構:所謂““T”結構構，就是指指網(wǎng)頁上邊邊和左邊相相結合，頁頁面頂部為為橫條網(wǎng)站站標志和廣廣告條，下下方左面為為主菜單，，右面顯示示內(nèi)容的布布局，這是是網(wǎng)頁設計計中用得最最廣泛的一一種布局方方式。這樣的布局局有其固有有的優(yōu)點，，因為人的的注意力主主要在右下下角，所以以企業(yè)想要要發(fā)布給用用戶的信息息都能被用用戶以最大大可能性獲獲?。黄浯未问琼撁娼Y結構清晰。。缺點是規(guī)矩矩呆板，如如果細節(jié)色色彩上不注注意，很容容易讓人““看之無味味”。12/31/202215頁面版面布局局原則與技巧巧（1）正常平平衡：正常平平衡亦稱“勻勻稱”。多指指左右、上下下對照形式，，主要強調秩秩序，能達到到安定誠實、、信賴的效果果。（2）異常平平衡：異常平平衡即非對照照形式，都是是不均衡的，，此種布局能能達到強調性性、不安性、、高注目性的的效果。（3）對比：：所謂對比，，不僅利用色色彩、色調等等技巧來作表表現(xiàn)，在內(nèi)容容上也可涉及及古與今、新新與舊、貧與與富等對比。。（4）空白：：這種表現(xiàn)方方法對體現(xiàn)網(wǎng)網(wǎng)頁的格調十十分有效。12/31/202216網(wǎng)頁色彩設計計網(wǎng)頁中最難處處理的就是色色彩搭配的問問題所以網(wǎng)頁設計計不僅僅涉及及到技術問題題，還包含了了很重的藝術術因素根據(jù)專業(yè)的研研究機構研究究表明：彩色色的記憶效果果是黑白色的的3.5倍，，也就是說，，在一般情況況下，彩色頁頁面較黑白頁頁面更加吸引引人。網(wǎng)頁色彩搭配配的原理網(wǎng)頁色彩搭配配的技巧12/31/202217網(wǎng)頁色彩搭配配原理色彩的鮮明性性：引人注目目色彩的獨特性性：突出企業(yè)業(yè)形象色彩的合適性性：要與網(wǎng)站站的主題相符符色彩的聯(lián)想性性：與網(wǎng)站的的內(nèi)容相關聯(lián)聯(lián)12/31/202218網(wǎng)頁色彩搭配配技巧相同色系色彩彩運用對比色或或互補色盡量控制在三三種色彩以內(nèi)內(nèi)背景和文字色色差對比大根據(jù)區(qū)域或客客戶群的構成成選擇12/31/202219首頁設計首頁是一個網(wǎng)網(wǎng)站的“門面面”，馬虎不不得網(wǎng)站是否能夠夠吸引瀏覽者者，能否促使使瀏覽者繼續(xù)續(xù)點擊進入，，首頁至關重重要首頁的設計應應該遵循：快快速、簡潔、、吸引人、信信息概括能力力強、易于導導航的原則，，同時融入企企業(yè)形象，突突出企業(yè)特點點，爭取在第第一時間吸引引瀏覽者的眼眼球12/31/202220首頁幾大基本本要素版權信息、聯(lián)絡信息、電子郵件地址廣告條—通常應體現(xiàn)出企業(yè)網(wǎng)站的主題企業(yè)的名稱、標語、徽號或圖像主菜單最新消息搜索友情鏈接郵件列表計數(shù)器用戶登錄……視覺興趣點——通常是一幅圖片，表示企業(yè)最新的產(chǎn)品、最新的服務等；或是一些重點推薦的產(chǎn)品頁頭內(nèi)容頁頁尾12/31/202221首頁要注意的的問題商業(yè)網(wǎng)站要避避免封面問題題，只有一個個Logo的的首頁是不合合適的首頁明確，主主題突出。使使瀏覽者進入入網(wǎng)站就知道道該網(wǎng)站的類類型、業(yè)務，，最好有一個個突出的主題題句，除非你你的知名度=可口可樂盡可能縮短下下載時間。合合理運用圖片片和新技術，，注意圖片的的大小考慮不同顯示示器的分辨率率，不同的瀏瀏覽軟件版本本兼容12/31/2022221）色彩的選選取及搭配本網(wǎng)站名為““淡藍的天空空”，因此整整個網(wǎng)站擬采采用藍色為主主要色調，再再輔助于一些些綠等其它顏顏色，體現(xiàn)涼涼爽、清新、、淡雅、浪漫漫的氛圍。比比如首頁就采采用一副包含含網(wǎng)站名稱、、各主要欄目目，以藍色為為主要色調的的圖片來作為為整個首頁的的界面，如圖圖3-4所示示。12/31/202223圖3-4““淡藍的天空空”首頁圖形形界面12/31/2022242））版版面面布布局局首頁頁布布局局：：首頁頁雖雖然然采采用用圖圖3－－10的的圖圖片片作作為為整整個個網(wǎng)網(wǎng)頁頁的的界界面面，，但但在在布布局局上上基基本本屬屬于于圖圖3－－11所所示示的的布布局局方方式式。。12/31/202225圖標題題文字字欄目目圖3-5““淡淡藍藍的的天天空空””首首頁頁版版面面布布局局12/31/202226“感感動動你你的的心心靈靈””欄欄目目主主要要是是文文摘摘、、網(wǎng)網(wǎng)文文、、雜雜文文、、專專欄欄等等，，界界面面利利用用圖圖形形設設計計成成一一本本打打開開的的書書如如圖圖3－－6所所示示，，但但在在版版面面布布局局上上采采用用如如圖圖3－－7所所示示的的布布局局方方式式。。12/31/202227圖3-6““感感動動你你的的心心靈靈””欄欄目目圖圖12/31/202228圖3-7““感感動動你你的的心心靈靈””版版面面布布局局圖圖交替變化的圖欄目內(nèi)容子欄目目錄12/31/202229其他他欄欄目目布布局局基基本本采采用用類類似似的的布布局局方方式式。。3））導導航航設設計計由于于本本案案例例欄欄目目數(shù)數(shù)量量、、網(wǎng)網(wǎng)頁頁數(shù)數(shù)量量都都不不多多，，導導航航系系統(tǒng)統(tǒng)選選擇擇欄欄目目名名稱稱直直接接導導航航的的形形式式。。三、、本本案案例例知知識識點點1、、網(wǎng)網(wǎng)站站的的風風格格設設計計網(wǎng)站站的的風風格格是是抽抽象象的的，，它它往往往往無無法法用用一一個個具具體體的的物物體體來來描描述述，，它它是是指指用用戶戶12/31/202230對網(wǎng)網(wǎng)站站整整體體形形象象的的一一種種感感覺覺。。這這個個整整體體形形象象包包括括網(wǎng)網(wǎng)站站標標志志、、色色彩彩、、版版面面布布局局、、交交互互方方式式、、文文字字編編排排、、圖圖片片、、動動畫畫等等諸諸多多因因素素。。風格格又又是是獨獨特特的的，，是是網(wǎng)網(wǎng)站站最最不不同同于于其其他他網(wǎng)網(wǎng)站站的的地地方方。。統(tǒng)統(tǒng)一一的的風風格格使使用用戶戶無無論論處處在在網(wǎng)網(wǎng)站站的的哪哪一一頁頁，，都都明明確確知知道道自自己己正正在在訪訪問問的的是是這這個個網(wǎng)網(wǎng)站站。。比比如如，，微微軟軟公公司司的的網(wǎng)網(wǎng)站站，，任任何何一一個個網(wǎng)網(wǎng)頁頁都都有有微微軟軟特特有有的的藍藍色色和和““Microsoft””網(wǎng)網(wǎng)站站標標志志。。12/31/2022311））色色彩彩搭搭配配網(wǎng)站站的的色色彩彩是是最最影影響響網(wǎng)網(wǎng)站站整整體體風風格格的的因因素素，，也也是是站站點點美美工工設設計計中中最最令令人人頭頭疼疼的的問問題題。。因因此此，，在在介介紹紹色色彩彩搭搭配配之之前前，，先先來來看看看看色色彩彩的的基基本本知知識識。。色彩的的基本本知識識在物理理學中中，顏顏色是是因為為光的的折射射而產(chǎn)產(chǎn)生的的。顏顏色不不同，，光的的波長長也就就不同同，紅紅、綠綠、藍藍是自自然界界的三三原色色，12/31/202232紅色：：是一種種激奮奮的色色彩，，給人人以沖沖動、、憤怒怒、熱熱情和和活力力的感感覺。。綠色：：介于冷冷暖兩兩種色色彩的的中間間，顯顯得和和睦、、寧靜靜、健健康、、安全全。它它和金金黃、、淡白白搭配配，可可以產(chǎn)產(chǎn)生優(yōu)優(yōu)雅、、舒適適的氣氣氛。。橙色：：也是一一種激激奮的的色彩彩，具具有輕輕快、、歡欣欣、熱熱烈、、溫馨馨和時時尚的的效果果。黃色：：充滿快快樂、、希望望、智智慧和和輕快快，它它也是是