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

網(wǎng)站前臺設(shè)計(jì)綜合實(shí)訓(xùn)項(xiàng)目四體育健身類網(wǎng)站的設(shè)計(jì)與制作教學(xué)內(nèi)容客戶需求分析網(wǎng)站風(fēng)格定位網(wǎng)站建設(shè)方案網(wǎng)站設(shè)計(jì)方案報價明細(xì)任務(wù)一制作利民健身網(wǎng)站效果圖任務(wù)二制作利民健身網(wǎng)站的橫幅廣告動畫任務(wù)三利民健身網(wǎng)站的搭建征求客戶意見，修改完善項(xiàng)目實(shí)訓(xùn)項(xiàng)目小結(jié)項(xiàng)目四體育健身類網(wǎng)站的設(shè)計(jì)與制作一、客戶需求分析項(xiàng)目四體育健身類網(wǎng)站的設(shè)計(jì)與制作

通過對健身資訊服務(wù)網(wǎng)站建站目的及客戶對網(wǎng)站的特殊要求，擬定本網(wǎng)站具有如下功能：

（1）宣傳體育健身常識、體育健身項(xiàng)目等，增強(qiáng)全民健身意識，促進(jìn)健身市場的規(guī)范化、專業(yè)化，立足打造最為專業(yè)、時尚、項(xiàng)目最全的健身中心。（2）適時地發(fā)布最新健身課程、健身快訊等信息，為健身愛好者提供最佳服務(wù)。（3）開設(shè)健身問答欄目，為體育健身愛好者提供一個專業(yè)性很強(qiáng)的信息交流平臺。（4）網(wǎng)站上要設(shè)有論壇欄目，用戶可以對健身知識、健身方式等進(jìn)行評論，也可以說說自己健身后的感受，這對網(wǎng)站的改進(jìn)和更新很有幫助。二、網(wǎng)站風(fēng)格定位項(xiàng)目四體育健身類網(wǎng)站的設(shè)計(jì)與制作1．色彩利民健身網(wǎng)站選定主色調(diào)為天藍(lán)色，因?yà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(diǎn)蠟筆黃橙色，使該網(wǎng)站又增添幾分寧靜、詳和。二、網(wǎng)站風(fēng)格定位項(xiàng)目四體育健身類網(wǎng)站的設(shè)計(jì)與制作2．排版利民健身網(wǎng)站采用的是“T”字型排版形式，即指頁面頂部為橫條網(wǎng)站標(biāo)志+廣告條，下方左面為主菜單，右面顯示內(nèi)容的布局，因?yàn)椴藛螚l背景較深，整體效果類似英文字母"T",所以我們稱之為"T"形布局。這是網(wǎng)頁設(shè)計(jì)中常用的一種布局方式。該網(wǎng)站最上面是網(wǎng)站的站標(biāo)以及橫幅廣告條，接下來就是網(wǎng)站的主要內(nèi)容，左面為幾個主要欄目，右面顯示該頁主要內(nèi)容。左右一起羅列到底，最下面是網(wǎng)站的一些基本信息、聯(lián)系方式、版權(quán)聲明等。這種版式的優(yōu)點(diǎn)是頁面結(jié)構(gòu)清晰，主次分明，信息量大。弱點(diǎn)是規(guī)矩呆板，如果細(xì)節(jié)色彩上不注意，很容易讓人"看之無味"。針對這個弱點(diǎn)，該網(wǎng)站在細(xì)節(jié)上做了一些處理，例如在頁面中每個欄目的造型設(shè)計(jì)都各有千秋，顏色搭配也別具一格，使整個網(wǎng)頁顯得非常時尚，沒有一點(diǎn)呆板的痕跡。二、網(wǎng)站風(fēng)格定位項(xiàng)目四體育健身類網(wǎng)站的設(shè)計(jì)與制作3．特效本項(xiàng)目在網(wǎng)站廣告條部分利用ImageReady制作了橫幅廣告動畫效果；在健身新聞集粹欄目中設(shè)置了滾動字幕效果，使整個頁面動靜結(jié)合，視覺清晰。三、網(wǎng)站建設(shè)方案項(xiàng)目四體育健身類網(wǎng)站的設(shè)計(jì)與制作1．頁面風(fēng)格創(chuàng)意設(shè)計(jì)該網(wǎng)站頁面顏色初步擬定采用天藍(lán)色為主色調(diào)，在此色調(diào)的基礎(chǔ)上對天藍(lán)色系中的不同顏色進(jìn)行有機(jī)搭配，同時還適當(dāng)?shù)剌o以橙色。通過這些顏色的運(yùn)用不但能很好地突出本網(wǎng)站要傳達(dá)的涼爽、清新、專業(yè)等元素，而且也給該網(wǎng)站增添了幾分時尚。為了使頁面排版不落俗套，該網(wǎng)站雖然采用了大眾化的“T”字形排版形式，但在版面的造型設(shè)計(jì)上采用了別具一格的欄目造型設(shè)計(jì)，該創(chuàng)意設(shè)計(jì)使網(wǎng)頁看上去更具時尚感。三、網(wǎng)站建設(shè)方案項(xiàng)目四體育健身類網(wǎng)站的設(shè)計(jì)與制作2．網(wǎng)站欄目劃分根據(jù)我們對健身資訊服務(wù)網(wǎng)站的了解及客戶的特殊要求，建立了以下欄目?！窠∩沓ＷR●健身運(yùn)動

