《網(wǎng)站前臺設計綜合實訓》課件-項目三 旅游休閑類網(wǎng)站的設計與制作

網(wǎng)站前臺設計綜合實訓項目二旅游休閑類網(wǎng)站的設計與制作教學內(nèi)容客戶需求分析網(wǎng)站風格定位網(wǎng)站建設方案網(wǎng)站設計方案報價明細任務一制作云南旅游網(wǎng)站效果圖任務二制作云南旅游網(wǎng)站的橫幅廣告動畫任務三云南旅游網(wǎng)站的搭建征求客戶意見，修改完善項目實訓項目小結(jié)項目三旅游休閑類網(wǎng)站的設計與制作一、客戶需求分析項目三旅游休閑類網(wǎng)站的設計與制作

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

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

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

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

1.素材準備制作背景圖片六、任務二橫幅廣告的制作項目三旅游休閑類網(wǎng)站的設計與制作·網(wǎng)站banner部分動畫制作

1.素材準備制作的部分文字素材和圖像素材六、任務二橫幅廣告的制作項目三旅游休閑類網(wǎng)站的設計與制作·網(wǎng)站banner部分動畫制作

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

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

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