網頁與制作畢業(yè)論文-基于dedecms的買買網的設計_與實現

1、<p>　　編號 </p><p>　　淮安信息職業(yè)技術學院</p><p><b>　　畢業(yè)論文</b></p><p><b>　　二〇一六年十月</b></p><p>　題 目基于DedeCMS的買買網的設計與實現</p><p><

2、;b>　　摘 要</b></p><p>　　20世紀后期互聯網在我國取得了快速的發(fā)展，31世紀隨著高科技技術的發(fā)展計算機早已滲透到生活中的各行各業(yè)，它早已在各個領域中扮演重要角色，例如醫(yī)院醫(yī)療、教學科研、金融政治、生活購物等等一系列，隨著信息化建設的不斷推進，網站的作用超越了傳統的信息獲取，交流它更能體現傳統難以表達的風采，網購是如今的熱潮，類似淘寶網那種做工美觀的網頁更能吸引客戶的購買欲。

3、所以，建立一個美觀的，易于管理的網站已經勢在必行。</p><p>　　本文設計開發(fā)的買買網信息管理系統是根據現在購物網站特性而編寫的，用現代科技優(yōu)勢擴展營銷，應用現代化信息管理系統對其進行設計以及科學管理是一個不可或缺的手段，根據需要本系統對品種分類、頁面設計、添加刪除種類內容、各個頁面的跳轉的管理等進行加以說明。在頁面的布局中，HTML將元素進行定義，CSS對展示的元素進行修改定位，再通過JavaScript

4、實現相應的交互效果，最后通過織夢DEDE后臺來進行對數據的增刪改查。雖然表面上看來很簡單，但是這里面需要理解的東西絕對不會少。在進行開發(fā)前，需要弄清楚這些概念，然后才能便于開發(fā)。</p><p>　　關鍵詞：HTML、CSS、 JS、織夢Dede、信息管理系統</p><p><b>　　Abstract</b></p><p>　　In la

5、te twentieth Century, the Internet has made rapid development in our country in thirty-first Century, with the development of computer technology has already penetrated into all walks of life, it has played an important

6、role in various fields, such as medical treatment, teaching and scientific research, finance, shopping and so on a series of political life, along with the continuous promotion of information construction, the website fu

7、nction beyond the traditional information exchange, whi</p><p>　　Shopping information management system developed in this paper is based on the characteristics and the preparation of the shopping website now

8、, with the expansion of marketing advantage of modern science and technology, modern information management system for the design and application of scientific management is an indispensable means, according to the needs

9、 of the system of classification, page design, add and delete content, each page jump the management are illustrated. In the layout of the</p><p>　　Keywords: HTML, CSS, JS, Dede, Information management syste

10、m.</p><p><b>　　目錄</b></p><p><b>　　摘 要I</b></p><p>　　AbstractII</p><p><b>　　目錄III</b></p><p><b>　　第一章 緒論1<

11、/b></p><p>　　1.1 課題研究的背景1</p><p>　　1.2購物網規(guī)劃設計的主要任務1</p><p>　　1.3可行性分析1</p><p><b>　　1.4系統分析2</b></p><p>　　第二章 相關軟件介紹3</p><p&

12、gt;　　2.1 PhotoShop3</p><p>　　2.2 Dreamweaver3</p><p>　　2.3織夢內容管理系統3</p><p>　　2.4 WampServer環(huán)境3</p><p>　　第三章 靜態(tài)頁面制作5</p><p>　　3.1首頁靜態(tài)頁面5</p>&

13、lt;p>　　3.1.1頭部部分5</p><p>　　3.1.2主體內容部分6</p><p>　　3.1.3尾部部分9</p><p>　　3.2列表靜態(tài)頁面11</p><p>　　3.3內容靜態(tài)頁面14</p><p>　　第四章 動態(tài)網頁后臺管理15</p><p>

14、　　4.1 DedeCMS織夢后臺環(huán)境準備15</p><p>　　4.2 織夢后臺欄目及內容添加15</p><p>　　4.2.1欄目添加15</p><p>　　4.2.1文章添加16</p><p>　　4.3 DedeCMS標記使用17</p><p>　　4.3.1首頁DedeCMS標記代碼插入

15、17</p><p>　　4.3.2列表頁DedeCMS標記代碼插入18</p><p>　　4.3.3內容頁DedeCMS標記代碼插入19</p><p>　　第五章 總結與展望20</p><p><b>　　致 謝21</b></p><p><b>　　參考文獻22

16、</b></p><p><b>　　第一章 緒論</b></p><p>　　1.1 課題研究的背景</p><p>　　如今的互聯網已經滲透到我們生活的每一個層面，網站的內容也越來越豐富全面，建設一個網站的時候比較重要的就是網站本身的整體美觀度，也就是網頁設計的整體的視覺效果，是否能夠充分吸引眼球。</p><

