g.book圖書導購網(wǎng)站的設計與實現(xiàn)

1、<p><b>　　摘 要</b></p><p>　　跟隨電子商務的發(fā)展,網(wǎng)上購物被越來越多的人所接受,購物網(wǎng)站所供給的信息也愈來愈豐富,購物網(wǎng)站之間的競爭也越來越劇烈。然而導購網(wǎng)站的出現(xiàn)，使得一些企業(yè)在競爭中脫穎而出，從中贏得了良好的利益。由此可見，導購網(wǎng)站能更好的為客戶在眾多的商品信息中提供更好的更準確的導購服務同時也能為企業(yè)帶來利益。本文主要闡述了應用Dreamweaver

2、軟件工具，采用DIV+CSS布局自建圖書導購網(wǎng)站，并詳細闡述了本導購網(wǎng)站的設計思路和實現(xiàn)過程，最后對實施了網(wǎng)站推廣。</p><p>　　關鍵詞：網(wǎng)站 導購網(wǎng)站 圖書導購網(wǎng)站</p><p><b>　　目錄</b></p><p>　　第1章網(wǎng)站設計背景1</p><p>　　1.1導購網(wǎng)站設計目的1</

3、p><p>　　1.2 導購網(wǎng)站發(fā)展現(xiàn)狀1</p><p>　　1.3 網(wǎng)站整體結構2</p><p>　　第2章 前期準備4</p><p>　　2.1 素材收集整理4</p><p>　　2.2 LOGO設計5</p><p>　　2.3 Banner設計7</p>&

4、lt;p>　　2.4 首頁效果圖9</p><p>　　第3章 網(wǎng)頁設計制作10</p><p>　　3.1 首頁設計制作10</p><p>　　3.2 其他頁面設計制作12</p><p>　　第4章 G.Book圖書導購網(wǎng)站推廣14</p><p>　　4.1 電子郵件推廣14</p>

5、;<p>　　4.2 IM及時通訊工具推廣（QQ）15</p><p>　　4.3 SNS社區(qū)營銷推廣（微博、微信、論壇）17</p><p><b>　　總結19</b></p><p><b>　　致謝21</b></p><p><b>　　參考文獻22<

6、;/b></p><p>　　第1章 網(wǎng)站設計背景</p><p>　　1.1導購網(wǎng)站設計目的</p><p>　　伴隨著網(wǎng)絡營銷的快速發(fā)展，顧客面對互聯(lián)網(wǎng)上成百上千的商品信息，如何才能快速有效的找到價格便宜，又符合自己需求的商品，成為很多消費者頭痛的問題。因為消費者有了這些需求，在網(wǎng)絡零售過程中必然對網(wǎng)絡導購產生了更大的需求，需要有一座橋梁，聯(lián)系消費者和網(wǎng)絡

7、零售商，滿足買賣雙方的需求，在這種市場需求下，導購網(wǎng)站運營而生。</p><p>　　現(xiàn)如今網(wǎng)絡導購己經(jīng)從基本在線客服，逐漸演變成基于用戶購物習性，整理各網(wǎng)絡零售平臺的商品訊息，站在消費者的角度輔助他們進行購物揀選的一個平臺。對于普通消費者來說，導購網(wǎng)站可以幫助他們找到折扣商品信息，并通過購房退稅降低采購成本，減少購物的時間成本，使網(wǎng)上購物體驗更好。</p><p>　　G.Book圖書導

8、購網(wǎng)站是一個專為圖書設計的導購網(wǎng)站，在該網(wǎng)站中，有新品書籍、特價書籍、推薦書籍等。將各類書籍在第一時間展現(xiàn)、推薦給愛好閱讀的人士，同時也將正規(guī)的圖書網(wǎng)站提供給消費者參考，安全購買。</p><p>　　1.2 導購網(wǎng)站發(fā)展現(xiàn)狀</p><p>　　現(xiàn)如今大型網(wǎng)絡零售網(wǎng)站都非常重視導購市場的發(fā)展，都推出自己的銷售聯(lián)盟，通過銷售聯(lián)盟提供各類廣告投放需求，讓中、小型網(wǎng)站，通過發(fā)布其提供的廣告，獲

9、得網(wǎng)絡廣告收益。2011年京東銷售數(shù)據(jù)(來自艾瑞網(wǎng))顯示，通過銷售聯(lián)盟和導購網(wǎng)站的CPS交易額占到其交易額的20%，交易規(guī)模相當驚人。在2012淘寶銷售傭金費用就超過3000000000。對于很多導購網(wǎng)站來說，網(wǎng)站的大部利潤來源于交易傭金，在網(wǎng)絡零售額中的占比還比較低，傭金比例通常根據(jù)銷售商品的不同，百分比從0.5%到30%不等。隨著網(wǎng)絡零售規(guī)模的增長，導購網(wǎng)站的市場規(guī)模也將進一步增大。</p><p>　　從另

