電子商務(wù)網(wǎng)頁設(shè)計(jì)畢業(yè)論文

1、<p><b>　　畢業(yè)論文（設(shè)計(jì)）</b></p><p>　　Graduation Paper</p><p>　　題目：淺談主題型電子商務(wù)網(wǎng)頁設(shè)計(jì)</p><p>　　Talk About E-Commerce Webpage Design</p><p><b>　　摘 要<

2、;/b></p><p>　　近年隨著網(wǎng)絡(luò)的越來越普及，網(wǎng)上購物這一活動(dòng)走入千萬尋常百姓家，電子商務(wù)業(yè)得到迅速發(fā)展，勢頭蓬勃，行業(yè)內(nèi)競爭愈趨激烈，無論是B2B模式還是B2C模式，無論是京東商城、當(dāng)當(dāng)網(wǎng)這種大型網(wǎng)商，還是淘寶里面的各類散戶網(wǎng)店，商戶之間的拼殺接近白熱化。</p><p>　　本文嘗試從網(wǎng)頁設(shè)計(jì)角度來探討主題型電子商務(wù)網(wǎng)站的建設(shè)，并闡述如何通過這一手段使網(wǎng)站更具吸引力更具

3、魅力，以提高其在同行間的競爭力；通過運(yùn)用計(jì)算機(jī)輔助設(shè)計(jì)進(jìn)行實(shí)例創(chuàng)作來讓讀者認(rèn)識網(wǎng)頁設(shè)計(jì)，了解如何從零開始設(shè)計(jì)和建立電子商務(wù)網(wǎng)站。</p><p>　　關(guān)鍵詞：電子商務(wù)；網(wǎng)站建設(shè)；網(wǎng)頁設(shè)計(jì)；Photoshop；Dreamweaver .</p><p><b>　　Abstract</b></p><p>　　Becomes more and m

4、ore popular in recent years, along with the network, online shopping this activity into the tens of millions of ordinary people, e-commerce industry gets rapid development, the momentum of vigorous, keener competition in

5、 the industry, whether it is a B2B or B2C model, whether, dangdang, jingdong mall the large version, or various types of retail shop in taobao, merchants fight between hotting up.</p><p>　　From web design th

6、is article to discuss e-commerce sites for the construction of the theme type, and explains how to use this means to make the website more attractive more charm, to improve its ability to compete in the members; By using

7、 computer aided design for instance creation to let the reader know web design, understand how to design and establish e-commerce sites from scratch.</p><p>　　Keywords: E-commerce； Website Build； </p>

8、<p>　　Webpage Design； Photoshop； Dreamweaver .</p><p><b>　　目 錄</b></p><p><b>　　摘 要I</b></p><p>　　AbstractII</p><p>　　目 錄III&l

9、t;/p><p>　　1. 緒 論1</p><p>　　2. 關(guān)于網(wǎng)頁設(shè)計(jì)2</p><p>　　2.1 網(wǎng)站的建設(shè)流程2</p><p>　　2.1.1確定網(wǎng)站主題2</p><p>　　2.1.2 收集網(wǎng)站素材2</p><p>　　2.1.3 明確網(wǎng)站布局2</p&g

10、t;<p>　　2.1.4 網(wǎng)頁制作2</p><p>　　2.2 網(wǎng)頁色彩2</p><p>　　2.2.1 色彩模式2</p><p>　　2.2.2 色彩的搭配3</p><p>　　3. 設(shè)計(jì)軟件的選擇4</p><p>　　4. 網(wǎng)站整體設(shè)計(jì)部分5</p><p&

11、gt;　　4.1 banner的制作5</p><p>　　4.2 對整個(gè)頁面進(jìn)行排版6</p><p>　　4.3 對頁面進(jìn)行切片導(dǎo)出6</p><p>　　5. 運(yùn)用Dreamweaver進(jìn)行結(jié)構(gòu)調(diào)整8</p><p>　　5.1 建立網(wǎng)頁站點(diǎn)和導(dǎo)入主頁面8</p><p>　　5.2 網(wǎng)頁添加熱點(diǎn)鏈接

