竹城商品有限公司官方網(wǎng)站設(shè)計與實現(xiàn)畢業(yè)設(shè)計論文

目錄TOC\o"1-2"\h\z\u第一章設(shè)計背景 31.1企業(yè)網(wǎng)站設(shè)計目的 51.2網(wǎng)站建設(shè)需求分析 71.3網(wǎng)站總體結(jié)構(gòu) 8第二章前期準(zhǔn)備 92.1素材收集整理 92.2LOGO設(shè)計 92.3Banner設(shè)計 112.4首頁效果圖 12第三章網(wǎng)頁設(shè)計制作 133.1首頁設(shè)計制作 143.2其他頁面設(shè)計制作 20第四章調(diào)試運行 214.1網(wǎng)站調(diào)試及處理 214.2網(wǎng)站運行 24總結(jié) 25致謝 26參考文獻 27第1章設(shè)計背景1.1企業(yè)網(wǎng)站設(shè)計目的1.企業(yè)簡介竹城商品有限公司是一家專門做永州特產(chǎn)的公司。為了將永州獨特的特產(chǎn)推向消費市場。讓更多的人知道永州特產(chǎn)文化及歷史背景，讓更多人更加了解永州特產(chǎn)的獨特。讓永州特產(chǎn)住進每個人的生活里。竹城商品有限公司，特產(chǎn)食品行業(yè)知名品牌，湖南省著名商標(biāo)，湖南省名牌產(chǎn)品，全國食品質(zhì)量工業(yè)優(yōu)秀龍頭食品企業(yè)，全國農(nóng)產(chǎn)品加工業(yè)出口示范企業(yè)，專業(yè)從事籽仁系列產(chǎn)品及其他水果、肉類產(chǎn)品的加工、銷售的中外合資企業(yè)竹城商品有限公司，是一家具有出口自營權(quán)的中外合資企業(yè)，成立于2014年10月4日，下轄一個全資子公司、兩個銷售分公司、二個生產(chǎn)廠，總占地面積15萬平方米。2.品牌簡介公司主營業(yè)務(wù)為籽仁系列產(chǎn)品及其他水果、肉類產(chǎn)品的加工與銷售。公司產(chǎn)品包括吊瓜子籽仁、紅瓜子、葵花籽仁等籽仁類產(chǎn)品；銀杏果等堅果類產(chǎn)品；瓜籽系列綜合利用產(chǎn)品以及豆類、雜糧等其他產(chǎn)品。其中吊瓜子籽仁、紅瓜子為本公司的主要產(chǎn)品。產(chǎn)品銷售分為國外和國內(nèi)兩個渠道，國外市場分布在歐、美、亞及大洋洲等20幾個國家和地區(qū)，國內(nèi)市場已經(jīng)同華潤萬家、大潤發(fā)、步步高等國內(nèi)知名的大型連鎖超市和食品加工、批發(fā)廠家建立了友好合作關(guān)系，形成了覆蓋面廣、服務(wù)體系完善的國內(nèi)外銷售網(wǎng)絡(luò)。公司視產(chǎn)品質(zhì)量如生命，以持續(xù)向廣大消費者提供安全與健康的產(chǎn)品為前提，建立了質(zhì)量管理體系，對原材料采購、在產(chǎn)品、產(chǎn)成品制定標(biāo)準(zhǔn)化的操作規(guī)程和質(zhì)量標(biāo)準(zhǔn)，從原料采購到各個生產(chǎn)加工過程直到產(chǎn)品銷售，都嚴(yán)把產(chǎn)品質(zhì)量關(guān)，實現(xiàn)了“全員參與、全面落實、全程控制”，不斷提高技術(shù)水平，全力構(gòu)建食品安全體系。建設(shè)了占地200余平米的檢測中心，實現(xiàn)了純度、水分、酸價、過氧化值、霉菌、大腸菌群等多項物理、化學(xué)、微生物指標(biāo)的自主檢測。2014年以來，公司以“公司+農(nóng)戶+基地”的模式，進行紅瓜子種植基地建設(shè)。公司充分調(diào)動農(nóng)戶種植積極性，向農(nóng)戶提供種植技術(shù)指導(dǎo)，聘請農(nóng)業(yè)大學(xué)教授為顧問，深入田間地頭為農(nóng)戶進行種植技術(shù)培訓(xùn)，提供技術(shù)服務(wù)，與農(nóng)戶簽訂種植回收合同，保護價回收產(chǎn)品，徹底解決了農(nóng)戶的后顧之憂?；仡欉^去，激情滿懷。展望未來，任重道遠(yuǎn)。我們將一如既往的以“超越、卓越、合和、共贏”核心價值觀為指導(dǎo)，以“做良心食品、做放心企業(yè)”為使命，積極履行企業(yè)的社會責(zé)任，向“樹百年品牌、建百年企業(yè)”的目標(biāo)邁進。3.設(shè)計目的公司官網(wǎng)的設(shè)計其實都是為了以下6點而設(shè)計的：第一、降低企業(yè)銷售利息，利用網(wǎng)上電子商務(wù)提高產(chǎn)品競爭力。第二、促進了信息的交流，進行行業(yè)信息收集及日常電子郵件的傳輸?shù)谌?、提升了企業(yè)的服務(wù)品質(zhì)，加強了對目標(biāo)對象的售前售后服務(wù)。第四、推廣提高產(chǎn)品的品牌形象第五、宣傳企業(yè)自身形象。第六、尋求合資、合作伙伴。以上6點可以讓企業(yè)的商業(yè)機會得到有效擴大，在電子商務(wù)方式下可通過專業(yè)為您提供網(wǎng)上籌劃，將信息傳送給需求群體。利用電子商務(wù)與客戶建立方便的聯(lián)絡(luò)方式進行業(yè)務(wù)洽談。大幅度減少了人員出差的時間和費用，降低通信、傳真、信息，同時主動在網(wǎng)上查詢配件的相關(guān)商家的信息，并與其直接聯(lián)系推銷，從而有效降低了推銷本錢。更加宣傳了企業(yè)的產(chǎn)品，通過企業(yè)網(wǎng)頁宣傳企業(yè)的同時。使其網(wǎng)頁上的產(chǎn)品信息更加方便地傳達到全球的目標(biāo)客戶群，建立網(wǎng)站前的企業(yè)，產(chǎn)品銷售渠道受到很大的區(qū)域名限制，建立網(wǎng)站后，獲得了更大的客戶群體，為企業(yè)的產(chǎn)品走向國際打下了堅實的基礎(chǔ)，從而不時提高產(chǎn)品的品牌形象。企業(yè)也可以不限區(qū)域的向外宣傳企業(yè)的文化、企業(yè)的產(chǎn)品、服務(wù)品質(zhì)以及新聞等方面的資訊。包括產(chǎn)品的各種性能參數(shù)，使用說明等；利用圖文聲像的網(wǎng)頁形象宣傳企業(yè)，以便于企業(yè)更快速地進行市場開拓和發(fā)展。所以，為迎合時勢需要，也為了擴大市場，打響品牌知名度，特建設(shè)了本網(wǎng)站，以做到向用戶和相關(guān)人員宣傳的這樣一個效果。1.2網(wǎng)站建設(shè)需求分析電子商務(wù)交易的個性化、自由化可為企業(yè)創(chuàng)造無限商機，降低成本，同時可以更好地建立同客戶、經(jīng)銷商及合作伙伴的關(guān)系，為此，許多公司積極拓展電子商務(wù)，為客戶服務(wù)，進行價值鏈集成。隨著全球信息網(wǎng)絡(luò)的發(fā)展，Internet在世界上已不僅僅是一種技術(shù)，更重要的是它已成為一種新的經(jīng)營模式。從4C（Connection.，Communication，Commerce。Co-operation）層次上徹底改變了人類工作，學(xué)習(xí)，生活，娛樂的方式，已成為國家經(jīng)濟和區(qū)域經(jīng)濟增長的主要動力。Internet正成為世界最大的公共資料信息庫，它包含無數(shù)的信息資源，所有最新的信息都可以通過網(wǎng)絡(luò)搜索獲得。更重要的是，大部分信息都是免費的，應(yīng)用電子商務(wù)可使企業(yè)獲得在傳統(tǒng)模式下所無法獲得的巨量商業(yè)信息，在激烈的市場競爭中領(lǐng)先對手?；ヂ?lián)網(wǎng)真是商機無限。目前，我國許多企業(yè)上網(wǎng)，但只是展示企業(yè)網(wǎng)上形象，離電子商務(wù)的內(nèi)涵還很遠(yuǎn)。企業(yè)上網(wǎng)并不代表實現(xiàn)了電子商務(wù)，只有當(dāng)網(wǎng)站為企業(yè)帶來實質(zhì)性的幫助和顯著的效益（如新聞發(fā)布、網(wǎng)上調(diào)查、BBS等），具備網(wǎng)上交易功能等的網(wǎng)站才是企業(yè)電子商務(wù)發(fā)展的方向，電子商務(wù)的核心應(yīng)是商務(wù)，電子是一種手段。在互聯(lián)網(wǎng)時代，企業(yè)應(yīng)充分利用互聯(lián)網(wǎng)的手段，洞察消費者需求，沖破銷售服務(wù)的限制，擴大市場機會，早日進行電子商務(wù)的實踐，感受電子商務(wù)的博大魅力，把機會踩在腳下，建立一個以服務(wù)客戶為中心，滿足消費者及合作伙伴全方位需求，吸引眾多瀏覽者，增強企業(yè)品牌輻射效應(yīng)的商務(wù)網(wǎng)站。為此，我們結(jié)合網(wǎng)站將來發(fā)展方向，本著專業(yè)負(fù)責(zé)的精神，在原有網(wǎng)站的基礎(chǔ)上，進一步強化貴公司網(wǎng)站網(wǎng)站的互動性，完善產(chǎn)品展示功能，推薦新聞發(fā)布功能，售后服務(wù)功能，企業(yè)論壇等功能，密切上海宇威同其合作伙伴、經(jīng)銷商、客戶、和瀏覽者之間的關(guān)系，優(yōu)化企業(yè)經(jīng)營模式，提高企業(yè)運營效率。采用最新的技術(shù)架構(gòu)和應(yīng)用系統(tǒng)平臺，協(xié)助貴公司網(wǎng)站優(yōu)化復(fù)雜的商業(yè)運作流程。1.3網(wǎng)站整體結(jié)構(gòu)網(wǎng)站結(jié)構(gòu)是指網(wǎng)站中頁面間的層次關(guān)系，按性質(zhì)可分為邏輯結(jié)構(gòu)及物理結(jié)構(gòu)。本網(wǎng)站支持圖文動畫混合編排，能夠上傳圖片、動畫、電影、附件，發(fā)布資訊等，能在前臺顯現(xiàn)整潔標(biāo)準(zhǔn)的資訊內(nèi)容，全站能生成靜態(tài)格式。具有完整性和實時性，可隨時更新網(wǎng)站內(nèi)容及信息。并且作為一個展示型的網(wǎng)站，我們主要突出的是我們的品牌意識和企業(yè)文化，以及一些相關(guān)產(chǎn)品文化。以下是本網(wǎng)站的結(jié)構(gòu)圖：竹城商品有限公司竹城商品有限公司首頁公司簡介新聞動態(tài)產(chǎn)品文化美食傳說聯(lián)系我們產(chǎn)品展示圖1功能結(jié)構(gòu)分析示意圖為了結(jié)構(gòu)更清晰,網(wǎng)站文件名以英文或漢語拼音命名，便于記憶，便于推廣,使用明確實用的網(wǎng)站導(dǎo)航，查找相關(guān)資訊相當(dāng)方便,利用了首頁框架、分類框架、頁面模型分析明確，排列整齊。具體頁面結(jié)構(gòu)分析：首頁：采用了靜態(tài)的展示效果，主要有一些當(dāng)前資訊以及新產(chǎn)品的展示產(chǎn)品文化：介紹了本公司產(chǎn)品的歷史文化及制作方法產(chǎn)品展示：介紹了本公司的一些產(chǎn)品，可分為糧油米面、干貨山珍、休閑零食、水產(chǎn)肉類、生鮮果蔬等來進行分類；新聞動態(tài)：當(dāng)前政府對該類企業(yè)的支持以及該行業(yè)的相關(guān)動態(tài)公司簡介：介紹了本公司的企業(yè)文化、經(jīng)營理念等美食傳說：介紹了本公司每一款產(chǎn)品的來源與背后的故事聯(lián)系我們：留有QQ在線咨詢、電話、傳真、地址、郵箱、網(wǎng)址方便大家聯(lián)系第二章前期準(zhǔn)備2.1素材收集整理1.素材的收集通過搜索引擎進行關(guān)鍵字搜索有關(guān)護膚品的圖片，從中挑選合適的并加以保存，放入相應(yīng)文件夾中。2.素材的制作把上述所收集的圖片根據(jù)網(wǎng)站的風(fēng)格進行裁剪、加工與優(yōu)化。把相關(guān)的圖片加入文字效果，且色彩搭配合理。根據(jù)網(wǎng)站的需要對圖片進行色彩和形狀的方面的改變，從而達到網(wǎng)站所展示出來的效果。3．素材的整理網(wǎng)站所有內(nèi)容都統(tǒng)一放置一個文件夾中并命名為畢業(yè)設(shè)計，在其子文件夾新建images文件夾、css樣式文件夾、flash文件夾。素材圖片進行分類命名統(tǒng)一放在images文件夾中。動畫素材統(tǒng)一放于flash文件夾中。2.2LOGO設(shè)計logo作為一種識別和傳達信息的視覺圖形，以其簡約、優(yōu)美的造型語言，體現(xiàn)著品牌的特點和企業(yè)的形象，本站的logo是在photoshop中設(shè)計的，以名字命名，簡潔、方便、易記。我設(shè)計的首頁logo和其他各頁面的logo都是一樣的。背景都是采用透明色，這樣更方便使用到不同的頁面中。Logo大小：120px*60px圖2-1logo2.3Banner設(shè)計Banner設(shè)計使用圖片輪播的方式。圖片輪播是利用Flash技術(shù)實現(xiàn)，利用Flash技術(shù)主要的優(yōu)勢有：網(wǎng)絡(luò)的發(fā)展和互聯(lián)網(wǎng)用戶的增多，F(xiàn)lash的文件存儲量非常小，有利于在各種網(wǎng)絡(luò)帶寬的互聯(lián)網(wǎng)上傳播，F(xiàn)lash的即下即看的模式可以節(jié)省時間，F(xiàn)lash軟件的擴展性好功能完備，并且各方面成本較低。一個好的Banner設(shè)計能影響到一個網(wǎng)站的點擊量與成交率，本站的圖片輪播運用了不同類型產(chǎn)品的圖片與公司的名稱相結(jié)合組成，利用Flash處理的動態(tài)效果，實現(xiàn)了給人一種往下看的感覺。圖片輪播采用了江華苦茶圖片、金浩茶油圖片、永州夏橙圖片以及永州吊瓜子圖片，各種圖片展現(xiàn)了豐富網(wǎng)站內(nèi)容，簡單明了的介紹了該網(wǎng)站的特產(chǎn)類型，給人視覺上的感官清晰自然更好的襯托出產(chǎn)品的特點。圖2-2banner設(shè)計的圖片2.4首頁效果圖網(wǎng)站首頁圖片輪播、導(dǎo)航條均以淺灰色為主，字體采用的黑色，為了幫助用戶方便地瀏覽，每個網(wǎng)頁都設(shè)有標(biāo)題導(dǎo)航，且網(wǎng)頁標(biāo)題清楚地表明了網(wǎng)頁的內(nèi)容。網(wǎng)頁排版符合用戶的閱讀習(xí)慣，采用橫向排列方式，版塊層次比較分明。圖2-3首頁截圖第三章網(wǎng)頁設(shè)計制作3.1首頁設(shè)計制作首頁由圖片輪播、導(dǎo)航、首頁、公司簡介、新聞動態(tài)、產(chǎn)品展示、產(chǎn)品文化、聯(lián)系我們、美食傳說、產(chǎn)品分類、公司新聞組成，圖片輪播是網(wǎng)頁的中心旨意的體現(xiàn)，形象鮮明表達網(wǎng)站最主要的情感思想或宣傳中心。導(dǎo)航可以是顧客方便地訪問到所需的內(nèi)容，是顧客瀏覽網(wǎng)站時可以快速從一個頁面轉(zhuǎn)到另一個頁面的快速通道。公司簡介介紹可以向顧客展示公司品牌的發(fā)展歷程、品牌使命、價值主張、科研背景等相關(guān)信息。產(chǎn)品分類將產(chǎn)品分為干貨山珍、休閑零食、滋補養(yǎng)生、生鮮果蔬、糧油米面、水產(chǎn)肉類等，有利于顧客及時找到自己想要的產(chǎn)品，能節(jié)省顧客的時間。圖3-1圖片輪播圖片輪播部分本網(wǎng)站利用了flash，是圖片輪流播放，使網(wǎng)頁頁面有了動態(tài)的效果。圖3-2產(chǎn)品展示產(chǎn)品展示利用JavaScript語言把圖片處理為鼠標(biāo)經(jīng)過圖像更換圖3-3導(dǎo)航條設(shè)計導(dǎo)航條是指通過一定的技術(shù)手段，為網(wǎng)站的訪問者提供一定的途徑，使其可以方便地訪問到所需的內(nèi)容，是人們?yōu)g覽網(wǎng)站時可以快速從一個頁面轉(zhuǎn)到另一個頁面的快速通道。利用導(dǎo)航條，客戶就可以快速找到我們想要瀏覽的頁面。本站的導(dǎo)航條運用的字體是黑體，字體顏色是黑色和淺灰色的背景用photoshop來制作的，條理清晰以便客戶快速找到自己想要的。3.2其他頁面設(shè)計制作1．公司簡介截圖此頁面介紹了本公司的企業(yè)文化、經(jīng)營理念等,例如:湖南省永州市，原名零陵地區(qū)，簡稱永州，雅稱“瀟湘”，別稱“竹城”，并以“綠色、健康、營養(yǎng)、美味”的經(jīng)營理念等等.圖3-4公司簡介2．新聞動態(tài)截圖當(dāng)前政府對該類企業(yè)的支持以及該行業(yè)的相關(guān)動態(tài)等.圖3-5新聞動態(tài)3．產(chǎn)品展示截圖介紹了本公司的一些產(chǎn)品，可分為糧油米面、干貨山珍、休閑零食、水產(chǎn)肉類、生鮮果蔬等來進行分類。方便客戶快速找到自己想要購買的產(chǎn)品。圖3-6產(chǎn)品展示4.產(chǎn)品文化截圖該頁面介紹了本公司產(chǎn)品的歷史文化以及產(chǎn)品特色圖3-7產(chǎn)品文化5.聯(lián)系我們截圖有QQ在線咨詢、電話、傳真、地址、郵箱、網(wǎng)址方便大家聯(lián)系圖3-8聯(lián)系我們6.美食傳說截圖介紹了本公司每一款產(chǎn)品的來源與背后的故事。讓每個消費者都知道每一款產(chǎn)品都有它獨有的文化底蘊。圖3-9美食傳說第四章調(diào)試運行4.1網(wǎng)站調(diào)試及處理1.導(dǎo)航條的調(diào)試導(dǎo)航描述了用戶在一個頁面內(nèi)操作的方式，在不同的頁面之間跳轉(zhuǎn)，在一個頁面放置太多信息往往起到相反的作用。網(wǎng)站用戶趨向于目地驅(qū)動，很快找到一個導(dǎo)航，看是否有自己所需要的信息，如果沒有，就會很快離開。很少有用戶愿意花時間去熟悉網(wǎng)站，因此，網(wǎng)站導(dǎo)航幫助要盡可能地準(zhǔn)確，在網(wǎng)站設(shè)計的過程中也出現(xiàn)過導(dǎo)航鏈接頁面錯誤的行為，最后發(fā)現(xiàn)問題所在，由于設(shè)計過程中更改了放置網(wǎng)頁的文件夾名稱，本網(wǎng)站部分頁面是使用模板實現(xiàn)，所以文件夾名稱改變，導(dǎo)航條的鏈接頁面也跟著出現(xiàn)了問題。2.圖片的調(diào)試通過瀏覽頁面，發(fā)現(xiàn)頁面的Flash出現(xiàn)偏移的現(xiàn)象，經(jīng)過反復(fù)調(diào)整后，F(xiàn)lash以正確顯示，沒有出現(xiàn)偏移、變形的現(xiàn)象。圖片盡可能小，但又不影響頁面美觀，這樣可以節(jié)省空間。3.內(nèi)容調(diào)試內(nèi)容調(diào)試用來檢驗網(wǎng)站提供信息的正確性、準(zhǔn)確性和相關(guān)性。經(jīng)過核對，頁面顯示內(nèi)容和設(shè)計的保持一致，有部分字體布局稍微有些偏差但也不影響頁面的整體形象。4.2網(wǎng)站運行1.IIS安裝InternetInformationServices（IIS，互聯(lián)網(wǎng)信息服務(wù)），是由微軟公司提供的基于運行MicrosoftWindows的互聯(lián)網(wǎng)基本服務(wù)。安裝步驟如下：開始—設(shè)置—控制面板—程序和功能—打開或關(guān)閉windows功能—Internet信息服務(wù)—“web管理工具—萬維網(wǎng)服務(wù)—確定—控制面板—管理工具，如下圖：圖4-1IIS安裝配置成功后在搜索地址欄輸入：http://localhost出現(xiàn)下圖即為驗證IIS安裝成功。圖4-2驗證安裝成功2.IIS運行訪問///xxsp后成功顯示出首頁的截圖如下：圖4-3訪問成功總結(jié)2014年11月上旬，我開始了我的畢業(yè)設(shè)計工作，時至今日，設(shè)計基本完成。從最初的茫然，到慢慢的進入狀態(tài)，再到對思路逐漸的清晰，整個寫作過程難以用語言來表達。歷經(jīng)了1個月的奮戰(zhàn)，緊張而又充實的畢業(yè)設(shè)計終于落下了帷幕?；叵脒@段日子的經(jīng)歷和感受，我感慨萬千，在這次畢業(yè)設(shè)計的過程中，我擁有了無數(shù)難忘的回憶和收獲。

