淺談網(wǎng)頁設(shè)計制作在水利宣傳推廣網(wǎng)站建設(shè)中的運(yùn)用

四川省都江堰管理局 黃 玲

0 前言

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

(5)公告。可以發(fā)布水文、水質(zhì)監(jiān)測等一些實時監(jiān)測信息和通知等，提高辦事效率。

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

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

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

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

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

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

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

3 網(wǎng)頁制作

3.1 工具軟件

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

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

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

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

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

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

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

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

4.1 網(wǎng)站測試

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

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

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

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

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

5 結(jié)束語

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

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

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