12、10</p><p>　　6. 結(jié) 論10</p><p><b>　　致 謝12</b></p><p><b>　　參考文獻(xiàn)13</b></p><p><b>　　1. 緒 論</b></p><p>　　近年隨著網(wǎng)絡(luò)的越來

13、越普及，網(wǎng)上購物這一活動(dòng)走入千萬尋常百姓家，電子商務(wù)業(yè)得到迅速發(fā)展，勢頭蓬勃，行業(yè)內(nèi)競爭愈趨激烈，無論是B2B模式還是B2C模式，無論是京東商城、當(dāng)當(dāng)網(wǎng)這種大型網(wǎng)商，還是淘寶里面的各類散戶網(wǎng)店，商戶之間的拼殺接近白熱化。</p><p>　　如何才能提高一個(gè)電子商務(wù)網(wǎng)站的競爭力？怎樣才是電子商務(wù)的生存之道？拋開運(yùn)作管理方面的工作不說，從建站之初就必須有個(gè)明確的思路——與眾不同。如何才能實(shí)現(xiàn)差異化，做到與眾不同、鶴

14、立雞群？如果規(guī)模上做不到如“京東商城”之類的“高、大、全”的話，那剩下最好的辦法就是把東西做“?！绷恕Ｓ腥藝L試從商品分類的角度上把電商網(wǎng)站給做“?！绷?，如“凡客誠品”、“小米手機(jī)”，本人不妨換個(gè)方式把東西給做“?！绷恕，F(xiàn)實(shí)生活中有很“?！钡纳虡I(yè)機(jī)構(gòu)，譬如“迪士尼樂園”，這種主題公園的“專”，是品牌標(biāo)簽角度的“?！?，另外還有很多主題酒店、主題飯店等。電子商務(wù)網(wǎng)站其實(shí)也可以此方式提高自身的競爭力，建設(shè)一個(gè)主題型電子商務(wù)網(wǎng)站。</p&g

15、t;<p>　　本文嘗試單純從網(wǎng)頁設(shè)計(jì)角度來探討主題型電子商務(wù)網(wǎng)站的建設(shè)，并闡述如何通過這一手段使網(wǎng)站更具吸引力更具魅力，以提高其在同行間的競爭力；通過運(yùn)用計(jì)算機(jī)輔助設(shè)計(jì)進(jìn)行實(shí)例創(chuàng)作來讓讀者認(rèn)識網(wǎng)頁設(shè)計(jì)，了解如何從零開始設(shè)計(jì)和建立電子商務(wù)網(wǎng)站。</p><p><b>　　2. 關(guān)于網(wǎng)頁設(shè)計(jì)</b></p><p>　　2.1 網(wǎng)站的建設(shè)流程</p

16、><p>　　2.1.1確定網(wǎng)站主題</p><p>　　網(wǎng)站的主題是一個(gè)網(wǎng)站的核心，創(chuàng)建網(wǎng)站前要先確定站點(diǎn)的主題，只有主題確定后才能有目的地區(qū)尋找相關(guān)的資料。</p><p>　　2.1.2 收集網(wǎng)站素材</p><p>　　明確了網(wǎng)站的主題以后，你就要圍繞主題開始搜集材料了。材料既可以從圖書、報(bào)紙、光盤、多媒體上得來，也可以從互聯(lián)網(wǎng)上搜集，然

17、后把搜集的材料去粗取精，去偽存真，作為自己制作網(wǎng)頁的素材。</p><p>　　2.1.3 明確網(wǎng)站布局</p><p>　　網(wǎng)站布局與繪畫非常相似，開始就像一張白紙，需要先勾勒出網(wǎng)站中的各頁面的輪廓，如網(wǎng)站的結(jié)構(gòu)、欄目的設(shè)置、網(wǎng)站的風(fēng)格、顏色搭配、版面布局、文字圖片的運(yùn)用等。</p><p>　　2.1.4 網(wǎng)頁制作</p><p>　　網(wǎng)

