四川省都江堰管理局 黃 玲

0 前言

自從李冰創(chuàng)建了岷江上游的都江堰水利工程后，蜀地人民才得以安居樂(lè)業(yè)至今，都江堰工程，充分利用自然資源，變害為利，使人、地、水三者高度和諧統(tǒng)一為人類服務(wù)，是全世界迄今為止僅存的一項(xiàng)偉大的 “生態(tài)水利工程”。它開創(chuàng)了中國(guó)古代水利史上的新紀(jì)元，為世界水利史寫下了光輝的一頁(yè)。先人們給子孫萬(wàn)代留下的，不僅是創(chuàng)造了世界治水奇跡的這片風(fēng)水寶地，而更為珍貴的，是集合一代又一代勞動(dòng)人民智慧的治水文化精神財(cái)富。

在現(xiàn)代科技發(fā)展的今天，利用信息網(wǎng)絡(luò)這個(gè)寬廣的載體，把先輩們留下的寶貴財(cái)富不斷地傳承和發(fā)揚(yáng)光大，使其能引起更廣泛的社會(huì)關(guān)注，這對(duì)加強(qiáng)都江堰物質(zhì)文化遺產(chǎn)的保護(hù)和可持續(xù)開發(fā)，具有重要的現(xiàn)實(shí)意義。本文要講的是如何通過(guò)網(wǎng)頁(yè)的設(shè)計(jì)制作來(lái)創(chuàng)建都江堰水利宣傳推廣網(wǎng)站。

1 建站的目標(biāo)和總體規(guī)劃要求

遍及全球的互聯(lián)網(wǎng)絡(luò)，是人類最大的知識(shí)寶庫(kù)和社會(huì)學(xué)校，你可以從Internet上獲得各方面的資訊，隨著它的日益普及，在不久的將來(lái)是人們獲取信息的主要場(chǎng)所。特別區(qū)別于傳統(tǒng)紙質(zhì)或影像媒介，它是很好的交互式平臺(tái)，在這里，既可以傳遞信息，又可以讓受眾回饋其訊息。

我們可以利用網(wǎng)絡(luò)這一載體，建立一個(gè)有利于都江堰水利事業(yè)宣傳和推廣的網(wǎng)站，用它把我們千古流傳的治水經(jīng)驗(yàn)、教訓(xùn)以及當(dāng)今日新月異的治水科技搜集、總結(jié)起來(lái)，并傳承出去，體現(xiàn)出我們新時(shí)代水利事業(yè)人的精神風(fēng)貌，并建立起一個(gè)互助交流的平臺(tái)，通過(guò)該平臺(tái)，可以聆聽全世界水利工作者的良好建議，促進(jìn)水利事業(yè)的不斷發(fā)展再創(chuàng)新臺(tái)階。

結(jié)合這些實(shí)際需要，對(duì)網(wǎng)頁(yè)的設(shè)計(jì)制作，應(yīng)先就整體布局、色調(diào)搭配方案及各功能版塊的規(guī)劃做好總體安排，然后是收集各種素材（包括圖文資料程序等），最后是在安全性較高的硬件與操作系統(tǒng)平臺(tái)上，選用適合的軟件來(lái)完成對(duì)它的制作。

網(wǎng)頁(yè)的設(shè)計(jì)制作，其實(shí)是個(gè)整合多門不同學(xué)科，如視覺(jué)設(shè)計(jì)美學(xué)、心理學(xué)、計(jì)算機(jī)信息技術(shù)和計(jì)算語(yǔ)言科學(xué)等和相關(guān)知識(shí)點(diǎn)融合的過(guò)程，是藝術(shù)、科學(xué)、創(chuàng)意的結(jié)合。網(wǎng)頁(yè)設(shè)計(jì)的基本原則就是讓網(wǎng)絡(luò)資源和相應(yīng)瀏覽者完美地進(jìn)行交流，所以對(duì)整個(gè)網(wǎng)站網(wǎng)頁(yè)的設(shè)計(jì)要以簡(jiǎn)潔、明了、美觀、有特色、互動(dòng)性強(qiáng)而又易于操作的基礎(chǔ)來(lái)實(shí)現(xiàn)。

