《網(wǎng)站前臺設(shè)計綜合實訓(xùn)》項目四 體育健身類網(wǎng)站的設(shè)計與制作

項目四

體育健身類網(wǎng)站的設(shè)計與制作網(wǎng)站前臺設(shè)計項目實戰(zhàn)體育健身類網(wǎng)站綜合描述

良好的經(jīng)濟(jì)秩序、厚重的歷史文化背景、龐大的人口資源為健身產(chǎn)業(yè)蘊(yùn)育了肥沃土壤。面對大好的商機(jī)，健身俱樂部、健身會館鱗此櫛比，但是現(xiàn)在很多健身俱樂部、健身會館將服務(wù)只定位在健身項目上，大大縮小了服務(wù)的外延空間。體育健身類網(wǎng)站的引導(dǎo)應(yīng)該是很多方面的，應(yīng)該利用網(wǎng)絡(luò)這個平臺開展多種形式的活動，這個平臺經(jīng)營的項目，包括市場推廣、會員服務(wù)、俱樂部政策的制訂等等，這會比單獨的提供健身項目的效果要好的多。體育健身類網(wǎng)站與體育類網(wǎng)站還是有很大區(qū)別的，要考慮商業(yè)回報。對于一個具有商業(yè)性質(zhì)的健身俱樂部、健身會館等，建立自己的網(wǎng)站，其目的就是要將它們的新聞、公告、健身項目和服務(wù)理念等欄目信息顯示在主頁上，能夠讓訪問者進(jìn)入網(wǎng)站就能對健身俱樂部的基本情況、健身項目和服務(wù)質(zhì)量等一目了然。因此說網(wǎng)絡(luò)營銷應(yīng)該成為大多數(shù)體育健身類網(wǎng)站建設(shè)的方向。體育健身類網(wǎng)站還可以適時地發(fā)布會員優(yōu)惠等信息，為健身愛好者提供最佳服務(wù)；也可以利用網(wǎng)絡(luò)的交互功能與客戶交流；利用在線報名系統(tǒng)接受健身愛好者的網(wǎng)上報名；利用在線調(diào)查引擎調(diào)查客戶的需求和喜好；利用留言板接納客戶的意見等。項目制作流程前期準(zhǔn)備中期網(wǎng)站制作網(wǎng)站修改完善任務(wù)一“體育健身網(wǎng)”效果圖制作任務(wù)二橫幅廣告制作任務(wù)三網(wǎng)站搭建過程前期準(zhǔn)備

一、客戶需求分析

客戶需求，是指客戶創(chuàng)建本網(wǎng)站的目的和對網(wǎng)站建設(shè)提出的特定要求。了解客戶需求，是建好舒美特健身俱樂部網(wǎng)站的前提。一般來講，體育健身類網(wǎng)站借助互聯(lián)網(wǎng)，可以開展信息交流、會員服務(wù)等，這不僅增加了人們對體育健身知識的了解，同時也大大提高全民體育健身意識。客戶對其擬建的舒美特健身俱樂部網(wǎng)站提出的主要要求有：1．宣傳體育健身常識、體育健身項目等，增強(qiáng)全民健身意識，促進(jìn)健身市場的規(guī)范化、專業(yè)化，立足打造最為專業(yè)、時尚、項目最全的健身中心。2．適時地發(fā)布最新健身課程、會員優(yōu)惠等信息，為健身愛好者提供最佳服務(wù)。3．開設(shè)專家訪談欄目，為體育健身愛好者提供一個專業(yè)性很強(qiáng)的信息交流的平臺。4．網(wǎng)站上要設(shè)有論壇欄目，用戶可以對健身課程、健身環(huán)境等進(jìn)行評論，也可以說說自己健身后的感受，這對網(wǎng)站的改進(jìn)和更新很有幫助。

前期準(zhǔn)備

二、網(wǎng)站風(fēng)格定位

網(wǎng)站風(fēng)格是指網(wǎng)站的整體形象給瀏覽者的綜合感受。這個“整體形象”包括站點的CI（標(biāo)志、色彩、字體、標(biāo)語）、版面布局、瀏覽方式、交互性、文字、內(nèi)容價值等等諸多元素，只有這些元素搭配得體，才能達(dá)到完美的網(wǎng)站風(fēng)格設(shè)計。下面就以體育健身類網(wǎng)站---舒美特健身俱樂部網(wǎng)站為例，從三個主要方面來談一談該網(wǎng)站的風(fēng)格定位。1．色彩在網(wǎng)頁設(shè)計中，色彩永遠(yuǎn)是最重要的一個環(huán)節(jié)。網(wǎng)站的色彩是瀏覽者整體的視覺觀感，若一個網(wǎng)站色彩能有一致性，不僅會使網(wǎng)站看起來美觀，更能讓瀏覽者對內(nèi)容不易混淆，增加了瀏覽的簡潔與方便。而網(wǎng)站的色彩更能襯托出網(wǎng)站的主題，若色彩能與主題合理搭配，將會增加瀏覽者的易讀性。舒美特健身俱樂部網(wǎng)站選定主色調(diào)為天藍(lán)色，因為天藍(lán)色是最具涼爽，清新，專業(yè)的色彩，很適合于體育健身類網(wǎng)站。頁面的整體色彩是通過調(diào)整主色調(diào)的飽和度和透明度，產(chǎn)生不同視覺效果的藍(lán)色，這樣的頁面看起來色彩統(tǒng)一，有層次感。網(wǎng)站中除了采用天藍(lán)色系外，還和對比色橙色搭配，使該網(wǎng)站在專業(yè)的基礎(chǔ)上又多了幾分時尚。再恰當(dāng)?shù)嘏渖宵c黃色，使該網(wǎng)站又增添幾分寧靜、詳和。前期準(zhǔn)備