18、站是由許多不同的網(wǎng)頁組成的，而在開發(fā)網(wǎng)站時(shí)，其核心內(nèi)容就是設(shè)計(jì)不同的網(wǎng)頁。在設(shè)計(jì)網(wǎng)頁時(shí)，需要選擇一些工具，在此本人用到的是Photoshop和Dreamweaver，除此之外還運(yùn)用到其他一些設(shè)計(jì)網(wǎng)頁的輔助工具。</p><p><b>　　2.2 網(wǎng)頁色彩</b></p><p>　　2.2.1 色彩模式 </p><p>　　在運(yùn)用計(jì)算機(jī)輔助

19、設(shè)計(jì)時(shí)經(jīng)常需要選擇在何種色彩模式下進(jìn)行工作，常見的有RGB模式和CMYK模式。 </p><p>　　RGB模式，是三原色光疊加模式，R代表紅色光，G代表綠色光，B代表藍(lán)色光，三種色彩疊加形成了其它的色彩。因?yàn)槿N顏色都有256個(gè)亮度水平級，所以三種色彩疊加就形成1670萬種顏色了，通過它們足以再現(xiàn)絢麗的世界。因?yàn)镽GB模式屬于光學(xué)上的疊加模式，輸出媒介一般是顯示器、電視機(jī)、投影機(jī)等發(fā)光設(shè)備。</p>

20、<p>　　CMYK模式，是顏料（墨水）疊加模式，C、M、Y、K四個(gè)字母分別代表印刷上用的四種顏色，C代表青色顏料，M代表洋紅色顏料，Y代表黃色顏料，K代表黑色顏料。因?yàn)樵趯?shí)際引用中，青色、洋紅色和黃色三種墨水很難疊加形成真正的黑色，最多不過是褐色而已。因此才引入了K——黑色。黑色的作用是強(qiáng)化暗調(diào)，加深暗部色彩。因?yàn)镃MYK屬于顏料疊加模式，輸出媒介則是報(bào)紙、雜志、海報(bào)、宣傳單張等印刷品。</p><p

21、>　　由于網(wǎng)頁設(shè)計(jì)工作的成果是網(wǎng)站，而網(wǎng)站內(nèi)容是通過顯示器這一媒介得以體現(xiàn)的，故網(wǎng)頁設(shè)計(jì)必須在RGB色彩模式下進(jìn)行工作。</p><p>　　2.2.2 色彩的搭配</p><p>　　將色彩具體到網(wǎng)頁搭配中，應(yīng)遵循一定的方法。</p><p>　　同色搭配，該方法采用一種顏色的深淺搭配，盡管網(wǎng)站設(shè)計(jì)要避免采用單一色彩，以免產(chǎn)生單調(diào)的感覺，但通過調(diào)整色彩的飽和

22、度和透明度也可以產(chǎn)生變化，使網(wǎng)站避免單調(diào)。</p><p>　　鄰近色搭配，使用在色帶上相鄰近的顏色，如綠色和藍(lán)色、紅色和黃色。采用鄰近色彩設(shè)計(jì)網(wǎng)頁可以使網(wǎng)頁避免色彩雜亂，易于達(dá)到頁面的和諧統(tǒng)一。</p><p>　　對比色搭配，該方法使用兩種完全不同的顏色搭配。對比色可以突出重點(diǎn)，產(chǎn)生強(qiáng)烈的視覺效果。通過合理使用對比色，能夠使網(wǎng)站特色鮮明，重點(diǎn)突出。</p><p&g

23、t;　　在設(shè)計(jì)時(shí)一般以一種顏色為主色調(diào)，對比色作為點(diǎn)綴，起到畫龍點(diǎn)睛的作用。明度推移色彩搭配，有兩種方法操作：通過加入等量的白色，使一種顏色漸亮；或者通過加入等量的黑色，使顏色變暗。這兩種方法都可以產(chǎn)生色彩明度漸變的效果。</p><p>　　3. 設(shè)計(jì)軟件的選擇</p><p>　　本人此次設(shè)計(jì)工作主要運(yùn)用Photoshop CS3進(jìn)行網(wǎng)站整體美工規(guī)劃設(shè)計(jì)，然后結(jié)合Dreamweaver