17、;p>　　近幾年購物網站吸引了很多賣家和顧客，淘寶網是中國深受歡迎的網購零售平臺，擁有近5億的注冊用戶數，每天有超過6000萬的固定訪客，同時每天的在線商品數已經超過了8億件，平均每分鐘售出4.8萬件商品。這足以看出購物網在人民生活中占據了多大的地位，購物網可以讓人足不出戶就可以以理想的價格買到理想的品質，這樣一來，一個購物網的美觀就至關重要了，吸引顧客的目光，讓顧客滿意是作為一個購物網站必須要做到的。</p>&l

18、t;p>　　1.2購物網規(guī)劃設計的主要任務</p><p>　　網站規(guī)劃是指在網站建設前對市場進行分析、確定網站的目的和功能，并根據需要對網站建設中的技術、內容、費用、測試、維護等作出規(guī)劃。網站規(guī)劃對網站建設起到計劃和指導的作用，對網站的內容和維護起到定位作用。</p><p>　　所以，要規(guī)劃設計一個購物網站，要做到以下幾點：</p><p>　　1.要針對

19、購物網站的特點以及需求，確定市場定位、風格、功能。</p><p>　　2.確定技術路線和平臺。包括欄目、美工、網頁、程序。</p><p>　　3.做好網站前端網頁的PS效果規(guī)劃圖，這樣不僅可以看到整個網頁的大概描述，更便于修改。</p><p>　　4.在有了效果圖的基礎上，對網頁進行明確的劃分，包括大整體、頭部、中部、尾部的大部分以及大部分之中的小劃分等，這樣

20、不會動一步動全身。</p><p>　　5.網頁制作，使用樣式表對網頁進行定義，設計，定位等操作，使網頁更規(guī)范。也便于網頁的修改。</p><p>　　6.使用Javascript作出一些小程序來使網站更精美。</p><p><b>　　1.3可行性分析</b></p><p>　　本系統擬采用HTML（Hyper T

21、ext Markup Languane)、Jacascript、 CSS(Cascading Style Sheets)和織夢Dede分別作為前端和后端的開發(fā)工具。</p><p>　　HTML是利用標記（Tag）來描述網頁的字體、大小、顏色及頁面布局的語言，使用任何文本剪輯器都可以對它進行編輯。HTML與VB、C++等編程語言有著本質的區(qū)別，使用一些網頁編輯軟件（如Dreamweaver）可以快速生成HTML代

22、碼。</p><p>　　Javacript是一種腳本語言，通過嵌入或整合在標準HTML中實現，也就是說，JavaScript的程序直接加入在HTML文檔里，當瀏覽器讀取到HTML文件中的JavaScript程序，就立即解釋并執(zhí)行有關的操作，無需編譯器。利用JavaScript技術可以制作動態(tài)按鈕、滾動字幕等網頁特效。</p><p>　　CSS是一種數據表文件，在改數據表中存儲了網頁結構

23、語言的各種樣式以及顯示方式等內容，并通過表的ID、標簽以及類等選擇器供XHTML調用，利用CSS技術，可以有效地對頁面的布局，字體、顏色、背景和其他效果實現更加精密的控制。對相應的代碼做一些簡單的修改，就可以改變同一頁面的不同部分，或者改變不同頁數頁面的外觀和格式。在W3C網頁標準中，CSS屬于網頁的表現技術。</p><p>　　因此從技術方面講開發(fā)此系統是可行的。</p><p>&l

24、t;b>　　1.4系統分析</b></p><p>　　完整的網站設計大體可以分兩大部分，靜態(tài)（界面）部分和動態(tài)（互動功能）部分，網站在確定了其欄目、鏈接結構和網站整體風格之后，就可以正式動手制作頁面了。</p><p>　　本系統使用的是“三”字型布局，頁面上橫兩條色塊，將頁面整體分割為4個部分，色塊中放廣告條。</p><p>　　首先設計PS

25、效果圖，其次在效果圖做好后便是根據效果圖來制作頁面了，使用DIV+CSS來完成頁面的制作。主頁index.html制作好之后，還要制article_article.html以及l(fā)ist_article.html頁面，這兩個頁面就是后面要顯示的內容列表頁（list_article.html）和內容頁（article_article.html）。在靜態(tài)頁面都制作好之后，就是動態(tài)網站頁面的制作了。本次任務主要完成買買網靜態(tài)頁面模板導入Dede

26、CMS環(huán)境，掌握DedeCMS標記的使用，并將標記應用到買買網網站設計中；掌握買買網網站后臺模板的管理及應用，并利用買買網網站管理平臺添加網站內容。</p><p>　　第二章 相關軟件介紹</p><p>　　本系統采用HTML+CSS+JS+PHP進行開發(fā)，其中前臺用CSS+JS嵌入HTML進行頁面開發(fā)和設計，提示信息完善，界面友好有親和力；后臺采用PHP（織夢后臺系統），下面介紹這