二、網(wǎng)站風(fēng)格定位2．排版網(wǎng)頁可以說是網(wǎng)站構(gòu)成的基本元素。當(dāng)我們輕點鼠標(biāo)，在網(wǎng)海中遨游，一副副精彩的網(wǎng)頁會呈現(xiàn)在我們面前，那么，網(wǎng)頁的精彩與否的因素是什么呢？色彩的搭配、文字的變化、圖片的處理等，這些當(dāng)然是不可忽略的因素，除了這些，還有一個非常重要的因素——網(wǎng)頁的頁面排版。舒美特健身網(wǎng)站采用的是“國”字型（也可以稱為“同”字型）排版形式，即最上面是網(wǎng)站的站標(biāo)以及橫幅廣告條，接下來就是網(wǎng)站的主要內(nèi)容，左右分列兩小條內(nèi)容，中間是主要部分，與左右一起羅列到底，最下面是網(wǎng)站的一些基本信息、聯(lián)系方式、版權(quán)聲明等。這種版式的優(yōu)點是頁面結(jié)構(gòu)清晰，主次分明，信息量大，但弱點是規(guī)矩呆板，針對這個弱點，該網(wǎng)站在細(xì)節(jié)上做了一些處理，例如在頁面中每個欄目的造型設(shè)計都各有千秋，顏色搭配也別具一格，使整個網(wǎng)頁顯得非常時尚，沒有一點呆板的痕跡。3．特效網(wǎng)頁特效就是讓網(wǎng)頁看起來生動活潑的各種應(yīng)用，如：Flash、Javascript、Javaapplets、VBScript等等。在本網(wǎng)站中有兩種動畫效果：一是采用ImageReady軟件制作了網(wǎng)站橫幅廣告條；二是利用行為制作的圖像交換效果。前期準(zhǔn)備

三、網(wǎng)站建設(shè)方案

體育健身類網(wǎng)站的建設(shè)中，前期準(zhǔn)備工作是至關(guān)重要的，要有明確的做網(wǎng)站的根本目的。舒美特健身俱樂部網(wǎng)站通過對健身常識、體育健身項目等信息的宣傳，不但增強(qiáng)全民健身意識，而且也促進(jìn)健身市場的規(guī)范化、專業(yè)化；由于健身俱樂部也作為一個商業(yè)機(jī)構(gòu)，涉及到報名、課程訓(xùn)練、餐飲服務(wù)等等，因而網(wǎng)站做得好，不但可以大大提高服務(wù)的水平和俱樂部的營業(yè)額，同時也對體育健身事業(yè)的發(fā)展起到積極的促進(jìn)作用。為了充分發(fā)揮體育健身網(wǎng)站的作用，就需要對網(wǎng)站的內(nèi)容進(jìn)行系統(tǒng)地規(guī)劃。

1．頁面風(fēng)格創(chuàng)意設(shè)計：該網(wǎng)站頁面顏色初步擬定采用天藍(lán)色為主色調(diào)，在此色調(diào)的基礎(chǔ)上對天藍(lán)色系中的不同顏色進(jìn)行有機(jī)搭配，同時還適當(dāng)?shù)剌o以橙色。通過這些顏色的運用不但能很好地突出本網(wǎng)站要傳達(dá)的涼爽、清新、專業(yè)等元素，而且也給該網(wǎng)站增添了幾分時尚。

為了使頁面排版不落俗套，該網(wǎng)站雖然采用了大眾化的“國”字型排版形式，但在版面的造型設(shè)計上采用了別具一格的欄目造型設(shè)計，該創(chuàng)意設(shè)計使網(wǎng)頁看上去更具時尚感。

2．網(wǎng)站欄目劃分：根據(jù)我們對用戶的了解，特建立以下欄目?！窬銟凡扛艣r●會員服務(wù)●健身圖片●健身環(huán)境●綜合信息●報名熱線●專家訪談●健身常識●健身項目●健身論壇前期準(zhǔn)備三、網(wǎng)站建設(shè)方案