10、一方面來看，跟隨電子商務的迅猛發(fā)展，越來越多的人習慣于網(wǎng)上購物，但是在購物的過程當中難免會遭受網(wǎng)購紛爭，那么如何維護消費者的權益成為網(wǎng)購中一個首要問題。導購平臺依托電子商務人士專業(yè)眼光及電商平臺之間相關合作機制，幫助消費者挑選優(yōu)質商品，從某種程度上極大降低了消費者的網(wǎng)購風險，并大大節(jié)省了消費者網(wǎng)購時間，因而在近些年受到越來越多的網(wǎng)購消費者的歡迎。</p><p>　　1.3 網(wǎng)站整體結構</p>&

11、lt;p>　　G.BOOK圖書導購網(wǎng)站主要是將各類書籍在第一時間展現(xiàn)、推薦給愛好閱讀的人士，同時也將正規(guī)的圖書網(wǎng)站提供給消費者參考，安全購買。</p><p>　　本網(wǎng)站分為首頁、圖書匯、熱搜榜、撿便宜、有話想說五個欄目。</p><p>　　圖書匯欄目主要是根據(jù)書籍類別分類展示。消費者可以根據(jù)書籍類別查找到所需書籍，并瀏覽網(wǎng)站書籍簡介，在對書籍內容有了基本的了解后便通過點擊“在線購

12、買”將跳轉到當當網(wǎng)、京東商城等各大書籍網(wǎng)店賣場選擇購買。</p><p>　　熱搜榜欄目將當前被消費者熱搜、或者熱賣的各類書籍推薦給瀏覽者。</p><p>　　撿便宜欄目將各類正在打折特賣的書籍推薦給瀏覽者，將信息、鏈接準確無誤的提供給瀏覽者。</p><p>　　有話想說欄目是與網(wǎng)站瀏覽者溝通、并接受用戶建議反饋的渠道。通過這種方式網(wǎng)站可以及時了解消費者的需求，

13、并不斷完善網(wǎng)站建設及服務。網(wǎng)站結構示意圖如下：</p><p>　　圖1-1網(wǎng)站結構示意圖</p><p><b>　　第2章 前期準備</b></p><p>　　2.1 素材收集整理</p><p>　　G.Book圖書導購網(wǎng)站的圖書產品相關圖片和文字素材均選自各大電商平臺。本人通過瀏覽國內各大電子商務平臺的圖書類商

14、品，挑選了部分經(jīng)典優(yōu)秀書籍，將其圖片和文字素材采用剪切、抓取、下載等方式獲得。并在此基礎上，依據(jù)本網(wǎng)站的設計風格關于圖片素材，進行了一些加工處理。通過采用Photoshop圖片處理軟件的諸多技術，諸如：魔棒工具和字體顏色工具、編輯菜單等。對圖片素材加工處理后應用于本導購網(wǎng)站。</p><p>　　以下圖片素材的過程是：首先收集整理好的圖片，用PS圖象處理軟件軟件，根據(jù)版面設計要求調整到所需尺寸，保存到文件夾的站點

15、。然后用Dreamweaver網(wǎng)頁制作工具，將圖片應用于網(wǎng)頁。以下是圖片的大小調整：如圖2-1所示。</p><p>　　圖2-1 圖片尺寸修改</p><p>　　2.2 LOGO設計</p><p>　　LOGO是網(wǎng)站的一個標志，傳遞著網(wǎng)站的形象。簡潔形象的LOGO能加深人的印象。本網(wǎng)站用一個戴著博士帽的小黃人與深綠色的文字結合，文字突出了網(wǎng)站的名字與類型，俏皮

16、的小黃人與文字完美的結合，LOGO給人感覺簡潔、明了、易記，如圖2-2所示。</p><p>　　圖2-2 LOGO效果圖</p><p>　　LOGO圖片是利用photoshop圖片軟件制作而成，首先新建一個文檔，將小黃人圖片用魔棒工具選取，并拖入新建文檔中。再依次將字體輸入，將文字大小、顏色、樣式調整好后，將底色去除，保存GIF格式，再成功運用到網(wǎng)站中。具體制作過程，如圖2-3、2-4

