《網(wǎng)站前臺(tái)設(shè)計(jì)綜合實(shí)訓(xùn)》課件-項(xiàng)目三 旅游休閑類網(wǎng)站的設(shè)計(jì)與制作

網(wǎng)站前臺(tái)設(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ì)方案報(bào)價(jià)明細(xì)任務(wù)一制作云南旅游網(wǎng)站效果圖任務(wù)二制作云南旅游網(wǎng)站的橫幅廣告動(dòng)畫任務(wù)三云南旅游網(wǎng)站的搭建征求客戶意見，修改完善項(xiàng)目實(shí)訓(xùn)項(xiàng)目小結(jié)項(xiàng)目三旅游休閑類網(wǎng)站的設(shè)計(jì)與制作一、客戶需求分析項(xiàng)目三旅游休閑類網(wǎng)站的設(shè)計(jì)與制作

通過(guò)對(duì)旅游服務(wù)類網(wǎng)站建站目的及客戶對(duì)網(wǎng)站的特殊要求，擬定本網(wǎng)站具有如下功能：

（1）宣傳云南省的錦秀景區(qū)、民俗風(fēng)情、云南美食等，提高云南省旅游業(yè)在國(guó)內(nèi)外的知名度。（2）適時(shí)發(fā)布云南精品旅游線路、灑店推薦等信息，為旅游者提供最佳服務(wù)。（3）在網(wǎng)上適時(shí)發(fā)布旅游游記，通過(guò)真實(shí)的旅游者的體會(huì)，吸引國(guó)內(nèi)外的旅游者，為云南省旅游業(yè)的發(fā)展做出一份微薄之力。（4）網(wǎng)站上要設(shè)有聯(lián)系我們等欄目或子頁(yè)，用戶可以對(duì)旅游線路等進(jìn)行評(píng)論，也可以說(shuō)說(shuō)自己旅游的感受，這對(duì)網(wǎng)站的改進(jìn)和更新很有幫助。二、網(wǎng)站風(fēng)格定位項(xiàng)目三旅游休閑類網(wǎng)站的設(shè)計(jì)與制作1．色彩云南旅游網(wǎng)站選定主色調(diào)為綠色和淺藍(lán)色，綠色所傳遞的是清爽、理想、希望和生長(zhǎng)的意象，較符合旅游服務(wù)業(yè)。綠色與人類息息相關(guān)，是自然之色，代表了生命與希望，也充滿了青春與活力。綠色在黃色和藍(lán)色之間，屬于較中庸的顏色，是和平色，偏向自然美，寧?kù)o、生機(jī)勃勃、寬容，可與多種顏色搭配而達(dá)到和諧的效果。淺藍(lán)色具有淡雅、清新、浪漫和高貴的特性，它也是最具涼爽、清新特征的色彩。網(wǎng)站中采用淺藍(lán)色和綠色、白色的搭配使頁(yè)面看起來(lái)非常干凈清澈，能體現(xiàn)出柔順淡雅和浪漫的氣氛。使人可以長(zhǎng)時(shí)間駐留其間，也不會(huì)覺得疲勞。二、網(wǎng)站風(fēng)格定位項(xiàng)目三旅游休閑類網(wǎng)站的設(shè)計(jì)與制作2．排版云南旅游網(wǎng)站采用的是“T”字型排版形式，這是網(wǎng)頁(yè)設(shè)計(jì)中常用的一種布局方式。該網(wǎng)站最上面是網(wǎng)站的站標(biāo)以及橫幅廣告條，接下來(lái)就是網(wǎng)站的主要內(nèi)容，右面為幾個(gè)主要欄目，左面顯示該頁(yè)主要內(nèi)容。左右一起羅列到底，最下面是網(wǎng)站的一些基本信息、聯(lián)系方式、版權(quán)聲明等。這種版式的優(yōu)點(diǎn)是頁(yè)面結(jié)構(gòu)清晰，主次分明，信息量大。弱點(diǎn)是規(guī)矩呆板，如果細(xì)節(jié)色彩上不注意，很容易讓人"看之無(wú)味"。針對(duì)這個(gè)弱點(diǎn)，該網(wǎng)站在細(xì)節(jié)上做了一些處理，例如頁(yè)面欄目的造型設(shè)計(jì)別具一格，并在欄目中適當(dāng)?shù)靥砑恿藙?dòng)畫效果，使整個(gè)頁(yè)面顯得更加生動(dòng)、活潑。二、網(wǎng)站風(fēng)格定位項(xiàng)目三旅游休閑類網(wǎng)站的設(shè)計(jì)與制作3．特效本項(xiàng)目在網(wǎng)站廣告條部分利用ImageReady制作了橫幅廣告動(dòng)畫效果；在近期特價(jià)線路欄目中設(shè)置了多張圖片自動(dòng)交換效果，使整個(gè)頁(yè)面動(dòng)靜結(jié)合，視覺清晰。三、網(wǎng)站建設(shè)方案項(xiàng)目三旅游休閑類網(wǎng)站的設(shè)計(jì)與制作1．頁(yè)面風(fēng)格創(chuàng)意設(shè)計(jì)該網(wǎng)站頁(yè)面顏色初步擬定采用綠色和藍(lán)色為主色調(diào)，在此色調(diào)的基礎(chǔ)上對(duì)綠色系和藍(lán)色系中的不同顏色進(jìn)行有機(jī)搭配，同時(shí)還適當(dāng)?shù)剌o以紅橙色，使網(wǎng)站產(chǎn)生一種優(yōu)雅，舒適的氣氛。同時(shí)，該網(wǎng)站在欄目的造型設(shè)計(jì)上采用了別具一格的造型，該創(chuàng)意設(shè)計(jì)使網(wǎng)頁(yè)看上去更加生動(dòng)、活潑。三、網(wǎng)站建設(shè)方案項(xiàng)目三旅游休閑類網(wǎng)站的設(shè)計(jì)與制作2．網(wǎng)站欄目劃分