●運(yùn)動項(xiàng)目●健身快訊

●健身論壇●健身知識

●健身課程●健身圖片

●健身新聞●健身時刻

●健身問答●健身分類知識三、網(wǎng)站建設(shè)方案項(xiàng)目四體育健身類網(wǎng)站的設(shè)計(jì)與制作3．網(wǎng)站欄目內(nèi)容簡介4．網(wǎng)站建設(shè)拓?fù)鋱D四、網(wǎng)站設(shè)計(jì)方案報價明細(xì)五、任務(wù)一制作利民健身網(wǎng)站效果圖利民健身網(wǎng)站包含了健身新聞集粹、健身運(yùn)動、健身常識、健身知識、健身課程、健身圖片、健身快訊、健身問答等內(nèi)容，在設(shè)計(jì)上選用涼爽、清新、時尚的風(fēng)格，頁面布局上也盡量不落俗套，采用了別具一格的欄目造型，顏色設(shè)置上更突出了該類網(wǎng)站的特點(diǎn)。五、任務(wù)一制作利民健身網(wǎng)站效果圖項(xiàng)目四體育健身類網(wǎng)站的設(shè)計(jì)與制作步驟一網(wǎng)站首頁效果圖的制作五、任務(wù)一制作利民健身網(wǎng)站效果圖項(xiàng)目四體育健身類網(wǎng)站的設(shè)計(jì)與制作步驟一網(wǎng)站首頁效果圖的制作依據(jù)網(wǎng)站風(fēng)格定位及客戶欄目設(shè)置要求，首頁效果圖圖像文件規(guī)格設(shè)置為，寬度952像素，高度1290像素，分辨率300像素/英寸。1．網(wǎng)站Logo和Banner的制作2．導(dǎo)航欄的制作五、任務(wù)一制作利民健身網(wǎng)站效果圖項(xiàng)目四體育健身類網(wǎng)站的設(shè)計(jì)與制作步驟一網(wǎng)站首頁效果圖的制作3．健身新聞集粹、健身知識和健身課程欄目的制作五、任務(wù)一制作利民健身網(wǎng)站效果圖項(xiàng)目四體育健身類網(wǎng)站的設(shè)計(jì)與制作步驟一網(wǎng)站首頁效果圖的制作4．健身運(yùn)動欄目的制作五、任務(wù)一制作利民健身網(wǎng)站效果圖項(xiàng)目四體育健身類網(wǎng)站的設(shè)計(jì)與制作步驟一網(wǎng)站首頁效果圖的制作5．健身常識和健身圖片欄目的制作五、任務(wù)一制作利民健身網(wǎng)站效果圖項(xiàng)目四體育健身類網(wǎng)站的設(shè)計(jì)與制作步驟一網(wǎng)站首頁效果圖的制作6．版權(quán)部分的制作五、任務(wù)一制作利民健身網(wǎng)站效果圖項(xiàng)目四體育健身類網(wǎng)站的設(shè)計(jì)與制作步驟二網(wǎng)站子頁“健身運(yùn)動”效果圖的制作五、任務(wù)一制作利民健身網(wǎng)站效果圖項(xiàng)目四體育健身類網(wǎng)站的設(shè)計(jì)與制作步驟二網(wǎng)站子頁“健身運(yùn)動”效果圖的制作依據(jù)網(wǎng)站風(fēng)格定位及客戶欄目設(shè)置要求，子頁“健身運(yùn)動”效果圖圖像文件規(guī)格設(shè)置為，寬度952像素，高度1290像素，分辨率300像素/英寸。該子頁的框架與首頁基本相同，子頁各個欄目制作用到的知識首頁中均已介紹過，故這里不再進(jìn)行詳細(xì)闡述。五、任務(wù)一制作利民健身網(wǎng)站效果圖項(xiàng)目四體育健身類網(wǎng)站的設(shè)計(jì)與制作步驟三網(wǎng)站子頁“運(yùn)動項(xiàng)目”效果圖的制作五、任務(wù)一制作利民健身網(wǎng)站效果圖項(xiàng)目四體育健身類網(wǎng)站的設(shè)計(jì)與制作步驟三網(wǎng)站子頁“運(yùn)動項(xiàng)目”效果圖的制作依據(jù)網(wǎng)站風(fēng)格定位及客戶欄目設(shè)置要求，子頁“運(yùn)動項(xiàng)目”效果圖圖像文件規(guī)格設(shè)置為，寬度為952像素，高度為1290像素，分辨率為300像素/英寸。該子頁的框架與首頁基本相同，子頁各個欄目制作用到的知識首頁中均已介紹過，故這里不再進(jìn)行詳細(xì)闡述。六、任務(wù)二橫幅廣告的制作項(xiàng)目四體育健身類網(wǎng)站的設(shè)計(jì)與制作本網(wǎng)站的橫幅廣告是網(wǎng)站的Banner部分。這部分動畫的背景色選取了網(wǎng)站的主色調(diào)藍(lán)色，給人一種清新的感覺；素材主要選取了體育健身類圖片，圖片中人物健美的身姿，再配上過渡自然、流暢的動態(tài)效果，使整個網(wǎng)頁看上去動靜結(jié)合，一點(diǎn)都不呆板，可以使瀏覽者長時間駐留其間，達(dá)到了體育健身的宣傳作用。六、任務(wù)二橫幅廣告的制作項(xiàng)目四體育健身類網(wǎng)站的設(shè)計(jì)與制作·網(wǎng)站banner部分動畫制作