11月下旬，在幾經(jīng)糾結(jié)中我的題目定了下來，以湖南供銷網(wǎng)作為參考，將永州特產(chǎn)作為本次畢業(yè)設(shè)計的主題。由于動態(tài)網(wǎng)站學(xué)習(xí)不是很扎實，所以當(dāng)畢業(yè)設(shè)計的任務(wù)目標(biāo)定下來的時候，我當(dāng)時便立刻著手資料的收集工作中，當(dāng)時面對浩瀚的書海真是有些茫然，不知如何下手。在老師細(xì)心的指導(dǎo)下，終于使我對自己現(xiàn)在的工作方向和方法有了掌握。

在搜集資料的過程中，我破天荒的去到學(xué)校圖書館搜集資料，還在網(wǎng)上查找各類相關(guān)資料，將這些寶貴的資料全部記在U盤上，盡量使我的資料完整、精確、數(shù)量多，這有利于論文的撰寫。然后我將收集到的資料仔細(xì)整理分類，及時拿給老師與同學(xué)進行溝通。12月上旬，當(dāng)我終于完成了所有打字、排版、校對等任務(wù)后整個人都很累，但同時看著電腦熒屏上的畢業(yè)設(shè)計稿件我的心里是甜的，我覺得這一切都值了。這次畢業(yè)論文的制作過程是我的一次再學(xué)習(xí)，再提高的過程。在論文中我充分地運用了大學(xué)期間所學(xué)到的知識，將一個個難點攻克，達到了我想要的結(jié)果。致謝畢業(yè)論文暫告收尾，這也意味著我在學(xué)院的兩年多的學(xué)習(xí)生活既將結(jié)束?；厥准韧?，自己一生最寶貴的時光能于這樣的校園之中，能在眾多學(xué)富五車、才華橫溢的老師們的熏陶下度過，實是榮幸之極。在這兩年多的時間