根據(jù)我們對(duì)旅游服務(wù)類網(wǎng)站的了解及客戶的特殊要求，建立了以下欄目?！褡哌M(jìn)云南●云南風(fēng)情●景點(diǎn)大全●旅游游記●旅游快訊●旅游須知●昆明一地●地理概況●云南美食●聯(lián)系我們●精品圖庫(kù)●機(jī)票查詢●近期特價(jià)線路●各種旅游線路●旅游常識(shí)●知名旅游企業(yè)●云南氣候●友情鏈接●特價(jià)機(jī)票推薦●出游工具三、網(wǎng)站建設(shè)方案項(xiàng)目三旅游休閑類網(wǎng)站的設(shè)計(jì)與制作3．網(wǎng)站欄目?jī)?nèi)容簡(jiǎn)介4．網(wǎng)站建設(shè)拓?fù)鋱D四、網(wǎng)站設(shè)計(jì)方案報(bào)價(jià)明細(xì)五、任務(wù)一制作云南旅游網(wǎng)站效果圖云南旅游網(wǎng)站包含了走進(jìn)云南、云南風(fēng)情、景點(diǎn)大全、旅游游記、旅游快訊、旅游須知、昆明一地、地理概況、云南美食等內(nèi)容，在設(shè)計(jì)上選用優(yōu)雅、舒適的風(fēng)格，頁(yè)面布局上也盡量不落俗套，采用了別具一格的欄目造型，顏色設(shè)置上更突出了該類網(wǎng)站的特點(diǎn)。五、任務(wù)一制作云南旅游網(wǎng)網(wǎng)站效果圖項(xiàng)目三旅游休閑類網(wǎng)站的設(shè)計(jì)與制作步驟一網(wǎng)站首頁(yè)效果圖的制作五、任務(wù)一制作云南旅游網(wǎng)網(wǎng)站效果圖項(xiàng)目三旅游休閑類網(wǎng)站的設(shè)計(jì)與制作步驟一網(wǎng)站首頁(yè)效果圖的制作依據(jù)網(wǎng)站風(fēng)格定位及客戶欄目設(shè)置要求，首頁(yè)效果圖圖像文件規(guī)格設(shè)置為，寬度1009像素，高度1575像素，分辨率300像素/英寸。1．網(wǎng)站Logo和Banner的制作2．導(dǎo)航欄的制作五、任務(wù)一制作云南旅游網(wǎng)網(wǎng)站效果圖項(xiàng)目三旅游休閑類網(wǎng)站的設(shè)計(jì)與制作步驟一網(wǎng)站首頁(yè)效果圖的制作3．近期特價(jià)線路欄目的制作4.各種旅游線路欄目的制作五、任務(wù)一制作云南旅游網(wǎng)網(wǎng)站效果圖項(xiàng)目三旅游休閑類網(wǎng)站的設(shè)計(jì)與制作步驟一網(wǎng)站首頁(yè)效果圖的制作5．云南風(fēng)情欄目和知名旅游企業(yè)欄目的制作五、任務(wù)一制作云南旅游網(wǎng)網(wǎng)站效果圖項(xiàng)目三旅游休閑類網(wǎng)站的設(shè)計(jì)與制作步驟一網(wǎng)站首頁(yè)效果圖的制作6．云南氣候欄目的制作7.版權(quán)部分的制作五、任務(wù)一制作云南旅游網(wǎng)網(wǎng)站效果圖項(xiàng)目三旅游休閑類網(wǎng)站的設(shè)計(jì)與制作步驟二網(wǎng)站子頁(yè)“景點(diǎn)大全”效果圖的制作五、任務(wù)一制作云南旅游網(wǎng)網(wǎng)站效果圖項(xiàng)目三旅游休閑類網(wǎng)站的設(shè)計(jì)與制作步驟二網(wǎng)站子頁(yè)“景點(diǎn)大全”效果圖的制作依據(jù)網(wǎng)站風(fēng)格定位及客戶欄目設(shè)置要求，子頁(yè)“景點(diǎn)大全”效果圖圖像文件規(guī)格設(shè)置為，寬度1009像素，高度1573像素，分辨率300像素/英寸。該子頁(yè)的框架與首頁(yè)基本相同，子頁(yè)各個(gè)欄目制作用到的知識(shí)首頁(yè)中均已介紹過(guò)，故這里不再進(jìn)行詳細(xì)闡述。五、任務(wù)一制作云南旅游網(wǎng)網(wǎng)站效果圖項(xiàng)目三旅游休閑類網(wǎng)站的設(shè)計(jì)與制作步驟三網(wǎng)站子頁(yè)“云南美食”效果圖的制作五、任務(wù)一制作云南旅游網(wǎng)網(wǎng)站效果圖項(xiàng)目三旅游休閑類網(wǎng)站的設(shè)計(jì)與制作步驟三網(wǎng)站子頁(yè)“云南美食”效果圖的制作依據(jù)網(wǎng)站風(fēng)格定位及客戶欄目設(shè)置要求，子頁(yè)“云南美食”效果圖圖像文件規(guī)格設(shè)置為，寬度為1009像素，高度為1575像素，分辨率為300像素/英寸。該子頁(yè)的框架與首頁(yè)基本相同，子頁(yè)各個(gè)欄目制作用到的知識(shí)首頁(yè)中均已介紹過(guò)，故這里不再進(jìn)行詳細(xì)闡述。六、任務(wù)二橫幅廣告的制作項(xiàng)目三旅游休閑類網(wǎng)站的設(shè)計(jì)與制作本網(wǎng)站的橫幅廣告是網(wǎng)站的Banner部分。這部分動(dòng)畫的素材主要選取了云南著名的旅游景點(diǎn)，這么美的風(fēng)景再配上過(guò)渡自然、流暢的動(dòng)態(tài)效果，其目的主要是為了吸引瀏覽者的眼球，使其有興趣長(zhǎng)時(shí)間駐留其間，從而達(dá)到旅游宣傳的作用。六、任務(wù)二橫幅廣告的制作項(xiàng)目三旅游休閑類網(wǎng)站的設(shè)計(jì)與制作·網(wǎng)站banner部分動(dòng)畫制作

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

