電子商務(wù)網(wǎng)站的內(nèi)容設(shè)計(jì)與開發(fā)課件

電子商務(wù)網(wǎng)站的內(nèi)容設(shè)計(jì)與開發(fā)1網(wǎng)站內(nèi)容設(shè)計(jì)的流程2網(wǎng)站信息結(jié)構(gòu)的設(shè)計(jì)3網(wǎng)頁的可視化設(shè)計(jì)4首頁設(shè)計(jì)5其他網(wǎng)頁的設(shè)計(jì)6網(wǎng)頁制作1電子商務(wù)網(wǎng)站的內(nèi)容設(shè)計(jì)與開發(fā)1網(wǎng)站內(nèi)容設(shè)計(jì)的流程15.1電子商務(wù)網(wǎng)站內(nèi)容設(shè)計(jì)的流程5.11網(wǎng)站內(nèi)容設(shè)計(jì)的原則企業(yè)要在因特網(wǎng)上開展電子商務(wù)，就應(yīng)該在網(wǎng)站的內(nèi)容設(shè)計(jì)方面遵循一些基本原則，一般來說，最起碼應(yīng)考慮到以下三個(gè)方面：信息內(nèi)容、訪問速度和頁面美感。以下分別從這三個(gè)方面來說明：25.1電子商務(wù)網(wǎng)站內(nèi)容設(shè)計(jì)的流程5.11網(wǎng)站內(nèi)容1.新、精、專的信息內(nèi)容信息內(nèi)容永遠(yuǎn)處于第一位；內(nèi)容設(shè)計(jì)要有組織；及時(shí)更新信息內(nèi)容。2.安全快速的訪問提高瀏覽者的訪問速度；要有安全良好運(yùn)轉(zhuǎn)的硬件和軟件環(huán)境；遵循“三次點(diǎn)擊”原則，即網(wǎng)站的任何信息都應(yīng)在最多三次點(diǎn)擊之內(nèi)得到。31.新、精、專的信息內(nèi)容信息內(nèi)容永遠(yuǎn)處于第一位；2.3.美感十足、方便用戶訪問的頁面提供交互性；完善的檢索和幫助功能；方便用戶訪問和購買。5.1.2網(wǎng)站內(nèi)容設(shè)計(jì)流程通常，電子商務(wù)網(wǎng)站的內(nèi)容設(shè)計(jì)流程都必須經(jīng)過如下步驟：43.美感十足、方便用戶訪問的頁面提供交互性；5.1.2收集關(guān)于該網(wǎng)站的一些關(guān)鍵信息；網(wǎng)站信息結(jié)構(gòu)的設(shè)計(jì)；網(wǎng)站運(yùn)行環(huán)境的選擇，其具體選擇標(biāo)準(zhǔn)和原則可參見第三章內(nèi)容；進(jìn)行網(wǎng)頁可視化設(shè)計(jì)；網(wǎng)頁制作，通常情況下，在網(wǎng)頁制作過程中，需利用一定的web數(shù)據(jù)庫技術(shù)進(jìn)行信息和數(shù)據(jù)的動態(tài)發(fā)布和提供；網(wǎng)站的維護(hù)和管理。5收集關(guān)于該網(wǎng)站的一些關(guān)鍵信息；55.2電子商務(wù)網(wǎng)站信息結(jié)構(gòu)的設(shè)計(jì)一般來說，電子商務(wù)網(wǎng)站建設(shè)與企業(yè)的經(jīng)營戰(zhàn)略、產(chǎn)品特性、財(cái)務(wù)預(yù)算以及當(dāng)時(shí)的建站目的等因素有著直接關(guān)系。

5.21網(wǎng)站信息內(nèi)容及其功能模塊盡管每個(gè)電子商務(wù)網(wǎng)站規(guī)模不同，表現(xiàn)形式各有特色，但從經(jīng)營的實(shí)質(zhì)上來說，不外乎信息發(fā)布型和產(chǎn)品銷售型這兩種基本形式，一個(gè)綜合性的網(wǎng)站可能同時(shí)包含了這兩種基本形式。

65.2電子商務(wù)網(wǎng)站信息結(jié)構(gòu)的設(shè)計(jì)一般來說，電子商務(wù)網(wǎng)站建信息發(fā)布型的網(wǎng)站仍然是電子商務(wù)網(wǎng)站的主流形式。信息發(fā)布型網(wǎng)站中信息結(jié)構(gòu)的設(shè)計(jì)主要是從以下幾個(gè)方面來進(jìn)行的：公司概況；員工信息；產(chǎn)品目錄；產(chǎn)品價(jià)格表；產(chǎn)品搜索；公司動態(tài)；網(wǎng)上訂購；銷售網(wǎng)絡(luò)；售后服務(wù)；技術(shù)支持信息；7信息發(fā)布型的網(wǎng)站仍然是電子商務(wù)網(wǎng)站的主流形式。聯(lián)系信息；財(cái)務(wù)報(bào)告；輔助信息，用來彌補(bǔ)產(chǎn)品品種比較少，網(wǎng)頁內(nèi)容單調(diào)等不足；其他內(nèi)容信息；比如反饋表、公司人才招聘信息、到其他相關(guān)站點(diǎn)的鏈接；增值服務(wù)；開辟網(wǎng)絡(luò)環(huán)境下的新服務(wù)項(xiàng)目，以增加其服務(wù)功能，吸引網(wǎng)民再次光臨。8聯(lián)系信息；8在規(guī)劃設(shè)計(jì)一個(gè)具體網(wǎng)站內(nèi)容模塊和功能時(shí)，主要應(yīng)考慮企業(yè)本身的目標(biāo)和所決定的網(wǎng)站功能導(dǎo)向，讓企業(yè)上網(wǎng)成為整體戰(zhàn)略的一個(gè)有組成部分，讓網(wǎng)站真正成為有效的品牌宣傳陣地、有效的營銷工具，或者有效的網(wǎng)上銷售場所。5.2.2網(wǎng)站鏈接結(jié)構(gòu)的設(shè)計(jì)網(wǎng)站鏈接結(jié)構(gòu)的原則是：用最少的鏈接，使得瀏覽最有效率。9在規(guī)劃設(shè)計(jì)一個(gè)具體網(wǎng)站內(nèi)容模塊和功能時(shí)，主要一般地，建立網(wǎng)站的鏈接結(jié)構(gòu)有如下兩種基本方式。樹狀鏈接結(jié)構(gòu)（一對一）類似dos的目錄結(jié)構(gòu)，首頁鏈接指向一級頁面，一級頁面鏈接指向二級頁面。立體結(jié)構(gòu)像一棵樹。優(yōu)點(diǎn)：條理清晰，不會“迷路”；缺點(diǎn)：瀏覽效率低，一個(gè)欄目下的子頁面到另一個(gè)欄目下的子頁面，必須繞徑首頁。10一般地，建立網(wǎng)站的鏈接結(jié)構(gòu)有如下兩種基本方式。樹狀鏈接結(jié)構(gòu)（2.