17、、2-5所示。</p><p>　　圖2-3 將LOGO圖片選取拖入</p><p>　　圖2-4 LOGO文字設計</p><p>　　圖2-5 LOGO去除底色</p><p>　　2.3 Banner設計</p><p>　　Banner是網(wǎng)站頁面的橫幅廣告。將網(wǎng)站主要的情感和思想進行宣傳。本網(wǎng)站的banner如

18、圖2-6所示。</p><p>　　圖2-6 banner圖片</p><p>　　banner運用了JS特效，六張圖片自動輪播使網(wǎng)站更為生動。JS特效代碼如下：</p><p>　　<div id="nivoSlider" class="nivoSlider"></p><p>　　<

19、;img src="images/content/slider/slider_image_1.jpg" alt="" /></p><p>　　<a href="portfolio_post.html"><img src="images/content/slider/slider_image_2.jpg" al

20、t="" title="G.BOOK一個專業(yè)的圖書導購網(wǎng)" /></a></p><p>　　<img src="images/content/slider/slider_image_3.jpg" alt="" /></p><p>　　<img src="imag

21、es/content/slider/slider_image_4.jpg" alt="" /></p><p>　　<img src="images/content/slider/slider_image_5.jpg" alt="" /></p><p>　　<img src="imag

22、es/content/slider/slider_image_6.jpg" alt="" title="驚喜盡在當當" /></p><p><b>　　</div></b></p><p><b>　　2.4 首頁效果圖</b></p><p>　　圖2

23、-7 網(wǎng)站首頁效果圖</p><p>　　第3章 網(wǎng)頁設計制作</p><p>　　3.1 首頁設計制作</p><p>　　網(wǎng)站首頁通過DIV/CSS技術采用三欄式布局排版，整體效果簡單明了。在色彩方面，采用深藍與淺灰搭調，低調而不失文雅，透漏著一股寧靜與書香。</p><p>　　導航條菜單欄采用了下拉菜單的JS特效，一方面便于瀏覽者分類

24、查找書籍信息，另一方面使得網(wǎng)頁顯得活潑生動，增添瀏覽者的興趣，如圖3-1所示。</p><p>　　圖3-1 首頁導航欄菜單效果圖</p><p>　　Banner運用了圖片輪播效果，將最新書籍、動態(tài)第一時間展現(xiàn)給瀏覽者，如圖3-2所示。</p><p>　　圖3-2 首頁banner效果圖</p><p>　　網(wǎng)站底部的圖片采用JS技術實現(xiàn)

25、了縮略圖方式進行分類書籍查詢。瀏覽者通過點擊縮略圖可以分別跳轉到諸如：生活/保健、攝影、管理、考證等不同書籍類別子頁面（圖3-3、3-4、3-5），從而使得瀏覽者查詢方式更加多樣化，也更為便捷。實現(xiàn)具體細節(jié)效果。</p><p>　　圖3-3 首頁底部效果（未點擊前）</p><p>　　圖 3-4 首頁底部效果（點擊時）</p><p>　　圖 3-5 首頁

26、底部效果（點擊后）</p><p>　　3.2 其他頁面設計制作</p><p>　　熱門搜索頁面主要是用DIV+CSS來布局。在推薦書籍展示中，采用JS特效，當鼠標放入書籍圖片上，書籍簡介、書籍名稱以及宣傳語等信息就會下拉顯示（圖3-6）或者上浮顯示（圖3-7），讓瀏覽者對于書籍有一個基本的了解，從而決定是否點擊書籍圖片鏈接，到達書籍所在的網(wǎng)站來了解更詳盡的信息，或者購買。</p&

27、gt;<p>　　圖3-6 下拉效果（對比）</p><p>　　圖3-7 上浮效果（對比）</p><p>　　G.Book圖書導購網(wǎng)站推廣</p><p>　　4.1 電子郵件推廣</p><p>　　E-mail營銷定義中強調了三個基本因素：基于用戶許可，通過電子郵件傳遞信息，信息對用戶是有價值的。三個因素缺少一個，都不能

28、稱為有效的E-mail營銷。所以我們在實行郵件推廣時先將郵件的主題進行設計，把郵件最重要的內容體現(xiàn)在郵件主題中，明確主題聯(lián)系內容，完整的將品牌產品信息突出，使用8~20個漢字將主題突出，在郵件主題中增添一些關鍵詞，增加郵件吸引力，提高閱讀率。根據(jù)信息內容的優(yōu)化，郵件業(yè)務目標和整體營銷協(xié)議，內容系統(tǒng)，減少郵件內容，字數(shù)明確的主題，郵件內容寫靈活，保持最好的消息格式，采用純文本格式、HTML和RichMedia格式多種格式供用戶選擇。把握郵

