《網(wǎng)站前臺(tái)設(shè)計(jì)綜合實(shí)訓(xùn)》課件-項(xiàng)目五 政府機(jī)關(guān)類網(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)目五政府機(jī)關(guān)類網(wǎng)站的設(shè)計(jì)與制作一、客戶需求分析項(xiàng)目五政府機(jī)關(guān)類網(wǎng)站的設(shè)計(jì)與制作

根據(jù)對(duì)政府門戶網(wǎng)站的主要功能的分析，以用戶為中心的政府門戶網(wǎng)站主體應(yīng)該主要由信息服務(wù)、互動(dòng)服務(wù)和在線服務(wù)三大核心部分組成。（1）信息服務(wù)要實(shí)現(xiàn)政務(wù)信息透明化公開化；（2）互動(dòng)服務(wù)要建立起政府與市民溝通的有效渠道；（3）在線服務(wù)要始終貫徹以用戶為中心的思想。二、網(wǎng)站風(fēng)格定位項(xiàng)目五政府機(jī)關(guān)類網(wǎng)站的設(shè)計(jì)與制作政府門戶網(wǎng)站作為政府面向社會(huì)的窗口，代表著政府形象，所以，頁(yè)面風(fēng)格應(yīng)當(dāng)莊重大方、簡(jiǎn)潔美觀。政府網(wǎng)站的設(shè)計(jì)必須要突出政府網(wǎng)站功能定位，欄目框架脈絡(luò)清晰，頁(yè)面設(shè)計(jì)要盡可能照顧不同用戶的使用習(xí)慣。同時(shí)，政府網(wǎng)站應(yīng)當(dāng)提供完善的輔助功能，幫助用戶便捷地獲取信息和服務(wù)。對(duì)于本項(xiàng)目江寧市人民政府網(wǎng)站，主要從以下三個(gè)方面來(lái)學(xué)習(xí)網(wǎng)站的風(fēng)格定位。二、網(wǎng)站風(fēng)格定位項(xiàng)目五政府機(jī)關(guān)類網(wǎng)站的設(shè)計(jì)與制作1．色彩：紅色是中國(guó)文化中的基本崇尚色，它體現(xiàn)了中國(guó)人在精神和物質(zhì)上的追求，象征著吉祥、喜慶。橙色是愉悅的顏色，被稱之為“愉悅之橙”，它是充滿力量，是生機(jī)勃勃的顏色，它表現(xiàn)出喜悅和溫暖等積極的情感的同時(shí)，也是舒適的顏色。而紅橙色是一種濃厚而不透明的色彩，好像充滿內(nèi)在溫暖而閃閃發(fā)光，它象征著富有生氣的大地。本項(xiàng)目選定紅、橙兩色為主色調(diào)，通過使用紅色與橙色的漸變，使整個(gè)頁(yè)面色彩統(tǒng)一，富有層次感。不同深淺的紅色、橙色的配合，也使頁(yè)面色彩產(chǎn)生對(duì)比與平衡，避免產(chǎn)生單調(diào)感。二、網(wǎng)站風(fēng)格定位項(xiàng)目五政府機(jī)關(guān)類網(wǎng)站的設(shè)計(jì)與制作2．排版根據(jù)政府網(wǎng)站要承載大信息量的特點(diǎn)，以主頁(yè)為例本項(xiàng)目采用了左中右結(jié)構(gòu)的門戶類網(wǎng)站的排版布局。左邊與右邊設(shè)置的是便民欄目，體現(xiàn)了用戶為中心的建站思想；中間大面積為內(nèi)容主區(qū)域，為使網(wǎng)站整體脈絡(luò)清晰，中間部分使用一個(gè)Flash動(dòng)畫進(jìn)行分隔，將熱點(diǎn)關(guān)注的內(nèi)容顯示其中；同類欄目采用選項(xiàng)卡式打開方式，大大增加了網(wǎng)站的信息量。這樣總體設(shè)計(jì)感覺簡(jiǎn)潔、清新、大氣而富于時(shí)代感，既能展現(xiàn)江寧市的嶄新形象，表現(xiàn)其現(xiàn)代化發(fā)展，又能體現(xiàn)江寧市政府是踏踏實(shí)實(shí)為人民辦事的政府，充分體現(xiàn)出政府門戶網(wǎng)站應(yīng)有的特色。二、網(wǎng)站風(fēng)格定位項(xiàng)目五政府機(jī)關(guān)類網(wǎng)站的設(shè)計(jì)與制作3．特效本項(xiàng)目運(yùn)用Flash軟件，在廣告條部分添加了簡(jiǎn)單的動(dòng)畫；在城市新貌欄目，選擇了幾張城市特色圖片制作了圖片切換效果，動(dòng)畫在整個(gè)網(wǎng)站中起到了更好地宣傳政府形象，突出關(guān)注熱點(diǎn)的作用。三、網(wǎng)站建設(shè)方案項(xiàng)目五政府機(jī)關(guān)類網(wǎng)站的設(shè)計(jì)與制作1．頁(yè)面風(fēng)格創(chuàng)意設(shè)計(jì)項(xiàng)目網(wǎng)站頁(yè)面風(fēng)格顏色初步擬定采用紅、橙兩色為基礎(chǔ)色，在此色調(diào)的基礎(chǔ)上進(jìn)行顏色漸變的展開，通過顏色的對(duì)比、過渡、平衡的巧妙運(yùn)用，達(dá)到將江寧市政府網(wǎng)站建設(shè)得富有生機(jī)、簡(jiǎn)潔美觀的目的。三、網(wǎng)站建設(shè)方案項(xiàng)目五政府機(jī)關(guān)類網(wǎng)站的設(shè)計(jì)與制作2．網(wǎng)站欄目劃分根據(jù)我們對(duì)用戶的了解，特建立以下欄目。