網(wǎng)狀鏈接結(jié)構(gòu)（一對多）類似網(wǎng)絡(luò)服務(wù)器的鏈接，每個(gè)頁面相互之間都建立有鏈接。立體結(jié)構(gòu)像一張網(wǎng)。優(yōu)點(diǎn)：瀏覽方便，隨時(shí)可以到達(dá)自己喜歡的頁面；缺點(diǎn)：鏈接太多，容易“迷路”。112.網(wǎng)狀鏈接結(jié)構(gòu)（一對多）類似網(wǎng)絡(luò)服務(wù)器的鏈接這兩種基本結(jié)構(gòu)都只是理想方式，在實(shí)際的網(wǎng)站中，總是將這兩種結(jié)構(gòu)混合起來使用。最好的辦法是：首頁和一級頁面之間用網(wǎng)狀鏈接結(jié)構(gòu)，一級和二級頁面之間用樹狀鏈接結(jié)構(gòu)。超過三級頁面，在頁面頂部設(shè)置導(dǎo)航條。12這兩種基本結(jié)構(gòu)都只是理想方式，在實(shí)際的網(wǎng)站中，隨著電子商務(wù)的推廣，網(wǎng)站競爭越來越激烈，對鏈接結(jié)構(gòu)設(shè)計(jì)的要求已經(jīng)不僅僅局限與可以方便快速地瀏覽，更加注重個(gè)性化和相關(guān)性。5.2.3網(wǎng)站整體風(fēng)格的設(shè)計(jì)整體風(fēng)格設(shè)計(jì)是網(wǎng)站設(shè)計(jì)中的重點(diǎn)和難點(diǎn)，是所有網(wǎng)頁開發(fā)者最希望掌握的，也是最難以學(xué)習(xí)的，因?yàn)闆]有一個(gè)固定的程式可以參照和模仿。13隨著電子商務(wù)的推廣，網(wǎng)站競爭越來越激烈，對鏈接結(jié)網(wǎng)站風(fēng)格是抽象的，是指站點(diǎn)的整體形象給瀏覽者的綜合感受。有風(fēng)格的網(wǎng)站與普通網(wǎng)站的區(qū)別在于：在普通網(wǎng)站上看到的只是堆砌在一起的信息，瀏覽者只能用理性的感受來描述；但有風(fēng)格的網(wǎng)站可以使人有更深一層的感性認(rèn)識。14網(wǎng)站風(fēng)格是抽象的，是指站點(diǎn)的整體形象給瀏覽者的綜通常情況下，網(wǎng)站的設(shè)計(jì)者要根據(jù)企業(yè)的具體情況，找出其最有特色、特點(diǎn)的東西——即是最能體現(xiàn)網(wǎng)站風(fēng)格的東西，并以它作為網(wǎng)站的特色加以重點(diǎn)強(qiáng)化，突出宣傳。具體做法沒有定式，這里僅提供以下一些參考。使企業(yè)的標(biāo)志盡可能出現(xiàn)在每個(gè)頁面上，或者在頁眉，或者頁腳，或者背景；突出網(wǎng)站的標(biāo)準(zhǔn)色彩；15通常情況下，網(wǎng)站的設(shè)計(jì)者要根據(jù)企業(yè)的具體情況，找突出網(wǎng)站的標(biāo)準(zhǔn)字體；設(shè)計(jì)一條朗朗上口宣傳標(biāo)語；使用統(tǒng)一的圖片處理效果；創(chuàng)造一個(gè)企業(yè)站點(diǎn)特有的符號或圖標(biāo)。16突出網(wǎng)站的標(biāo)準(zhǔn)字體；165.3網(wǎng)頁的可視化設(shè)計(jì)5.3.1網(wǎng)頁設(shè)計(jì)原則網(wǎng)頁命名要簡潔這樣既會有助于以后方便地管理網(wǎng)頁，又會在向搜索引擎提交網(wǎng)頁時(shí)更容易被別人檢索到。確保頁面的導(dǎo)覽性好一般來說，網(wǎng)站應(yīng)提供一個(gè)關(guān)于本站點(diǎn)的地圖，讓用戶知道在哪兒以及能去哪兒。175.3網(wǎng)頁的可視化設(shè)計(jì)5.3.1網(wǎng)頁設(shè)計(jì)原則網(wǎng)頁命名3.網(wǎng)頁要易讀這就意味著需要規(guī)劃文字與背景顏色的搭配方案。此外，網(wǎng)頁的字體、大小也是需要考慮的因素。4.合理設(shè)計(jì)視覺效果視覺效果主要體現(xiàn)在網(wǎng)頁的結(jié)構(gòu)和排版上。要善用表格來布局網(wǎng)頁，突出顯示出網(wǎng)站內(nèi)容的層次性和空間性。183.網(wǎng)頁要易讀4.合理設(shè)計(jì)視覺效果18為圖片添加文字說明

這樣一來，當(dāng)網(wǎng)速很慢不能把圖象下載下來時(shí)或者用戶在使用文本類型的瀏覽器時(shí)，照樣能閱讀網(wǎng)頁的內(nèi)容。6.不宜使用太多的動畫和靜態(tài)圖片太多的動畫和靜態(tài)圖片會增大網(wǎng)頁容量，浪費(fèi)用戶的金錢和時(shí)間。19為圖片添加文字說明這樣一來，當(dāng)網(wǎng)速很慢不能把圖象下頁面長度要適中一個(gè)長頁面的傳輸時(shí)間要比較短的頁面的傳輸時(shí)間長，太長的頁面?zhèn)鬏敃褂脩粼诘却惺ツ托?。如有大量的基于文本的文檔，就應(yīng)當(dāng)以AdobeAcrobat格式的文件形式來放置。8.Java程序少用為宜因?yàn)槟壳皝碇vJava的運(yùn)行速度還比較慢，往往使瀏覽者沒有耐心等待頁面全部顯示出來。20頁面長度要適中一個(gè)長頁面的傳輸時(shí)間要比較短的頁面的傳輸整個(gè)頁面風(fēng)格要一致10.計(jì)數(shù)器能不用最好不用計(jì)數(shù)器也是由程序設(shè)計(jì)成的，顯示計(jì)數(shù)器的過程其實(shí)就是一個(gè)程序的執(zhí)行過程，它需要占用用戶寶貴的上網(wǎng)時(shí)間，并且往往毫無意義。這樣用戶就會在瀏覽網(wǎng)頁時(shí)覺得舒服、順暢，對網(wǎng)站留下深刻的印象。21整個(gè)頁面風(fēng)格要一致10.計(jì)數(shù)器能不用最好不用11.盡量使用超級鏈接這樣制作的網(wǎng)頁的可移植性比較強(qiáng)，輸入量較小。另外要保證超鏈接的直觀有效，以便使用戶能夠很快地找到其想要的東西。12.不要濫用尖端技術(shù)使用尖端技術(shù)有可能會打擊企業(yè)部分用戶訪問網(wǎng)站的興趣和積極性；另一方面，最新的網(wǎng)站開發(fā)技術(shù)還存在用戶瀏覽器的版本支持問題。2211.盡量使用超級鏈接這樣制作的網(wǎng)頁的可移植性比5.3.2網(wǎng)頁版面布局的設(shè)計(jì)版面指的是用戶在瀏覽器中看到的一個(gè)完整頁面（可以包含框架和層）。布局就是指以最適合用戶瀏覽的方式將圖片和文字排放在頁面的不同位置。1.網(wǎng)頁版面布局步驟創(chuàng)建初始方案。這屬于創(chuàng)造階段，不講究細(xì)膩工整，不必考慮細(xì)節(jié)功能，只以粗陋的線條勾畫出創(chuàng)意的輪廓即可。235.3.2網(wǎng)頁版面布局的設(shè)計(jì)版面指的是用戶在瀏初步設(shè)計(jì)網(wǎng)頁的布局。注意必須遵循突出重點(diǎn)、平衡諧調(diào)的原則，將網(wǎng)站標(biāo)志、主菜單等最重要的模塊放在最顯眼、最突出的位置，然后在考慮次要模塊的排放。定案。將初步布局精細(xì)化、具體化。24初步設(shè)計(jì)網(wǎng)頁的布局。注意必須遵循突出重點(diǎn)、平衡諧調(diào)2.常見的版面布局形式“T”結(jié)構(gòu)布局。所謂“T”結(jié)構(gòu)，就是指網(wǎng)頁上邊和左邊相結(jié)合，頁面頂部的橫條網(wǎng)站標(biāo)志和廣告條，下方左面為主菜單，右面顯示內(nèi)容的布局，這是網(wǎng)頁設(shè)計(jì)中用的最廣泛的一種布局方式。優(yōu)點(diǎn)：信息能被用戶最大限度的獲取，而且很方便；其次是頁面結(jié)構(gòu)清晰，主次分明、易于使用。252.常見的版面布局形式“T”結(jié)構(gòu)布局。優(yōu)點(diǎn)：信息能被用戶缺點(diǎn)：規(guī)矩呆板，讓人“看之無味”?！翱凇毙筒季?。指頁面上下各有一個(gè)廣告條，左面是主菜單，右面是友情鏈接等，中間是主要內(nèi)容。優(yōu)點(diǎn)：頁面充實(shí)、內(nèi)容豐富、信息量大；缺點(diǎn)：頁面擁擠，不夠靈活。26缺點(diǎn)：規(guī)矩呆板，讓人“看之無味”?！翱凇毙筒季?。優(yōu)點(diǎn)：頁面充“三”型布局。特點(diǎn)是頁面上橫向兩條色塊，將頁面整體分割為四部分，色塊中大多放廣告條。對稱對比布局。優(yōu)點(diǎn)：視覺沖擊力強(qiáng)；缺點(diǎn)：將兩部分有機(jī)地結(jié)合比較困難。27“三”型布局。對稱對比布局。27POP布局。指頁面布局像一張宣傳海報(bào)，以一張精美圖片作為頁面的設(shè)計(jì)中心。

