第1章網(wǎng)站設(shè)計(jì)背景1.1企業(yè)網(wǎng)站設(shè)計(jì)目的隨著互聯(lián)網(wǎng)技術(shù)的不斷發(fā)展，互聯(lián)網(wǎng)在我國(guó)的發(fā)展方式是以幾何級(jí)數(shù)發(fā)展的，如今互聯(lián)網(wǎng)不僅改變著人們的生活方式、同時(shí)也改變著當(dāng)今社會(huì)的商業(yè)模式，因此這使得任何一個(gè)人都無(wú)法將自己置身于互聯(lián)網(wǎng)的這張大網(wǎng)之外。在互聯(lián)網(wǎng)飛速發(fā)展的今天，各個(gè)公司或企業(yè)制作一個(gè)自己的網(wǎng)站就和做一張名片一樣普及，網(wǎng)絡(luò)是強(qiáng)大的媒體介質(zhì)，它可以不受時(shí)間和空間的限制，在做好網(wǎng)站發(fā)布之后，那么在世界上任何一個(gè)地方，只要有網(wǎng)站的網(wǎng)址，就可以看到企業(yè)的網(wǎng)站內(nèi)容，了解企業(yè)各方面的情況。本論文順應(yīng)當(dāng)前互聯(lián)網(wǎng)發(fā)展趨勢(shì)，為了更好的推動(dòng)道州柑橘的發(fā)展,設(shè)計(jì)實(shí)現(xiàn)了一個(gè)以介紹道州柑橘為主題的網(wǎng)站，旨在樹(shù)立道州柑橘的品牌形象。本論文希望可以通過(guò)本網(wǎng)站讓更多人知道并了解道州柑橘，提高道州柑橘的知名度。1.2網(wǎng)站建設(shè)需求分析道州柑橘網(wǎng)主要是為用戶提供道州柑橘信息。本網(wǎng)站的目標(biāo)客戶群體為需要獲取道州柑橘供求信息、了解道州柑橘以及相關(guān)信息的用戶。具體來(lái)說(shuō)主要有三類用戶,包括柑橘種植者、柑橘承銷商及柑橘消費(fèi)者。柑橘種植者可以通過(guò)本網(wǎng)站發(fā)布柑橘供應(yīng)信息，便于承銷商和消費(fèi)者與之聯(lián)系與交流。供銷商通過(guò)瀏覽本網(wǎng)站的供求信息，找到合適的供應(yīng)商。柑橘消費(fèi)者是柑橘產(chǎn)業(yè)鏈的重要環(huán)節(jié)，他們也可以通過(guò)本網(wǎng)站了解柑橘基本常識(shí)，柑橘美食的制作信息以及道州柑橘特性等。1.3網(wǎng)站整體結(jié)構(gòu)本網(wǎng)站是以發(fā)布道州柑橘相關(guān)信息為主的信息發(fā)布型網(wǎng)站?；诒揪W(wǎng)站的定位，網(wǎng)站規(guī)劃了以下7個(gè)欄目，分別是：首頁(yè)、關(guān)于我們、產(chǎn)品展示、新聞中心、供求信息、柑橘美食、聯(lián)系我們。每個(gè)欄目的主題介紹如下：道州柑橘欄目主要是對(duì)道州柑橘的歷史以及道州柑橘的發(fā)展現(xiàn)狀做一些說(shuō)明，方便人們了解道州柑橘的悠久歷史和如今的發(fā)展。產(chǎn)品展示欄目對(duì)道州現(xiàn)有的一些優(yōu)質(zhì)柑橘品種做一些簡(jiǎn)單的說(shuō)明。新聞中心欄目中收集發(fā)布一些有關(guān)道縣柑橘的新聞和一些道州最新新聞信息。供求信息欄目主要是為果農(nóng)發(fā)布一些柑橘供應(yīng)的信息以方便采購(gòu)商與其聯(lián)系，采購(gòu)商也可在上面發(fā)布一些求購(gòu)信息，說(shuō)明購(gòu)買條件，以便果農(nóng)與之聯(lián)系。柑橘美食欄目介紹一些用柑橘制作的美食，且附有詳細(xì)的制作步驟，讓人們了解柑橘的更多吃法。聯(lián)系我們欄目下標(biāo)明了公司的詳細(xì)地址，手機(jī)或QQ聯(lián)系信息。網(wǎng)站的具體結(jié)構(gòu)圖如下：首頁(yè)首頁(yè)聯(lián)系我們柑橘美食新聞中心供求信息產(chǎn)品展示道州柑橘聯(lián)系我們柑橘美食新聞中心供求信息產(chǎn)品展示道州柑橘首頁(yè)砂糖橘砂糖橘金桔金桔臍橙臍橙冰糖橙冰糖橙紐荷爾紐荷爾圖1.3網(wǎng)站結(jié)構(gòu)圖第2章前期準(zhǔn)備2.1素材收集整理本網(wǎng)站是關(guān)于道州柑橘的信息發(fā)布型網(wǎng)站，主要介紹柑橘的基本信息，提供道州柑橘的供求信息、道州柑橘的新聞和如何利用柑橘制作美食。本網(wǎng)站的圖片素材大部分都是經(jīng)過(guò)Photoshop工具軟件進(jìn)行了后期處理的這樣使圖片更美觀，網(wǎng)站中關(guān)于柑橘的基本知識(shí)及柑橘美食制作方式等文字信息的原始素材來(lái)自于一些美食網(wǎng)站，并依據(jù)本網(wǎng)站的需求經(jīng)過(guò)文字編輯加工后應(yīng)用于本網(wǎng)站。網(wǎng)站中關(guān)于柑橘的供求信息和新聞是從道州論壇和一些關(guān)于道州柑橘的新聞中整理后所得。以下是網(wǎng)站部分文字素材的來(lái)源網(wǎng)址：/c/2014/07/25/3417156.htm/web/hnagrizw/snzx/qsxxlb/yz/dx/content_165462.html本網(wǎng)站的所有文字及圖片素材為避免雷同，在前期收集整理的基礎(chǔ)上，依據(jù)本網(wǎng)站的主題定位進(jìn)行了后期加工處理，其目的是突出本網(wǎng)站的特色。2.2LOGO設(shè)計(jì)logo是企業(yè)和產(chǎn)品的標(biāo)志，它傳遞著產(chǎn)品的內(nèi)涵、公司文化、企業(yè)理念等，它能夠使一個(gè)企業(yè)，產(chǎn)品或服務(wù),區(qū)別于其它企業(yè),產(chǎn)品或服務(wù)。使受眾對(duì)企業(yè)留下最深刻的印象,由此來(lái)提升企業(yè)品牌的特性。本網(wǎng)站logo采用黃色和綠色兩種顏色搭配出一個(gè)柑橘的笑臉，給人一種親切感。由于本論文主題是一個(gè)柑橘的網(wǎng)站，采用柑橘元素做logo與網(wǎng)站的主題相符，使觀看者容易辨認(rèn)，并記憶深刻。LOGO設(shè)計(jì)如下圖：圖2.2logo圖2.3Banner設(shè)計(jì)在網(wǎng)頁(yè)設(shè)計(jì)中，Banner可以作為網(wǎng)站頁(yè)面的橫幅廣告，其作用舉足輕重，它最能夠體現(xiàn)出一個(gè)網(wǎng)站的中心意旨，并可以形象鮮明的表達(dá)網(wǎng)站最主要的情感思想或宣傳的中心。本網(wǎng)站的banner共用了六張柑橘和柑橘基地的圖片，并使用Photoshop圖片處理軟件的動(dòng)畫(huà)制作技術(shù)制作了一個(gè)圖片輪播動(dòng)畫(huà)。其設(shè)計(jì)制作過(guò)程為：（1）首先把要用到的六張圖片導(dǎo)入到Photoshop中進(jìn)行尺寸調(diào)整，將它們都調(diào)整到相同尺寸。以免播放時(shí)因圖片不一致產(chǎn)生錯(cuò)位。（2）到工具欄中選擇窗口、動(dòng)畫(huà)。下方會(huì)出現(xiàn)動(dòng)畫(huà)幀，先選中一張圖片，把其它四張圖片依次全選拖入第一張圖片的圖層中。圖2.3banner制作圖1在動(dòng)畫(huà)幀中把延遲時(shí)間調(diào)為0.5。再?gòu)?fù)制5幀，選中第一幀把圖層中其它四張圖片的眼睛閉上，再選中第二幀，同樣把其它五張圖片閉眼。圖2.4banner制作圖2弄好五張圖片之后點(diǎn)擊播放，測(cè)試圖片是否重復(fù)，以便及時(shí)調(diào)整。將banner保存為web通用的GIF圖片格式，儲(chǔ)存就完成了，保存好之后再測(cè)試一遍，就可以插入網(wǎng)頁(yè)之中了。每張圖片的跳轉(zhuǎn)時(shí)間設(shè)置的是5s,這樣的速度不快不慢，方便網(wǎng)站的瀏覽者觀看。2.5banner效果圖2.4首頁(yè)效果圖首頁(yè)最主要是一個(gè)網(wǎng)站內(nèi)容的匯總和索引，在首頁(yè)中會(huì)有很多圖標(biāo)和超鏈接，欄目也比較多，就像一個(gè)住宅的大門一樣，從首頁(yè)可以通往網(wǎng)站的各個(gè)模塊。本網(wǎng)站的首頁(yè)效果圖如下：圖2.6首頁(yè)效果圖