27、個系統所用到的軟件。</p><p>　　2.1 PhotoShop</p><p>　　Adobe Photoshop，簡稱“PS”，是由Adobe Systems開發(fā)和發(fā)行的圖像處理軟件。 Photoshop主要處理以像素所構成的數字圖像。使用其眾多的編修與繪圖工具，可以有效地進行圖片編輯工作。ps有很多功能，在圖像、圖形、文字、視頻、出版等各方面都有涉及。在此系統中，使用Photos

28、hop主要是為了進行設計PS網頁靜態(tài)效果圖，以及對做網站所需要的素材進行處理的功能。 </p><p>　　2.2 Dreamweaver</p><p>　　Adobe Dreamweaver，簡稱“DW”，中文名稱 "夢想編織者"，是美國MACROMEDIA公司開發(fā)的集網頁制作和管理網站于一身的所見即所得網頁編輯器，DW是第一套針對專業(yè)網頁設計師特別發(fā)展的視覺化網頁

29、開發(fā)工具，利用它可以輕而易舉地制作出跨越平臺限制和跨越瀏覽器限制的充滿動感的網頁。Adobe Dreamweaver使用所見即所得的接口，亦有HTML（標準通用標記語言下的一個應用）編輯的功能。</p><p>　　2.3織夢內容管理系統</p><p>　　織夢內容管理系統（DedeCMS）以簡單、實用、開源而聞名，是國內最知名的PHP開源網站管理系統，也是實用用戶最多的PHP類CMS系

30、統， DedeCMS免費版的主要目標用戶鎖定在個人站長，功能更專注于個人網站或中小型門戶的構建，當然也不乏企業(yè)用戶和學校等使用本系統。織夢內容管理系統（DedeCMS）基于PHP+MYSQL的技術架構，完全開源加上強大穩(wěn)定的技術架構，使用戶無論是目前打算做個小型網站，還是想讓網站在不斷壯大后仍能的刀隨意擴充都有充分的保證。</p><p>　　此次網購系統中，使用織夢內容管理系統來完成子頁面的內容鏈接以及內容的增

31、刪改查等操作。 </p><p>　　2.4 WampServer環(huán)境</p><p>　　WampServer是一款由法國人開發(fā)的Apache Web服務器、PHP解釋器以 及MySQL數據庫的整合軟件包。在windows下將Apache+PHP+Mysql 集成環(huán)境，擁有簡單的圖形和菜單安裝和配置環(huán)境。PHP擴展、Apache模塊，開啟/關閉鼠標</p><p>

32、;　　點點就搞定，再也不用親自去修改配置文件了，WAMP它會去做。再也不用到處詢問php的安裝問題了，wampserver一切都搞定了。 </p><p>　　第三章 靜態(tài)頁面制作</p><p>　　網站首頁的展示直面影響著顧客對整個網站的好感度以及觀賞欲。首先，分析一下買買網效果圖，主頁效果圖可以劃分出相應的布局區(qū)域，共劃分為head首部、main中間部分、foot尾部。接著需要內容

33、頁以及列表頁還有一個index_article頁來進行后臺代碼處理。使用DIV+CSS布局方式構建網頁。</p><p><b>　　3.1首頁靜態(tài)頁面</b></p><p>　　首頁主要分為3個部分，其中每個的布局都采用的不同的樣式，最重要的就是中部main頁面，運用的腳本語言方式比較多。</p><p>　　3.1.1頭部部分 </

34、p><p>　　頭部部分包括logo、導航、過渡三個部分，在導航部分中添加下拉框特效，代碼如圖3-1head布局：</p><p>　　圖3-1 head布局</p><p><b>　　css樣式：</b></p><p>　　#head{width:1024px;background-color:#FFFFFF;floa

35、t:left;}</p><p>　　.logo{position:relative;height:65px;}</p><p>　　.logo img{position:absolute;top:9px;left:7px;}</p><p>　　.clear{clear:both;}</p><p>　　.dh{float:left;hei

36、ght:35px;margin-top:3px;margin-bottom:3px;}</p><p>　　.menu{width:1020px;float:left;height:35px;margin-top:3px;</p><p>　　margin-bottom:3px;background-color:f83b4d;}</p><p>　　.menu ul