優(yōu)點(diǎn)：漂亮吸引人；缺點(diǎn)：速度慢。3.頁面版面布局原則與技巧只有當(dāng)內(nèi)容和形式，即具體的網(wǎng)頁的排版布局達(dá)到一種協(xié)調(diào)的狀態(tài)才算是一種真正成功的網(wǎng)頁設(shè)計(jì)。28POP布局。指頁面布局像一張宣傳海報(bào)，以一張精美圖片作為頁面正常平衡；多指左右、上下對照形式。2）異常平衡；即非對照形式，但也要平衡和韻律。3）對比；色彩、色調(diào)等技巧的對比，及內(nèi)容上的古今、新舊、貧富對比。以下是一些設(shè)計(jì)原則：29正常平衡；以下是一些設(shè)計(jì)原則：29凝視；指利用頁面中人物的視線，使瀏覽者仿照跟隨的心理，以達(dá)到注視頁面的效果?？瞻?；突出卓越和優(yōu)越感，有效體現(xiàn)網(wǎng)頁格調(diào)。盡量用圖片解說。30凝視；指利用頁面中人物的視線，使瀏覽者仿照跟隨的心理，以達(dá)到5.3.3網(wǎng)頁色彩設(shè)計(jì)在網(wǎng)頁設(shè)計(jì)中，應(yīng)根據(jù)和諧、均衡和重點(diǎn)突出的原則，將不同的色彩進(jìn)行組合、搭配來構(gòu)成美麗的頁面。研究表明：彩色的記憶效果是黑白色得3.5倍。也就是說，彩色頁面較完全的黑白頁面更加吸引人。315.3.3網(wǎng)頁色彩設(shè)計(jì)在網(wǎng)頁設(shè)計(jì)中，應(yīng)根據(jù)在網(wǎng)頁設(shè)計(jì)中較常的做法：主要內(nèi)容文字用非彩色（黑色），邊框、背景、圖片用彩色，這樣頁面整體不單調(diào)，用戶看主要內(nèi)容也不會眼花。1.網(wǎng)頁色彩搭配的原理色彩的鮮明性；色彩的獨(dú)特性；色彩的合適性；色彩的聯(lián)想性。32在網(wǎng)頁設(shè)計(jì)中較常的做法：1.網(wǎng)頁色彩搭配的原理色彩的鮮明2.網(wǎng)頁色彩搭配的技巧相同色系色彩；運(yùn)用對比色或互補(bǔ)色；使用過渡色；用黑色和一種彩色；332.網(wǎng)頁色彩搭配的技巧相同色系色彩；33不要將所有顏色都用到，盡量控制在三種色彩以內(nèi)；背景和文字的對比盡量要大，要有足夠的對比度來保證頁面易于閱讀；在設(shè)計(jì)中要考慮主要用戶群的背景和構(gòu)成。34不要將所有顏色都用到，盡量控制在三種色彩以內(nèi)；345.3.4網(wǎng)頁中圖片和文字的設(shè)計(jì)1.善用圖片現(xiàn)今web上展現(xiàn)的絕大多數(shù)圖片和圖象是GIF和JPEG格式、PNG和FlashPix文件格式。

一般情況下，GIF格式:漫畫、圖標(biāo)、動畫和平鋪式圖案背景。JPEG格式:照片和藝術(shù)復(fù)制品。355.3.4網(wǎng)頁中圖片和文字的設(shè)計(jì)1.善用圖片圖象可以彌補(bǔ)文字的不足，但并不能夠完全取代文字。因此，制作頁面時(shí)，必須注意將圖象所包含的重要信息或鏈接到其他頁面的指示用文字重復(fù)表達(dá)一次。圖像的內(nèi)容應(yīng)有一定的實(shí)際作用，切忌虛飾浮夸，最佳的圖象應(yīng)集美觀與信息內(nèi)容與一身。36圖象可以彌補(bǔ)文字的不足，但并不能夠完全取代文字。2.網(wǎng)站字體下面是網(wǎng)頁設(shè)計(jì)中有關(guān)字體的使用原則和技巧：不要使用超過三種以上的字體；不要用太大或太小的文字；避免過多使用不停閃爍的文字。372.網(wǎng)站字體下面是網(wǎng)頁設(shè)計(jì)中有關(guān)字體的使用原則和技巧：不5.4首頁設(shè)計(jì)首頁也叫主頁，它是網(wǎng)站的形象頁面，是網(wǎng)站的“門面”，故被稱為“HomePage”,它的設(shè)計(jì)是一個(gè)網(wǎng)站成功與否的關(guān)鍵。首頁的設(shè)計(jì)應(yīng)該遵循快速、簡潔、吸引人、信息概括能力強(qiáng)、易于導(dǎo)航的原則，同時(shí)應(yīng)納入企業(yè)CIS（企業(yè)形象識別系統(tǒng)）計(jì)劃，與企業(yè)CIS的其他內(nèi)容協(xié)調(diào)起來。385.4首頁設(shè)計(jì)首頁也叫主頁，它是網(wǎng)站的形象5.4.1首頁的功能模塊首頁的功能模塊是指在首頁上需要實(shí)現(xiàn)的主要內(nèi)容及其功能，最簡單地在主頁上必須清楚地列出三項(xiàng)要點(diǎn)：機(jī)構(gòu)名稱、提供的產(chǎn)品或服務(wù)以及主頁內(nèi)容（即網(wǎng)站上其他頁面還載有什么資料）。395.4.1首頁的功能模塊首頁的功能模塊是指在4040頁頭用來準(zhǔn)確無誤地標(biāo)示企業(yè)的網(wǎng)站，它應(yīng)該能夠體現(xiàn)出企業(yè)網(wǎng)站的主題，而該主題是與企業(yè)的產(chǎn)品和服務(wù)緊密相關(guān)的。主菜單即導(dǎo)航條，它提供了對關(guān)鍵頁面的簡捷導(dǎo)航，其超鏈接或圖標(biāo)應(yīng)明確地表明企業(yè)網(wǎng)站的其他頁面上還載有什么樣的信息。41頁頭用來準(zhǔn)確無誤地標(biāo)示企業(yè)的網(wǎng)站，它應(yīng)該能夠體現(xiàn)出最新消息的傳遞如果企業(yè)網(wǎng)站的主頁從不改變，用戶很快會厭倦。在主頁上預(yù)告即將有新資料推出，可吸引用戶再來瀏覽。為保新鮮感，應(yīng)時(shí)刻確保主頁提供的是最新信息。電子郵件地址在頁面底部設(shè)計(jì)簡單的電子郵件鏈接，可使用戶與網(wǎng)站的有關(guān)負(fù)責(zé)人迅速取得聯(lián)系。有利于用戶節(jié)省大量搜索時(shí)間，同時(shí)企業(yè)也能及時(shí)獲得信息反饋。42最新消息的傳遞如果企業(yè)網(wǎng)站的主頁從不改變，用戶很聯(lián)絡(luò)信息?？梢粤谐鐾ㄓ嵉刂?、公關(guān)或營業(yè)部門的電話號碼等，以便用戶聯(lián)系。版權(quán)信息。其他信息。如廣告條、搜索、友情鏈接、郵件列表、計(jì)數(shù)器等。43聯(lián)絡(luò)信息?？梢粤谐鐾ㄓ嵉刂?、公關(guān)或營業(yè)部門的電話號碼等，以便5.4.2首頁的可視化設(shè)計(jì)確定好首頁的內(nèi)容和功能后，就可以設(shè)計(jì)首頁的版面了。在圖文類首頁中，通常以圖片和標(biāo)題為視覺興趣點(diǎn)。為吸引瀏覽者的注意力，可將文字標(biāo)題融合在畫面中，使兩個(gè)興趣點(diǎn)合為一體。445.4.2首頁的可視化設(shè)計(jì)確定好首頁的內(nèi)容設(shè)計(jì)版面的最好方法是：找一張白紙、一支筆，先將理想中的草圖勾勒出來，然后再用網(wǎng)頁制作軟件實(shí)現(xiàn)。設(shè)計(jì)人員要了解企業(yè)的CIS，熟悉企業(yè)標(biāo)志、吉祥物、字體及用色標(biāo)準(zhǔn)，以便在網(wǎng)站的局部將之體現(xiàn)出來，于平淡之中勾畫出一個(gè)優(yōu)美的符合企業(yè)特點(diǎn)的曲線，從而將企業(yè)印在瀏覽者的腦海里。45設(shè)計(jì)版面的最好方法是：找一張白紙、一支筆，先將在設(shè)計(jì)中，應(yīng)避免“封面”問題。封面是指沒有具體內(nèi)容，只放一個(gè)標(biāo)徽Logo點(diǎn)擊進(jìn)入，或者只有簡單的圖象菜單的首頁。5.4.3首頁設(shè)計(jì)要注意的問題首頁明確，主題突出；盡可能縮短下載時(shí)間。此外，還需注意配合最抵擋的設(shè)備。46在設(shè)計(jì)中，應(yīng)避免“封面”問題。封面是指沒有具體5.5其他頁面的設(shè)計(jì)5.5.1新聞頁面的設(shè)計(jì)

任何類型企業(yè)的電子商務(wù)站點(diǎn)都應(yīng)該有一個(gè)新聞頁面，該頁面擔(dān)負(fù)著雙重作用，既可以用來動態(tài)發(fā)布有關(guān)新產(chǎn)品或新開發(fā)項(xiàng)目或公司活動的情況，又可以作為公司的活動年表。