1.素材準(zhǔn)備制作背景圖片六、任務(wù)二橫幅廣告的制作項(xiàng)目三旅游休閑類網(wǎng)站的設(shè)計(jì)與制作·網(wǎng)站banner部分動(dòng)畫制作

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

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

進(jìn)行網(wǎng)站搭建時(shí)，首先要利用Photoshop切片工具，將效果圖進(jìn)行切片輸出。切出的圖片作為網(wǎng)站的圖片素材。七、任務(wù)三網(wǎng)站搭建過(guò)程項(xiàng)目三旅游休閑類網(wǎng)站的設(shè)計(jì)與制作步驟一網(wǎng)站首頁(yè)的制作1.創(chuàng)建站點(diǎn)2.創(chuàng)建主頁(yè)文件3.創(chuàng)建CSS樣式4.制作Logo、Banner和導(dǎo)航欄5.制作近期特價(jià)線路欄目并利用腳本制作動(dòng)畫效果6.制作各種旅游線路欄目7.制作云南風(fēng)情欄目8.制作知名旅游企業(yè)欄目七、任務(wù)三網(wǎng)站搭建過(guò)程項(xiàng)目三旅游休閑類網(wǎng)站的設(shè)計(jì)與制作步驟一網(wǎng)站首頁(yè)的制作9.制作云南氣候欄目10.制作友情鏈接、特價(jià)機(jī)票推薦和出游工具欄目11.制作旅游常識(shí)欄目12.制作版權(quán)說(shuō)明欄目13.網(wǎng)站中文本鏈接樣式的設(shè)置14.網(wǎng)頁(yè)對(duì)齊方式設(shè)置七、任務(wù)三網(wǎng)站搭建過(guò)程項(xiàng)目三旅游休閑類網(wǎng)站的設(shè)計(jì)與制作步驟二

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