淺談網頁設計制作在水利宣傳推廣網站建設中的運用

四川省都江堰管理局 黃 玲

0 前言

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

在現代科技發展的今天，利用信息網絡這個寬廣的載體，把先輩們留下的寶貴財富不斷地傳承和發揚光大，使其能引起更廣泛的社會關注，這對加強都江堰物質文化遺產的保護和可持續開發，具有重要的現實意義。本文要講的是如何通過網頁的設計制作來創建都江堰水利宣傳推廣網站。

1 建站的目標和總體規劃要求

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

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

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

網頁的設計制作，其實是個整合多門不同學科，如視覺設計美學、心理學、計算機信息技術和計算語言科學等和相關知識點融合的過程，是藝術、科學、創意的結合。網頁設計的基本原則就是讓網絡資源和相應瀏覽者完美地進行交流，所以對整個網站網頁的設計要以簡潔、明了、美觀、有特色、互動性強而又易于操作的基礎來實現。

2 網站頁面的整體設計構想

2.1 網頁色彩搭配

打開一個網站，給瀏覽者第一印象的既不是網站的內容，也不是網站的版面布局，而是網站界面的色彩。在網頁中恰當地運用色彩，能夠達到最佳的視覺傳達效果。根據我們是水為主題，采用白色為背景基調，各欄目條框底色設為淡藍，文字顏色以黑色為主，這樣給人感覺不喧賓奪主，也猶如水的象征，清新而潔凈。總體的色調及對比度應和諧統一。

2.2 網頁布局設計

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

在接下來的橫排上，放上欄目導航條，每個欄目可用下拉菜單形式調用與之相關的子欄目頁面，為了方便瀏覽時不同頁面間的自由跳轉，讓網頁組成訪問流暢的網站，下屬子欄目所在頁面的結構，應將上部相同位置設成和主頁一樣的LOGO和導航條，使網站內的頁面，都統一規劃，統一風格，體現設計者完整的設計思想。

欄目導航條實質是一個網站的大綱索引，根據我們網站的題材，可將欄目設置如下：

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

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

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

(4)部門。介紹各部門的職責及聯系方式等。

(5)公告?？梢园l布水文、水質監測等一些實時監測信息和通知等，提高辦事效率。

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

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

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

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

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

2.3 網頁內容設計

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

3 網頁制作

3.1 工具軟件

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

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

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

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

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

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

而BBS、留言板、網站新聞公告系統，資料庫的檢索等涉及交互式動態網頁的制作，可用VBScript或JavaScript等語言編程，配合ASP調用SQL的數據庫來制作完成。

4 網站的發布與后期維護

4.1 網站測試

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

4.2 網站發布

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

4.3 網站維護與更新

網站發布到Internet上后，網頁應根據各種情況隨時進行調整變化，要從發布的主體內容、信息互動反饋和站點安全等方面，及時進行維護與更新，以吸引更多的瀏覽者，不斷擴大網站的發布效果。

5 結束語

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

[1]鄒蕾，張先鋒.淺談網頁設計的創作要素[J].科技創新導報,2010,07.

[2]牛承珍.淺議網站規劃與設計[J].山西科技,2009,6.