24、8.0進(jìn)行網(wǎng)頁結(jié)構(gòu)調(diào)整工作。(圖1)</p><p>　　Photoshop是Adobe公司開發(fā)的一種著名的處理圖形圖像的專門設(shè)計(jì)軟件。Photoshop的專長在于圖像處理。圖像處理是對已有的位圖圖像進(jìn)行編輯加工處理以及運(yùn)用一些特殊效果，其重點(diǎn)在于對圖像的處理加工。</p><p>　　Deamweaver是Macromedia 公司（現(xiàn)已被Adobe公司收購）的一款“所見即所得”的網(wǎng)頁編

25、輯工具產(chǎn)品。與微軟公司的網(wǎng)頁編輯工具Frontpage不同，Deamweaver 采用的是 Mac 機(jī)浮動(dòng)面版的設(shè)計(jì)風(fēng)格，對于初學(xué)者來說可能會(huì)感到不適應(yīng)。但習(xí)慣了其操作方式后，就會(huì)發(fā)現(xiàn) Dreamweaver 的直觀性與高效性是 Frontpage 所無法比擬的。Dreamweaver 對于 DHTML 的支持特別好，可以輕而易舉地做出很多眩目的頁面特效。插件式的程序設(shè)計(jì)使得其功能可以無限的擴(kuò)展。Dreamweaver 與 Flash、

26、Firework 并稱為 Macromedia 的網(wǎng)頁制作三劍客，由于是同一公司的產(chǎn)品，因而在功能上有著一個(gè)非常緊密的結(jié)合。</p><p>　　4. 網(wǎng)站整體設(shè)計(jì)部分</p><p>　　4.1 banner的制作</p><p>　　打開Photoshop，在【文件】里面找到【打開】導(dǎo)入所有素材，也可以使用快捷鍵Ctrl+O進(jìn)行導(dǎo)入素材，然后把素材拖拉到新建的界

27、面里。</p><p>　　Photoshop的摳圖功能很強(qiáng)大，可以通過通道、蒙版、選區(qū)來進(jìn)行摳圖。本人這里用到【魔術(shù)棒】，進(jìn)入Photoshop在左邊看到工具欄（圖3），并選擇魔術(shù)棒工具。因?yàn)檫x區(qū)的素材對比顏色比較明顯，素材的效果很精確的選中所需要的部分，填充一個(gè)底色，首頁的banner就完成了（圖4）。</p><p><b>　　圖4</b></p>

28、<p>　　如果對顏色不滿意，可以按照自己的色感進(jìn)行調(diào)整，在圖層下方有個(gè)小按鈕點(diǎn)擊一下就額可以看到多種調(diào)色的工具，方便快捷的調(diào)出你想要的效果，一般本人都會(huì)用到【色階】、【曲線】、【可選顏色】、【亮度對比度】、【色相/飽和度】等（圖5）。</p><p>　　4.2 對整個(gè)頁面進(jìn)行排版</p><p>　　接下來進(jìn)行導(dǎo)航條的制作，先用文字工具寫上文字，然后全部選中使用排列工具排

29、列進(jìn)行排版和調(diào)節(jié)位置。然后運(yùn)用同樣的方法依次完成整個(gè)頁面的其他部分的排版工作，最終做出來的網(wǎng)頁效果（圖6）。</p><p>　　4.3 對頁面進(jìn)行切片導(dǎo)出</p><p>　　網(wǎng)站的網(wǎng)頁是基于HTML語言設(shè)計(jì)的，運(yùn)用Photoshop只是從整體對頁面進(jìn)行設(shè)計(jì)制作，制作好后必須將版面轉(zhuǎn)換為Html網(wǎng)頁文件。</p><p>　　Photoshop有個(gè)功能，支持把設(shè)計(jì)

30、好的網(wǎng)頁版面進(jìn)行欄目分割并導(dǎo)出為網(wǎng)頁文件，分割后的欄目片塊對應(yīng)網(wǎng)頁文件里面的Table表格框架，而被分割的圖像則變成網(wǎng)頁內(nèi)容里面引用的圖片。</p><p>　　具體做法是，在工具欄找到【切片】工具（圖7），然后根據(jù)欄目劃分在頁面的對應(yīng)位置進(jìn)行切片（圖8）。切好圖后，同時(shí)按住Shift+Ctrl+Alt+S，會(huì)彈出導(dǎo)出窗口（圖9）進(jìn)行切片的保存。</p><p><b>　　圖7

