畢業(yè)設(shè)計(jì)--“網(wǎng)上花店”的設(shè)計(jì)與制作

1、<p><b>　　摘 要</b></p><p>　　摘要：隨花卉消費(fèi)近年來呈越來越旺的趨勢(shì)，花卉本身就具有俏麗姿容、讓人們賞心悅目、美化家居的功效，它還可以增加人們的情趣，使人們更加含蓄、更有品位。并且隨著經(jīng)濟(jì)的日夜發(fā)展，鮮花市場(chǎng)的消費(fèi)也越來越大。</p><p>　　網(wǎng)上花店，它可以使商家與供應(yīng)商更緊密地聯(lián)系起來，更快地滿足客戶需 求；也可以讓商家在全

2、球市場(chǎng)上銷售產(chǎn)品。根據(jù)客戶與商家這兩方面的需要，網(wǎng)上花店應(yīng)運(yùn)而生。 因此根據(jù)上述的需求，設(shè)計(jì)的系統(tǒng)采用了網(wǎng)站式設(shè)計(jì)的基本思想方法，結(jié)合了CSS的編程，對(duì)鮮花市場(chǎng)需求進(jìn)行了進(jìn)一步分析后，設(shè)計(jì)出啦一個(gè)靜態(tài)網(wǎng)站。</p><p>　　關(guān)鍵詞：網(wǎng)上花店，網(wǎng)頁(yè)設(shè)計(jì)，鮮花管理。</p><p><b>　　目錄</b></p><p>　　第一章 鮮花網(wǎng)

3、站系統(tǒng)設(shè)計(jì)概述1</p><p><b>　　1.1設(shè)計(jì)背景1</b></p><p>　　1.2花店開發(fā)的目的1</p><p>　　1.3花店的布局規(guī)劃2</p><p>　　第二章 設(shè)計(jì)想法來源與思路4</p><p>　　2.1設(shè)計(jì)的想法來源4</p><

4、p>　　2.2花店設(shè)計(jì)思路4</p><p>　　第三章 設(shè)計(jì)過程與想法5</p><p>　　3.1主頁(yè)面的布局實(shí)現(xiàn)5</p><p>　　3.2頁(yè)面導(dǎo)航區(qū)域的制作5</p><p>　　3.3左側(cè)邊欄區(qū)域的制作6</p><p>　　3.4中間部分的制作6</p><p>

5、　　3.5右則邊欄區(qū)域制作7</p><p>　　第四章網(wǎng)上花店功能分析8</p><p>　　4.1網(wǎng)站的功能8</p><p>　　4.2花店的系統(tǒng)瀏覽9</p><p>　　第五章 總結(jié)10</p><p>　　第六章 致謝10</p><p><b>　　參考文

6、獻(xiàn)11</b></p><p>　　第一章 鮮花網(wǎng)站系統(tǒng)設(shè)計(jì)概述</p><p><b>　　1.1設(shè)計(jì)背景</b></p><p>　　“隨著人們生活水平的提高和收入的增長(zhǎng) ，物質(zhì)生活的多樣化特征開始顯現(xiàn)，買花，賣花的人多啦起來，花不僅代表著一種植物，它被更多的賦予了人性的意義：愛情，親情，友情?；?，漸漸成啦人們生活中不可或缺的

7、消費(fèi)品，因?yàn)楦鞣N原因的影響現(xiàn)在市場(chǎng)中花卉的種類很少，也不較單一，無法滿足消費(fèi)者的需求，很多人不斷趨向于網(wǎng)上購(gòu)物，網(wǎng)上花店種類多樣，現(xiàn)在好多上班簇休息時(shí)間比較少，沒有多少時(shí)間去逛整個(gè)花卉市場(chǎng)，依賴網(wǎng)上購(gòu)物的人在不斷增加。當(dāng)今時(shí)代是飛速發(fā)展的信息時(shí)代。</p><p>　　同時(shí)在各行各業(yè)中離不開網(wǎng)絡(luò)，這正是計(jì)算機(jī)被廣泛應(yīng)用于各行各業(yè)的環(huán)境。計(jì)算機(jī)的最大好處在于利用它能夠進(jìn)行信息交換、傳遞和共享性。使用計(jì)算機(jī)進(jìn)行信息控

