芻議水利百科網站設計

姜依彤，郝健超

(黑龍江省水利水電勘測設計研究院，哈爾濱150080)

芻議水利百科網站設計

姜依彤，郝健超

(黑龍江省水利水電勘測設計研究院，哈爾濱150080)

隨著計算機網絡通信技術和Internet的飛速發展，如今個人網站已大興其道，互聯網上的各式各樣的個人網站不計其數。人們以這種方式參與到網絡生活，憑借對個人網站的瀏覽來尋找與自己志趣相同的來自世界各地的朋友，不受時間地域的限制，也會使自己得到相當大的滿足。個人網頁的設計內容可以從自己的專業或興趣愛好多做些考慮。不只是針對知識資源的共享，而且還涉及一些志趣相同的人彼此的交流空間。文章是針對水利百科為主題的網站設計。

網站建設，網站設計，網頁設計，水利

0 緒論

網站建設是指圍繞網站的最終應用所做的相應工作，包括需求分析、頁面設計、服務器架構、數據庫架構、程序設計等。

1 網站建設

網站建設是指圍繞網站的最終應用所做的相應工作，包括需求分析、頁面設計、服務器架構、數據庫架構、程序設計等。

從技術上講，域名是在Internet中用于解決地址對應問題的一種方法。從商業角度看，域名被譽為企業的“網上商標”。所謂IP地址就是給每個連接在Internet上的主機分配一個在全世界范圍內唯一的32bit地址。DNS是域名解析系統的意思。它把域名轉換成為網絡主機可以識別的IP地址［1］。

使用特殊的軟硬件技術，把一臺計算機主機分成一臺臺“虛擬”的主機，每一臺虛擬主機都具有獨立的域名和IP地址或共享的IP地址，具有完整的Internet服務器功能。在同一臺服務器、同一個操作系統上，可以運行為多個用戶打開的不同的程序，與不干擾;而各個用戶擁有自己的一部分系統資源，并可以通過FTP等手段自主維護。虛擬主機之間完全獨立，在外界看來，每一臺虛擬主機和一臺獨立的主機的表現完全一樣。

本次設計網站采用虛擬主機，今后經完善也可以用自主服務器。網站在初級階段投入的成本不多，申請免費的ASP空間，使用虛擬主機穩定性和安全性問題比較有保障。

2 網站規劃

2.1 建設網站目的

建設網站的目的是為了瀏覽者能從網站得到相應水利知識的信息和服務，也提供了廣大水利工作和愛好者一個互交流的平臺。

2.2 建設網站類型

建設網站的類型屬于行業宣傳、溝通交流。

2.3 網站主題

主題是水利百科，以介紹全國關于水利的知識，以及各個水利工程的狀況。有些水利工程造福于人類的生活，有些同時也被開發成旅游景點，這些已建的或在建的工程都是雄偉狀觀的。網站也設有互相交流的平臺，大家可以共享一些資源，交流一下見解。

2.4 網站風格

以信息式為主，以畫廊式為輔。主頁要有種氣勢磅礴的感覺，內部網頁根據其欄目的內容各具特色。

2.5 網頁系統樹

為更能直觀的表現出網頁間的流程關系，可能網頁系統樹表示，網頁系統樹見圖1。

圖1 網頁系統樹

2.6 網頁內容

網頁內容并非指網站內容，不是說網頁中要包含廣告、服務等內容，而是要具體細化到每個頁面。

首頁，映入眼簾的是大壩泄洪時的雄偉場面，在氣勢磅礴的背景下，不加過多的言語，在側面設計好各項欄目，可以用photoshop設置一下特效。所設置的欄目有水利動態、水利知識、旅游景點、建筑畫廊、留言板。水利動態是以新聞的形式更新，頁面樸素，盡可能的簡潔而不失其樂，使之不令人乏味。水利知識是以歡快的風格為主，介紹關于水利的百科知識。

旅游景點是以優雅、美觀的形式展現。建筑畫廊是以圖畫和文字為主，介紹水利工程的每個局部圖，不只整體壯觀，局部也是相當了不起的工程。留言板是方便所有水利愛好者交流的平臺。在這里大家可以共享資源，可以學到經驗，也可以把自己的所學與大家分享。