建立新聞頁面，首先在主頁上要編寫并設(shè)置可點(diǎn)擊的新聞標(biāo)題，然后再編寫完整的新聞頁面，這些頁面通過超鏈接與新聞標(biāo)題相連。475.5其他頁面的設(shè)計(jì)5.5.1新聞頁面的設(shè)1.主頁中的新聞標(biāo)題通常標(biāo)題的文字不宜過長，主要包括的要素與設(shè)計(jì)的方法如下：新聞標(biāo)題組成的要素新聞日期，日期位于標(biāo)題的開頭；使用一個(gè)動詞來描述該新聞的目的；設(shè)計(jì)的產(chǎn)品或企業(yè)，著重表示該新聞直接涉及到產(chǎn)品或企業(yè)；提示語，用來激發(fā)瀏覽者的興趣。481.主頁中的新聞標(biāo)題通常標(biāo)題的文字不宜過長，新聞標(biāo)題的版面布置主頁中新聞標(biāo)題的版面布置要保持簡單、清晰、引人注目，通?？刹捎靡韵聨追N方法。新聞標(biāo)題的排列按降序進(jìn)行排列，開頭頂部是最近的新聞，底部是最舊的新聞；可在新聞標(biāo)題前采用標(biāo)準(zhǔn)編目符或小的圖象作為點(diǎn)綴，增加頁面的可讀性；將新聞標(biāo)題的列表放在一個(gè)上下滾動的窗口中以容納更多的新聞。49新聞標(biāo)題的版面布置主頁中新聞標(biāo)題的版面布置要保2.新聞頁面新聞頁面要滿足易于導(dǎo)航的要求，通?？梢酝ㄟ^在新聞頁面建立以下幾種方式來實(shí)現(xiàn)。建立菜單欄導(dǎo)航系統(tǒng)以便與用戶實(shí)現(xiàn)新聞頁面與網(wǎng)站中其他頁面間的無縫跳轉(zhuǎn)。建立與前面或后面新聞的鏈接；將新聞進(jìn)行分類或時(shí)間索引，建立菜單，用戶可根據(jù)時(shí)間或內(nèi)容檢索其感興趣的新聞；在新聞頁面中包含與該新聞有關(guān)的圖片、聲音或其他多媒體文件；502.新聞頁面新聞頁面要滿足易于導(dǎo)航的要求，通將稿件中出現(xiàn)的關(guān)鍵人名鏈接到其E-mail地址或其因特網(wǎng)頁面上；考慮鏈接到稿件中提到的任何企業(yè)合伙人、公司雇員的見解或其他說明；客戶、分析家或公共輿論對該新聞稿主題的見解。51將稿件中出現(xiàn)的關(guān)鍵人名鏈接到其E-mail地址或其因特網(wǎng)頁5.5.2產(chǎn)品頁面的制作產(chǎn)品頁面一般采用信息分層、逐層細(xì)化的方法展示公司產(chǎn)品或服務(wù)。產(chǎn)品頁面的主要內(nèi)容應(yīng)包括因特網(wǎng)產(chǎn)品/價(jià)格清單以及單個(gè)產(chǎn)品頁面，建立產(chǎn)品名稱到產(chǎn)品頁面的鏈接，還可以利用高級的表格給目錄增加新的風(fēng)格和生動的圖象。產(chǎn)品頁面的創(chuàng)建主要在于掌握產(chǎn)品目錄的層次結(jié)構(gòu)和導(dǎo)航方法。525.5.2產(chǎn)品頁面的制作產(chǎn)品頁面一般采用產(chǎn)品目錄的分層通常如下：第一層：首先建立一個(gè)產(chǎn)品/價(jià)格列表，該表使用戶能夠全面瀏覽公司的產(chǎn)品；第二層：對應(yīng)每個(gè)產(chǎn)品的頁面，該頁面將對此項(xiàng)產(chǎn)品的有關(guān)信息進(jìn)行全面的介紹；第三層：產(chǎn)品更深層次的信息，從這一層中瀏覽者可以深入了解該產(chǎn)品的技術(shù)細(xì)節(jié)、設(shè)計(jì)維護(hù)等；第四層：如果瀏覽者對第三層的信息還不滿足，可以通過網(wǎng)絡(luò)向公司的有關(guān)人員進(jìn)一步了解信息。53產(chǎn)品目錄的分層通常如下：第一層：首先建立一個(gè)產(chǎn)品/價(jià)格列表，產(chǎn)品頁面應(yīng)達(dá)到以下要求：包含關(guān)于產(chǎn)品盡可能多的有用的信息；具有獨(dú)創(chuàng)性；包含站點(diǎn)的導(dǎo)航菜單及其到產(chǎn)品/價(jià)格列表目錄的鏈接。另外要注意的是不要在產(chǎn)品頁面上增加太多無用的鏈接。54產(chǎn)品頁面應(yīng)達(dá)到以下要求：545.5.3雇員頁面雇員是企業(yè)最寶貴的資源和財(cái)富，網(wǎng)上企業(yè)通過創(chuàng)建每個(gè)雇員的頁面可以吸引潛在客戶，同時(shí)也是使虛擬企業(yè)人格化的有效手段。目前，網(wǎng)上企業(yè)的雇員頁面大都采用框架（Frames）形式。最簡單的框架是將網(wǎng)頁分成左右兩部分，左半部分放置雇員名字按字母順序排列的清單，每個(gè)雇員名字都鏈接到該雇員的個(gè)人頁面；個(gè)人頁面的內(nèi)容放置在右半部分的框架中。555.5.3雇員頁面雇員是企業(yè)最寶貴的資源1.設(shè)計(jì)雇員目錄設(shè)計(jì)按字母排序的雇員清單，填入左框。2.創(chuàng)建默認(rèn)頁面默認(rèn)頁面應(yīng)提供下列基本信息：企業(yè)名稱及標(biāo)志；如何使用框架瀏覽式的雇員目錄頁面；返回站點(diǎn)主頁的鏈接。3.創(chuàng)建個(gè)人頁面?zhèn)€人頁面應(yīng)包括以下信息：聯(lián)系信息；組織和部門信息；雇員背景信息；增加一些有趣的材料。561.設(shè)計(jì)雇員目錄設(shè)計(jì)按字母排序的雇員清單，填入左框。5.5.4其他頁面設(shè)計(jì)客戶支持頁面市場調(diào)研頁面企業(yè)信息頁面其他內(nèi)容。575.5.4其他頁面設(shè)計(jì)客戶支持頁面575.6網(wǎng)頁制作5.6.1電子商務(wù)網(wǎng)站中的web資源一般而言，一個(gè)電子商務(wù)網(wǎng)站中的web資源總是包括靜態(tài)網(wǎng)頁和動態(tài)網(wǎng)頁兩種。靜態(tài)網(wǎng)頁：是一個(gè)個(gè).html文件，內(nèi)容相對穩(wěn)定，不需要經(jīng)常修改，文件比較小，適合在網(wǎng)上傳輸，執(zhí)行效率很高；如公司介紹、員工信息、銷售網(wǎng)絡(luò)、售后服務(wù)信息等是一些相對固定不變的信息。585.6網(wǎng)頁制作5.6.1電子商務(wù)網(wǎng)站中的web動態(tài)網(wǎng)頁：