第3章網(wǎng)頁(yè)設(shè)計(jì)制作3.1首頁(yè)設(shè)計(jì)制作通常來(lái)說(shuō)，一個(gè)網(wǎng)站的首頁(yè)設(shè)計(jì)效果是非常重要的，就如同一本書(shū)的封面，需要吸引住瀏覽者的眼球。網(wǎng)站首頁(yè)的設(shè)計(jì)既要突出網(wǎng)站的主要內(nèi)容又要顯示出網(wǎng)站的特色。還要有一些特效以吸引瀏覽者的目光。本網(wǎng)站首頁(yè)用HTML結(jié)合DIV/CSS樣式對(duì)頁(yè)面進(jìn)行布局排版，使頁(yè)面更加美觀簡(jiǎn)潔。首頁(yè)采用了同字型的布局形式，具體布局圖見(jiàn)圖3—1首頁(yè)布局圖。Logo導(dǎo)航條Banner產(chǎn)品展示關(guān)于我們柑橘美食聯(lián)系我們版權(quán)所有圖3.1首頁(yè)布局圖本網(wǎng)站采用綠色作為本網(wǎng)站的主色調(diào)，綠色可以給人一種天然的感覺(jué)。網(wǎng)站設(shè)計(jì)風(fēng)格為簡(jiǎn)潔清新環(huán)保，力圖與網(wǎng)站宣傳的綠色新鮮的道州柑橘主題貼近。1、導(dǎo)航條設(shè)計(jì)在導(dǎo)航欄的設(shè)計(jì)中，采用DreamweaverCS5軟件顯示隱藏層操作實(shí)現(xiàn)菜單下拉的效果，其顯示隱藏層的動(dòng)作代碼如下：onmouseover="MM_showHideLayers('apDiv1','','show')"鼠標(biāo)經(jīng)過(guò)時(shí)顯示固定內(nèi)容onmouseout="MM_showHideLayers('apDiv1','','hide')"鼠標(biāo)離開(kāi)時(shí)隱藏內(nèi)容。圖3.2下拉菜單效果2、產(chǎn)品展示信息塊產(chǎn)品展示信息塊部分采用js特效實(shí)現(xiàn)了自右向左滾動(dòng)自動(dòng)播放效果。其效果見(jiàn)圖3-3。其JS部分實(shí)現(xiàn)代碼如下：'marquee':'x',\\設(shè)置圖片的滾動(dòng)方向，有marquee:y和marquee:x兩種'margin_right':'0',\\設(shè)置margin_right值'margin_bottom':'0',\\設(shè)置對(duì)象底邊外延邊距。'speed':'10'\\設(shè)置圖片滾動(dòng)的速度滾動(dòng)速度,單位為mm圖3.3產(chǎn)品展示效果圖3.2其他頁(yè)面設(shè)計(jì)制作1、柑橘美食頁(yè)面設(shè)計(jì)柑橘美食頁(yè)面使用DIV/CSS樣式和表格進(jìn)行布局與排版，本頁(yè)面與首頁(yè)的風(fēng)格保持一致。div的運(yùn)用使頁(yè)面的布局與排版更加靈活，對(duì)頁(yè)面的修改也更加容易，使頁(yè)面更加美觀。在DIV中插入了表格方便圖片和文字的插入，使頁(yè)面看起來(lái)更整齊。如下圖所示：圖3.2柑橘美食2、產(chǎn)品展示頁(yè)面設(shè)計(jì)用表格對(duì)頁(yè)面內(nèi)容進(jìn)行排版使頁(yè)面更整齊美觀。方便對(duì)其排版和修改，是頁(yè)面風(fēng)格保持一致。用DreamweaverCS5軟件顯示隱藏層操作實(shí)現(xiàn)菜單下拉的效果，如圖3.2下拉菜單效果圖所示。圖3.2產(chǎn)品展示下拉菜單在產(chǎn)品展示頁(yè)面每個(gè)頁(yè)面的最下方，都設(shè)置了一個(gè)能返回首頁(yè)的超鏈接，在瀏覽者瀏覽完頁(yè)面內(nèi)容后，不用再重新滑動(dòng)到頁(yè)面最上方就可以直接跳轉(zhuǎn)到首頁(yè)。圖3.2產(chǎn)品展示頁(yè)面部分效果第4章道州柑橘網(wǎng)站推廣4.1電子郵件推廣電子郵件推廣是一個(gè)初步建成的網(wǎng)站一種低成本推廣方式，相對(duì)于其他推廣方式而言，電子郵件營(yíng)銷是最優(yōu)惠，面向人群最廣，而且成本幾近于零。因此電子郵件推廣是一些中小網(wǎng)站首選的推廣方式。在了解電子郵件的推廣方式之后，根據(jù)本公司的產(chǎn)品特色，采用軟文對(duì)本網(wǎng)站進(jìn)行推廣宣傳，以便讓更多的人可以了解到本網(wǎng)站。電子郵件推廣可以幫公司網(wǎng)站減少推廣的成本，讓更多的人知道本網(wǎng)站的存在?？梢院湍繕?biāo)用戶零距離的接觸，以便讓他們更加了解和更容易接受本網(wǎng)站。圖4.1電子郵件推廣4.2QQ推廣為了讓網(wǎng)站能夠快速的發(fā)展起來(lái)，讓更多的人所熟知，QQ宣傳是不可少的，QQ群里總是會(huì)有一批用戶會(huì)在線，QQ營(yíng)銷廣告就像聊天信息一樣被發(fā)出來(lái)，用戶立即就可以看到，這樣可以即時(shí)將營(yíng)銷信息讓用戶了解。QQ推廣是最直接和客戶接觸，也是最為節(jié)約的方式。為了較好地實(shí)施QQ推廣，本網(wǎng)站撰寫了一篇軟文為其在QQ中進(jìn)行了推廣。圖4.2QQ推廣4.3論壇論壇推廣是一種針對(duì)性極強(qiáng)，一篇可讀性強(qiáng)的軟文在短期內(nèi)可以給網(wǎng)站帶來(lái)非?？捎^的瀏覽量，若是能找到精準(zhǔn)的論壇來(lái)投放軟文，對(duì)于利益的轉(zhuǎn)化和網(wǎng)站目標(biāo)用戶的收集都是很可觀的。現(xiàn)在大多數(shù)的人都不喜歡太過(guò)于直白的廣告形式，只有那種動(dòng)了一下腦筋的才可以讓宣傳起到一定的影響，最好是容易激起人們的認(rèn)同，在心理上可以引起共鳴的。一個(gè)新上線的新網(wǎng)站，手上沒(méi)有過(guò)多的資金，那么論壇推廣就是一種非常合適的推廣了，論壇推廣是幾乎不需要成本的，從注冊(cè)論壇到在論壇上發(fā)帖全都是免費(fèi)的，并且論壇推廣最主要的工作就是發(fā)帖，頂貼和回復(fù)這些比較常用且簡(jiǎn)單的手段，只要肯投入時(shí)間和精力，一個(gè)人同樣也可以做好一次完美的論壇推廣。圖4.3論壇推廣4.4微博微博推廣是一種可以借助先進(jìn)多媒體技術(shù)，可以從文字和圖片等等多種形式對(duì)多種產(chǎn)品進(jìn)行描述推廣，可以讓潛在的客戶更加形象直接的接受到要傳達(dá)的信息。微博的傳播是非常迅速的，可以在短時(shí)間內(nèi)傳播到全球各地去，其發(fā)布信息快速，節(jié)約了大量的成本和時(shí)間。4.4微博推廣4.5微信微信群體，一個(gè)龐大的群體,然而將微信作為一種營(yíng)銷的手段,是具有很強(qiáng)可行性的。如今微信營(yíng)銷市場(chǎng)的前景是非常樂(lè)觀的,自2011年1月21日騰訊公司推出微信后，在其推出400余天后，就突破了一億的用戶量，并且微信軟件本身的使用是免費(fèi)的，使用微信的各種功能都不會(huì)收費(fèi)，并且在微信平臺(tái)上實(shí)現(xiàn)和特定群體的文字、圖片、語(yǔ)音的全方位溝通、互動(dòng)。因此通過(guò)微信開(kāi)展的微信營(yíng)銷活動(dòng)成本自然而然是非常低的。并且相對(duì)于單一的傳統(tǒng)營(yíng)銷方式而言，微信則顯得更加的多元化，如微信推出的搖一搖、附近的人、和二維碼，朋友圈等多種功能都能成為營(yíng)銷的方式?？梢岳涂蛻糁g的距離，從而使?fàn)I銷活動(dòng)變得不再枯燥乏味，而是一種生動(dòng)有趣的推廣，這樣會(huì)更有利于營(yíng)銷活動(dòng)的開(kāi)展。并且微信營(yíng)銷最大一個(gè)優(yōu)點(diǎn)是親民但不擾民，微信用戶可以自主的選擇是否接受信息，微博公眾用戶每天也只能群發(fā)一次消息，一次最多發(fā)布八條。這樣給用戶帶來(lái)了更大的選擇空間。圖4.5微信推廣總結(jié)在與導(dǎo)師的交流討論后題目定了下來(lái)“道州柑橘網(wǎng)網(wǎng)站的設(shè)計(jì)與實(shí)現(xiàn)”。當(dāng)開(kāi)題報(bào)告定下來(lái)的時(shí)候，我不知該如何下手。我將這一困難告訴了導(dǎo)師，在導(dǎo)師細(xì)心的指導(dǎo)下，終于使我對(duì)網(wǎng)站的設(shè)計(jì)有了大致的想法。并在老師的指導(dǎo)和鼓勵(lì)下完成了網(wǎng)站的設(shè)計(jì)與論文的定稿。當(dāng)我終于完成了所有的圖片處理、頁(yè)面布局排版、論文書(shū)寫、修改之后感覺(jué)整個(gè)人都很累。但看著自己做的網(wǎng)站我的心里是甜的，我覺(jué)得這一切都值了。這次畢業(yè)設(shè)計(jì)的制作是我的一次再學(xué)習(xí)，再提高的過(guò)程。在設(shè)計(jì)中我充分地運(yùn)用了以前學(xué)到的知識(shí)，同時(shí)也要自己另外再去學(xué)習(xí)一些老師在課堂上沒(méi)有講過(guò)的東西，從而使我的學(xué)習(xí)能力與實(shí)際動(dòng)手能力有所提高。致謝我的畢業(yè)設(shè)計(jì)是在老師的精心指導(dǎo)和大力支持下完成的，老師從網(wǎng)站的選題到網(wǎng)站和論文的修改，都給予了非常細(xì)致耐心的指導(dǎo)，并提了很多寶貴的意見(jiàn)，老師嚴(yán)謹(jǐn)?shù)闹螌W(xué)態(tài)度和高度的敬業(yè)的精神對(duì)我產(chǎn)生了重要的影響。她開(kāi)闊的視野和淵博的知識(shí)給了我深深的啟迪，在此我要向她表示由衷的感謝。在此還要感謝所有的授課老師，如果沒(méi)有前三年知識(shí)的積淀，我不可能如此成功的完成我的畢業(yè)設(shè)計(jì)。謹(jǐn)以此致謝，最后，我要向百忙之中抽時(shí)間對(duì)本文進(jìn)行審閱的各位老師表示衷心的感謝。

參考文獻(xiàn)[1]潘果，張華南.電子商務(wù)網(wǎng)站建設(shè)與管理[M].1版.北京：教育科學(xué)出版社，2013.10[2]唐守國(guó)主編.創(chuàng)意Photoshopcs4網(wǎng)頁(yè)設(shè)計(jì)、配色與特效案例精粹.清華大學(xué)出版社.2010年