竹城商品有限公司官方網站設計與實現畢業(yè)設計論文

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

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

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