項(xiàng)目一 教育類網(wǎng)站的設(shè)計(jì)與制作

本項(xiàng)目以教育類網(wǎng)站中的校園網(wǎng)站為范例，系統(tǒng)介紹撫州職業(yè)技術(shù)學(xué)校網(wǎng)站設(shè)計(jì)制作的基本方法和工作過(guò)程。

任務(wù)引入

老師：同學(xué)們平時(shí)瀏覽過(guò)與教育相關(guān)的網(wǎng)站嗎？

學(xué)生：瀏覽過(guò)校園網(wǎng)站。

老師：現(xiàn)在可以進(jìn)行教育類網(wǎng)站的設(shè)計(jì)制作嗎？

學(xué)生：當(dāng)然可以，工作流程是怎樣的呢？

老師：按這個(gè)工作流程去做吧。

任務(wù)實(shí)施

一、客戶需求分析

客戶需求，是指學(xué)校創(chuàng)建門戶網(wǎng)站的目的和對(duì)網(wǎng)站提出的特定要求。了解客戶需求，是建好學(xué)校門戶網(wǎng)站的前提。一般來(lái)講，校園網(wǎng)站應(yīng)比普通的互聯(lián)網(wǎng)信息平臺(tái)更有針對(duì)性、更具校園特色，并易于查詢和使用，更能滿足學(xué)校與外界溝通交流的需求。撫州職業(yè)技術(shù)學(xué)校對(duì)其擬建的門戶網(wǎng)站提出的主要要求有以下幾點(diǎn)。

（1）宣傳學(xué)校辦學(xué)理念，展示辦學(xué)設(shè)施、教師隊(duì)伍、專業(yè)設(shè)置、就業(yè)情況，提高學(xué)校的社會(huì)知名度；

（2）適時(shí)發(fā)布學(xué)校管理、教學(xué)、招生等相關(guān)信息，為求學(xué)者提供相關(guān)咨詢服務(wù)；

（3）獲取社會(huì)各界對(duì)學(xué)校教育教學(xué)情況的評(píng)價(jià)和意見、建議；

（4）建立與兄弟院校進(jìn)行交流學(xué)習(xí)的平臺(tái)；

（5）向社會(huì)各界推薦畢業(yè)生，為畢業(yè)生提供就業(yè)信息。

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

校園網(wǎng)站就是學(xué)校的網(wǎng)上形象，每一所學(xué)校都有自己的特色，每一個(gè)院系或班級(jí)都會(huì)有自己的強(qiáng)項(xiàng)。憑借百花齊放的院系（班級(jí)）網(wǎng)站群，學(xué)校門戶網(wǎng)站就可成為一道獨(dú)特的校園風(fēng)景線。網(wǎng)頁(yè)的風(fēng)格不是某個(gè)設(shè)計(jì)項(xiàng)目相同，網(wǎng)站就有整體感，而是要各個(gè)設(shè)計(jì)項(xiàng)目的配合應(yīng)用，才能達(dá)到完美的網(wǎng)站風(fēng)格設(shè)計(jì)。對(duì)于本項(xiàng)目介紹的校園網(wǎng)站以撫州職業(yè)技術(shù)學(xué)校為例，從以下三個(gè)方面來(lái)學(xué)習(xí)該網(wǎng)站的風(fēng)格定位。

1.色彩

色彩永遠(yuǎn)是網(wǎng)頁(yè)設(shè)計(jì)中最重要的一環(huán)。色彩對(duì)人的視覺效果非常明顯，一個(gè)網(wǎng)站設(shè)計(jì)成功與否，在某種程度上取決于設(shè)計(jì)者對(duì)色彩的運(yùn)用和搭配。

本項(xiàng)目中采用一種色彩，先選定主色調(diào)為橙色，這是令人激奮的色彩，具有明亮、健康、熱烈、溫暖、歡樂、輝煌、莊嚴(yán)，以及尊貴的色感，然后通過(guò)調(diào)整透明度或者飽和度，就是色彩進(jìn)行變淡、加深或漸變的處理，產(chǎn)生新的橙色的近似色彩，使網(wǎng)頁(yè)看起來(lái)色彩統(tǒng)一，富有層次感。

在頁(yè)面中借助淺灰色的背景圖像，采用了留白藝術(shù)給人一個(gè)遐想的空間，讓人感覺心情舒適、暢快。同時(shí)，也對(duì)于協(xié)調(diào)頁(yè)面的均衡起到相當(dāng)大的作用。

2.排版