29、件發(fā)送頻率，在一定時期內傳播，這樣一來內容的來源也有保證。</p><p>　　本網(wǎng)站在利用電子郵件推廣時，主題、內容圍繞的是本網(wǎng)站的功能來撰寫與推廣，將寫好的郵件分別發(fā)給不同的好友，從而提高關注量，如圖4-1所示。</p><p>　　圖4-1 電子郵件推廣</p><p>　　4.2 IM及時通訊工具推廣（QQ）</p><p>　　QQ

30、的覆蓋面廣，注冊用戶超過10億，同時在線超過1億，龐大的用戶群體，讓QQ推廣覆蓋面極大。它有著超強的精準度可以做到一對一交流，提高營銷精確度。操作簡便，成本幾乎為零。持續(xù)性強，效率高?？梢约磿r交流，可以同顧客長時間建立良好管理，便與顧客價值挖掘，同時由于其精確性決定了這種推廣方式的效率較高。</p><p>　　運用QQ進行推廣，首先完善個人資料，填寫真實的資料，將公司的LOGO作為頭像，公司名稱作為網(wǎng)名，這樣能

31、夠建立信任。利用QQ會員、特殊符號昵稱、在線狀態(tài)來促使自己的QQ號排名靠前。在個性簽名上寫上網(wǎng)站的網(wǎng)址或網(wǎng)站的標語，畢業(yè)論文代寫平臺 這樣既醒目，又能讓人產生好奇心。在交流過程中把握言行舉止，做到和平、禮貌聊天。在發(fā)布信息是把握時間段，不打擾他人休息。在QQ群方面，盡量加入一些大群，排除同質化、目標人群不集中的群，保持小組活動，交朋友。在群內傳播消息，先感情，后推廣。人熟好辦事。傳播少而精的內容，利用群類資源：群公告、群共享等一系列的

32、工具 。在QQ上發(fā)布G.Book圖書導購網(wǎng)站的信息，書籍打折的信息及考試的信息等。</p><p>　　對于本網(wǎng)站的QQ推廣，首先申請了一個特定的QQ，然后給不同的好友、不同的QQ群發(fā)布網(wǎng)站的宣傳信息，從而提高人氣，增加關注量，如圖4-2、4-3所示。</p><p>　　圖4-2 QQ好友推廣</p><p>　　圖4-3 QQ群推廣</p><

33、;p>　　4.3 SNS社區(qū)營銷推廣（微博、微信、論壇）</p><p>　　如今最熱門的營銷推廣非微信莫屬，但自2013年微信關閉外鏈接之后，所有的外鏈接只能通過付費后的微信公眾賬號來進行。但相對于微博、論壇與微信的營銷手段來說，它們相似的地方在于軟文的撰寫。撰寫軟文是一種技術，要將你所要達到的目的與軟文結合起來，并且吸引瀏覽者點擊瀏覽，需要一定的磨練。用一個簡單卻又吸引人的標題，圖文并茂，軟文的中心明確

34、，然后發(fā)布在微博微信論壇里從而產生一定的影響與效果。</p><p>　　本網(wǎng)站的社區(qū)營銷推廣運用的是軟文的發(fā)布，吸引人的標題加上網(wǎng)站的圖片，從而引起瀏覽者的瀏覽，如圖4-4、4-5、4-6所示。</p><p><b>　　圖4-4 微博推廣</b></p><p><b>　　圖4-5 微信推廣</b></p&g

35、t;<p><b>　　圖4-6 論壇推廣</b></p><p><b>　　總結</b></p><p>　　本網(wǎng)站的設計及制作力求界面友好、易于操作。通過簡單的布局和清新的色調的運用，對網(wǎng)站的基本的導購功能的實現(xiàn)，使游客可以進入一個單獨的自己需要的操作，一目了然。</p><p>　　系統(tǒng)存在不足方面主

36、要在于本網(wǎng)站所實現(xiàn)的導購功能簡單且單一，網(wǎng)站界面設計還有待提高，網(wǎng)站系統(tǒng)并不是十分的完善。</p><p>　　本人通過此次畢業(yè)設計對導購網(wǎng)站的性質及特點有了全新的認識。導購網(wǎng)在是專業(yè)購物網(wǎng)站的外延和增補，是網(wǎng)上購物產業(yè)鏈不可缺少的一部分。是專門幫助買家找到好的店鋪，幫助買家輕松網(wǎng)購。</p><p>　　本次畢業(yè)設計書的導購網(wǎng)站，交易在網(wǎng)站本身是無法實現(xiàn)的，而是通過導購鏈接引導買家跳轉到