8、制，不僅提高了工作效率，而且大大的提高了其安全性。同時(shí)信息技術(shù)對(duì)教育也提出了前所未有的挑戰(zhàn)。</p><p>　　1.2花店開發(fā)的目的 </p><p>　　目前，許許多多商家的網(wǎng)上花店都已經(jīng)開始使用，加之網(wǎng)站和系統(tǒng)開發(fā)工具的不斷完善，因此在網(wǎng)上開花店已經(jīng)具備相當(dāng)熟的條件。網(wǎng)上花店整個(gè)交易的過程可以分為三個(gè)階段： 信息交流階段：對(duì)于商家來說，此階段為發(fā)布信息階段。主要是選擇自己的優(yōu)秀商品

9、，精心組織自己的商品信息，建立自己的關(guān)系網(wǎng)絡(luò)，然后加入名氣較大、影響力較強(qiáng)、點(diǎn)擊率較高的著名網(wǎng)站中，讓盡可能多的人們了解你認(rèn)識(shí)你。對(duì)于買方來說，此階段是去網(wǎng)上尋找商品以及商品信息的階段。主要是根據(jù)自己的需要，上網(wǎng)查找自己所需的信息和商品，并選擇信譽(yù)好服務(wù)好價(jià)格低廉的商家。簽定商品合同階段：作為商家對(duì)個(gè)人客戶來說，這一階段是完成購(gòu)物過程的定單簽定過程，顧客要將你選好的商品、自己的聯(lián)系信息、送貨的方式、付款的方法等在網(wǎng)上簽好后提。交給商家，

10、商家在收到定單后應(yīng)發(fā)來郵件或電話核實(shí)上述內(nèi)容。 按照合同進(jìn)行商品交接、資金結(jié)算階段：這一階段是整個(gè)商品交易很關(guān)鍵的階段，不僅要涉及到資金在網(wǎng)上的正確、安全到位，同時(shí)也要涉及到商品配送的準(zhǔn)確、按時(shí)到位。在這個(gè)階段有銀行業(yè)、配送系統(tǒng)的介入，在技術(shù)上、法律上、標(biāo)準(zhǔn)上等等方面有更高的要求。網(wǎng)上交易的成功與否就在這個(gè)階段。研究結(jié)果指</p><p>　　1.3花店的布局規(guī)劃</p><p>　　主

11、頁(yè)面包括網(wǎng)站的logo,導(dǎo)航,產(chǎn)品分類，部分產(chǎn)品推薦以及各個(gè)鏈接等欄目，在此頁(yè)面中還增加相識(shí)產(chǎn)品列表以及推薦產(chǎn)品列表，以方便訪問者選擇合適的產(chǎn)品。</p><p><b>　　網(wǎng)站的首頁(yè)</b></p><p>　　下面是主頁(yè)面全部的代碼</p><p>　　第二章 設(shè)計(jì)想法來源與思路</p><p>　　2.1設(shè)計(jì)的

12、想法來源</p><p>　　一次朋友過生日突然收到一個(gè)快遞公司的電話說有她的包裹，她很納悶的說我沒有在網(wǎng)上買什么啊，拿到包裹后才發(fā)現(xiàn)是一束很漂亮的玫瑰花后來又接到一個(gè)電話是她一個(gè)好朋友從網(wǎng)上訂購(gòu)給她的。當(dāng)時(shí)我就覺得網(wǎng)絡(luò)真的好神奇啊，他能做到人們做不到的，實(shí)現(xiàn)人們實(shí)現(xiàn)不了的，它能幫助人們促進(jìn)感情增加友誼，通過網(wǎng)絡(luò)實(shí)現(xiàn)自己不能實(shí)現(xiàn)的事情，所以受到啦啟發(fā)就想設(shè)計(jì)一個(gè)花店網(wǎng)站，也因?yàn)楝F(xiàn)在的人們都不喜歡逛街，而且好多人上