3 選擇網頁的設計方法

3.1 選擇主要運用的設計方法

能夠用來設計網站的方法有很多，可以使用HTML語言來編輯，也可以使用網頁制作工具來設計網站，比如 FrontPage，DreamWeaver［2］。在這里，選擇所見即所得的網頁制作工具來設計出網站的框架，然后再用Java和JavaScript等編輯語言來對網站進行修飾。除此之外還有動態交互網頁ASP、PHP、JSP、Flash、XML等技術。本站點在這些動態交互網頁技術中準備著重使用ASP技術。

3.2 設計的要求

導航清晰，布局合理，層次分明，頁面的鏈接層次不要太深，盡量讓用戶用最短的時間找到需要的資料。保持統一的風格，有助于加深訪問者對你網站的印象。在網頁設計中，根據和諧、均衡和重點突出的原則，將不同的色彩進行組合、搭配來構成美觀的頁面。界面要清爽千萬不能讓用戶第一眼就感覺壓抑。應多一些原創的內容。適當的動態效果可以起到畫龍點睛的作用。

行政活動的正當性（legitimacy）是行政法關注的核心問題。蓋因公共行政所負擔之公共利益義務是一種“整體委托”，這種整體委托的概念包含合法性、合目的性、親近人民、明確性及學習能力性。? 參見[德]施密特·阿斯曼：《秩序理念下的行政法體系建構》，林明鏘等譯，北京大學出版社2012年版，第27頁。然而，社會的變遷和行政活動的變化，不僅使得行政活動的“正當性”在概念內涵、價值構成與判斷方法上發生了深刻變化，而且法律為實現此種正當性而設置的制度保障和管制手段，亦須相應地發生變化。

3.3 設計網頁要注意的問題

網頁的標題要簡潔，明確;在文本要使用水平線，以分割不同部分;對重點段落要強調顯示;網頁中插入的圖片要盡量的小;圖形要附加文字說明，以便關閉圖像時查看;網頁中引用的資料及商標或圖標，不能侵犯版權。

4 靜態網頁的設計和制作

4.1 主頁的設計制作

主頁的設計首先涉及到的是頁面的版面編排問題。主頁作為一種版面，既有文字，又有圖片。文字有大有小，還有標題和正文之分;圖片也有大小，而且有橫有豎之別。圖片和文字都需要同時展示給觀眾。因此必須根據內容的需要，將這些圖片和文字按照一定的次序進行合理的編排和布局，使它們組成一個有機的整體，展現給廣大的觀眾。

主頁的設計應注意主次分明，中心突出;圖文并茂，相得益彰。由于網站以水利知識為主要的內容，所以選用了一些直線，可以使主頁呈現井井有條的視覺效果，給人的印象比較正式和莊重;適當選擇背景音樂，這樣會增加這個主頁的藝術內涵，在設計中使用的音樂氣勢磅礴的流水聲，符合水利這個壯觀的主題，呈現給瀏覽者一種和諧的舒適感;適當考慮表格的加入，熟練掌握和運用表格的各種屬性，可以讓頁面看起來賞心悅目。

在主頁的制作中，若稍顯平淡，可以使用一些圖片的處理工具，用photoshop來處理。將圖片復制為一個圖層并縮小至1/4，放入左下角，并用模糊的工具處理邊緣部分，之后用粗細畫筆在圖的外側畫出直線的線條，增加整體的正式感覺。最后就是用文字要具在圖片中的適當位置以不同的字體寫出網站的名字，以及各個主要欄目的名字。背景為藍色，有一種水一般清澈的感覺。

用Dreamweaver編輯主頁時，在空白處單擊鼠標右鍵，選擇網頁屬性選項，將背景音樂選擇為準備好的MIDI文件，單擊確定保存退出即可。水利百科主頁見圖2。

圖2 水利百科主頁

主頁沒有過多的樣式，因此加入一個飄動的字符跟隨鼠標的效果，在代碼＜style type=”text/css”＞＜!－－ －－＞＜/style＞中插入以下的CSS樣式代碼:

4.2 內部網頁的設計和制作

4.2.1 水利動態