由數(shù)據(jù)庫和相應(yīng)的應(yīng)用程序構(gòu)成，包含需要頻繁更新的數(shù)據(jù)。由于其頁面中包含的內(nèi)容是來自數(shù)據(jù)庫的，因此，可根據(jù)用戶的不同選擇返回不同的頁面。如有關(guān)于產(chǎn)品的信息、網(wǎng)上銷售的信息以及其他服務(wù)（如技術(shù)支持、公司新聞動態(tài)、論壇系統(tǒng)），特別是網(wǎng)站的管理系統(tǒng)，一般而言都是采用動態(tài)頁面的形式?？偠灾?，凡是網(wǎng)頁上的內(nèi)容需要與用戶進(jìn)行交互，就要用動態(tài)網(wǎng)頁的方式來進(jìn)行。59動態(tài)網(wǎng)頁：總而言之，凡是網(wǎng)頁上的內(nèi)容需要與用戶5.6.2靜態(tài)網(wǎng)頁的制作制作靜態(tài)網(wǎng)頁的第一步就是選定一種網(wǎng)頁制作軟件（或工具）。從原理上來講，用任何一種文本編輯器都可以制作靜態(tài)網(wǎng)頁，但“所見即所得”的可視化開發(fā)工具無疑是最方便的。這里介紹目前主流的兩種開發(fā)工具。1.MSFrontPage98/2000FrontPage不但擁有優(yōu)越的網(wǎng)頁編輯能力，而且具備網(wǎng)站管理的功能。605.6.2靜態(tài)網(wǎng)頁的制作制作靜態(tài)網(wǎng)頁的第一頁面制作有FrontPage中的網(wǎng)頁視圖（98中為Editor）來完成，其工作窗口由三個(gè)選項(xiàng)卡組成，分別是WYSIWYG的編輯頁、HTML代碼編輯頁、預(yù)覽頁。站點(diǎn)管理功能有文件夾、導(dǎo)航、超鏈接、報(bào)表、任務(wù)視圖（98下為Explorer）所組成。具體地講，F(xiàn)rontPage2000提供了以下功能：精確到像素的定位和分層；預(yù)先設(shè)計(jì)好的主題；自定義主題；61頁面制作有FrontPage中的網(wǎng)頁視圖（98跨瀏覽器的DHTML動畫效果；級聯(lián)樣式表；嵌套子站點(diǎn)；協(xié)作和管理；鏈接自動修復(fù)；Web服務(wù)器管理。62跨瀏覽器的DHTML動畫效果；622.DreamweaverDreamweaver是美國Macromedia公司開發(fā)的集網(wǎng)頁制作和管理網(wǎng)站于一身的所見即所得網(wǎng)頁編輯器。自Dreamweaver3.0開始，Macromedia注意了網(wǎng)站開發(fā)工具的配合，由Dreamweaver和制作矢量動畫的Flash、處理網(wǎng)頁圖象的Firework，共同組成了著名的DreamTeam開發(fā)工具包，被Macromedia公司稱為DreamTeam（夢之隊(duì)），業(yè)界則稱之為“網(wǎng)頁設(shè)計(jì)三劍客”。632.DreamweaverDream具體來講，Dreamweaver具備以下的特點(diǎn)：最佳的制作效率；網(wǎng)站管理；無可比擬的控制能力；所見即所得；夢幻樣板和XML；全方位呈現(xiàn)。64具體來講，Dreamweaver具備以下的特點(diǎn)：最佳的制作具體來講，Dreamweaver具備以下的特點(diǎn)：最佳的制作效率；網(wǎng)站管理；無可比擬的控制能力；所見即所得；夢幻樣板和XML；全方位呈現(xiàn)。65具體來講，Dreamweaver具備以下的特點(diǎn)：最佳的制作5.6.3動態(tài)網(wǎng)頁的制作一般而言，動態(tài)網(wǎng)頁的制作分為兩種：網(wǎng)頁表現(xiàn)形式的動態(tài)制作和網(wǎng)頁數(shù)據(jù)內(nèi)容的動態(tài)制作。1.網(wǎng)頁表示形式的動態(tài)制作目前有四種制作方式，分別介紹如下：Script（腳本）語言；JavaApplets;層疊樣式表（CSS）；虛擬現(xiàn)實(shí)建模語言（VRML）。665.6.3動態(tài)網(wǎng)頁的制作一般而言，動態(tài)網(wǎng)頁的制作2.網(wǎng)頁數(shù)據(jù)內(nèi)容的動態(tài)制作交互式動態(tài)網(wǎng)頁中網(wǎng)頁數(shù)據(jù)內(nèi)容的動態(tài)制作一般是和數(shù)據(jù)庫系統(tǒng)聯(lián)系在一起，通過特定的編程語言和外部應(yīng)用程序來訪問企業(yè)信息系統(tǒng)已經(jīng)存在于數(shù)據(jù)庫中的信息。交互式動態(tài)網(wǎng)頁的制作主要包括兩大步驟：

672.網(wǎng)頁數(shù)據(jù)內(nèi)容的動態(tài)制作交互式動態(tài)網(wǎng)頁中6868程序設(shè)計(jì)階段Web數(shù)據(jù)庫接口技術(shù)的選擇；編程語言的選擇；應(yīng)用程序的編寫。此階段主要工作是根據(jù)前面確定的網(wǎng)站信息結(jié)構(gòu)圖進(jìn)行數(shù)據(jù)庫的邏輯設(shè)計(jì)、物理設(shè)計(jì)，并將具體的數(shù)據(jù)錄入到數(shù)據(jù)庫管理系統(tǒng)中去。數(shù)據(jù)庫設(shè)計(jì)階段69程序設(shè)計(jì)階段Web數(shù)據(jù)庫接口技術(shù)的選擇；此階段電子商務(wù)網(wǎng)站的內(nèi)容設(shè)計(jì)與開發(fā)1網(wǎng)站內(nèi)容設(shè)計(jì)的流程2網(wǎng)站信息結(jié)構(gòu)的設(shè)計(jì)3網(wǎng)頁的可視化設(shè)計(jì)4首頁設(shè)計(jì)5其他網(wǎng)頁的設(shè)計(jì)6網(wǎng)頁制作70電子商務(wù)網(wǎng)站的內(nèi)容設(shè)計(jì)與開發(fā)1網(wǎng)站內(nèi)容設(shè)計(jì)的流程15.1電子商務(wù)網(wǎng)站內(nèi)容設(shè)計(jì)的流程5.11網(wǎng)站內(nèi)容設(shè)計(jì)的原則企業(yè)要在因特網(wǎng)上開展電子商務(wù)，就應(yīng)該在網(wǎng)站的內(nèi)容設(shè)計(jì)方面遵循一些基本原則，一般來說，最起碼應(yīng)考慮到以下三個(gè)方面：信息內(nèi)容、訪問速度和頁面美感。以下分別從這三個(gè)方面來說明：715.1電子商務(wù)網(wǎng)站內(nèi)容設(shè)計(jì)的流程5.11網(wǎng)站內(nèi)容1.新、精、專的信息內(nèi)容信息內(nèi)容永遠(yuǎn)處于第一位；內(nèi)容設(shè)計(jì)要有組織；及時(shí)更新信息內(nèi)容。2.安全快速的訪問提高瀏覽者的訪問速度；要有安全良好運(yùn)轉(zhuǎn)的硬件和軟件環(huán)境；遵循“三次點(diǎn)擊”原則，即網(wǎng)站的任何信息都應(yīng)在最多三次點(diǎn)擊之內(nèi)得到。721.新、精、專的信息內(nèi)容信息內(nèi)容永遠(yuǎn)處于第一位；2.3.美感十足、方便用戶訪問的頁面提供交互性；完善的檢索和幫助功能；方便用戶訪問和購買。5.1.2網(wǎng)站內(nèi)容設(shè)計(jì)流程通常，電子商務(wù)網(wǎng)站的內(nèi)容設(shè)計(jì)流程都必須經(jīng)過如下步驟：733.美感十足、方便用戶訪問的頁面提供交互性；5.1.2收集關(guān)于該網(wǎng)站的一些關(guān)鍵信息；網(wǎng)站信息結(jié)構(gòu)的設(shè)計(jì)；網(wǎng)站運(yùn)行環(huán)境的選擇，其具體選擇標(biāo)準(zhǔn)和原則可參見第三章內(nèi)容；進(jìn)行網(wǎng)頁可視化設(shè)計(jì)；網(wǎng)頁制作，通常情況下，在網(wǎng)頁制作過程中，需利用一定的web數(shù)據(jù)庫技術(shù)進(jìn)行信息和數(shù)據(jù)的動態(tài)發(fā)布和提供；網(wǎng)站的維護(hù)和管理。74收集關(guān)于該網(wǎng)站的一些關(guān)鍵信息；55.2電子商務(wù)網(wǎng)站信息結(jié)構(gòu)的設(shè)計(jì)一般來說，電子商務(wù)網(wǎng)站建設(shè)與企業(yè)的經(jīng)營戰(zhàn)略、產(chǎn)品特性、財(cái)務(wù)預(yù)算以及當(dāng)時(shí)的建站目的等因素有著直接關(guān)系。

5.21網(wǎng)站信息內(nèi)容及其功能模塊盡管每個(gè)電子商務(wù)網(wǎng)站規(guī)模不同，表現(xiàn)形式各有特色，但從經(jīng)營的實(shí)質(zhì)上來說，不外乎信息發(fā)布型和產(chǎn)品銷售型這兩種基本形式，一個(gè)綜合性的網(wǎng)站可能同時(shí)包含了這兩種基本形式。