在掌握了網(wǎng)頁(yè)制作技術(shù)的情況下，都渴望將自己的網(wǎng)頁(yè)制作得更具創(chuàng)意和美感。

本項(xiàng)目就是采用骨骼型排版形式，網(wǎng)頁(yè)版式的骨骼型是一種規(guī)范的、理性的分割方法，類似于報(bào)刊的版式。常見的骨骼有豎向通欄、雙欄、三欄、四欄和橫向的通欄、雙欄、三欄和四欄等。一般以豎向分欄為多。這種版式給人以和諧、理性的美。幾種分欄方式結(jié)合使用，既理性、條理，又活潑而富有彈性。

3.特效

網(wǎng)頁(yè)中的特效運(yùn)用適當(dāng)，會(huì)給網(wǎng)頁(yè)帶來(lái)畫龍點(diǎn)睛的效果。本項(xiàng)目中的動(dòng)畫效果處理得比較好，動(dòng)感適度。

在本網(wǎng)站中有兩種動(dòng)畫效果：一是采用Flash軟件制作了網(wǎng)站的廣告；二是采用Java Script腳本制作了滾動(dòng)圖片。

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

校園網(wǎng)站的建設(shè)中，前期準(zhǔn)備工作是至關(guān)重要的，要有明確的做網(wǎng)站的根本目的。校園網(wǎng)站是學(xué)校對(duì)外宣傳、交流，進(jìn)行形象展示的一個(gè)窗口和平臺(tái)。應(yīng)及時(shí)傳播學(xué)校黨委和校長(zhǎng)室的聲音；堅(jiān)持為教育教學(xué)中心服務(wù)，為學(xué)生的學(xué)習(xí)和生活服務(wù)，營(yíng)造良好的人文環(huán)境，推動(dòng)學(xué)校精神文明活動(dòng)的開展；堅(jiān)持以正確的輿論引導(dǎo)師生，努力發(fā)展積極向上、催人奮進(jìn)的校園文化，唱響主旋律；創(chuàng)新內(nèi)容、創(chuàng)新形式、創(chuàng)新手段，努力提高辦網(wǎng)質(zhì)量和水平。為了充分發(fā)揮校園網(wǎng)站的作用，就需要對(duì)網(wǎng)站的內(nèi)容進(jìn)行系統(tǒng)的規(guī)劃。

1.頁(yè)面風(fēng)格創(chuàng)意設(shè)計(jì)

網(wǎng)站的頁(yè)面顏色初步擬定采用橙色為基礎(chǔ)色，在此色調(diào)的基礎(chǔ)上進(jìn)行顏色漸變的展開，通過(guò)色彩的運(yùn)用突出本網(wǎng)站要傳達(dá)的求知、務(wù)實(shí)、健康、熱烈、莊嚴(yán)等元素，使網(wǎng)站收到良好的創(chuàng)意效果。

2.網(wǎng)站欄目劃分

根據(jù)我們對(duì)用戶的了解，特建立以下欄目。

● 學(xué)校概況

● 給我留言

● 專業(yè)設(shè)置

● 視頻新聞

● 新聞中心

● 校園快訊

● 教學(xué)管理

● 校園文化

● 多彩校園

● 專業(yè)簡(jiǎn)介

● 職教動(dòng)態(tài)

● 知識(shí)小寶庫(kù)

● 校報(bào)校刊

● 校園生活

● 學(xué)生工作

● 學(xué)生風(fēng)采

3.網(wǎng)站欄目?jī)?nèi)容簡(jiǎn)介

（1）學(xué)校概況

介紹了撫州職業(yè)技術(shù)學(xué)校的由來(lái)、歷史、師資隊(duì)伍、教學(xué)設(shè)施、辦學(xué)目標(biāo)、辦學(xué)思路及取得的突出業(yè)績(jī)，使瀏覽者對(duì)其有一個(gè)大概的了解。

（2）專業(yè)設(shè)置

本欄目中介紹了撫州職業(yè)技術(shù)學(xué)校的專業(yè)設(shè)置，及各專業(yè)特點(diǎn)和發(fā)展前景。

（3）新聞中心

該欄目具體放置熱點(diǎn)新聞、校園新聞、教育新聞、體育新聞等時(shí)事新聞，使瀏覽者在本網(wǎng)站中即可隨時(shí)了解到各類新聞內(nèi)容。

（4）教學(xué)管理