13、班時(shí)間長(zhǎng)休息時(shí)間少，所以越來越多的人喜歡網(wǎng)購(gòu)，鮮花在人們生活中是不可或缺的，網(wǎng)購(gòu)成為人們的生活中很一大部分。我做的網(wǎng)站雖然沒有達(dá)到網(wǎng)上購(gòu)物的功能但是在以后的工作學(xué)習(xí)中我會(huì)努力學(xué)習(xí)來完善的。</p><p><b>　　2.2花店設(shè)計(jì)思路</b></p><p>　　花店屬于大眾消費(fèi)，是很多人都喜歡的，每一種花代表著一種意義，所以花店整體布局很簡(jiǎn)單，各種花類都有，每一種

14、花都代表著不同的心意，只要能把漂亮的花呈現(xiàn)給消費(fèi)者就能體現(xiàn)我設(shè)計(jì)的花店的價(jià)值，我選的花都是我們都很喜歡的花類，屬于大部分人都喜歡的花種，每個(gè)頁(yè)面里的花都是很漂亮的，也是萬里挑一的。希望人們一進(jìn)去就能感覺到溫馨，找到自己喜歡的花，我的主頁(yè)開門見山的就介紹啦各種花類。頁(yè)面很簡(jiǎn)單只是實(shí)現(xiàn)啦一個(gè)各種花類的瀏覽。 </p><p>　　第三章 設(shè)計(jì)過程與想法</p><p>　　3.1主頁(yè)面的布局實(shí)

15、現(xiàn)</p><p>　　將光標(biāo)置于設(shè)計(jì)視圖中，在“插入”面板的“常用”選項(xiàng)卡中單擊“插入Div標(biāo)簽”按鈕，彈出“插入Div標(biāo)簽”對(duì)話框，在“插入”下拉菜單中選擇“在插入點(diǎn)”選項(xiàng)，在“ID”下拉列表框中輸入“big_banner”，單擊“確定”按鈕，即可在頁(yè)面中插入big_banner容器。如下圖所示：</p><p>　　在<div id=” big_banner”>標(biāo)簽內(nèi)部插

16、入相關(guān)的圖片，其結(jié)構(gòu)代碼如下圖所示：</p><p>　　切換到div.css文件中，創(chuàng)建一個(gè)名為#big_banner的CSS規(guī)則，如下圖所示：</p><p>　　返回設(shè)計(jì)頁(yè)面，頁(yè)面效果如下圖所示：</p><p>　　3.2頁(yè)面導(dǎo)航區(qū)域的制作</p><p>　　將鼠標(biāo)定位在設(shè)計(jì)視圖中，單擊“插入”面板的“插入Div標(biāo)簽”按鈕，彈出“插

17、入Div標(biāo)簽”對(duì)話框，在“插入”下拉菜單中選擇“在標(biāo)簽之后”選項(xiàng)，并在其后方下拉菜單中選擇“<div id=”header”>”選項(xiàng)，在“ID”下拉列表框中輸入“main_content”，單擊“確定”按鈕，即可在header容器后面插入main_content容器。</p><p>　　同樣的方法，在main_content容器內(nèi)部插入一個(gè)名為menu_tab的Div容器。切換到div.css文件中

18、，分別創(chuàng)建名為#main_content和#menu_tab的CSS規(guī)則，如下圖所示：</p><p>　　3.3左側(cè)邊欄區(qū)域的制作</p><p>　　同樣的方法在設(shè)計(jì)視圖中插入相應(yīng)的DIV然后又在CSS文件中創(chuàng)建相應(yīng)的CSS規(guī)則</p><p><b>　　代碼和圖片如下;</b></p><p>　　3.4中間部分

19、的制作</p><p>　　在本網(wǎng)頁(yè)中，主體內(nèi)容區(qū)域指的是頁(yè)面三列布局中間的部分。經(jīng)過對(duì)頁(yè)面效果圖的分析，這里對(duì)產(chǎn)品列表區(qū)域采用多個(gè)Div容器相互嵌套的方法實(shí)現(xiàn)整體布局，具體的制作過程如下：</p><p>　　將鼠標(biāo)定位在設(shè)計(jì)視圖中，單擊“插入”面板的“插入Div標(biāo)簽”按鈕，彈出“插入Div標(biāo)簽”對(duì)話框，在“插入”下拉菜單中選擇“在標(biāo)簽之后”選項(xiàng)，并在其后方下拉菜單中選擇“<div