755.2電子商務(wù)網(wǎng)站信息結(jié)構(gòu)的設(shè)計(jì)一般來說，電子商務(wù)網(wǎng)站建信息發(fā)布型的網(wǎng)站仍然是電子商務(wù)網(wǎng)站的主流形式。信息發(fā)布型網(wǎng)站中信息結(jié)構(gòu)的設(shè)計(jì)主要是從以下幾個(gè)方面來進(jìn)行的：公司概況；員工信息；產(chǎn)品目錄；產(chǎn)品價(jià)格表；產(chǎn)品搜索；公司動態(tài)；網(wǎng)上訂購；銷售網(wǎng)絡(luò)；售后服務(wù)；技術(shù)支持信息；76信息發(fā)布型的網(wǎng)站仍然是電子商務(wù)網(wǎng)站的主流形式。聯(lián)系信息；財(cái)務(wù)報(bào)告；輔助信息，用來彌補(bǔ)產(chǎn)品品種比較少，網(wǎng)頁內(nèi)容單調(diào)等不足；其他內(nèi)容信息；比如反饋表、公司人才招聘信息、到其他相關(guān)站點(diǎn)的鏈接；增值服務(wù)；開辟網(wǎng)絡(luò)環(huán)境下的新服務(wù)項(xiàng)目，以增加其服務(wù)功能，吸引網(wǎng)民再次光臨。77聯(lián)系信息；8在規(guī)劃設(shè)計(jì)一個(gè)具體網(wǎng)站內(nèi)容模塊和功能時(shí)，主要應(yīng)考慮企業(yè)本身的目標(biāo)和所決定的網(wǎng)站功能導(dǎo)向，讓企業(yè)上網(wǎng)成為整體戰(zhàn)略的一個(gè)有組成部分，讓網(wǎng)站真正成為有效的品牌宣傳陣地、有效的營銷工具，或者有效的網(wǎng)上銷售場所。5.2.2網(wǎng)站鏈接結(jié)構(gòu)的設(shè)計(jì)網(wǎng)站鏈接結(jié)構(gòu)的原則是：用最少的鏈接，使得瀏覽最有效率。78在規(guī)劃設(shè)計(jì)一個(gè)具體網(wǎng)站內(nèi)容模塊和功能時(shí)，主要一般地，建立網(wǎng)站的鏈接結(jié)構(gòu)有如下兩種基本方式。樹狀鏈接結(jié)構(gòu)（一對一）類似dos的目錄結(jié)構(gòu)，首頁鏈接指向一級頁面，一級頁面鏈接指向二級頁面。立體結(jié)構(gòu)像一棵樹。優(yōu)點(diǎn)：條理清晰，不會“迷路”；缺點(diǎn)：瀏覽效率低，一個(gè)欄目下的子頁面到另一個(gè)欄目下的子頁面，必須繞徑首頁。79一般地，建立網(wǎng)站的鏈接結(jié)構(gòu)有如下兩種基本方式。樹狀鏈接結(jié)構(gòu)（2.

網(wǎng)狀鏈接結(jié)構(gòu)（一對多）類似網(wǎng)絡(luò)服務(wù)器的鏈接，每個(gè)頁面相互之間都建立有鏈接。立體結(jié)構(gòu)像一張網(wǎng)。優(yōu)點(diǎn)：瀏覽方便，隨時(shí)可以到達(dá)自己喜歡的頁面；缺點(diǎn)：鏈接太多，容易“迷路”。802.網(wǎng)狀鏈接結(jié)構(gòu)（一對多）類似網(wǎng)絡(luò)服務(wù)器的鏈接這兩種基本結(jié)構(gòu)都只是理想方式，在實(shí)際的網(wǎng)站中，總是將這兩種結(jié)構(gòu)混合起來使用。最好的辦法是：首頁和一級頁面之間用網(wǎng)狀鏈接結(jié)構(gòu)，一級和二級頁面之間用樹狀鏈接結(jié)構(gòu)。超過三級頁面，在頁面頂部設(shè)置導(dǎo)航條。81這兩種基本結(jié)構(gòu)都只是理想方式，在實(shí)際的網(wǎng)站中，隨著電子商務(wù)的推廣，網(wǎng)站競爭越來越激烈，對鏈接結(jié)構(gòu)設(shè)計(jì)的要求已經(jīng)不僅僅局限與可以方便快速地瀏覽，更加注重個(gè)性化和相關(guān)性。5.2.3網(wǎng)站整體風(fēng)格的設(shè)計(jì)整體風(fēng)格設(shè)計(jì)是網(wǎng)站設(shè)計(jì)中的重點(diǎn)和難點(diǎn)，是所有網(wǎng)頁開發(fā)者最希望掌握的，也是最難以學(xué)習(xí)的，因?yàn)闆]有一個(gè)固定的程式可以參照和模仿。82隨著電子商務(wù)的推廣，網(wǎng)站競爭越來越激烈，對鏈接結(jié)網(wǎng)站風(fēng)格是抽象的，是指站點(diǎn)的整體形象給瀏覽者的綜合感受。有風(fēng)格的網(wǎng)站與普通網(wǎng)站的區(qū)別在于：在普通網(wǎng)站上看到的只是堆砌在一起的信息，瀏覽者只能用理性的感受來描述；但有風(fēng)格的網(wǎng)站可以使人有更深一層的感性認(rèn)識。83網(wǎng)站風(fēng)格是抽象的，是指站點(diǎn)的整體形象給瀏覽者的綜通常情況下，網(wǎng)站的設(shè)計(jì)者要根據(jù)企業(yè)的具體情況，找出其最有特色、特點(diǎn)的東西——即是最能體現(xiàn)網(wǎng)站風(fēng)格的東西，并以它作為網(wǎng)站的特色加以重點(diǎn)強(qiáng)化，突出宣傳。具體做法沒有定式，這里僅提供以下一些參考。使企業(yè)的標(biāo)志盡可能出現(xiàn)在每個(gè)頁面上，或者在頁眉，或者頁腳，或者背景；突出網(wǎng)站的標(biāo)準(zhǔn)色彩；84通常情況下，網(wǎng)站的設(shè)計(jì)者要根據(jù)企業(yè)的具體情況，找突出網(wǎng)站的標(biāo)準(zhǔn)字體；設(shè)計(jì)一條朗朗上口宣傳標(biāo)語；使用統(tǒng)一的圖片處理效果；創(chuàng)造一個(gè)企業(yè)站點(diǎn)特有的符號或圖標(biāo)。85突出網(wǎng)站的標(biāo)準(zhǔn)字體；165.3網(wǎng)頁的可視化設(shè)計(jì)5.3.1網(wǎng)頁設(shè)計(jì)原則網(wǎng)頁命名要簡潔這樣既會有助于以后方便地管理網(wǎng)頁，又會在向搜索引擎提交網(wǎng)頁時(shí)更容易被別人檢索到。確保頁面的導(dǎo)覽性好一般來說，網(wǎng)站應(yīng)提供一個(gè)關(guān)于本站點(diǎn)的地圖，讓用戶知道在哪兒以及能去哪兒。865.3網(wǎng)頁的可視化設(shè)計(jì)5.3.1網(wǎng)頁設(shè)計(jì)原則網(wǎng)頁命名3.網(wǎng)頁要易讀這就意味著需要規(guī)劃文字與背景顏色的搭配方案。此外，網(wǎng)頁的字體、大小也是需要考慮的因素。4.合理設(shè)計(jì)視覺效果視覺效果主要體現(xiàn)在網(wǎng)頁的結(jié)構(gòu)和排版上。要善用表格來布局網(wǎng)頁，突出顯示出網(wǎng)站內(nèi)容的層次性和空間性。873.網(wǎng)頁要易讀4.合理設(shè)計(jì)視覺效果18為圖片添加文字說明

這樣一來，當(dāng)網(wǎng)速很慢不能把圖象下載下來時(shí)或者用戶在使用文本類型的瀏覽器時(shí)，照樣能閱讀網(wǎng)頁的內(nèi)容。6.不宜使用太多的動畫和靜態(tài)圖片太多的動畫和靜態(tài)圖片會增大網(wǎng)頁容量，浪費(fèi)用戶的金錢和時(shí)間。88為圖片添加文字說明這樣一來，當(dāng)網(wǎng)速很慢不能把圖象下頁面長度要適中一個(gè)長頁面的傳輸時(shí)間要比較短的頁面的傳輸時(shí)間長，太長的頁面?zhèn)鬏敃褂脩粼诘却惺ツ托?。如有大量的基于文本的文檔，就應(yīng)當(dāng)以AdobeAcrobat格式的文件形式來放置。8.Java程序少用為宜因?yàn)槟壳皝碇vJava的運(yùn)行速度還比較慢，往往使瀏覽者沒有耐心等待頁面全部顯示出來。89頁面長度要適中一個(gè)長頁面的傳輸時(shí)間要比較短的頁面的傳輸整個(gè)頁面風(fēng)格要一致10.計(jì)數(shù)器能不用最好不用計(jì)數(shù)器也是由程序設(shè)計(jì)成的，顯示計(jì)數(shù)器的過程其實(shí)就是一個(gè)程序的執(zhí)行過程，它需要占用用戶寶貴的上網(wǎng)時(shí)間，并且往往毫無意義。這樣用戶就會在瀏覽網(wǎng)頁時(shí)覺得舒服、順暢，對網(wǎng)站留下深刻的印象。90整個(gè)頁面風(fēng)格要一致10.計(jì)數(shù)器能不用最好不用11.盡量使用超級鏈接這樣制作的網(wǎng)頁的可移植性比較強(qiáng)，輸入量較小。另外要保證超鏈接的直觀有效，以便使用戶能夠很快地找到其想要的東西。12.不要濫用尖端技術(shù)使用尖端技術(shù)有可能會打擊企業(yè)部分用戶訪問網(wǎng)站的興趣和積極性；另一方面，最新的網(wǎng)站開發(fā)技術(shù)還存在用戶瀏覽器的版本支持問題。9111.盡量使用超級鏈接這樣制作的網(wǎng)頁的可移植性比5.3.2網(wǎng)頁版面布局的設(shè)計(jì)版面指的是用戶在瀏覽器中看到的一個(gè)完整頁面（可以包含框架和層）。布局就是指以最適合用戶瀏覽的方式將圖片和文字排放在頁面的不同位置。1.網(wǎng)頁版面布局步驟創(chuàng)建初始方案。這屬于創(chuàng)造階段，不講究細(xì)膩工整，不必考慮細(xì)節(jié)功能，只以粗陋的線條勾畫出創(chuàng)意的輪廓即可。925.3.2網(wǎng)頁版面布局的設(shè)計(jì)版面指的是用戶在瀏初步設(shè)計(jì)網(wǎng)頁的布局。注意必須遵循突出重點(diǎn)、平衡諧調(diào)的原則，將網(wǎng)站標(biāo)志、主菜單等最重要的模塊放在最顯眼、最突出的位置，然后在考慮次要模塊的排放。定案。將初步布局精細(xì)化、具體化。93初步設(shè)計(jì)網(wǎng)頁的布局。注意必須遵循突出重點(diǎn)、平衡諧調(diào)2.常見的版面布局形式“T”結(jié)構(gòu)布局。所謂“T”結(jié)構(gòu)，就是指網(wǎng)頁上邊和左邊相結(jié)合，頁面頂部的橫條網(wǎng)站標(biāo)志和廣告條，下方左面為主菜單，右面顯示內(nèi)容的布局，這是網(wǎng)頁設(shè)計(jì)中用的最廣泛的一種布局方式。優(yōu)點(diǎn)：信息能被用戶最大限度的獲取，而且很方便；其次是頁面結(jié)構(gòu)清晰，主次分明、易于使用。942.常見的版面布局形式“T”結(jié)構(gòu)布局。優(yōu)點(diǎn)：信息能被用戶缺點(diǎn)：規(guī)矩呆板，讓人“看之無味”?！翱凇毙筒季?。指頁面上下各有一個(gè)廣告條，左面是主菜單，右面是友情鏈接等，中間是主要內(nèi)容。優(yōu)點(diǎn)：頁面充實(shí)、內(nèi)容豐富、信息量大；缺點(diǎn)：頁面擁擠，不夠靈活。95缺點(diǎn)：規(guī)矩呆板，讓人“看之無味”?！翱凇毙筒季?。優(yōu)點(diǎn)：頁面充“三”型布局。特點(diǎn)是頁面上橫向兩條色塊，將頁面整體分割為四部分，色塊中大多放廣告條。對稱對比布局。優(yōu)點(diǎn)：視覺沖擊力強(qiáng)；缺點(diǎn)：將兩部分有機(jī)地結(jié)合比較困難。96“三”型布局。對稱對比布局。27POP布局。指頁面布局像一張宣傳海報(bào)，以一張精美圖片作為頁面的設(shè)計(jì)中心。

