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

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

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

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

4、實(shí)現(xiàn)相應(yīng)的交互效果，最后通過織夢(mèng)DEDE后臺(tái)來(lái)進(jìn)行對(duì)數(shù)據(jù)的增刪改查。雖然表面上看來(lái)很簡(jiǎn)單，但是這里面需要理解的東西絕對(duì)不會(huì)少。在進(jìn)行開發(fā)前，需要弄清楚這些概念，然后才能便于開發(fā)。</p><p>　　關(guān)鍵詞：HTML、CSS、 JS、織夢(mèng)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購(gòu)物網(wǎng)規(guī)劃設(shè)計(jì)的主要任務(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織夢(mèng)內(nèi)容管理系統(tǒng)3</p><p>　　2.4 WampServer環(huán)境3</p><p>　　第三章 靜態(tài)頁(yè)面制作5</p><p>　　3.1首頁(yè)靜態(tài)頁(yè)面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)頁(yè)面11</p><p>　　3.3內(nèi)容靜態(tài)頁(yè)面14</p><p>　　第四章 動(dòng)態(tài)網(wǎng)頁(yè)后臺(tái)管理15</p><p>

14、　　4.1 DedeCMS織夢(mèng)后臺(tái)環(huán)境準(zhǔn)備15</p><p>　　4.2 織夢(mèng)后臺(tái)欄目及內(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首頁(yè)DedeCMS標(biāo)記代碼插入

15、17</p><p>　　4.3.2列表頁(yè)DedeCMS標(biāo)記代碼插入18</p><p>　　4.3.3內(nèi)容頁(yè)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)滲透到我們生活的每一個(gè)層面，網(wǎng)站的內(nèi)容也越來(lái)越豐富全面，建設(shè)一個(gè)網(wǎng)站的時(shí)候比較重要的就是網(wǎng)站本身的整體美觀度，也就是網(wǎng)頁(yè)設(shè)計(jì)的整體的視覺效果，是否能夠充分吸引眼球。</p><

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

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

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

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

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

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

23、語(yǔ)言的各種樣式以及顯示方式等內(nèi)容，并通過表的ID、標(biāo)簽以及類等選擇器供XHTML調(diào)用，利用CSS技術(shù)，可以有效地對(duì)頁(yè)面的布局，字體、顏色、背景和其他效果實(shí)現(xiàn)更加精密的控制。對(duì)相應(yīng)的代碼做一些簡(jiǎn)單的修改，就可以改變同一頁(yè)面的不同部分，或者改變不同頁(yè)數(shù)頁(yè)面的外觀和格式。在W3C網(wǎng)頁(yè)標(biāo)準(zhǔn)中，CSS屬于網(wǎng)頁(yè)的表現(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è)計(jì)大體可以分兩大部分，靜態(tài)（界面）部分和動(dòng)態(tài)（互動(dòng)功能）部分，網(wǎng)站在確定了其欄目、鏈接結(jié)構(gòu)和網(wǎng)站整體風(fēng)格之后，就可以正式動(dòng)手制作頁(yè)面了。</p><p>　　本系統(tǒng)使用的是“三”字型布局，頁(yè)面上橫兩條色塊，將頁(yè)面整體分割為4個(gè)部分，色塊中放廣告條。</p><p>　　首先設(shè)計(jì)PS

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

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

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

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

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

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

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

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

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

34、p><p>　　頭部部分包括logo、導(dǎo)航、過渡三個(gè)部分，在導(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>　　中間主體部分是整個(gè)頁(yè)面的內(nèi)容部分，一個(gè)網(wǎng)頁(yè)的精髓展示便在這里，所以這個(gè)部分也是比較麻煩的。這個(gè)部分分為了top、center、bottom三個(gè)部分。 </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)入活動(dòng)</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點(diǎn)上新</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代碼來(lái)實(shí)現(xiàn)鼠標(biāo)滑動(dòng)到圖片上方圖片放大的效果，JS代碼如圖3-5所示：</p><p>　　圖3-5 放大圖片JS代碼</p><p>　　