37、{float:left;line-height:37px;}</p><p>　　.menu ul li{float:left;line-height:37px;margin-left:45px;}</p><p>　　.menu ul li a{color:#FFF;text-decoration:none;padding-left:10px;}</p><p>

38、　　.mainmenu{float:left;width:110px;height:35px;list-style-type:none;margin-right:5px;margin-top:5px;}</p><p>　　li.mainmenu ul {margin:0;width:90px;}</p><p>　　li.mainmenu{width:200px;display:

39、block;text-decoration:none;</p><p>　　background:#f83b4d;color:#fff;padding:0.5em;border-bottom:1px solid #fff;}</p><p>　　ul#dropdownmenu li a:hover{background:#FFCCCC;}</p><p>　　li{

40、list-style: none;} </p><p>　　.mainmenu ul{position: relative;left:50px;}</p><p>　　.fla{width:1022px;height:400px;float:left;}</p><p>　　預覽如下圖3-2 head部分預覽效果顯示：</p><p>　

41、　圖3-2 head部分預覽效果</p><p>　　3.1.2主體內容部分</p><p>　　中間主體部分是整個頁面的內容部分，一個網頁的精髓展示便在這里，所以這個部分也是比較麻煩的。這個部分分為了top、center、bottom三個部分。 </p><p>　　Top部分布局部分代碼-如下所示：</p><p>　　<div c

42、lass="top"></p><p>　　<div class="brand_top"></p><p>　　<img src="images/LO1.jpg" width="70px" height="28px"></p><p>　

43、　<span class="jrpp">今日品牌</span></p><p>　　<span class="more"></p><p>　　<a href="a/jinripinpai/">更多品牌特賣></a></p><p><

44、b>　　</span></b></p><p><b>　　</div></b></p><p>　　<div class="brand_content_left"></p><p>　　<img src="images/center1.jpg"

45、 width="500px" height="200px"></p><p>　　<div class="brand_content_text"></p><p>　　<span class="brand_content_text_left">1.3折起</span>&

46、lt;/p><p>　　<span class="brand_content_text_right">進入活動</span></p><p><b>　　</div></b></p><p><b>　　</div></b></p><p&

47、gt;　　Css樣式代碼如下圖3-3所示：</p><p>　　圖3-3 top部分css樣式</p><p><b>　　預覽效果如圖3-4</b></p><p>　　圖3-4 top部分預覽效果</p><p>　　center部分布局部分代碼-如下所示：</p><p>　　<div

48、 class="center"></p><p>　　<div class="center_top"></p><p>　　<img src="images/LO2.jpg" width="70px" height="28px" /></p>&l

49、t;p>　　<span class="jrxp">今日新品</span></p><p>　　<span class="jrxpbz">每日10點上新</span></p><p>　　<span class="more"></p><p>

50、　　<a href="a/jinrixinpin/">更多新品></a></p><p><b>　　</span></b></p><p><b>　　</div></b></p><p>　　<div class="center_

51、content"></p><p>　　<a href="images/33017443_bigger.jpg" class="tooltip" title="思洛芙德針織衫"></p><p>　　<img src="images/33017443.jpg" /><

52、;/a></p><p>　　<span class="center_content_text"></p><p>　　[包郵]思洛芙德針織衫</span></p><p>　　<span class="jg">￥129</span></p><p>

53、;<b>　　</div></b></p><p><b>　　</div></b></p><p>　　這里center部分使用了JS代碼來實現鼠標滑動到圖片上方圖片放大的效果，JS代碼如圖3-5所示：</p><p>　　圖3-5 放大圖片JS代碼</p><p>　　

54、接著用CSS代碼來對center部分定義：</p><p>　　.center{width:1024px;float:left;}</p><p>　　.center_top{float:left;width:1024px;height:30px;margin-top:20px;}</p><p>　　.center_top img{float:left;margi

55、n-left:12px;}</p><p>　　.jrxp{float:left;width:70px;height:30px;line-height:30px;margin-left:8px;font-family:"黑體";font-size:16px;}</p><p>　　.jrxpbz{float:left;width:100px;height:30px;li

56、ne-height:30px;color:#CCCCCC;font-size:12px;margin-left:5px;}</p><p>　　.center_content{float:left;margin-left:13px;border-bottom: 3px solid #CCCCCC;border-right:1px solid #CCCCCC;margin-top:8px;}</p>

57、<p>　　#tooltip{position:absolute;border:1px solid #333;background:#f7f5d1;padding:1px;color:#333;display:none;}</p><p>　　.center_content a{color:#333;font-family:"宋體";line-height:30px;text-dec

58、oration:none;}</p><p>　　.center_content img{float:left;margin-left:10px;margin-top:8px;margin-bottom:5px;}</p><p>　　.center_content_text{display:block;margin-left:13px;width:226px;height:20px;fo

59、nt-size:14px;line-height:20px;}</p><p>　　.jg{float:left;color:#FF0000;font-size:16px;font-weight:bold;display:block;width:100px;height:25px;line-height:25px;margin-left:20px;margin-top:20px;}</p><

60、p>　　最終實現效果如圖3-6 所示</p><p>　　圖3-6 中間部分預覽效果</p><p>　　bottom部分是由一組滾動圖組成，使用JS實現鼠標滑動到圖片上，滾動停止，鼠標一開，繼續(xù)滾動的效果。</p><p>　　主要運用的是表單和表格的知識，布局部分代碼-如下圖3-7所示：</p><p>　　圖3-7 bottom布

61、局代碼</p><p>　　JS代碼如圖3-8所示：</p><p>　　圖3-8 bottom部分JS 代碼</p><p>　　Css代碼如下所示：</p><p>　　.bottom{float:left;width:990px;margin-top:30px;margin-left:8px;overflow:hidden;}</

62、p><p>　　.bottom_bj{float:left;margin-top:20px;}</p><p>　　.bottom_top_aleft{float:left;}</p><p>　　.bottom_top{width:990px;height:30px;}</p><p>　　.bottom_top img{float:left;

63、margin-left:8px;}</p><p>　　.bottom_top_txt{font-size:14px;font-weight:bold;line-height:25px;float:left;margin-left:8px;margin-top:2px;}</p><p>　　.bottom_more{float:right;line-height:30px;color:#

64、999999;font-family:"宋體";font-size:14px;margin-right:5px;}</p><p>　　.bottom_more a{color:#999999;font-family:"宋體";line-height:30px;text-decoration:none;}</p><p>　　預覽效果如圖3-9所示：

65、 </p><p>　　圖3-9bottom部分預覽效果</p><p><b>　　3.1.3尾部部分</b></p><p>　　尾部foot部分一般都是版權信息，聯系方式等內容的模塊，相對上面的main部分比較簡單一點，這里買買網所要實現的foot部分內容包括二維碼，版權信息，許可證，以及幾個公眾號的內容。</p><

66、p>　　Foot部分(尾部部分)</p><p>　　<div id="footer"></p><p>　　<div class="bq"></p><p>　　<img src="images/foot1.jpg" width="100" heig

67、ht="100" /></p><p><b>　　<p></b></p><p>　　江蘇淮安網絡科技有限公司 蘇ICP備4545121號| ICP許可證號：蘇454564123123 食品流通許可證 SP42019915100418HJ8|</p><p>　　<br />　Copyrig

68、ht &copy; 2010 -2016 MAIMAI.com All Rights Reserved</p><p><b>　　</p></b></p><p>　　<div class="gs"></p><p>　　<img src="images/foot3.jpg&

69、quot; /></p><p>　　<img src="images/foot2.jpg" /><img src="images/foot5.jpg" /><img src="images/foot4.jpg" height="45" /></p><p>

70、<b>　　</div></b></p><p><b>　　</div></b></p><p><b>　　</div></b></p><p><b>　　Css樣式：</b></p><p>　　#footer{

71、width:1001px;height:180px;float:left;background-color:#f8f8fc;border-top:2px solid #CCCCCC;margin-top:5px;}</p><p>　　.bq{float:left;}</p><p>　　.bq img{float:left;margin-top:30px;margin-left:15px

72、;}</p><p>　　.bqp{display:block;float:right;width:800px;height:40px;font-size:13px;color:#999;line-height:20px;padding-top:15px;margin-left:30px;padding-bottom:5px;}</p><p>　　.gs{float:right;widt

73、h:700px;}</p><p>　　.gs img{padding-bottom:15px;}</p><p>　　尾部的預覽效果如下圖3-10所示：</p><p>　　圖3-10尾部預覽效果</p><p>　　首頁效果預覽如圖3-11所示:</p><p>　　圖3-11 首頁預覽效果</p>

74、<p><b>　　3.2列表靜態(tài)頁面</b></p><p>　　列表頁（list_article.html）是后臺顯示子頁面內容的必要頁，頭部和尾部和首頁靜態(tài)頁面一樣，需要改變的就是main主題內容部分。main部分分成左右兩塊。</p><p><b>　　左邊部分布局代碼:</b></p><p>　　&

75、lt;div id="list_left"></p><p>　　<div class="list_left_top"></p><p>　　<div class="list_left_top_a"></p><p>　　<div class="list_lef

76、t_top_aleft">熱銷TOP</div></p><p>　　<div class="listt_left_top_amore">+More</div></p><p><b>　　</div></b></p><p>　　<div class=&

77、quot;list_left_content"></p><p>　　<div class="list_left_content_cen"></p><p><b>　　添加 內容 </b></p><p><b>　　</div></b></p>

78、<p><b>　　</div></b></p><p><b>　　</div></b></p><p>　　<div class="list_left_you"></p><p>　　<div class="list_left_you_t

79、op"></p><p>　　<div class="list_left_you_top_pic"></p><p>　　<img src="images/23.jpg" width="225px"></p><p>　　<img src="image

80、s/24.jpg" width="225px"></p><p>　　<img src="images/25.jpg" width="225px"></p><p><b>　　</div> </b></p><p><b>　　&

81、lt;/div> </b></p><p><b>　　</div></b></p><p><b>　　</div></b></p><p>　　css樣式如圖3-12所示:</p><p>　　圖3-12 左邊部分樣式</p><p&

82、gt;　　左邊顯示的效果如圖3-13所示：</p><p>　　圖3-13 左邊預覽效果</p><p>　　右邊部分布局代碼如圖3-14所示:</p><p>　　圖3-14 右邊部分布局代碼</p><p><b>　　Css樣式：</b></p><p>　　#list_right{widt

83、h:737px; height:500px; float:right; padding-right:5px;}</p><p>　　#list_right ul{ margin:0; padding:0; list-style:none;}</p><p>　　.list_right_top{width:737px;height:34px;background:url(../images/

84、list_righttoup.jpg) no-repeat;}</p><p>　　.intro { text-indent:2em; margin-top:-5px;}</p><p>　　.list_right_top_text{ color:#000; line-height:36px; float:left; padding-left:20px;}</p><

85、p>　　.list_right_cen{width:760px; height:440px; border-left:2px #d1d1d1 solid; border-right:2px #d1d1d1 solid; margin-left:1px; _margin-left:1px;}</p><p>　　.list_right_du{width:737px; height:9px; backgroun

86、d:url(../images/list_rightdu.jpg) no-repeat;}</p><p>　　#list_right{width:734px;height:auto;float:left;padding-left:10px;padding-bottom:10px; padding-top:10px;}</p><p>　　.list_rigtall{width:730px

87、; height:35px; background:url(../images/productDt.jpg) no-repeat; margin:0 auto;}</p><p>　　.list_rightbi{line-height:43px; padding-left:40px; float:left; width:100px; height:35px; font-size:14px; font-weight

88、:bold;}</p><p>　　.list_rigtjp{ float:right; padding-right:15px; line-height:35px;}</p><p>　　.list_right_center{width:760px; /*height:auto;*/ padding-top:12px; margin:0 auto; color:#343233; line-

89、height:25px;}</p><p>　　這樣整個列表頁便完成了，最終效果如圖3-15所示：</p><p>　　圖3-15 列表頁預覽效果</p><p><b>　　3.3內容靜態(tài)頁面</b></p><p>　　內容頁和列表頁一樣，只是中間部分的右邊內容改變了，內容頁是展示的具體內容。