江寧概況

公告公示

互動(dòng)交流

政策解讀

政府公文

文化執(zhí)法

統(tǒng)計(jì)分析

熱點(diǎn)專題

動(dòng)態(tài)信息

今日江寧

社會(huì)公益

政務(wù)公開

規(guī)范性文件

質(zhì)量報(bào)告

公共財(cái)政

民意調(diào)查

政府工作

動(dòng)態(tài)信息

江寧旅游

辦事向?qū)?/p>

干部任免

警情提示

工商執(zhí)法

一周訪問排行

辦事服務(wù)

權(quán)威發(fā)布

江寧風(fēng)貌

便民服務(wù)

新聞發(fā)布

曝光臺(tái)

藥監(jiān)稽查

相關(guān)鏈接三、網(wǎng)站建設(shè)方案項(xiàng)目五政府機(jī)關(guān)類網(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)站，它包含了江寧概況、動(dòng)態(tài)信息、政府工作、辦事服務(wù)、互動(dòng)交流、社會(huì)公益等諸多欄目，體現(xiàn)了政府網(wǎng)站的信息容量大，服務(wù)于民的主導(dǎo)思想。五、任務(wù)一制作江寧市人民政府網(wǎng)站效果圖項(xiàng)目五政府機(jī)關(guān)類網(wǎng)站的設(shè)計(jì)與制作步驟一網(wǎng)站首頁(yè)效果圖的制作五、任務(wù)一制作江寧市人民政府網(wǎng)站效果圖項(xiàng)目五政府機(jī)關(guān)類網(wǎng)站的設(shè)計(jì)與制作步驟一網(wǎng)站首頁(yè)效果圖的制作依據(jù)網(wǎng)站風(fēng)格定位及客戶欄目設(shè)置要求，首頁(yè)效果圖圖像文件規(guī)格設(shè)置為，寬度1010像素，高度1360像素，分辨率72像素/英寸。1．網(wǎng)站Logo、Banner和導(dǎo)航欄的制作2．江寧風(fēng)貌欄目的制作3．公告公示欄目的制作五、任務(wù)一制作江寧市人民政府網(wǎng)站效果圖項(xiàng)目五政府機(jī)關(guān)類網(wǎng)站的設(shè)計(jì)與制作步驟一網(wǎng)站首頁(yè)效果圖的制作4．今日江寧欄目的制作5．動(dòng)態(tài)信息欄目的制作

五、任務(wù)一制作江寧市人民政府網(wǎng)站效果圖項(xiàng)目五政府機(jī)關(guān)類網(wǎng)站的設(shè)計(jì)與制作步驟一網(wǎng)站首頁(yè)效果圖的制作4．權(quán)威發(fā)布欄目的制作5．政策解讀欄目的制作

五、任務(wù)一制作江寧市人民政府網(wǎng)站效果圖項(xiàng)目五政府機(jī)關(guān)類網(wǎng)站的設(shè)計(jì)與制作步驟一網(wǎng)站首頁(yè)效果圖的制作6．網(wǎng)站中上部廣告條的制作

五、任務(wù)一制作江寧市人民政府網(wǎng)站效果圖項(xiàng)目五政府機(jī)關(guān)類網(wǎng)站的設(shè)計(jì)與制作步驟一網(wǎng)站首頁(yè)效果圖的制作7．辦事向?qū)c便民服務(wù)欄目的制作

五、任務(wù)一制作江寧市人民政府網(wǎng)站效果圖項(xiàng)目五政府機(jī)關(guān)類網(wǎng)站的設(shè)計(jì)與制作步驟一網(wǎng)站首頁(yè)效果圖的制作8．政府公文→公共財(cái)政欄目的制作