20、 id=”left_content”>”選項(xiàng)，在“ID”下拉列表框中輸入“center_content”，單擊“確定”按鈕，即可在left_content容器后面插入center_content容器。切換到div.css文件中，創(chuàng)名為#center_content的CSS規(guī)則，如下圖所示：</p><p>　　返回設(shè)計(jì)視圖，刪除多余的文字，在center_content容器內(nèi)部插入一個(gè)運(yùn)用了oferta類的

21、Div容器，其結(jié)構(gòu)代碼如下圖所示：</p><p>　　切換到div.css文件中，創(chuàng)建oferta類的CSS的規(guī)則，如下圖所示：</p><p>　　返回設(shè)計(jì)頁(yè)面，此時(shí)頁(yè)面效果如下圖所示：</p><p>　　3.5右則邊欄區(qū)域制作</p><p>　　將光標(biāo)定置于設(shè)計(jì)視圖中，在“插入”面板的“常用”選項(xiàng)卡中單擊“插入Div標(biāo)簽”按鈕，彈出

22、“插入Div標(biāo)簽”對(duì)話框，在“插入”下拉菜單中選擇“在標(biāo)簽之后”選項(xiàng)，并在其后方下拉菜單中選擇“<div id=” center_contentt”>”選項(xiàng)，在“ID”下拉列表框中輸入“right_content”，單擊“確定”按鈕，即可在center_content容器后面插入right_content容器，用于放置頁(yè)面右側(cè)邊欄的內(nèi)容。切換到div.css文件中，創(chuàng)名為# right_content的CSS規(guī)則，如下圖所示

23、：</p><p>　　右側(cè)區(qū)域的布局與之前實(shí)現(xiàn)“鮮花網(wǎng)”區(qū)域的布局方法相同，具體的結(jié)構(gòu)代碼如下圖所示：</p><p>　　整個(gè)設(shè)計(jì)思路和想法就是這樣</p><p>　　第四章網(wǎng)上花店功能分析</p><p><b>　　4.1網(wǎng)站的功能</b></p><p>　　鮮花網(wǎng)站主要功能有： &

24、lt;/p><p>　　為消費(fèi)者提供更多的鮮花。滿足消費(fèi)者對(duì)花的需求，因?yàn)槎靵砝埠枚嗳硕疾幌矚g出門，但是又想給自己的家人和朋友驚喜所以大多都選擇網(wǎng)上購(gòu)花，又解決啦好多上班族煩惱的問題，所以網(wǎng)上購(gòu)物方便又安全。因?yàn)榱私獾降闹R(shí)非常有限所以做出來的效果沒有實(shí)現(xiàn)網(wǎng)上購(gòu)物的功能，請(qǐng)各位老師體諒一下，在以后工作學(xué)習(xí)當(dāng)中我一定會(huì)努力學(xué)習(xí)網(wǎng)頁(yè)設(shè)計(jì)方面的內(nèi)容，來完善我所沒有實(shí)現(xiàn)的功能。</p><p>　　

25、為不同需求的人提供不一樣的鮮花。比如，有朋友過生日，結(jié)婚，開業(yè)都有各式各樣的鮮花，都針對(duì)不同的場(chǎng)景選擇不同的鮮花，這些花都是分別放在不同的頁(yè)面供消費(fèi)者選擇。我做的每個(gè)頁(yè)面都只是展示啦各種各樣的鮮花，因?yàn)榱私獾闹R(shí)有限所以只能供瀏覽。</p><p>　　花店里的花都是分層次的有低價(jià)到高價(jià)，有各種節(jié)日里需要的鮮花。 有些價(jià)錢低的鮮花就可以滿足那些經(jīng)濟(jì)收入低的人，也能讓他們擁有美麗的鮮花 ，感受幸福的味道，那些價(jià)錢高