2 網(wǎng)站頁(yè)面的整體設(shè)計(jì)構(gòu)想

2.1 網(wǎng)頁(yè)色彩搭配

打開一個(gè)網(wǎng)站，給瀏覽者第一印象的既不是網(wǎng)站的內(nèi)容，也不是網(wǎng)站的版面布局，而是網(wǎng)站界面的色彩。在網(wǎng)頁(yè)中恰當(dāng)?shù)剡\(yùn)用色彩，能夠達(dá)到最佳的視覺(jué)傳達(dá)效果。根據(jù)我們是水為主題，采用白色為背景基調(diào)，各欄目條框底色設(shè)為淡藍(lán)，文字顏色以黑色為主，這樣給人感覺(jué)不喧賓奪主，也猶如水的象征，清新而潔凈?？傮w的色調(diào)及對(duì)比度應(yīng)和諧統(tǒng)一。

2.2 網(wǎng)頁(yè)布局設(shè)計(jì)

瀏覽的視覺(jué)路徑一般是：從上到下，從左到右。好的視覺(jué)設(shè)計(jì)路徑應(yīng)該順應(yīng)這樣的習(xí)慣。網(wǎng)站結(jié)構(gòu)不清晰，目錄龐雜，內(nèi)容東一塊西一塊，結(jié)果不但瀏覽者看得糊涂，自己擴(kuò)充和維護(hù)網(wǎng)站也相當(dāng)困難。因此，我們把網(wǎng)站的名片，也是它的靈魂所在——具有水利文化氣息的全站LOGO標(biāo)識(shí)圖形，擺放在網(wǎng)頁(yè)的最頂端，它代表了網(wǎng)站的形象。

在接下來(lái)的橫排上，放上欄目導(dǎo)航條，每個(gè)欄目可用下拉菜單形式調(diào)用與之相關(guān)的子欄目頁(yè)面，為了方便瀏覽時(shí)不同頁(yè)面間的自由跳轉(zhuǎn)，讓網(wǎng)頁(yè)組成訪問(wèn)流暢的網(wǎng)站，下屬子欄目所在頁(yè)面的結(jié)構(gòu)，應(yīng)將上部相同位置設(shè)成和主頁(yè)一樣的LOGO和導(dǎo)航條，使網(wǎng)站內(nèi)的頁(yè)面，都統(tǒng)一規(guī)劃，統(tǒng)一風(fēng)格，體現(xiàn)設(shè)計(jì)者完整的設(shè)計(jì)思想。

欄目導(dǎo)航條實(shí)質(zhì)是一個(gè)網(wǎng)站的大綱索引，根據(jù)我們網(wǎng)站的題材，可將欄目設(shè)置如下：

(1)首頁(yè)。方便站內(nèi)位置定位到主頁(yè)。

(2)新聞。主要是水事及相關(guān)類新聞資訊。

(3)資料庫(kù)。它相當(dāng)于圖書館，匯集了與都江堰有關(guān)的史料、工程現(xiàn)狀、水利技術(shù)、學(xué)術(shù)資料等有價(jià)值的文獻(xiàn)、圖片和視頻，可通過(guò)設(shè)置搜索引擎的方式來(lái)方便查找和下載。

(4)部門。介紹各部門的職責(zé)及聯(lián)系方式等。

(5)公告?？梢园l(fā)布水文、水質(zhì)監(jiān)測(cè)等一些實(shí)時(shí)監(jiān)測(cè)信息和通知等，提高辦事效率。

(6)bbs討論區(qū)?？梢酝ㄟ^(guò)這個(gè)窗口擴(kuò)大對(duì)外接觸和宣傳，這里是交流的園地，可以解答有關(guān)問(wèn)題和得到寶貴的建議，不斷改進(jìn)，更好地為受眾服務(wù)。

(7)留言板。這種互動(dòng)交流的方式，既能得到很好的反饋信息，又能激勵(lì)訪問(wèn)者再次回到網(wǎng)站。

(8)政策法規(guī)。通過(guò)相關(guān)法律、法規(guī)的宣傳及案例的研究，來(lái)喚起受眾對(duì)水利工程的保護(hù)意識(shí)。