五、任務(wù)一制作江寧市人民政府網(wǎng)站效果圖項(xiàng)目五政府機(jī)關(guān)類網(wǎng)站的設(shè)計(jì)與制作步驟一網(wǎng)站首頁(yè)效果圖的制作9．工商執(zhí)法→曝光臺(tái)欄目的制作

五、任務(wù)一制作江寧市人民政府網(wǎng)站效果圖項(xiàng)目五政府機(jī)關(guān)類網(wǎng)站的設(shè)計(jì)與制作步驟一網(wǎng)站首頁(yè)效果圖的制作10．相關(guān)鏈接欄目的制作

五、任務(wù)一制作江寧市人民政府網(wǎng)站效果圖項(xiàng)目五政府機(jī)關(guān)類網(wǎng)站的設(shè)計(jì)與制作步驟一網(wǎng)站首頁(yè)效果圖的制作11．右側(cè)頂部欄目的制作12

．政務(wù)公開欄目的制作五、任務(wù)一制作江寧市人民政府網(wǎng)站效果圖項(xiàng)目五政府機(jī)關(guān)類網(wǎng)站的設(shè)計(jì)與制作步驟一網(wǎng)站首頁(yè)效果圖的制作13．熱點(diǎn)專題欄目的制作14

．一周訪問排行欄目的制作五、任務(wù)一制作江寧市人民政府網(wǎng)站效果圖項(xiàng)目五政府機(jī)關(guān)類網(wǎng)站的設(shè)計(jì)與制作步驟一網(wǎng)站首頁(yè)效果圖的制作15．民意調(diào)查欄目的制作五、任務(wù)一制作江寧市人民政府網(wǎng)站效果圖項(xiàng)目五政府機(jī)關(guān)類網(wǎng)站的設(shè)計(jì)與制作步驟一網(wǎng)站首頁(yè)效果圖的制作16．底部導(dǎo)航及版權(quán)欄目的制作五、任務(wù)一制作江寧市人民政府網(wǎng)站效果圖項(xiàng)目五政府機(jī)關(guān)類網(wǎng)站的設(shè)計(jì)與制作步驟二網(wǎng)站子頁(yè)“互動(dòng)交流”效果圖的制作五、任務(wù)一制作江寧市人民政府網(wǎng)站效果圖項(xiàng)目五政府機(jī)關(guān)類網(wǎng)站的設(shè)計(jì)與制作步驟二網(wǎng)站子頁(yè)“互動(dòng)交流”效果圖的制作依據(jù)網(wǎng)站風(fēng)格定位及客戶欄目設(shè)置要求，子頁(yè)“互動(dòng)交流”效果圖圖像文件規(guī)格設(shè)置為，寬度1010像素，高度1360像素，分辨率72像素/英寸。說(shuō)明：子頁(yè)“互動(dòng)交流”的部分框架與首頁(yè)是相同的，這里與首頁(yè)框架相同的部分不再贅述，下面我們一起來(lái)學(xué)習(xí)子頁(yè)與首頁(yè)不同部分的制作方法。五、任務(wù)一制作江寧市人民政府網(wǎng)站效果圖項(xiàng)目五政府機(jī)關(guān)類網(wǎng)站的設(shè)計(jì)與制作步驟二網(wǎng)站子頁(yè)“互動(dòng)交流”效果圖的制作1．法規(guī)征求意見欄目的制作五、任務(wù)一制作江寧市人民政府網(wǎng)站效果圖項(xiàng)目五政府機(jī)關(guān)類網(wǎng)站的設(shè)計(jì)與制作步驟二網(wǎng)站子頁(yè)“互動(dòng)交流”效果圖的制作2．公務(wù)郵箱入口欄目的制作五、任務(wù)一制作江寧市人民政府網(wǎng)站效果圖項(xiàng)目五政府機(jī)關(guān)類網(wǎng)站的設(shè)計(jì)與制作步驟二網(wǎng)站子頁(yè)“互動(dòng)交流”效果圖的制作3．市長(zhǎng)信箱回音與部門區(qū)縣信箱回音欄目的制作五、任務(wù)一制作江寧市人民政府網(wǎng)站效果圖項(xiàng)目五政府機(jī)關(guān)類網(wǎng)站的設(shè)計(jì)與制作步驟三網(wǎng)站子頁(yè)“社會(huì)公益”效果圖的制作五、任務(wù)一制作江寧市人民政府網(wǎng)站效果圖項(xiàng)目五政府機(jī)關(guān)類網(wǎng)站的設(shè)計(jì)與制作步驟三網(wǎng)站子頁(yè)“社會(huì)公益”效果圖的制作依據(jù)網(wǎng)站風(fēng)格定位及客戶欄目設(shè)置要求，子頁(yè)“社會(huì)公益”效果圖圖像文件規(guī)格設(shè)置為，寬度1010像素，高度1030像素，分辨率72像素/英寸。說(shuō)明：子頁(yè)“社會(huì)公益”的框架與子頁(yè)“互動(dòng)交流”基本相同，這里不再贅述。六、任務(wù)二Flash橫幅廣告的制作項(xiàng)目五政府機(jī)關(guān)類網(wǎng)站的設(shè)計(jì)與制作本網(wǎng)站的Flash橫幅廣告主要包括兩個(gè)部分。一是網(wǎng)站的logo和banner部分，主要以展示城市建設(shè)成果，城市良好的投資條件，城市良好的人文、居住環(huán)境等為主。二是網(wǎng)站中間部分的橫幅廣告，主要突出展示政府當(dāng)前重點(diǎn)工作及需要民眾關(guān)注的熱點(diǎn)問題為主。六、任務(wù)二Flash橫幅廣告的制作項(xiàng)目五政府機(jī)關(guān)類網(wǎng)站的設(shè)計(jì)與制作·網(wǎng)站的logo和banner部分Flash橫幅廣告的制作