54、接著用CSS代碼來(lái)對(duì)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>　　最終實(shí)現(xiàn)效果如圖3-6 所示</p><p>　　圖3-6 中間部分預(yù)覽效果</p><p>　　bottom部分是由一組滾動(dòng)圖組成，使用JS實(shí)現(xiàn)鼠標(biāo)滑動(dòng)到圖片上，滾動(dòng)停止，鼠標(biāo)一開，繼續(xù)滾動(dòng)的效果。</p><p>　　主要運(yùn)用的是表單和表格的知識(shí)，布局部分代碼-如下圖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)容的模塊，相對(duì)上面的main部分比較簡(jiǎn)單一點(diǎn)，這里買買網(wǎng)所要實(shí)現(xiàn)的foot部分內(nèi)容包括二維碼，版權(quán)信息，許可證，以及幾個(gè)公眾號(hào)的內(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號(hào)| ICP許可證號(hào)：蘇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è)效果預(yù)覽如圖3-11所示:</p><p>　　圖3-11 首頁(yè)預(yù)覽效果</p>

74、<p><b>　　3.2列表靜態(tài)頁(yè)面</b></p><p>　　列表頁(yè)（list_article.html）是后臺(tái)顯示子頁(yè)面內(nèi)容的必要頁(yè)，頭部和尾部和首頁(yè)靜態(tài)頁(yè)面一樣，需要改變的就是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>　　這樣整個(gè)列表頁(yè)便完成了，最終效果如圖3-15所示：</p><p>　　圖3-15 列表頁(yè)預(yù)覽效果</p><p><b>　　3.3內(nèi)容靜態(tài)頁(yè)面</b></p><p>　　內(nèi)容頁(yè)和列表頁(yè)一樣，只是中間部分的右邊內(nèi)容改變了，內(nèi)容頁(yè)是展示的具體內(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)容頁(yè)右邊效果</p><p><b>　　動(dòng)態(tài)網(wǎng)頁(yè)后臺(tái)管理</b></p><p>　　靜態(tài)頁(yè)面部分完成之后就是用來(lái)管理的動(dòng)態(tài)頁(yè)面的制作，買買網(wǎng)這里用到了織夢(mèng)后臺(tái)DedeCMS軟件，使用后臺(tái)引擎代碼對(duì)前臺(tái)頁(yè)面進(jìn)行應(yīng)用，添刪改查欄目和內(nèi)容，進(jìn)行內(nèi)容添加，并且將網(wǎng)頁(yè)內(nèi)容和子欄目、字內(nèi)容串聯(lián)起來(lái)，使其能夠跳轉(zhuǎn)顯示。</p><p>

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

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

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

97、t;/p><p>　　4.2 織夢(mèng)后臺(tái)欄目及內(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>　　添加女裝、今日新品、今日品牌、運(yùn)動(dòng)、母嬰、美妝、居家、鞋包、男

98、裝、熱銷新品等頂級(jí)欄目，接著在各個(gè)頂級(jí)欄目中添加子欄目。如圖4-3所示：</p><p><b>　　圖4-3 欄目列表</b></p><p>　　將各個(gè)欄目以及子欄目的高級(jí)選項(xiàng)的模板改成自己的模板，如圖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>　　為各個(gè)欄目添加文章后，選擇生成按鈕進(jìn)行更新，如圖4-6：</p><p><b>　　圖4-6 更新網(wǎng)站</b>&

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

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

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

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

104、lt;/p><p>　　{dede:global.cfg_templets_skin/}/</p><p>　　為了樣式能夠在動(dòng)態(tài)首頁(yè)下被應(yīng)用。</p><p>　　4.3.2列表頁(yè)DedeCMS標(biāo)記代碼插入</p><p>　　這個(gè)頁(yè)面需要插入修改標(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>　　來(lái)實(shí)現(xiàn)中間左部分內(nèi)容的顯示。</p><p>　　在如圖4-4的所示位置添加標(biāo)記代碼：</p><p>　　{dede:field name='position'/} </p><p>　　圖4-4 列表位置欄</p><p>　　來(lái)顯示當(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>　　這段代碼的作用就是可以實(shí)現(xiàn)右邊部分顯示當(dāng)前欄目所有的內(nèi)容，以列表的形式來(lái)呈現(xiàn)。分別更新欄目、更新主頁(yè)。最終效果如圖4-5顯示：</p><p>　　圖4-5 列表頁(yè)效果展示</p><p>　　4.3.3內(nèi)

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

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

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

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

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

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

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

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

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

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

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