(9)開發(fā)（保護(hù)）方案征求。為了更好地保護(hù)都江堰工程，對(duì)它的合理利用一定要走良性循環(huán)開發(fā)的道路，向全世界征求不管是通過(guò)旅游還是水電開發(fā)還是其它方式的好的方案，都能集思廣議，幫我們找到最好的解決辦法，讓古堰青春永煥。

為了加強(qiáng)網(wǎng)站的宣傳推廣，在頁(yè)面底部要放上友情鏈接，這樣可以與其它相鏈接的網(wǎng)站共享訪問(wèn)者資源，同時(shí)，還可以利用在搜索引擎上注冊(cè)，植入交換式廣告鏈接等方式，來(lái)增大訪問(wèn)量。在網(wǎng)頁(yè)的最底部位置，放上網(wǎng)站的摘要信息和網(wǎng)管的維護(hù)入口。

2.3 網(wǎng)頁(yè)內(nèi)容設(shè)計(jì)

如果網(wǎng)頁(yè)內(nèi)容面積大、字?jǐn)?shù)多，會(huì)使讀者產(chǎn)生視覺(jué)疲勞，因此可以將網(wǎng)頁(yè)內(nèi)容進(jìn)行分欄、分塊，可把公告、新聞、論壇、資料庫(kù)、開發(fā)（保護(hù)）方案征求等欄目的最新信息設(shè)立幾大版塊，置于首頁(yè)的醒目位置，通過(guò)超鏈接可以直接對(duì)其內(nèi)容頁(yè)面讀取，同時(shí)還要注意留白，不要讓網(wǎng)頁(yè)給人感覺(jué)太撐。版面設(shè)計(jì)應(yīng)突出文字內(nèi)容，輔以一定的音頻、圖形圖像、動(dòng)畫、視頻等素材，使其做到既重點(diǎn)突出，又有可視性。

3 網(wǎng)頁(yè)制作

3.1 工具軟件

完成了網(wǎng)站的設(shè)計(jì)，接下來(lái)就是選取好的網(wǎng)頁(yè)制作工具，這樣可起到事半功倍的效果。

在所見即所得的可視化網(wǎng)站HTML開發(fā)工具中，易上手的當(dāng)數(shù)Dreamweaver和Frontpage了。Frontpage的制表功能比較強(qiáng)大、簡(jiǎn)單易用，而Dreamweaver的功能則更加全面豐富，支持各種代碼的性能好，能夠快速高效地創(chuàng)建極具表現(xiàn)力和動(dòng)感效果的網(wǎng)頁(yè)。 目前使用最多的還是Dreamweaver。

除此之外，還有圖片編輯工具，如 Photoshop、Fireworks等。Photoshop是功能非常強(qiáng)大的專業(yè)圖形軟件，可以制作任何你想要的平面效果。他的缺點(diǎn)是體積龐大，操作比較復(fù)雜，非專業(yè)人員很難熟練掌握。Fireworks是一個(gè)提供網(wǎng)頁(yè)制圖的應(yīng)用軟件，它擅長(zhǎng)將較大的圖形文件做不等份的分割，各自保存為不同文件格式、不同壓縮方法的圖形文件，然后再編寫復(fù)雜、內(nèi)嵌式的隱形表格，把這些分割過(guò)的小圖形文件拼湊起來(lái)。

動(dòng)畫制作工具，如Flash、Cool3d等。Flash使用矢量圖形和流媒體播放技術(shù)，在觀看大段影片時(shí)不必等到影片全部下載完后，而是邊看邊下載，從而減少網(wǎng)頁(yè)瀏覽者等待的時(shí)間，它通過(guò)使用關(guān)鍵幀和元件，使生成的動(dòng)畫文件非常小。Flash強(qiáng)大的交互式動(dòng)畫編輯功能使得設(shè)計(jì)者可以隨心所欲地設(shè)計(jì)出高質(zhì)量的動(dòng)畫。

還有網(wǎng)頁(yè)特效工具，如有聲有色等，可以根據(jù)需要靈活運(yùn)用。如可用Photoshop制作美化圖片，設(shè)計(jì)網(wǎng)站LOGO，用Flash制作廣告欄動(dòng)畫，還可以制作仿真的灌溉工程的功能介紹視頻等。