1.素材準(zhǔn)備依據(jù)網(wǎng)站風(fēng)格定位及客戶要求，F(xiàn)lash影片文件的大小設(shè)置為，寬度1010像素，高度163像素，頻率12幀/秒。六、任務(wù)二Flash橫幅廣告的制作項(xiàng)目五政府機(jī)關(guān)類網(wǎng)站的設(shè)計(jì)與制作·網(wǎng)站的logo和banner部分Flash橫幅廣告的制作

1.素材準(zhǔn)備場(chǎng)景背景素材站標(biāo)素材六、任務(wù)二Flash橫幅廣告的制作項(xiàng)目五政府機(jī)關(guān)類網(wǎng)站的設(shè)計(jì)與制作·網(wǎng)站的logo和banner部分Flash橫幅廣告的制作

1.素材準(zhǔn)備站標(biāo)圖片素材六、任務(wù)二Flash橫幅廣告的制作項(xiàng)目五政府機(jī)關(guān)類網(wǎng)站的設(shè)計(jì)與制作·網(wǎng)站的logo和banner部分Flash橫幅廣告的制作

1.素材準(zhǔn)備圖片素材圖片素材六、任務(wù)二Flash橫幅廣告的制作項(xiàng)目五政府機(jī)關(guān)類網(wǎng)站的設(shè)計(jì)與制作·網(wǎng)站的logo和banner部分Flash橫幅廣告的制作

2.動(dòng)畫制作（部分效果）六、任務(wù)二Flash橫幅廣告的制作項(xiàng)目五政府機(jī)關(guān)類網(wǎng)站的設(shè)計(jì)與制作·網(wǎng)站中間部分Flash橫幅廣告的制作

1.素材準(zhǔn)備六、任務(wù)二Flash橫幅廣告的制作項(xiàng)目五政府機(jī)關(guān)類網(wǎng)站的設(shè)計(jì)與制作·網(wǎng)站中間部分Flash橫幅廣告的制作

2.動(dòng)畫制作（部分效果）七、任務(wù)三網(wǎng)站搭建過程項(xiàng)目五政府機(jī)關(guān)類網(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)站搭建過程項(xiàng)目五政府機(jī)關(guān)類網(wǎng)站的設(shè)計(jì)與制作步驟一網(wǎng)站首頁(yè)的制作1.創(chuàng)建站點(diǎn)2.創(chuàng)建主頁(yè)文件3.制作頂部的Banner部分4.制作導(dǎo)航欄及搜索欄5.制作江寧風(fēng)貌欄目6.制作今日江寧欄目7.制作公告公示欄目8.制作權(quán)威發(fā)布欄目9.添加中上部Flash廣告條七、任務(wù)三網(wǎng)站搭建過程項(xiàng)目五政府機(jī)關(guān)類網(wǎng)站的設(shè)計(jì)與制作步驟一網(wǎng)站首頁(yè)的制作10.制作辦事向?qū)c便民服務(wù)欄目11.制作政府公文和公共財(cái)政欄目12.制作相關(guān)鏈接欄目13.制作底部導(dǎo)航及版權(quán)欄目14.制作右側(cè)頂部欄目15.制作政務(wù)公開欄目16.分導(dǎo)航及各欄目文字添加鏈接七、任務(wù)三網(wǎng)站搭建過程項(xiàng)目五政府機(jī)關(guān)類網(wǎng)站的設(shè)計(jì)與制作步驟二

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