該欄目具體介紹學(xué)校的課程設(shè)置、教師隊(duì)伍、專業(yè)建設(shè)、教材建設(shè)及教學(xué)管理制度等內(nèi)容，使瀏覽者能具體瀏覽到學(xué)校關(guān)于教學(xué)方面的信息。

（5）多彩校園

該欄目設(shè)置了教學(xué)花絮、學(xué)校社團(tuán)協(xié)會(huì)、文化藝術(shù)節(jié)等內(nèi)容，充分展示了學(xué)校師生積極向上的課余生活。

（6）職教動(dòng)態(tài)

該欄目提供了關(guān)于中等職業(yè)教育的政策法規(guī)、理論研究、重要言論、校際交流及國(guó)內(nèi)外職業(yè)教育現(xiàn)狀。

（7）校報(bào)校刊

該欄目提供了學(xué)校的校報(bào)、簡(jiǎn)報(bào)及校刊，使瀏覽者能通過(guò)該欄目了解到更多關(guān)于職業(yè)教育的信息。

（8）學(xué)生工作

該欄目介紹了學(xué)校關(guān)于學(xué)生學(xué)習(xí)和生活的各個(gè)社團(tuán)及協(xié)會(huì)，及其組織機(jī)構(gòu)的規(guī)章制度，同時(shí)介紹了各機(jī)構(gòu)之間的情況交流。

（9）給我留言

該欄目可以加強(qiáng)學(xué)校與瀏覽者間的溝通和聯(lián)系，瀏覽者把平時(shí)學(xué)校的焦點(diǎn)、熱點(diǎn)問題通過(guò)它反映給學(xué)校。這樣可以使學(xué)校形成一種人人關(guān)心學(xué)校、愛護(hù)學(xué)校、注重學(xué)校形象的良好氛圍。

（10）視頻新聞

該欄目通過(guò)一些視頻圖片向?yàn)g覽者提供關(guān)于撫州職業(yè)技術(shù)學(xué)校的新聞和信息。

（11）校園快訊

該欄目以最快的速度適時(shí)介紹了撫州職業(yè)技術(shù)學(xué)校關(guān)于教育、教學(xué)、學(xué)習(xí)、生活等最近時(shí)段的信息。

（12）校園文化

該欄目具體介紹了撫州職業(yè)技術(shù)學(xué)校的辦學(xué)宗旨、辦學(xué)理念，學(xué)校的校風(fēng)、校訓(xùn)及校歌等內(nèi)容。

（13）專業(yè)簡(jiǎn)介

通過(guò)該欄目的具體介紹，使瀏覽者能及時(shí)獲知學(xué)校各個(gè)專業(yè)學(xué)習(xí)的技術(shù)特點(diǎn)，了解各專業(yè)的課程設(shè)置情況，同時(shí)了解各課程的內(nèi)容及功能。

（14）知識(shí)小寶庫(kù)

該欄目中介紹了瀏覽者感興趣的及對(duì)瀏覽者有益的一些知識(shí)內(nèi)容，如心理健康、科技視野、國(guó)際縱橫、電腦網(wǎng)絡(luò)等內(nèi)容，使網(wǎng)站的信息量更大。

（15）校園生活

該欄目介紹了關(guān)于學(xué)生生活涉及到的一系列信息，包括獎(jiǎng)勵(lì)助學(xué)、公寓管理、校園風(fēng)光、快樂周末及就業(yè)指導(dǎo)等內(nèi)容。

（16）學(xué)生風(fēng)采

該欄目從多個(gè)角度介紹了撫州職業(yè)技術(shù)學(xué)校學(xué)生的精神面貌，如照顧孤寡老人、積極參加專業(yè)技能競(jìng)賽活動(dòng)等內(nèi)容。

4.網(wǎng)站建設(shè)拓?fù)鋱D

四、網(wǎng)站設(shè)計(jì)方案報(bào)價(jià)明細(xì)

靜態(tài)頁(yè)面設(shè)計(jì)報(bào)價(jià)明細(xì)如下表。

服務(wù)器空間、域名價(jià)格明細(xì)如下表。

以上報(bào)價(jià)總計(jì)為：XXX

五、網(wǎng)站效果圖

依據(jù)客戶需求及網(wǎng)站風(fēng)格定位，可應(yīng)用Photoshop軟件制作如下網(wǎng)站效果圖。其實(shí)這個(gè)工作過(guò)程可以先在白紙上勾勒出草圖，再用平面設(shè)計(jì)軟件設(shè)計(jì)制作平面效果圖，分別如圖1-1、圖1-2、圖1-3所示。