90、 </p><p><b>　　右邊部分代碼如下</b></p><p>　　<div class="info" style="text-align:center;color:#343233;"></div></p><p>　　<div class="conte

91、nt" style="color:#343233;"></p><p><b>　　</div></b></p><p>　　<div class="context"></p><p><b>　　<ul></b></p>

92、;<p><b>　　<li></li></b></p><p><b>　　</ul></b></p><p><b>　　</div></b></p><p>　　右邊效果顯示如圖3-16所示： </p><p>

93、;　　圖3-16內容頁右邊效果</p><p><b>　　動態(tài)網頁后臺管理</b></p><p>　　靜態(tài)頁面部分完成之后就是用來管理的動態(tài)頁面的制作，買買網這里用到了織夢后臺DedeCMS軟件，使用后臺引擎代碼對前臺頁面進行應用，添刪改查欄目和內容，進行內容添加，并且將網頁內容和子欄目、字內容串聯起來，使其能夠跳轉顯示。</p><p>

94、　　4.1 DedeCMS織夢后臺環(huán)境準備</p><p>　　由于DedeCMS安裝需要Apache和mysql環(huán)境，所以我們先安裝wampserver軟件。wampservaer安裝好之后，重要的就是www這個文件夾，在運動wamp環(huán)境時，進入localhost時所展示的內容就是www文件夾下的內容。</p><p>　　從織夢官網下載一個免費的DedeCMS素材壓縮包，解壓后，提取u