26、的花主要是針對(duì)那些高收入的人，我想要實(shí)現(xiàn)的功能就是不管是什么人都能買得起鮮花。都能在不同的節(jié)日送不同意義的花。</p><p>　　玫瑰不同的支數(shù)代表啦不同的意義。例如：11朵玫瑰代表啦最愛只在乎你一個(gè)人，9朵玫瑰代表長(zhǎng)久,10朵玫瑰代表十全十美，99朵玫瑰代表天長(zhǎng)地久，108朵代表啦求婚，所以送花是很講究的，不同的花代表啦不同的心意，我的網(wǎng)站就想體現(xiàn)這些功能，只可惜我掌握的知識(shí)有限做出來的效果沒有達(dá)到我想要的，

27、所以以后我要更努力的學(xué)習(xí)有關(guān)網(wǎng)頁(yè)設(shè)計(jì)的知識(shí)，來完善我想要的花店網(wǎng)站，達(dá)到我想要的效果。</p><p>　　4.2花店的系統(tǒng)瀏覽</p><p>　　下面這個(gè)圖片是用戶訪問的第二個(gè)圖片，分別介紹啦各類花的樣式，方便消費(fèi)者選擇。這里的鮮花都是大眾喜歡的，在市場(chǎng)中我也調(diào)查過是消費(fèi)得最多的鮮花，鮮花會(huì)不斷的更新，里面各式各樣的花都有，都是通過我千挑細(xì)選選出來的，都是很新鮮的花。</p>

28、;<p>　　第三個(gè)頁(yè)面是不同的花類，也是不同的風(fēng)格</p><p>　　第四個(gè)頁(yè)面是整個(gè)頁(yè)面中最精品的花，非常漂亮，是花中極品，在市場(chǎng)中也是銷售得比較好的。</p><p><b>　　第五章 總結(jié)</b></p><p>　　在最后的兩個(gè)周，我開始了我的畢業(yè)設(shè)計(jì)及論文寫作，時(shí)至今日，作品及論文基本完成。從起初的茫然，到慢慢的

29、進(jìn)入狀態(tài)，再到對(duì)思路逐漸的清晰，整個(gè)寫作過程難以用語(yǔ)言來表達(dá)。歷經(jīng)了二個(gè)星期的奮戰(zhàn)，緊張而又充實(shí)的畢業(yè)設(shè)計(jì)終于落下了帷幕?；叵脒@段日子的經(jīng)歷和感受，我感慨萬千，在這次畢業(yè)設(shè)計(jì)的過程中，我擁有了無數(shù)難忘的回憶和收獲。在這次的設(shè)計(jì)中，讓我重新回顧了網(wǎng)頁(yè)設(shè)計(jì)功能的使用，，遇到了不少的問題，經(jīng)過老師的指導(dǎo)，最終問題都得以解決，設(shè)計(jì)中我學(xué)到了許多課堂上沒有學(xué)到的知識(shí)，總之，這次的畢業(yè)設(shè)計(jì)使我從中受益匪淺。</p><p>

30、<b>　　第六章 致謝</b></p><p>　　本次論文最終得以順利完成，非常感謝我的指導(dǎo)教師**老師。從設(shè)計(jì)選題到論文的最終完成，她都給予我盡心盡力的指導(dǎo)。**老師嚴(yán)謹(jǐn)?shù)闹螌W(xué)態(tài)度深深的影響著我，對(duì)我今后的學(xué)習(xí)、工作、生活必將產(chǎn)生影響。我也許不是您最出色的學(xué)生，而您卻是我最尊敬的老師。您治學(xué)嚴(yán)謹(jǐn)，學(xué)識(shí)淵博，思想深邃，視野雄闊，為我營(yíng)造了一種良好的精神氛圍。授人以魚不如授人以漁，置身其

31、間，耳濡目染，潛移默化。從論文題目的選定到論文寫作的指導(dǎo)，經(jīng)由您悉心的點(diǎn)撥，再經(jīng)思考后的領(lǐng)悟。三年的讀書生活在這個(gè)季節(jié)即將劃上一個(gè)句號(hào)，而于我的人生卻只是一個(gè)逗號(hào)，我將面對(duì)又一次征程的開始。三年的求學(xué)生涯在師長(zhǎng)、同學(xué)的大力支持下，走得辛苦卻也收獲滿囊。</p><p>　　最后再一次感謝我的指導(dǎo)老師**老師，同時(shí)也感謝曾經(jīng)幫助過我的良師益友和同學(xué)！</p><p><b>　　參