3．網(wǎng)站建設(shè)拓?fù)鋱D俱樂部簡介經(jīng)營理念會員登錄服務(wù)宗旨網(wǎng)站首頁健身圖片俱樂部概況報名熱線健身項目健身環(huán)境會員服務(wù)健身論壇健身常識專家訪談綜合信息課程介紹設(shè)施環(huán)境會員登錄教練介紹前期準(zhǔn)備四、網(wǎng)站設(shè)計方案報價明細(xì)：靜態(tài)頁面設(shè)計報價明細(xì)：工作項目項目要求頁數(shù)單價(元)合計(元)首頁1XXXXXX子頁部分采用動態(tài)網(wǎng)頁不限XXXXXXBanner設(shè)計類型為*.swf的flash動畫格式NXXXXXXLogo設(shè)計類型為*.jpg的圖片格式NXXXXXX總計XXX服務(wù)器空間、域名價格明細(xì)：項目名稱功能要求個數(shù)單價(元)合計(元)國際域名英文國際域名（*.com）1XXXXXX企業(yè)郵局300M獨立郵局空間，最多可分50個用戶。--XXXXXX合計XXX以上報價總計為：XXX前期準(zhǔn)備五、網(wǎng)站效果圖中期網(wǎng)站制作——任務(wù)一“體育健身網(wǎng)”網(wǎng)站效果圖步驟一網(wǎng)站首頁效果圖的制作一、網(wǎng)站Logo和導(dǎo)航的制作

依據(jù)網(wǎng)站風(fēng)格定位及欄目設(shè)置要求，首頁效果圖圖像文件規(guī)格設(shè)置為，寬度830像素，高度1100像素，分辨率300像素/英寸。中期網(wǎng)站制作——任務(wù)一“體育健身網(wǎng)”網(wǎng)站效果圖二、會員登陸欄目、健身環(huán)境欄目、報名熱線和專家訪談欄目的制作

中期網(wǎng)站制作——任務(wù)一“體育健身網(wǎng)”網(wǎng)站效果圖三、俱樂部新聞欄目、運動技巧欄目和健身項目欄目的制作

中期網(wǎng)站制作——任務(wù)一“體育健身網(wǎng)”網(wǎng)站效果圖四、健身常識欄目、健身測試欄目的制作

中期網(wǎng)站制作——任務(wù)一“體育健身網(wǎng)”網(wǎng)站效果圖五、網(wǎng)站首頁底部版權(quán)部分的制作

中期網(wǎng)站制作——任務(wù)一“體育健身網(wǎng)”網(wǎng)站效果圖步驟二網(wǎng)站子頁“健身環(huán)境”效果圖的制作

依據(jù)網(wǎng)站風(fēng)格定位及欄目設(shè)置要求，子頁“健身環(huán)境”效果圖圖像文件規(guī)格設(shè)置為，寬度830像素，高度1100像素，分辨率300像素/英寸。

網(wǎng)站子頁的制作方法與首頁類似，學(xué)習(xí)者自己去體驗制作，你一定會發(fā)現(xiàn)其實很容易的！中期網(wǎng)站制作——任務(wù)一“體育健身網(wǎng)”網(wǎng)站效果圖步驟三網(wǎng)站子頁“俱樂部概況”效果圖的制作 依據(jù)網(wǎng)站風(fēng)格定位及欄目設(shè)置要求，子頁“俱樂部概況”效果圖圖像文件規(guī)格設(shè)置為，寬度830像素，高度1100像素，分辨率300像素/英寸。 網(wǎng)站子頁的制作方法與首頁類似，學(xué)習(xí)者自己去體驗制作，你一定會發(fā)現(xiàn)其實很容易的！中期網(wǎng)站制作——任務(wù)二橫幅廣告制作

AdobeImageReady作為一個獨立的動畫編輯軟件，具備Photoshop中常用的圖像編輯功能，同時ImageReady更提供包含了大量網(wǎng)頁和動畫的設(shè)計制作工具，功能強(qiáng)大也非常實用。本網(wǎng)站的banner就是由Photoshop和ImageReady共同表現(xiàn)完成的。中期網(wǎng)站制作——任務(wù)三

網(wǎng)站搭建過程 通過和客戶的多次溝通后，確定下來了本網(wǎng)站的設(shè)計效果圖。利用Photoshop切片工具，將效果圖進(jìn)行切片輸出。切出的圖片作為網(wǎng)站的圖片素材。步驟一網(wǎng)站首頁制作

一、logo和導(dǎo)航欄的制作中期網(wǎng)站制作——任務(wù)三

網(wǎng)站搭建過程 二、主體部分制作中期網(wǎng)站制作——任務(wù)三

網(wǎng)站搭建過程

三、制作網(wǎng)站版權(quán)信息 通常在網(wǎng)頁的最下方設(shè)置網(wǎng)站的版權(quán)信息和聯(lián)系方式等內(nèi)容中期網(wǎng)站制作——任務(wù)三

網(wǎng)站搭建過程 步驟二網(wǎng)站子頁的制作 本站的子頁在形