31、</b></p><p><b>　　圖8</b></p><p><b>　　圖9</b></p><p>　　5. 運(yùn)用Dreamweaver進(jìn)行結(jié)構(gòu)調(diào)整</p><p><b>　　5.1 制作主頁面</b></p><p>　　打開D

32、reamweaver會(huì)出現(xiàn)一個(gè)啟動(dòng)對話框，點(diǎn)擊Dreamweaver站點(diǎn)，建立一個(gè)站點(diǎn)。</p><p>　　創(chuàng)建站點(diǎn)后可以導(dǎo)入剛才用Photoshop制作并導(dǎo)出的網(wǎng)頁文件，以繼續(xù)進(jìn)行結(jié)構(gòu)調(diào)整及各部分的修改工作，得到最終的主頁面（圖10）。</p><p>　　5.2 網(wǎng)頁添加熱點(diǎn)鏈接</p><p>　　要想在一幅圖像中打開不同的網(wǎng)頁，就需要再一幅圖像中同時(shí)添加不

33、同的超級鏈接。而普通鏈接智能在一幅圖像中添加一個(gè)鏈接，這時(shí)候就要運(yùn)用到熱點(diǎn)鏈接。特點(diǎn)鏈接的原理就是利用HTML語言在圖片上定義一定形狀的區(qū)域，然后給這些區(qū)域加上鏈接，這些區(qū)域被稱作熱點(diǎn)。</p><p>　　創(chuàng)建熱點(diǎn)時(shí)首先要選中圖像，然后在【屬性】檢查其中選擇其中一個(gè)熱點(diǎn)工具這里選擇的是【矩形熱點(diǎn)工具】（圖11）進(jìn)行編輯。然后在“鏈接”欄中輸入你想要鏈接的網(wǎng)址，保存文檔后打開IE瀏覽器的窗口，發(fā)現(xiàn)當(dāng)鼠標(biāo)指向并點(diǎn)擊

34、熱區(qū)圖像時(shí)，才能夠打開文件。至此，這個(gè)網(wǎng)頁就算真正的完成了。</p><p><b>　　圖11 </b></p><p>　　根據(jù)以上的方法。在主頁面結(jié)構(gòu)的基礎(chǔ)上，進(jìn)行一系列的網(wǎng)頁創(chuàng)作，制作各個(gè)不同欄目的頁面，用的是之前的模板，直接打開模板，在可編輯區(qū)域編輯即可（如圖12、圖13）。</p><p><b>　　6. 結(jié) 論&

35、lt;/b></p><p>　　本畢業(yè)設(shè)計(jì)經(jīng)過幾個(gè)月的查資料、整理材料、設(shè)計(jì)網(wǎng)頁、建設(shè)網(wǎng)站到寫作論文，今天終于可以順利的完成論文，終于讓學(xué)生在大學(xué)的生活，得以劃下了完美的句點(diǎn)。 畢業(yè)設(shè)計(jì)是對本人大學(xué)生活三年來教學(xué)的一個(gè)總結(jié)性考察，里面包含了本人學(xué)過的很多方面的知識，平時(shí)的學(xué)習(xí)都是自己聽老師講解，或者就是做練習(xí)之類，缺少了自己的獨(dú)立思考，通過這次的畢業(yè)設(shè)計(jì)，讓自己清楚了解到自己的學(xué)習(xí)程度，和自本人學(xué)習(xí)思考的

36、能力。從第一眼看到資料的那種眼花繚亂的感覺，到最后看到自己做出的設(shè)計(jì)論文的成功，體驗(yàn)了一次從茫然到無助，最后的那種成功的欣慰，真的讓自己受益匪淺，也使自己明白了，無論今后做什么事情，都要堅(jiān)持不懈的努力，多從問題的關(guān)鍵出發(fā)，分析不同的思路，多做總結(jié)與比較，從而得到最佳的結(jié)果。 這次的論文設(shè)計(jì)讓本人重新了解了很多在學(xué)校所學(xué)不到的東西，也借此回顧了一下本人大學(xué)所學(xué)的知識。它讓本人掌握了很多Photoshop和Dreamweaver的知識，讓本