37、購物網(wǎng)站實現(xiàn)輕松，愉快的購物。導購網(wǎng)站通過這種方式實現(xiàn)提供高質量的產品給用戶的目的，減少了用戶可選擇的高質量產品的選擇時間。在本導購網(wǎng)站中，瀏覽者可以了解書籍詳情，閱讀精彩章節(jié)，瀏覽書籍評價，對比評價選擇相應的書籍網(wǎng)站購買。網(wǎng)站沒有全部定位于一個書籍商城，而是有提供不同類型的商城供瀏覽者自主選擇購買。本網(wǎng)站的設計實現(xiàn)過程使本人對Dreamweaver8軟件有了一個比較深的學習和掌握，掌握了DIV和CSS對界面進行布局排版的應用，進一步深

38、入學習了HTML語言，并了解了一些簡單的JavaScript腳本的應用。</p><p>　　盡管我的網(wǎng)站不是很成熟，有很多不足之處，但我能自豪的說，這里面的每一段代碼，都有著我的辛勤的勞動。當看著自己的設計制作的網(wǎng)站能夠一點一點完善并最終完成，真是莫大的幸福和欣慰。當看著自己的設計制作的網(wǎng)站能夠一點一點完善并最終完成，真是莫大的幸福和欣慰。</p><p>　　本文設計的經(jīng)驗將使我終身受

39、益，我覺得做論文是很專心的做一件事情，是真正的自我學習過程和學習過程，學習就沒有學習的能力。沒有自己的研究，就不會有所突破。我希望這些經(jīng)驗能讓我在未來我讓我不斷進步。</p><p><b>　　致謝</b></p><p>　　在本人的寫作過程中，最主要感謝的是我的指導老師：歐陽紅巍老師。老師認真負責的工作態(tài)度，嚴謹?shù)闹螌W精神使我受益匪淺,收獲頗豐。她不管在理論上還

40、是在實際操作中，都給予我很大的幫助，使我獲得不少的提高。在論文題目制定時，雖然有一波三折，但最后在老師的指導下，讓我選擇了圖書導購網(wǎng)站的題目，通過簡單的分析指導，讓我在寫作時有了具體方向。在整個過程中老師指出了我存在的很多問題，也幫我進行分析指導。在此非常感謝歐陽老師的細心指導，才能讓我順利完成畢業(yè)論文。</p><p>　　三年的大學生活就快走入尾聲，咱們的校園生活就要劃上句號，心中是無盡的難舍與留戀。從這里，

41、我的生活，將是一個新的旅程，將所學到的知識應用到實際工作中去。</p><p>　　回首三年，取得了一些成果，生活也幸福和辛苦。謝謝老師三年來對我孜孜不倦的教導，對我成長的關心和愛護。</p><p>　　學友情深，情同兄妹。三年的風風雨雨，我們走在一起，充滿了關愛，留下了讓我值得珍惜的記憶。</p><p>　　在我的求學歷程里，離不開父母的鼓勵和支持，是他們辛勤

42、的勞作，無私的付出，為我創(chuàng)造良好的學習條件，我才能順利完成完成學業(yè)，很感謝他們對我的支持和培育。</p><p>　　最后，千言萬語匯成一句：感謝！</p><p><b>　　參考文獻</b></p><p>　　[1]王德永,張少龍. PHP+CMS+Dreamweaver網(wǎng)站設計實例教程 [M]. 1版. 北京：人民郵電出版社，2013年

43、</p><p>　　[2]潘果.電子商務實務 [M].湖南：湖南現(xiàn)代物流職業(yè)技術學院，2012年</p><p>　　[3]王大遠.DIV+CSS 3.0網(wǎng)頁布局案例精粹 [M].北京：電子工業(yè)出版社，2011[4]李成飛.電子商務網(wǎng)站建設與維護 [M].1版. 北京：中國勞動社會保障出版社，2008</p><p>　　

44、[5]馬增友.Photoshop圖像處理技術應用[M].1版.北京：清華大學出版社；北京交通大學出版社，2009[6]潘果,張華南.電子商務網(wǎng)站建設與管理[M].1版.北京：教育科學出版社，2013[7]張曉雷.網(wǎng)頁設計與制作案例教程 [M]. 1版. 北京：清華大學出版社，2013</p><p>　　[8]李文龍,徐湘江.客戶關系管理實務[M].2版.北京：清華大學出版社，2013 </p>