95、ploads這個文件夾放在www文件夾下，接著啟動wampserver環(huán)境，進入http://localhost/uploads,出現一個mysql頁面，點擊確定后，進入一個DedeCMS安裝界面，如圖4-1。</p><p>　　4-1 安裝Dedecms環(huán)境</p><p>　　點擊繼續(xù)后，就是環(huán)境檢測頁面，繼續(xù)就是參數配置，不要添加密碼，如果有需要編輯數據庫名稱的則編輯名稱，這里是沒

96、有編輯的，一直繼續(xù)，到安裝成功后，打開http://localhost/uploads（前臺展示）頁面，以及新打開一個http://localhost/uploads/dede（后臺登錄，登錄名為admin,密碼為admin）,織夢系統安裝好之后，將做好的前臺頁面文件夾sp拷貝到www/uploads/templets下，將sp文件夾中的images、JS、style\以及主頁面index.htm文件拷貝一份到uploads目錄下。&l

97、t;/p><p>　　4.2 織夢后臺欄目及內容添加</p><p><b>　　4.2.1欄目添加</b></p><p>　　選擇如圖4-2所示的網站欄目管理進行添加欄目</p><p>　　圖4-2 網站欄目管理</p><p>　　添加女裝、今日新品、今日品牌、運動、母嬰、美妝、居家、鞋包、男