37、人對本人所學(xué)過的知識有所鞏固和提高。在整個(gè)過程中，本人學(xué)到了新知識，擴(kuò)大了知識面。也讓本人認(rèn)識到了學(xué)海無涯的真正含義，本人將會(huì)不斷的學(xué)習(xí)新的知識，讓自己的能力得到進(jìn)一不的提升。 在論文</p><p><b>　　致 謝</b></p><p>　　經(jīng)過三個(gè)多月的時(shí)間本人的畢業(yè)論文撰寫和網(wǎng)頁制作均順利完成。在此本人要特別感謝本人的指導(dǎo)老師吳劍老師在此期間本人得到

38、了吳老師悉心細(xì)致的教誨和無私的幫助，特別是他廣博的學(xué)識、深厚的學(xué)術(shù)素養(yǎng)、嚴(yán)謹(jǐn)?shù)闹螌W(xué)精神和一絲不茍的工作作風(fēng)使本人終生受益，在此本人真誠地感謝他給本人的支持與信任。在設(shè)計(jì)期間，多次向吳老師請教，他給予了本人極大的幫助，指引本人的論文的寫作的方向和架構(gòu)，并提供了很多查找資料的方法，讓本人更清晰的了解了設(shè)計(jì)的整體規(guī)劃，從而比較容易的著手，也能按時(shí)完成，借此真誠地向吳老師道聲“謝謝”！ 設(shè)計(jì)的結(jié)束，真的也宣告了本人大學(xué)生涯的終結(jié)，心里雖然充滿了

39、期待，但也有的點(diǎn)不舍，想想自己走過來的一步一步，一點(diǎn)一滴，心中感慨萬千，希望自己帶著那份對未來社會(huì)的憧憬和希望，順利走進(jìn)社會(huì)的大家庭，開始自己新的生活，在論文的寫作過程中，許多同學(xué)也為本人提供了一系列寶貴的建議，同時(shí)在畢業(yè)設(shè)計(jì)的完成上也得到許多同事的支持和幫助，在此一并致以誠摯的謝意。</p><p><b>　　參考文獻(xiàn)</b></p><p>　　[1]網(wǎng)站,百度

40、百科.[DB/OL]http://baike.baidu.com/view/4232.htm.</p><p>　　[2]謝依君.電子報(bào)的新聞介面分析[D].臺北：臺灣國立政治大學(xué)新聞學(xué)系，1999.</p><p>　　[3]唐良瑞，蔡安妮，孫景鰲.從認(rèn)知心理及人機(jī)界面談網(wǎng)頁設(shè)計(jì)[J].工程圖學(xué)學(xué)報(bào)，2000，(2):31-36.</p><p>　　[4]徐珂，

41、苗彤，趙暉.網(wǎng)頁視覺與設(shè)計(jì)[M].北京：人民郵電出版社，2001.</p><p>　　[5]李硯祖，蘆影.視覺傳達(dá)的歷史與美學(xué)[M].北京：中國人民大學(xué)出版社，2000.</p><p>　　[6]何蘇六.網(wǎng)絡(luò)媒體的策劃與編輯[M].北京：北京廣播學(xué)院出版社，2001.</p><p>　　[7]好軍啟，劉治國，趙喜來.Dreamweaver CS4網(wǎng)頁設(shè)計(jì)與網(wǎng)站

42、建設(shè)標(biāo)準(zhǔn)教程[M].北京：清華大學(xué)出版社，2010.10.</p><p>　　[8]網(wǎng)站的發(fā)展歷史,百度文庫[DB/OL].http://wenku.baidu.com/view/eee5c0b1fd0a79563c1e7235.html.</p><p>　　[9]李萬軍，馬鑫著.本人的Photoshop CS5平面設(shè)計(jì)書(M).北京：電子工業(yè)出版社，2010.8.1.</p&g