愛萊美網(wǎng)站的設(shè)計(jì)與實(shí)現(xiàn)畢業(yè)設(shè)計(jì)

畢業(yè)設(shè)計(jì)畢業(yè)設(shè)計(jì)題愛萊美網(wǎng)站的設(shè)計(jì)與實(shí)現(xiàn)畢業(yè)設(shè)計(jì)類型■ 產(chǎn)品設(shè)計(jì)□工藝設(shè)計(jì)□方案設(shè)計(jì)姓名班級(jí)所屬系部物流信息系專業(yè)電子商務(wù)指導(dǎo)教師職稱完成時(shí)間摘要隨著信息技術(shù)的發(fā)展，各行業(yè)都將信息化更深入地融合和滲透到其產(chǎn)業(yè)中。同時(shí)也有越來越多的企業(yè)已起首從互聯(lián)網(wǎng)的認(rèn)知階段進(jìn)入到認(rèn)可和行徑階段。于是，許多企業(yè)都開始創(chuàng)建了屬于自身的企業(yè)網(wǎng)站，企業(yè)網(wǎng)站同樣成為了繁多企業(yè)交易謀劃和形象宣揚(yáng)的一個(gè)簇新平臺(tái)。企業(yè)與互聯(lián)網(wǎng)的完美結(jié)合，借助互聯(lián)網(wǎng)展現(xiàn)企業(yè)形象，發(fā)表產(chǎn)品信息，做好客戶服務(wù)已經(jīng)成為業(yè)界的共鳴，成為現(xiàn)代企業(yè)發(fā)展中必不可少的環(huán)節(jié)。關(guān)鍵詞：網(wǎng)站企業(yè)網(wǎng)站彩妝網(wǎng)站目錄網(wǎng)站設(shè)計(jì)背景51.1企業(yè)網(wǎng)站設(shè)計(jì)目的51.2網(wǎng)站建設(shè)需求分析61.3網(wǎng)站整體結(jié)構(gòu)6前期準(zhǔn)備82.1素材收集整理82.2LOGO設(shè)計(jì)82.3Banner設(shè)計(jì)92.4首頁(yè)效果圖10網(wǎng)站設(shè)計(jì)制作113.1首頁(yè)設(shè)計(jì)制作113.2其他頁(yè)面設(shè)計(jì)制作14愛萊美網(wǎng)站推廣174.1電子郵件推廣174.2微博推廣184.3論壇推廣194.3微信推廣20總結(jié)21致謝22參考文獻(xiàn)23網(wǎng)站設(shè)計(jì)背景1.1企業(yè)網(wǎng)站設(shè)計(jì)目的伴隨著信息技術(shù)的發(fā)揚(yáng)和企業(yè)網(wǎng)站建立在全世界范圍內(nèi)的快速遍及和應(yīng)用，許多企業(yè)紛繁創(chuàng)建了屬于自身的企業(yè)網(wǎng)站?，F(xiàn)代企業(yè)已開始重視網(wǎng)絡(luò)媒介的及時(shí)性、多效性、互動(dòng)性、全球性等優(yōu)勢(shì)，并普遍利用網(wǎng)絡(luò)資源與網(wǎng)絡(luò)渠道進(jìn)行企業(yè)推廣，從而加強(qiáng)宣傳企業(yè)產(chǎn)品，塑造企業(yè)形象，提升企業(yè)經(jīng)營(yíng)管理水平。隨著企業(yè)網(wǎng)站，迅速滲透到生產(chǎn)和生活的各個(gè)領(lǐng)域的迅速發(fā)展和遍及，互聯(lián)網(wǎng)上的宣傳已經(jīng)成為一種流行的宣傳方式，成為人們獲得信息的重要途徑。網(wǎng)絡(luò)技術(shù)的發(fā)展和使用已轉(zhuǎn)變了人們對(duì)訊息的分配和接受方式，改變了消費(fèi)群體與企業(yè)協(xié)作和交流的環(huán)境?；ヂ?lián)網(wǎng)充分融合了各類媒體傳播手段，因此，企業(yè)網(wǎng)站的建立也使企業(yè)形象和產(chǎn)品銷售的傳播獲得了一個(gè)新的平臺(tái)。按照企業(yè)網(wǎng)站的側(cè)重點(diǎn)差別，當(dāng)前企業(yè)網(wǎng)站分為三種：基本信息型、在線業(yè)務(wù)型、綜合門戶型。每種類型都有著不一樣的特點(diǎn)。企業(yè)網(wǎng)站之所以這樣普及在于企業(yè)網(wǎng)站不單可以提升企業(yè)品牌形象，也能夠讓客戶加倍詳明的明了企業(yè)和企業(yè)的產(chǎn)品，同時(shí)即時(shí)獲得客戶的反饋訊息，以便更加深入的了解客戶的需求。本網(wǎng)站是一個(gè)美容信息發(fā)布的網(wǎng)站，愛萊美網(wǎng)站針對(duì)的客戶群是廣大女性，網(wǎng)站推介產(chǎn)品是女性面部、眼部、唇部、甲部的護(hù)膚品。從網(wǎng)站內(nèi)容來看，本網(wǎng)站包括彩妝產(chǎn)品的展示、最新彩妝的教程、以及有關(guān)彩妝方面的知識(shí)等。1.2網(wǎng)站建設(shè)需求分析企業(yè)網(wǎng)站的創(chuàng)建使企業(yè)形象的傳播和產(chǎn)品的銷售獲得了一個(gè)嶄新的平臺(tái)。首先，網(wǎng)絡(luò)媒介的全球性是促成企業(yè)投放廣告的理想通道；其次，網(wǎng)絡(luò)媒介的即時(shí)性和互動(dòng)性使企業(yè)網(wǎng)站在企業(yè)公共關(guān)系活動(dòng)中扮演著不可缺少的角色；網(wǎng)絡(luò)媒介的海量性則為企業(yè)的信息發(fā)布提供了充裕的空間；企業(yè)與潛在觀眾或投資者之間的直接通信也依靠網(wǎng)絡(luò)互動(dòng)實(shí)現(xiàn)的特點(diǎn)。綜上所述，企業(yè)網(wǎng)站無疑成為了企業(yè)形象傳播的重要平臺(tái)。推廣企業(yè)形象，建立企業(yè)網(wǎng)站宣傳企業(yè)產(chǎn)品，這種方式已經(jīng)被眾多的企業(yè)所采用，企業(yè)網(wǎng)站的重要性也日益凸顯。愛萊美作為一個(gè)信息發(fā)布型的網(wǎng)站，主要是為了提升愛萊美網(wǎng)站的知名度，同時(shí)為廣大女性提供一個(gè)了解愛萊美彩妝產(chǎn)品的平臺(tái)，在宣傳彩妝產(chǎn)品的同時(shí)為廣大女性提供最熱門彩妝教程、普及彩妝知識(shí)等。1.3網(wǎng)站整體結(jié)構(gòu)網(wǎng)站結(jié)構(gòu)是指一個(gè)網(wǎng)站中每個(gè)頁(yè)面間的層次關(guān)系。搜索引擎的友好性和用戶體驗(yàn)是網(wǎng)站結(jié)構(gòu)是否清晰的關(guān)鍵。衡量一個(gè)網(wǎng)站的結(jié)構(gòu)在于用戶體驗(yàn)的好壞之分。清晰的網(wǎng)站結(jié)構(gòu)可以幫助用戶快速獲取所需信息。以下是本站的網(wǎng)站框架結(jié)構(gòu)圖：圖1-1網(wǎng)站框架結(jié)構(gòu)圖前期準(zhǔn)備2.1素材收集整理本網(wǎng)站的素材包括有圖片、文字等。圖片素材主要通過網(wǎng)絡(luò)進(jìn)行收集，依據(jù)本網(wǎng)站主題需要進(jìn)行篩選后，借助Photoshop工具軟件做了不同的處理及修改。圖片素材從以下網(wǎng)站中收集：/、/index.html等。文字類素材則是直接通過百度搜索獲取相關(guān)資料，并進(jìn)行了必要的處理。其中的行業(yè)新聞是在相關(guān)媒體和相關(guān)的彩妝網(wǎng)站上所收集，其內(nèi)容均是彩妝行業(yè)中真實(shí)的即時(shí)新聞。2.2LOGO設(shè)計(jì)logo，是一個(gè)企業(yè)的標(biāo)志象征，而網(wǎng)站的logo就相當(dāng)于網(wǎng)站的標(biāo)志圖案，logo以其簡(jiǎn)單、明了的造型語(yǔ)言，作為一種傳遞信息和識(shí)別的視覺圖形，體現(xiàn)著品牌的特點(diǎn)和企業(yè)的形象。而Logo的作用便是表達(dá)網(wǎng)站的建設(shè)理念、以及便于人們的識(shí)別，普遍用于站點(diǎn)的鏈接、宣傳等。Logo標(biāo)志的設(shè)計(jì)關(guān)鍵在于以簡(jiǎn)單、明了的視覺藝術(shù)形象，使網(wǎng)站的形象和理念讓用戶銘記在心。本網(wǎng)站首頁(yè)的左上角就是網(wǎng)站的LOGO，為了更好的體現(xiàn)網(wǎng)站主題，在LOGO中則直接以產(chǎn)品圖案做以代表，而為了突出女性特點(diǎn)此LOGO的主要色彩選擇為粉紅色，因?yàn)榉奂t色代表女性的天性美，代表女性的優(yōu)雅和高貴的風(fēng)度，所以如下圖所示，其標(biāo)志簡(jiǎn)單明了，突出主題。圖2-1LOGO圖2.3Banner設(shè)計(jì)頁(yè)面的整體是否美觀在于Banner的設(shè)計(jì)，一個(gè)網(wǎng)頁(yè)中與主題相關(guān)、色彩鮮艷的Banner圖片，往往是吸引訪問者眼球的關(guān)鍵，因此Banner的設(shè)計(jì)在一個(gè)頁(yè)面中起著舉足輕重的作用。本網(wǎng)站首頁(yè)的Banner為突出網(wǎng)站的主題，采用的是有關(guān)彩妝產(chǎn)品宣傳的圖片，首先使用photoshop軟件進(jìn)行圖片中的文字排版以及美工，然后使用Dreamweaver軟件制作出鼠標(biāo)經(jīng)過圖像的特效形式，并且在網(wǎng)頁(yè)中顯示。其效果圖如下：圖2-2鼠標(biāo)未經(jīng)過前圖2-3鼠標(biāo)經(jīng)過后2.4首頁(yè)效果圖圖2-4首頁(yè)效果圖網(wǎng)頁(yè)設(shè)計(jì)制作3.1首頁(yè)設(shè)計(jì)制作網(wǎng)站的首頁(yè)是吸引訪問者進(jìn)一步訪問網(wǎng)站的重要頁(yè)面，在此頁(yè)面中展示網(wǎng)站的主要信息塊。網(wǎng)站首頁(yè)的內(nèi)容主要圍繞本網(wǎng)站的主題和部分重要內(nèi)容而設(shè)計(jì)，其中包括產(chǎn)品展示、推薦產(chǎn)品以及今日話題等內(nèi)容，其中產(chǎn)品展示放置在此頁(yè)面的主信息區(qū)域，讓訪問者在進(jìn)入網(wǎng)頁(yè)的第一時(shí)間了解本網(wǎng)站的主題所在。本網(wǎng)站的首頁(yè)布局為拐角型，布局圖如下：圖3-1網(wǎng)站首頁(yè)布局圖首頁(yè)包括的主要信息板塊有：導(dǎo)航欄、banner圖片、今日話題、推薦產(chǎn)品、產(chǎn)品展示、版權(quán)信息。其中導(dǎo)航條中由首頁(yè)、產(chǎn)品中心、彩妝寶典、彩妝知識(shí)、行業(yè)新聞、以及聯(lián)系我們六大欄目組成。網(wǎng)頁(yè)左側(cè)為窄列鏈接，其中包括今日話題和產(chǎn)品推薦。最下方為公司的地址、電話、傳真等版權(quán)信息。主信息區(qū)為產(chǎn)品展示，用于推介展示品牌最新產(chǎn)品、熱門產(chǎn)品信息。整體來說，本網(wǎng)站首頁(yè)排版符合用戶的閱讀習(xí)慣，頁(yè)面主次分明，結(jié)構(gòu)明朗。在色彩選擇方面，因?yàn)楸揪W(wǎng)站是一個(gè)服務(wù)于女性的一個(gè)信息發(fā)布型企業(yè)網(wǎng)站，所以依據(jù)女性特點(diǎn)采用嫣紅色和粉紅色為主題色，其余色彩則是經(jīng)過對(duì)嫣紅色和粉紅色的飽和度、透明度以及漸變效果進(jìn)行適當(dāng)調(diào)整后而生成的輔助色，如此不僅可以凸顯出網(wǎng)站的層次感而且也能使得網(wǎng)頁(yè)色彩看起來更加協(xié)調(diào)統(tǒng)一。首頁(yè)所用的圖像、文字、區(qū)分線等都以淺色為主，這樣可以使首頁(yè)更具清晰、簡(jiǎn)單、美觀大方。本網(wǎng)站在導(dǎo)航欄主要設(shè)計(jì)了以下幾個(gè)欄目，如圖3-2所示。圖3-2網(wǎng)站首頁(yè)欄目圖導(dǎo)航欄的設(shè)計(jì)首先是對(duì)圖片做以適當(dāng)?shù)奶幚恚缓筇砑由衔淖中畔?，使用css樣式為六大欄目在鼠標(biāo)點(diǎn)擊時(shí)讓字體改變顏色、出現(xiàn)下劃線的效果，最后針對(duì)各個(gè)欄目鏈接好相對(duì)應(yīng)的網(wǎng)頁(yè)。首先產(chǎn)品欄目，產(chǎn)品欄目的主要目的就是為了介紹愛萊美彩妝的各種彩妝產(chǎn)品推薦企業(yè)熱銷產(chǎn)品，引導(dǎo)消費(fèi)者購(gòu)買；彩妝寶典欄目，是為了向用戶推出讓人眼前一亮的彩妝教程；彩妝知識(shí)欄目，提供原創(chuàng)性、獨(dú)創(chuàng)性的內(nèi)容，保證所提供的信息是對(duì)客戶有幫助、有用的，以此得到瀏覽者的重視和認(rèn)可，同時(shí)樹立企業(yè)的形象；行業(yè)新聞欄目，及時(shí)提供全面地覆蓋所在行業(yè)的相關(guān)信息，以及及時(shí)發(fā)布公司最新動(dòng)態(tài)；聯(lián)系我們欄目，全面的介紹企業(yè)的的性質(zhì)、地址、網(wǎng)址、各種聯(lián)絡(luò)方式，另外提供公司所在位置的地圖。在網(wǎng)站首頁(yè)的設(shè)計(jì)當(dāng)中，為了使網(wǎng)頁(yè)更加生動(dòng)，因此使用了JS特效制作浮動(dòng)信息，如圖3-3圖3-3浮動(dòng)特效圖圖3-4js浮動(dòng)特效代碼3.2其他頁(yè)面設(shè)計(jì)制作3.2.1產(chǎn)品中心網(wǎng)頁(yè)圖3-5產(chǎn)品中心圖片產(chǎn)品中心頁(yè)面主要是采用模板進(jìn)行設(shè)計(jì)制作，首先使用potoshop軟件對(duì)使用的圖片將其美化、裁剪，通過Dreamweaver軟件結(jié)合CSS樣式進(jìn)行合理的排版和布局，之后設(shè)置產(chǎn)品頁(yè)面鏈接。為了提高頁(yè)面的整體畫面感，本網(wǎng)頁(yè)使用了JS代碼制作出浮動(dòng)信息的特效，如圖3-6圖3-6浮動(dòng)信息特效圖圖3-7浮動(dòng)信息JS代碼3.2.2彩妝知識(shí)網(wǎng)頁(yè)圖3-8彩妝知識(shí)欄目圖彩妝知識(shí)頁(yè)面主要也是采用模板進(jìn)行設(shè)計(jì)制作，在制作該頁(yè)面時(shí)首先要采集有關(guān)彩妝知識(shí)的文章，再通過編輯css樣式的對(duì)文章中的字體大小、字體顏色和文章的大體結(jié)構(gòu)進(jìn)行相應(yīng)的調(diào)整，然后對(duì)需要使用的圖片進(jìn)行裁剪、美化，最后調(diào)整好該頁(yè)面整體的布局。為了豐富網(wǎng)頁(yè)內(nèi)容，該頁(yè)面通過flash軟件制作了一個(gè)圖片輪播的特效，如下圖所示圖3-9輪播一圖3-10輪播二圖3-11輪播三愛萊美彩妝網(wǎng)站推廣4.1電子郵件推廣發(fā)送電子郵件是電子郵件推廣作為網(wǎng)站推廣的重要手段，然而電子刊物、會(huì)員通訊、專業(yè)服務(wù)商等電子郵件廣告是電子郵件推廣的常用方法，最大的優(yōu)勢(shì)在于可以以最低的成本覆蓋更多的目標(biāo)客戶，實(shí)現(xiàn)對(duì)產(chǎn)品的促銷推廣，挖掘出更多的銷售商機(jī)，加強(qiáng)對(duì)客戶的關(guān)懷等營(yíng)銷目標(biāo)，輔助用戶增加潛在客戶定位的準(zhǔn)確度、鞏固與客戶的關(guān)系、同時(shí)提高品牌的忠誠(chéng)度。愛萊美網(wǎng)站之所以選擇電子郵件做推廣,是因?yàn)殡娮余]件推廣覆蓋的范圍廣，隨著國(guó)際互聯(lián)網(wǎng)的迅猛發(fā)展，中國(guó)的上網(wǎng)總?cè)藬?shù)以達(dá)數(shù)千萬之眾，全球已經(jīng)超過13億。面臨如此龐大的用戶群，Email營(yíng)銷這種傳統(tǒng)廣告宣傳的手段也日益受到人們的重視。在擁有足夠多Email地址的前提下，就能夠在最短的時(shí)間內(nèi)向全世界的目標(biāo)用戶發(fā)布廣告信息.電子郵件推廣的郵件編寫的內(nèi)容主要是采取軟文的方式，然后在郵件放置愛萊美的產(chǎn)品圖片，圖片鏈接到愛萊美彩妝網(wǎng)站即可，結(jié)合愛萊美網(wǎng)站實(shí)際情況，具體實(shí)施如下:圖4-1內(nèi)容編輯圖片4.2微博推廣微博是微博推廣的重要推廣平臺(tái)，在微博中每個(gè)聽眾都屬于潛在客戶，企業(yè)可以利用對(duì)微型博客的更新從而向網(wǎng)友傳播企業(yè)文化和企業(yè)相關(guān)產(chǎn)品的信息，樹立良好的企業(yè)形象和產(chǎn)品形象。每天即時(shí)更新內(nèi)容，編輯比較熱門或大家感興趣的話題，以此來吸引聽眾，促進(jìn)交流，微博的營(yíng)銷目的就在于此。愛萊美網(wǎng)站選用微博作為推廣主要是因?yàn)槲⒉┛梢砸晕淖帧D片、視頻的展現(xiàn)形式對(duì)產(chǎn)品進(jìn)行描述，以這樣的展現(xiàn)形式就可以讓潛在客戶更形象直接的接受信息。微博推廣最顯著的特征就是高效的傳播速度，微博強(qiáng)大的傳播能力可以使一條關(guān)注度較高的微博在互聯(lián)網(wǎng)發(fā)出后以最短的時(shí)間互動(dòng)性轉(zhuǎn)發(fā)并且可以在微博里出現(xiàn)刷屏的跡象。而且微博推廣相對(duì)于傳統(tǒng)推廣來說更占優(yōu)勢(shì)，微博在無需審批的情況下，也節(jié)約了大量時(shí)間和成本。圖4-2微博推廣4.3論壇推廣論壇推廣作為一種營(yíng)銷手段，主要是利用論壇這種可以進(jìn)行網(wǎng)絡(luò)交流的平臺(tái)，通過文字內(nèi)容、圖片以及相關(guān)視頻等方式發(fā)布企業(yè)的產(chǎn)品和服務(wù)的信息，這是讓目標(biāo)客戶更加深入的了解企業(yè)的產(chǎn)品和服務(wù)的最佳方式。從而達(dá)到品牌的宣傳以及加深市場(chǎng)認(rèn)知度的網(wǎng)絡(luò)營(yíng)銷活動(dòng)。通過論壇的超高人氣特點(diǎn)，從而能夠有效的為愛美萊網(wǎng)站提供營(yíng)銷傳播服務(wù)。在論壇中因?yàn)檎搲掝}的開放性，所以企業(yè)所有的營(yíng)銷訴求幾乎都可以通過論壇的傳播獲得有效的實(shí)現(xiàn)，其次論壇中的活動(dòng)也具有非常強(qiáng)大的聚眾能力，調(diào)動(dòng)網(wǎng)友與品牌之間的互動(dòng)，可以利用論壇作為平臺(tái)舉辦各類踩樓、灌水、帖圖、視頻等活動(dòng)，。論壇推廣選擇在搜狐論壇上的彩妝欄目上發(fā)布推廣信息，因?yàn)檫@樣會(huì)吸引更多相關(guān)的訪問者，實(shí)施如圖所示：圖4-3論壇推廣4.4微信推廣微信推廣作為網(wǎng)絡(luò)經(jīng)濟(jì)時(shí)代企業(yè)創(chuàng)新的營(yíng)銷模式，這是一種伴隨著微信的火熱而興起的網(wǎng)絡(luò)營(yíng)銷方式。微信在一對(duì)一的互動(dòng)交流方式下具有良好的互動(dòng)性，在可以形成一種朋友關(guān)系的同時(shí)更能精準(zhǔn)推送信息。微信營(yíng)銷擁有立體化、高速度、便捷性、廣泛性的特質(zhì)及高到達(dá)率、高曝光率、高接受率、高精準(zhǔn)度、高便利性的優(yōu)勢(shì)。針對(duì)微信營(yíng)銷的諸多優(yōu)勢(shì)，本網(wǎng)站通過在朋友圈發(fā)帖的方式實(shí)施了微信營(yíng)銷。圖4-4微信推廣總結(jié)實(shí)踐是檢驗(yàn)真理的唯一標(biāo)準(zhǔn)，當(dāng)然也是檢驗(yàn)學(xué)習(xí)成果的標(biāo)準(zhǔn)，在歐陽(yáng)紅巍老師的指導(dǎo)和鼓勵(lì)下我完成了愛萊美彩妝網(wǎng)站的設(shè)計(jì)，本次畢業(yè)設(shè)計(jì)的順利如期完成給了我很大的信心，通過這次畢業(yè)設(shè)計(jì)讓我加深了許多前面學(xué)過的課程，也因此有了更為深刻的理解，最重要的是讓我學(xué)到了很多以前沒學(xué)到的知識(shí)，畢業(yè)設(shè)計(jì)也算是我對(duì)這三年所學(xué)知識(shí)的一個(gè)綜合的體現(xiàn)。在這次設(shè)計(jì)中讓我感觸最深的是體會(huì)到了理論知識(shí)結(jié)合實(shí)踐的重要性。隨著網(wǎng)絡(luò)科技的不斷發(fā)展和網(wǎng)絡(luò)的廣泛應(yīng)用，使我們的生活離不開它了。因?yàn)樵谶@次畢業(yè)設(shè)計(jì)中利用網(wǎng)絡(luò)獨(dú)特的特點(diǎn)，在對(duì)相關(guān)資料的收集時(shí)，網(wǎng)絡(luò)確實(shí)給了我莫大的幫助。21世紀(jì)隨著彩妝類型的不斷增加和彩妝產(chǎn)品的不斷更新，要想方便快速的了解一個(gè)企業(yè)品牌的某種彩妝產(chǎn)品，在這樣的情況下有一個(gè)企業(yè)的官方網(wǎng)站是有其必然性的，如果能做出一個(gè)完善的企業(yè)網(wǎng)站系統(tǒng)就可以很好的做到產(chǎn)品的推薦以及