98、裝、熱銷新品等頂級欄目，接著在各個頂級欄目中添加子欄目。如圖4-3所示：</p><p><b>　　圖4-3 欄目列表</b></p><p>　　將各個欄目以及子欄目的高級選項的模板改成自己的模板，如圖4-4所示：</p><p><b>　　圖4-4 模板選擇</b></p><p><

99、b>　　4.2.1文章添加</b></p><p>　　在欄目中添加文章，如圖4-5所示：</p><p><b>　　圖4-5 添加文章</b></p><p>　　為各個欄目添加文章后，選擇生成按鈕進行更新，如圖4-6：</p><p><b>　　圖4-6 更新網站</b>&

100、lt;/p><p>　　在更新主頁HTML欄選擇主頁模板為自己的模板，如圖4-7：</p><p>　　圖4-7 選擇主頁模板</p><p>　　選擇系統欄目中的系統基本參數，將模板默認風格改成自己的模板名稱，來使前臺主頁能夠顯示出自己所制作的的模樣。如圖4-8所示：</p><p>　　圖4-8 默認模板風格</p><p

101、>　　分別更新文檔、更新欄目、更新主頁。</p><p>　　4.3 DedeCMS標記使用</p><p>　　織夢模板引擎是一種使用XML名字空間形式的模板解析器，想要讓前臺靜態(tài)頁面變成動態(tài)頁面，一定要用到織夢模板引擎的代碼，所以要在前臺幾個頁面中插入標記代碼。</p><p>　　4.3.1首頁DedeCMS標記代碼插入</p><p

102、>　　使用DW打開uploads/templets/sp下的index_article.htm頁面。這個頁面需要插入修改標記代碼的有導航欄部分、圖片素材、CSS樣式表。</p><p>　　導航欄部分：這里以一個女裝欄目展示，代碼如圖4-2所示：</p><p>　　圖4-2 導航標記代碼插入</p><p>　　這段標記代碼可實現導航欄和后來添加欄目的對接。

103、要注意的是type以及typeid的更換。</p><p>　　圖片部分：在所有圖片鏈接路徑前添加以下標記代碼：</p><p>　　{dede:global.cfg_templets_skin/}/</p><p>　　來使圖片能夠在使用Dedecms的情況下能顯示。</p><p>　　CSS樣式表部分：在演示表鏈接地址前添加標記代碼：&

104、lt;/p><p>　　{dede:global.cfg_templets_skin/}/</p><p>　　為了樣式能夠在動態(tài)首頁下被應用。</p><p>　　4.3.2列表頁DedeCMS標記代碼插入</p><p>　　這個頁面需要插入修改標記代碼的有導航欄部分、圖片素材、CSS樣式表、以及中間左右部分的內容欄。導航欄、圖片素材、CSS

105、樣式表標記代碼都與index_article.htm一樣修改，這里需要注意的就是內容欄的標記代碼插入。</p><p>　　在如圖4-3所示位置添加標記代碼：</p><p>　　<ul class="c1 ico2"></p><p>　　{dede:arclist row=7 orderby=click}</p>&

106、lt;p>　　<li><a href="[field:arcurl/]">[field:title/]</a></li></p><p>　　{/dede:arclist}</p><p><b>　　</ul></b></p><p>　　圖4-3 列表左邊

107、欄</p><p>　　來實現中間左部分內容的顯示。</p><p>　　在如圖4-4的所示位置添加標記代碼：</p><p>　　{dede:field name='position'/} </p><p>　　圖4-4 列表位置欄</p><p>　　來顯示當前瀏覽者所在的位置。</p>

108、<p>　　在newlist位置添加標記代碼：</p><p>　　<div class="newlist"></p><p><b>　　<ul></b></p><p>　　{dede:list pagesize='10'}</p><p&g

109、t;<b>　　<li></b></p><p>　　<span>[[field:pubdate function=MyDate('y-m-d',@me)/]]</span></p><p>　　<b>[[field:typelink/]]</b></p><p>　　

110、<a href="[field:arcurl/]" class="title">[field:title/]</a><</p><p><b>　　/li></b></p><p>　　{/dede:list}</p><p><b>　　</

111、ul></b></p><p><b>　　</div></b></p><p>　　這段代碼的作用就是可以實現右邊部分顯示當前欄目所有的內容，以列表的形式來呈現。分別更新欄目、更新主頁。最終效果如圖4-5顯示：</p><p>　　圖4-5 列表頁效果展示</p><p>　　4.3.3內

112、容頁DedeCMS標記代碼插入</p><p>　　這個頁面與list_article像似，同樣要改變導航欄，圖片的標記代碼以及CSS樣式表的標記代碼，中間左邊的標記代碼內容和列表頁一樣。只是中間右邊部分插入的標記代碼不同，同樣的也要有 “您現在的位置: {dede:field name='position'/}”。</p><p>　　在content盒子中，插入標記代碼