此頁面的設計是以新聞為主，所以大部分應該是文字。新聞發布后必須讓網站的訪問者看到后臺發布的新聞。

主要制作新聞瀏覽頁news_list.asp和動態細節頁面news_content.asp。主頁 index.asp是由很多功能部分組成的，新聞系統的新聞瀏覽頁一般就嵌套在首頁上，所以index.asp頁面是用來顯示后發布的新聞標題的。

new_list.asp是單擊 index.asp上面的水利動態所打開的數據庫中的所有新聞標題頁面。而news_content.asp又是單擊 news_list.asp上面的新聞標題所打開的新聞詳細內容頁面。設計包括:新聞標題瀏覽功能頁面設計news_list.asp，新聞內容顯示news_content.asp，滾動新聞。

4.2.2 水利知識

水利知識的頁面設計主要以名詞解釋的形式出現，由于名詞量很大，因此在頁面的首部做一個名詞搜索引擎便于讀者查詢，名詞搜索引擎見圖3。

圖3 名詞搜索引擎

下面以S和T作為例子，編寫代碼如下，A到Z其它亦如此。

以“S”、“T”為例子的生成的界面如圖4。

圖4 以“S”、“T”為例子的生成的界面

4.2.3 旅游景點

進入此頁面，首先看到的是中國地圖，各個關于水利的旅游景點的地理名字都將做成鏈接的形式在圖中顯示，鏈接至另一個頁面則是關于該景點的介紹。

將每一個省的范圍與其景點的介紹之間加入超鏈接，在選中要鏈接的內容后，用右鍵單擊，選超鏈接項，然后指向事先制作旋轉好的目錄內的相關文件，這樣超鏈接就做好了。作好鏈接的中國地圖見圖5。

圖5 作好鏈接的中國地圖

4.2.4 建筑畫廊

首先要確定圖片的格式。這一點很重要，在HTML.文件中，使用* .jpg、* .gif、* .bmp 等文件格式均是可以瀏覽的。

選擇前面的兩種，因為這兩種文件格式能對圖像進行很大程度的壓縮，使得在產生相近視覺效果的前提下，圖像文件的容量會小很多。

在這個欄目版面的設計和制作中，用到了相當大的工作量。在主要內容的設計上，力求把它做成真實的畫廊風格。

首先，用PhotoShop把各圖片的縮略圖制作成大小統一的小圖片，然后井然有序的放置在頁面的居中位置。

最后再把每幅縮略圖連接到其原圖，至此，圖片專欄的制作完成。

4.2.5 留言板

應該注意的問題是動態網頁和靜態網頁要合理的安排，合理的選擇，合理的結合在一起。隨著網頁文章越來越多，論壇帖子越來越多，數據庫已經達到十多兆、幾十兆了，網頁的訪問速度明顯下降，這時候只能把文章和帖子全部刪除，把數據庫的內容全部轉化成靜態網頁。動態網頁只是網站的輔助手段。

如果增加的動態網頁，這個網站的內容就會比較豐富，增加了它的交互性。

4.3 主頁和內部網頁以及各子目錄的鏈接

將制作好的所有內容放進各個文件夾，然后再將各文件夾放入主文件夾。從主頁開始，將需要進行鏈接的部分選擇對應的位置添加超鏈接，使整個網站的內容緊緊聯系起來。從主頁可以進去任何一篇內容網頁，同樣，從作任何一篇內部網頁也可以返回到主頁，這樣，主頁和內部網頁以及子目錄的鏈接的工作就完成了。

5 總結

網頁的制作應用有很多，從基礎的FrontPage開始，到現在各種應用軟件以及制作技巧的發展。另外，水利的發展更是日新月異。總之，可以將制作網站技巧與水利知識逐漸完善，豐富本次所做的網站。

［1］李國燕，焦永功.網站現代化與網頁設計［M］.北京:電子工業出版社，2001:16.

［2］譚浩強，趙豐年.網頁設計與制作［M］.中國鐵通出版社，2002:15.

TP393.092

B

1007－7596(2014)07－0024－04

2014－01－10

姜依彤(1987－)，女，黑龍江哈爾濱人，助理工程師;郝健超(1985－)，男，黑龍江樺南人，助理工程師。