1.素材準(zhǔn)備依據(jù)網(wǎng)站風(fēng)格定位及客戶要求，文件的大小設(shè)置為，寬度952像素，高度156像素，分辨率為300像素/英寸。六、任務(wù)二橫幅廣告的制作項(xiàng)目四體育健身類網(wǎng)站的設(shè)計(jì)與制作·網(wǎng)站banner部分動畫制作

1.素材準(zhǔn)備制作的部分文字素材和圖像素材六、任務(wù)二橫幅廣告的制作項(xiàng)目四體育健身類網(wǎng)站的設(shè)計(jì)與制作·網(wǎng)站banner部分動畫制作

2.動畫制作（部分效果）七、任務(wù)三網(wǎng)站搭建過程項(xiàng)目四體育健身類網(wǎng)站的設(shè)計(jì)與制作網(wǎng)站搭建是項(xiàng)目建設(shè)的最后一個環(huán)節(jié)，是依據(jù)網(wǎng)站效果圖，把網(wǎng)站用網(wǎng)頁編輯工具搭建成形，以便于網(wǎng)上瀏覽。

進(jìn)行網(wǎng)站搭建時，首先要利用Photoshop切片工具，將效果圖進(jìn)行切片輸出。切出的圖片作為網(wǎng)站的圖片素材。七、任務(wù)三網(wǎng)站搭建過程項(xiàng)目四體育健身類網(wǎng)站的設(shè)計(jì)與制作步驟一網(wǎng)站首頁的制作1.創(chuàng)建站點(diǎn)2.創(chuàng)建主頁文件3.創(chuàng)建CSS樣式4.制作Logo、Banner和導(dǎo)航欄5.制作健身集粹欄目并利用腳本制作滾動字幕效果6.制作健身知識欄目7.制作健身課程欄目8.制作健身運(yùn)動欄目七、任務(wù)三網(wǎng)站搭建過程項(xiàng)目四體育健身類網(wǎng)站的設(shè)計(jì)與制作步驟一網(wǎng)站首頁的制作9.制作健身常識欄目10.制作健身圖片欄目11.

制作版權(quán)說明欄目12.

網(wǎng)站中文本鏈接樣式的設(shè)置13.

網(wǎng)頁對齊方式設(shè)置七、任務(wù)三網(wǎng)站搭建過程項(xiàng)目四體育健身類網(wǎng)站的設(shè)計(jì)與制作步驟二

網(wǎng)站子頁的制作本網(wǎng)站的子頁在形式上套用了主頁的結(jié)構(gòu)，使之在風(fēng)格上與主頁完全統(tǒng)一。頁面特點(diǎn)：（1）通過表格的嵌套、單元格的拆分與合并來進(jìn)行網(wǎng)頁元素的布局；（2）欄目背景圖片的制作。步驟三鏈接主頁與子頁對主頁與各子頁之間進(jìn)行鏈接，并使鏈接暢通。八、征求客戶意見，修改完善項(xiàng)目四體育健身類網(wǎng)站的設(shè)計(jì)與制作對制作完成的利民健身網(wǎng)站進(jìn)行調(diào)試發(fā)布，在廣泛征集客戶意見的基礎(chǔ)上，盡可能地按照客戶的要求進(jìn)行配套修改與更新，使得網(wǎng)站進(jìn)一步完善，達(dá)到制作網(wǎng)站的目的。九、項(xiàng)目實(shí)訓(xùn)