優(yōu)點(diǎn)：漂亮吸引人；缺點(diǎn)：速度慢。3.頁面版面布局原則與技巧只有當(dāng)內(nèi)容和形式，即具體的網(wǎng)頁的排版布局達(dá)到一種協(xié)調(diào)的狀態(tài)才算是一種真正成功的網(wǎng)頁設(shè)計(jì)。97POP布局。指頁面布局像一張宣傳海報(bào)，以一張精美圖片作為頁面正常平衡；多指左右、上下對照形式。2）異常平衡；即非對照形式，但也要平衡和韻律。3）對比；色彩、色調(diào)等技巧的對比，及內(nèi)容上的古今、新舊、貧富對比。以下是一些設(shè)計(jì)原則：98正常平衡；以下是一些設(shè)計(jì)原則：29凝視；指利用頁面中人物的視線，使瀏覽者仿照跟隨的心理，以達(dá)到注視頁面的效果?？瞻?；突出卓越和優(yōu)越感，有效體現(xiàn)網(wǎng)頁格調(diào)。盡量用圖片解說。99凝視；指利用頁面中人物的視線，使瀏覽者仿照跟隨的心理，以達(dá)到5.3.3網(wǎng)頁色彩設(shè)計(jì)在網(wǎng)頁設(shè)計(jì)中，應(yīng)根據(jù)和諧、均衡和重點(diǎn)突出的原則，將不同的色彩進(jìn)行組合、搭配來構(gòu)成美麗的頁面。研究表明：彩色的記憶效果是黑白色得3.5倍。也就是說，彩色頁面較完全的黑白頁面更加吸引人。1005.3.3網(wǎng)頁色彩設(shè)計(jì)在網(wǎng)頁設(shè)計(jì)中，應(yīng)根據(jù)在網(wǎng)頁設(shè)計(jì)中較常的做法：主要內(nèi)容文字用非彩色（黑色），邊框、背景、圖片用彩色，這樣頁面整體不單調(diào)，用戶看主要內(nèi)容也不會眼花。1.網(wǎng)頁色彩搭配的原理色彩的鮮明性；色彩的獨(dú)特性；色彩的合適性；色彩的聯(lián)想性。101在網(wǎng)頁設(shè)計(jì)中較常的做法：1.網(wǎng)頁色彩搭配的原理色彩的鮮明2.網(wǎng)頁色彩搭配的技巧相同色系色彩；運(yùn)用對比色或互補(bǔ)色；使用過渡色；用黑色和一種彩色；1022.網(wǎng)頁色彩搭配的技巧相同色系色彩；33不要將所有顏色都用到，盡量控制在三種色彩以內(nèi)；背景和文字的對比盡量要大，要有足夠的對比度來保證頁面易于閱讀；在設(shè)計(jì)中要考慮主要用戶群的背景和構(gòu)成。103不要將所有顏色都用到，盡量控制在三種色彩以內(nèi)；345.3.4網(wǎng)頁中圖片和文字的設(shè)計(jì)1.善用圖片現(xiàn)今web上展現(xiàn)的絕大多數(shù)圖片和圖象是GIF和JPEG格式、PNG和FlashPix文件格式。

一般情況下，GIF格式:漫畫、圖標(biāo)、動畫和平鋪式圖案背景。JPEG格式:照片和藝術(shù)復(fù)制品。1045.3.4網(wǎng)頁中圖片和文字的設(shè)計(jì)1.善用圖片圖象可以彌補(bǔ)文字的不足，但并不能夠完全取代文字。因此，制作頁面時(shí)，必須注意將圖象所包含的重要信息或鏈接到其他頁面的指示用文字重復(fù)表達(dá)一次。圖像的內(nèi)容應(yīng)有一定的實(shí)際作用，切忌虛飾浮夸，最佳的圖象應(yīng)集美觀與信息內(nèi)容與一身。105圖象可以彌補(bǔ)文字的不足，但并不能夠完全取代文字。2.網(wǎng)站字體下面是網(wǎng)頁設(shè)計(jì)中有關(guān)字體的使用原則和技巧：不要使用超過三種以上的字體；不要用太大或太小的文字；避免過多使用不停閃爍的文字。1062.網(wǎng)站字體下面是網(wǎng)頁設(shè)計(jì)中有關(guān)字體的使用原則和技巧：不5.4首頁設(shè)計(jì)首頁也叫主頁，它是網(wǎng)站的形象頁面，是網(wǎng)站的“門面”，故被稱為“HomePage”,它的設(shè)計(jì)是一個(gè)網(wǎng)站成功與否的關(guān)鍵。首頁的設(shè)計(jì)應(yīng)該遵循快速、簡潔、吸引人、信息概括能力強(qiáng)、易于導(dǎo)航的原則，同時(shí)應(yīng)納入企業(yè)CIS（企業(yè)形象識別系統(tǒng)）計(jì)劃，與企業(yè)CIS的其他內(nèi)容協(xié)調(diào)起來。1075.4首頁設(shè)計(jì)首頁也叫主頁，它是網(wǎng)站的形象5.4.1首頁的功能模塊首頁的功能模塊是指在首頁上需要實(shí)現(xiàn)的主要內(nèi)容及其功能，最簡單地在主頁上必須清楚地列出三項(xiàng)要點(diǎn)：機(jī)構(gòu)名稱、提供的產(chǎn)品或服務(wù)以及主頁內(nèi)容（即網(wǎng)站上其他頁面還載有什么資料）。1085.4.1首頁的功能模塊首頁的功能模塊是指在10940頁頭用來準(zhǔn)確無誤地標(biāo)示企業(yè)的網(wǎng)站，它應(yīng)該能夠體現(xiàn)出企業(yè)網(wǎng)站的主題，而該主題是與企業(yè)的產(chǎn)品和服務(wù)緊密相關(guān)的。主菜單即導(dǎo)航條，它提供了對關(guān)鍵頁面的簡捷導(dǎo)航，其超鏈接或圖標(biāo)應(yīng)明確地表明企業(yè)網(wǎng)站的其他頁面上還載有什么樣的信息。110頁頭用來準(zhǔn)確無誤地標(biāo)示企業(yè)的網(wǎng)站，它應(yīng)該能夠體現(xiàn)出最新消息的傳遞如果企業(yè)網(wǎng)站的主頁從不改變，用戶很快會厭倦。在主頁上預(yù)告即將有新資料推出，可吸引用戶再來瀏覽。為保新鮮感，應(yīng)時(shí)刻確保主頁提供的是最新信息。電子郵件地址在頁面底部設(shè)計(jì)簡單的電子郵件鏈接，可使用戶與網(wǎng)站的有關(guān)負(fù)責(zé)人迅速取得聯(lián)系。有利于用戶節(jié)省大量搜索時(shí)間，同時(shí)企業(yè)也能及時(shí)獲得信息反饋。111最新消息的傳遞如果企業(yè)網(wǎng)站的主頁從不改變，用戶很聯(lián)絡(luò)信息?？梢粤谐鐾ㄓ嵉刂?、公關(guān)或營業(yè)部門的電話號碼等，以便用戶聯(lián)系。版權(quán)信息。其他信息。如廣告條、搜索、友情鏈接、郵件列表、計(jì)數(shù)器等。112聯(lián)絡(luò)信息?？梢粤谐鐾ㄓ嵉刂贰⒐P(guān)或營業(yè)部門的電話號碼等，以便5.4.2首頁的可視化設(shè)計(jì)確定好首頁的內(nèi)容和功能后，就可以設(shè)計(jì)首頁的版面了。在圖文類首頁中，通常以圖片和標(biāo)題為視覺興趣點(diǎn)。為吸引瀏覽者的注意力，可將文字標(biāo)題融合在畫面中，使兩個(gè)興趣點(diǎn)合為一體。1135.4.2首頁的可視化設(shè)計(jì)確定好首頁的內(nèi)容設(shè)計(jì)版面的最好方法是：找一張白紙、一支筆，先將理想中的草圖勾勒出來，然后再用網(wǎng)頁制作軟件實(shí)現(xiàn)。設(shè)計(jì)人員要了解企業(yè)的CIS，熟悉企業(yè)標(biāo)志、吉祥物、字體及用色標(biāo)準(zhǔn)，以便在網(wǎng)站的局部將之體現(xiàn)出來，于平淡之中勾畫出一個(gè)優(yōu)美的符合企業(yè)特點(diǎn)的曲線，從而將企業(yè)印在瀏覽者的腦海里。114設(shè)計(jì)版面的最好方法是：找一張白紙、一支筆，先將在設(shè)計(jì)中，應(yīng)避免“封面”問題。封面是指沒有具體內(nèi)容，只放一個(gè)標(biāo)徽Logo點(diǎn)擊進(jìn)入，或者只有簡單的圖象菜單的首頁。5.4.3首頁設(shè)計(jì)要注意的問題首頁明確，主題突出；盡可能縮短下載時(shí)間。此外，還需注意配合最抵擋的設(shè)備。115在設(shè)計(jì)中，應(yīng)避免“封面”問題。封面是指沒有具體5.5其他頁面的設(shè)計(jì)5.5.1新聞頁面的設(shè)計(jì)

