網(wǎng)頁與制作畢業(yè)論文-基于dedecms的買買網(wǎng)的設(shè)計_與實現(xiàn)

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

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

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

4、實現(xiàn)相應(yīng)的交互效果，最后通過織夢DEDE后臺來進(jìn)行對數(shù)據(jù)的增刪改查。雖然表面上看來很簡單，但是這里面需要理解的東西絕對不會少。在進(jìn)行開發(fā)前，需要弄清楚這些概念，然后才能便于開發(fā)。</p><p>　　關(guān)鍵詞：HTML、CSS、 JS、織夢Dede、信息管理系統(tǒng)</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購物網(wǎng)規(guī)劃設(shè)計的主要任務(wù)1</p><p>　　1.3可行性分析1</p><p><b>　　1.4系統(tǒng)分析2</b></p><p>　　第二章 相關(guān)軟件介紹3</p><p&

12、gt;　　2.1 PhotoShop3</p><p>　　2.2 Dreamweaver3</p><p>　　2.3織夢內(nèi)容管理系統(tǒng)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主體內(nèi)容部分6</p><p>　　3.1.3尾部部分9</p><p>　　3.2列表靜態(tài)頁面11</p><p>　　3.3內(nèi)容靜態(tài)頁面14</p><p>　　第四章 動態(tài)網(wǎng)頁后臺管理15</p><p>

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

15、17</p><p>　　4.3.2列表頁DedeCMS標(biāo)記代碼插入18</p><p>　　4.3.3內(nèi)容頁DedeCMS標(biāo)記代碼插入19</p><p>　　第五章 總結(jié)與展望20</p><p><b>　　致 謝21</b></p><p><b>　　參考文獻(xiàn)22

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

34、p><p>　　頭部部分包括logo、導(dǎo)航、過渡三個部分，在導(dǎo)航部分中添加下拉框特效，代碼如圖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>　　預(yù)覽如下圖3-2 head部分預(yù)覽效果顯示：</p><p>　

41、　圖3-2 head部分預(yù)覽效果</p><p>　　3.1.2主體內(nèi)容部分</p><p>　　中間主體部分是整個頁面的內(nèi)容部分，一個網(wǎng)頁的精髓展示便在這里，所以這個部分也是比較麻煩的。這個部分分為了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">進(jìn)入活動</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>　　預(yù)覽效果如圖3-4</b></p><p>　　圖3-4 top部分預(yù)覽效果</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代碼來實現(xiàn)鼠標(biāo)滑動到圖片上方圖片放大的效果，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>　　最終實現(xiàn)效果如圖3-6 所示</p><p>　　圖3-6 中間部分預(yù)覽效果</p><p>　　bottom部分是由一組滾動圖組成，使用JS實現(xiàn)鼠標(biāo)滑動到圖片上，滾動停止，鼠標(biāo)一開，繼續(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>　　預(yù)覽效果如圖3-9所示：

65、 </p><p>　　圖3-9bottom部分預(yù)覽效果</p><p><b>　　3.1.3尾部部分</b></p><p>　　尾部foot部分一般都是版權(quán)信息，聯(lián)系方式等內(nèi)容的模塊，相對上面的main部分比較簡單一點，這里買買網(wǎng)所要實現(xiàn)的foot部分內(nèi)容包括二維碼，版權(quán)信息，許可證，以及幾個公眾號的內(nèi)容。</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>　　江蘇淮安網(wǎng)絡(luò)科技有限公司 蘇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>　　尾部的預(yù)覽效果如下圖3-10所示：</p><p>　　圖3-10尾部預(yù)覽效果</p><p>　　首頁效果預(yù)覽如圖3-11所示:</p><p>　　圖3-11 首頁預(yù)覽效果</p>

74、<p><b>　　3.2列表靜態(tài)頁面</b></p><p>　　列表頁（list_article.html）是后臺顯示子頁面內(nèi)容的必要頁，頭部和尾部和首頁靜態(tài)頁面一樣，需要改變的就是main主題內(nèi)容部分。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>　　添加 內(nèi)容 </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 左邊預(yù)覽效果</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 列表頁預(yù)覽效果</p><p><b>　　3.3內(nèi)容靜態(tài)頁面</b></p><p>　　內(nèi)容頁和列表頁一樣，只是中間部分的右邊內(nèi)容改變了，內(nèi)容頁是展示的具體內(nèi)容。

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內(nèi)容頁右邊效果</p><p><b>　　動態(tài)網(wǎng)頁后臺管理</b></p><p>　　靜態(tài)頁面部分完成之后就是用來管理的動態(tài)頁面的制作，買買網(wǎng)這里用到了織夢后臺DedeCMS軟件，使用后臺引擎代碼對前臺頁面進(jìn)行應(yīng)用，添刪改查欄目和內(nèi)容，進(jìn)行內(nèi)容添加，并且將網(wǎng)頁內(nèi)容和子欄目、字內(nèi)容串聯(lián)起來，使其能夠跳轉(zhuǎn)顯示。</p><p>

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

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

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

97、t;/p><p>　　4.2 織夢后臺欄目及內(nèi)容添加</p><p><b>　　4.2.1欄目添加</b></p><p>　　選擇如圖4-2所示的網(wǎng)站欄目管理進(jìn)行添加欄目</p><p>　　圖4-2 網(wǎng)站欄目管理</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>　　為各個欄目添加文章后，選擇生成按鈕進(jìn)行更新，如圖4-6：</p><p><b>　　圖4-6 更新網(wǎng)站</b>&

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

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

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

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

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

105、樣式表標(biāo)記代碼都與index_article.htm一樣修改，這里需要注意的就是內(nèi)容欄的標(biāo)記代碼插入。</p><p>　　在如圖4-3所示位置添加標(biāo)記代碼：</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>　　來實現(xiàn)中間左部分內(nèi)容的顯示。</p><p>　　在如圖4-4的所示位置添加標(biāo)記代碼：</p><p>　　{dede:field name='position'/} </p><p>　　圖4-4 列表位置欄</p><p>　　來顯示當(dāng)前瀏覽者所在的位置。</p>

108、<p>　　在newlist位置添加標(biāo)記代碼：</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>　　這段代碼的作用就是可以實現(xiàn)右邊部分顯示當(dāng)前欄目所有的內(nèi)容，以列表的形式來呈現(xiàn)。分別更新欄目、更新主頁。最終效果如圖4-5顯示：</p><p>　　圖4-5 列表頁效果展示</p><p>　　4.3.3內(nèi)

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

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

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

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

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

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

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

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

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

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

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