113、：{dede:field.body/} 這是為了讓一個內容能夠詳細的在一個頁面中顯示出來。</p><p>　　分別更新文檔、更新欄目、更新主頁。最終效果如圖4-6所示：</p><p>　　圖4-6 內容頁效果展示</p><p>　　最后就完成了買買網的前后臺頁面的交互設計與實現。</p><p>　　第五章 總結與展望</p&g

114、t;<p>　　時至今日，幾個月的項目設計終于可以畫上一個句號了，沒有接受任務以前覺得畢業(yè)設計只是對這學期所學知識的單純總結，但是通過這次做畢業(yè)設計發(fā)現自己的看法有點太片面。畢業(yè)設計不僅是對前面所學知識的一種檢驗，而且也是對自己能力的一種提高。</p><p>　　查資料是做畢業(yè)設計的前期準備工作，好的開端就相當于成功了一半，去圖書館借閱的資料對本次項目起了很大的作用，包括網站配色，JS效果顯示等等

115、。同時也在網站上觀看相關視頻以及文檔等等。不管通過哪種方式查的資料都是有利用價值的，要一一記錄下來以備后用。</p><p>　　通過本次買買網項目的組件和設計，我明確知道了一個完整的網站所要包括的部分以及要實現的功能，從目標確立，到環(huán)境、應用、管理和擴展性分析，從邏輯結構設計、拓撲圖總體設計到硬件、軟件的選型，思路從茫然到清晰，設計稿從無到有的漸變讓我成長了許多，不僅僅了解了更多的網絡知識，更讓我們學會了思考，

116、學會就地分析解決問題。本項目實現了購物網站的簡易管理，在項目上還有很多不足，在不斷優(yōu)化之后，雖說改善了很多，但是需要改進的地方依舊存在。提高審美觀點，可使用photoshop、等圖片處理工具修飾圖片，力求給用戶提供美觀友好的界面；簡化程序代碼，可使不同界面之間能共享一些方法、函數和變量，對于相同的功能模塊可生成程序包供其它界面引用，這樣就會提高系統的運行速度；使用數據庫連接池技術提高數據庫操作的性能；數據庫的關系模式可以進一步規(guī)范化，減

117、少冗余，這些都是我不足的地方。</p><p>　　雖然，畢業(yè)設計只有短暫的幾個月，但卻使我充分認識到自身還存在很多不足的地方，還需要不斷的努力來充實自己、完善自己，只有這樣才能學無止境，以求得更大的發(fā)展。</p><p><b>　　致 謝</b></p><p>　　學習生活快要結束了，轉眼到了畢業(yè)季。一晃而過，揮手走過的歲月，心中倍感充

118、實，當我寫完這篇畢業(yè)論文的時候，有一種如釋重負的感覺，感慨良多，以前的自己覺得自己所學的東西不用想都不會，三年學習下來，發(fā)現自己能夠學會，這次做項目之前覺得太難了，根本無從下手，幾個月下來，隨著項目的一步步實現，論文內容的一次次增多，內心滿足無比。</p><p>　　首先誠摯感謝指導老師錢兆樓老師，本論文在錢老師的悉心指導下完成的。老師嚴謹細致、耐心堅持的工作態(tài)度給予我無盡的啟迪，無比感謝錢老師的指導。還有教過

119、的所有老師們，本項目能夠順利完成歸功于各位老師的課程教導，我受益匪淺。在此向各位老師表示深深的感謝和崇高的敬意。</p><p>　　學友情深，情同兄妹。三年的風風雨雨，我們一同走過，充滿著關愛，給我留下了值得珍藏的最美好的記憶感謝三年中陪伴在我身邊的同學、朋友，感謝他們?yōu)槲姨峁┑挠幸娴慕ㄗh和意見，有了他們的支持、鼓勵和幫助，我才能充實的度過了三年的學習生活。</p><p>　　這次畢業(yè)

120、設計使我得到了很大的成長，同時也是我人生路上最寶貴的財富之一，再次感謝我的老師以及我優(yōu)秀的同學們。</p><p>　　在我即將完成學業(yè)之際，我深深地感謝我的家人給予我的全力支持！</p><p>　　最后，衷心地感謝在百忙之中評閱論文和參加答辯的各位專家、教授!</p><p><b>　　參考文獻</b></p><p&

121、gt;　　[1] PHP+CMS+Dreamweaver網站設計實例教程.人民郵電出版社.</p><p>　　[2] 眾妙之門—網站UI設計之道.人民郵電出版社，2012. </p><p>　　[3] 平面設計法則.中國青年出版社,2012.</p><p>　　[4] JavaScript王者歸來.清華大學出版社,2008.</p><

122、p>　　[5] 精通CSS+DIV網頁樣式與布局.人民郵電出版社,2007.</p><p>　　[6] 網頁設計制作與上級指導.清華大學出版社,2003.</p><p>　　[7] 基于Web的編程技術.鐵道電出版社,2003.</p><p>　　[8] HTML 完全手冊與速查辭典.北京.科學出版社,2007.</p><p>