任何類型企業(yè)的電子商務(wù)站點(diǎn)都應(yīng)該有一個(gè)新聞頁面，該頁面擔(dān)負(fù)著雙重作用，既可以用來動態(tài)發(fā)布有關(guān)新產(chǎn)品或新開發(fā)項(xiàng)目或公司活動的情況，又可以作為公司的活動年表。

建立新聞頁面，首先在主頁上要編寫并設(shè)置可點(diǎn)擊的新聞標(biāo)題，然后再編寫完整的新聞頁面，這些頁面通過超鏈接與新聞標(biāo)題相連。1165.5其他頁面的設(shè)計(jì)5.5.1新聞頁面的設(shè)1.主頁中的新聞標(biāo)題通常標(biāo)題的文字不宜過長，主要包括的要素與設(shè)計(jì)的方法如下：新聞標(biāo)題組成的要素新聞日期，日期位于標(biāo)題的開頭；使用一個(gè)動詞來描述該新聞的目的；設(shè)計(jì)的產(chǎn)品或企業(yè)，著重表示該新聞直接涉及到產(chǎn)品或企業(yè)；提示語，用來激發(fā)瀏覽者的興趣。1171.主頁中的新聞標(biāo)題通常標(biāo)題的文字不宜過長，新聞標(biāo)題的版面布置主頁中新聞標(biāo)題的版面布置要保持簡單、清晰、引人注目，通?？刹捎靡韵聨追N方法。新聞標(biāo)題的排列按降序進(jìn)行排列，開頭頂部是最近的新聞，底部是最舊的新聞；可在新聞標(biāo)題前采用標(biāo)準(zhǔn)編目符或小的圖象作為點(diǎn)綴，增加頁面的可讀性；將新聞標(biāo)題的列表放在一個(gè)上下滾動的窗口中以容納更多的新聞。118新聞標(biāo)題的版面布置主頁中新聞標(biāo)題的版面布置要保2.新聞頁面新聞頁面要滿足易于導(dǎo)航的要求，通?？梢酝ㄟ^在新聞頁面建立以下幾種方式來實(shí)現(xiàn)。建立菜單欄導(dǎo)航系統(tǒng)以便與用戶實(shí)現(xiàn)新聞頁面與網(wǎng)站中其他頁面間的無縫跳轉(zhuǎn)。建立與前面或后面新聞的鏈接；將新聞進(jìn)行分類或時(shí)間索引，建立菜單，用戶可根據(jù)時(shí)間或內(nèi)容檢索其感興趣的新聞；在新聞頁面中包含與該新聞有關(guān)的圖片、聲音或其他多媒體文件；1192.新聞頁面新聞頁面要滿足易于導(dǎo)航的要求，通將稿件中出現(xiàn)的關(guān)鍵人名鏈接到其E-mail地址或其因特網(wǎng)頁面上；考慮鏈接到稿件中提到的任何企業(yè)合伙人、公司雇員的見解或其他說明；客戶、分析家或公共輿論對該新聞稿主題的見解。120將稿件中出現(xiàn)的關(guān)鍵人名鏈接到其E-mail地址或其因特網(wǎng)頁5.5.2產(chǎn)品頁面的制作產(chǎn)品頁面一般采用信息分層、逐層細(xì)化的方法展示公司產(chǎn)品或服務(wù)。產(chǎn)品頁面的主要內(nèi)容應(yīng)包括因特網(wǎng)產(chǎn)品/價(jià)格清單以及單個(gè)產(chǎn)品頁面，建立產(chǎn)品名稱到產(chǎn)品頁面的鏈接，還可以利用高級的表格給目錄增加新的風(fēng)格和生動的圖象。產(chǎn)品頁面的創(chuàng)建主要在于掌握產(chǎn)品目錄的層次結(jié)構(gòu)和導(dǎo)航方法。1215.5.2產(chǎn)品頁面的制作產(chǎn)品頁面一般采用產(chǎn)品目錄的分層通常如下：第一層：首先建立一個(gè)產(chǎn)品/價(jià)格列表，該表使用戶能夠全面瀏覽公司的產(chǎn)品；第二層：對應(yīng)每個(gè)產(chǎn)品的頁面，該頁面將對此項(xiàng)產(chǎn)品的有關(guān)信息進(jìn)行全面的介紹；第三層：產(chǎn)品更深層次的信息，從這一層中瀏覽者可以深入了解該產(chǎn)品的技術(shù)細(xì)節(jié)、設(shè)計(jì)維護(hù)等；第四層：如果瀏覽者對第三層的信息還不滿足，可以通過網(wǎng)絡(luò)向公司的有關(guān)人員進(jìn)一步了解信息。122產(chǎn)品目錄的分層通常如下：第一層：首先建立一個(gè)產(chǎn)品/價(jià)格列表，產(chǎn)品頁面應(yīng)達(dá)到以下要求：包含關(guān)于產(chǎn)品盡可能多的有用的信息；具有獨(dú)創(chuàng)性；包含站點(diǎn)的導(dǎo)航菜單及其到產(chǎn)品/價(jià)格列表目錄的鏈接。另外要注意的是不要在產(chǎn)品頁面上增加太多無用的鏈接。123產(chǎn)品頁面應(yīng)達(dá)到以下要求：545.5.3雇員頁面雇員是企業(yè)最寶貴的資源和財(cái)富，網(wǎng)上企業(yè)通過創(chuàng)建每個(gè)雇員的頁面可以吸引潛在客戶，同時(shí)也是使虛擬企業(yè)人格化的有效手段。目前，網(wǎng)上企業(yè)的雇員頁面大都采用框架（Frames）形式。最簡單的框架是將網(wǎng)頁分成左右兩部分，左半部分放置雇員名字按字母順序排列的清單，每個(gè)雇員名字都鏈接到該雇員的個(gè)人頁面；個(gè)人頁面的內(nèi)容放置在右半部分的框架中。1245.5.3雇員頁面雇員是企業(yè)最寶貴的資源1.設(shè)計(jì)雇員目錄設(shè)計(jì)按字母排序的雇員清單，填入左框。2.創(chuàng)建默認(rèn)頁面默認(rèn)頁面應(yīng)提供下列基本信息：企業(yè)名稱及