CSS級(jí)聯(lián)樣式表在網(wǎng)頁(yè)中使用最為廣泛，可以布局、定位，使網(wǎng)頁(yè)更加靈活。它可以設(shè)定表格的寬度、高度、邊框、背景色、對(duì)齊方式等參數(shù)。通過(guò)外部樣式表使你有能力同時(shí)改變站點(diǎn)中所有頁(yè)面的布局和外觀。由于允許同時(shí)控制多重頁(yè)面的樣式和布局，CSS可稱得上WEB設(shè)計(jì)領(lǐng)域的一個(gè)突破。作為網(wǎng)站開發(fā)者，你能夠?yàn)槊總€(gè)HTML元素定義樣式，并將之應(yīng)用于任意多的頁(yè)面中。如需進(jìn)行全局的更新，只需簡(jiǎn)單地改變樣式，然后網(wǎng)站中的所有元素均會(huì)自動(dòng)地更新。通過(guò)DIV+CSS進(jìn)行布局,可控制頁(yè)面內(nèi)文字、圖片的大小樣式等。

而BBS、留言板、網(wǎng)站新聞公告系統(tǒng)，資料庫(kù)的檢索等涉及交互式動(dòng)態(tài)網(wǎng)頁(yè)的制作，可用VBScript或JavaScript等語(yǔ)言編程，配合ASP調(diào)用SQL的數(shù)據(jù)庫(kù)來(lái)制作完成。

4 網(wǎng)站的發(fā)布與后期維護(hù)

4.1 網(wǎng)站測(cè)試

網(wǎng)頁(yè)制作完后，需要在瀏覽器中進(jìn)行網(wǎng)頁(yè)測(cè)試，看看制作的網(wǎng)頁(yè)效果如何，是否能在瀏覽器中正確顯示。一般要進(jìn)行鏈接測(cè)試、網(wǎng)站下載時(shí)間測(cè)試以及布局的一致性檢查等，通過(guò)測(cè)試且一切正常后，就可以發(fā)布網(wǎng)站；如果有不合理的地方，要及時(shí)修改和反復(fù)測(cè)試，以保證網(wǎng)頁(yè)的建設(shè)質(zhì)量。

4.2 網(wǎng)站發(fā)布

網(wǎng)站建好之后，需將其發(fā)布到Internet上供人瀏覽。發(fā)布一個(gè)網(wǎng)站，首先要選擇好適合自身?xiàng)l件的網(wǎng)站空間，最好是租用或購(gòu)買服務(wù)器。有了網(wǎng)站空間后，就可以使用上傳軟件(如CUTEFTP)將制作好的網(wǎng)頁(yè)發(fā)布到Internet上。

4.3 網(wǎng)站維護(hù)與更新

網(wǎng)站發(fā)布到Internet上后，網(wǎng)頁(yè)應(yīng)根據(jù)各種情況隨時(shí)進(jìn)行調(diào)整變化，要從發(fā)布的主體內(nèi)容、信息互動(dòng)反饋和站點(diǎn)安全等方面，及時(shí)進(jìn)行維護(hù)與更新，以吸引更多的瀏覽者，不斷擴(kuò)大網(wǎng)站的發(fā)布效果。

5 結(jié)束語(yǔ)

其實(shí)，網(wǎng)站的設(shè)計(jì)制作涉及到方方面面，還需更多的細(xì)節(jié)來(lái)支撐完善，這里只是拋磚引玉，提供一個(gè)思路，故不一一敘述了。如果它能讓人足不出戶，就了解到當(dāng)前都江堰水利工程的建設(shè)與管理現(xiàn)狀，并對(duì)傳承璀璨的古蜀水文化精神和展現(xiàn)我們新時(shí)期都江堰水利工程人的風(fēng)采起到一定作用，就是本文的最大收益了。

[1]鄒蕾，張先鋒.淺談網(wǎng)頁(yè)設(shè)計(jì)的創(chuàng)作要素[J].科技創(chuàng)新導(dǎo)報(bào),2010,07.

[2]牛承珍.淺議網(wǎng)站規(guī)劃與設(shè)計(jì)[J].山西科技,2009,6.