姜依彤，郝健超

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

芻議水利百科網(wǎng)站設(shè)計(jì)

姜依彤，郝健超

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

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

網(wǎng)站建設(shè)，網(wǎng)站設(shè)計(jì)，網(wǎng)頁(yè)設(shè)計(jì)，水利

0 緒論

網(wǎng)站建設(shè)是指圍繞網(wǎng)站的最終應(yīng)用所做的相應(yīng)工作，包括需求分析、頁(yè)面設(shè)計(jì)、服務(wù)器架構(gòu)、數(shù)據(jù)庫(kù)架構(gòu)、程序設(shè)計(jì)等。

1 網(wǎng)站建設(shè)

網(wǎng)站建設(shè)是指圍繞網(wǎng)站的最終應(yīng)用所做的相應(yīng)工作，包括需求分析、頁(yè)面設(shè)計(jì)、服務(wù)器架構(gòu)、數(shù)據(jù)庫(kù)架構(gòu)、程序設(shè)計(jì)等。

從技術(shù)上講，域名是在Internet中用于解決地址對(duì)應(yīng)問(wèn)題的一種方法。從商業(yè)角度看，域名被譽(yù)為企業(yè)的“網(wǎng)上商標(biāo)”。所謂IP地址就是給每個(gè)連接在Internet上的主機(jī)分配一個(gè)在全世界范圍內(nèi)唯一的32bit地址。DNS是域名解析系統(tǒng)的意思。它把域名轉(zhuǎn)換成為網(wǎng)絡(luò)主機(jī)可以識(shí)別的IP地址［1］。

使用特殊的軟硬件技術(shù)，把一臺(tái)計(jì)算機(jī)主機(jī)分成一臺(tái)臺(tái)“虛擬”的主機(jī)，每一臺(tái)虛擬主機(jī)都具有獨(dú)立的域名和IP地址或共享的IP地址，具有完整的Internet服務(wù)器功能。在同一臺(tái)服務(wù)器、同一個(gè)操作系統(tǒng)上，可以運(yùn)行為多個(gè)用戶打開(kāi)的不同的程序，與不干擾;而各個(gè)用戶擁有自己的一部分系統(tǒng)資源，并可以通過(guò)FTP等手段自主維護(hù)。虛擬主機(jī)之間完全獨(dú)立，在外界看來(lái)，每一臺(tái)虛擬主機(jī)和一臺(tái)獨(dú)立的主機(jī)的表現(xiàn)完全一樣。

本次設(shè)計(jì)網(wǎng)站采用虛擬主機(jī)，今后經(jīng)完善也可以用自主服務(wù)器。網(wǎng)站在初級(jí)階段投入的成本不多，申請(qǐng)免費(fèi)的ASP空間，使用虛擬主機(jī)穩(wěn)定性和安全性問(wèn)題比較有保障。

2 網(wǎng)站規(guī)劃

2.1 建設(shè)網(wǎng)站目的

建設(shè)網(wǎng)站的目的是為了瀏覽者能從網(wǎng)站得到相應(yīng)水利知識(shí)的信息和服務(wù)，也提供了廣大水利工作和愛(ài)好者一個(gè)互交流的平臺(tái)。

2.2 建設(shè)網(wǎng)站類(lèi)型

建設(shè)網(wǎng)站的類(lèi)型屬于行業(yè)宣傳、溝通交流。

2.3 網(wǎng)站主題

主題是水利百科，以介紹全國(guó)關(guān)于水利的知識(shí)，以及各個(gè)水利工程的狀況。有些水利工程造福于人類(lèi)的生活，有些同時(shí)也被開(kāi)發(fā)成旅游景點(diǎn)，這些已建的或在建的工程都是雄偉狀觀的。網(wǎng)站也設(shè)有互相交流的平臺(tái)，大家可以共享一些資源，交流一下見(jiàn)解。

2.4 網(wǎng)站風(fēng)格

以信息式為主，以畫(huà)廊式為輔。主頁(yè)要有種氣勢(shì)磅礴的感覺(jué)，內(nèi)部網(wǎng)頁(yè)根據(jù)其欄目的內(nèi)容各具特色。

2.5 網(wǎng)頁(yè)系統(tǒng)樹(shù)

為更能直觀的表現(xiàn)出網(wǎng)頁(yè)間的流程關(guān)系，可能網(wǎng)頁(yè)系統(tǒng)樹(shù)表示，網(wǎng)頁(yè)系統(tǒng)樹(shù)見(jiàn)圖1。

圖1 網(wǎng)頁(yè)系統(tǒng)樹(shù)

2.6 網(wǎng)頁(yè)內(nèi)容

網(wǎng)頁(yè)內(nèi)容并非指網(wǎng)站內(nèi)容，不是說(shuō)網(wǎng)頁(yè)中要包含廣告、服務(wù)等內(nèi)容，而是要具體細(xì)化到每個(gè)頁(yè)面。

首頁(yè)，映入眼簾的是大壩泄洪時(shí)的雄偉場(chǎng)面，在氣勢(shì)磅礴的背景下，不加過(guò)多的言語(yǔ)，在側(cè)面設(shè)計(jì)好各項(xiàng)欄目，可以用photoshop設(shè)置一下特效。所設(shè)置的欄目有水利動(dòng)態(tài)、水利知識(shí)、旅游景點(diǎn)、建筑畫(huà)廊、留言板。水利動(dòng)態(tài)是以新聞的形式更新，頁(yè)面樸素，盡可能的簡(jiǎn)潔而不失其樂(lè)，使之不令人乏味。水利知識(shí)是以歡快的風(fēng)格為主，介紹關(guān)于水利的百科知識(shí)。

旅游景點(diǎn)是以優(yōu)雅、美觀的形式展現(xiàn)。建筑畫(huà)廊是以圖畫(huà)和文字為主，介紹水利工程的每個(gè)局部圖，不只整體壯觀，局部也是相當(dāng)了不起的工程。留言板是方便所有水利愛(ài)好者交流的平臺(tái)。在這里大家可以共享資源，可以學(xué)到經(jīng)驗(yàn)，也可以把自己的所學(xué)與大家分享。

3 選擇網(wǎng)頁(yè)的設(shè)計(jì)方法

3.1 選擇主要運(yùn)用的設(shè)計(jì)方法

能夠用來(lái)設(shè)計(jì)網(wǎng)站的方法有很多，可以使用HTML語(yǔ)言來(lái)編輯，也可以使用網(wǎng)頁(yè)制作工具來(lái)設(shè)計(jì)網(wǎng)站，比如 FrontPage，DreamWeaver［2］。在這里，選擇所見(jiàn)即所得的網(wǎng)頁(yè)制作工具來(lái)設(shè)計(jì)出網(wǎng)站的框架，然后再用Java和JavaScript等編輯語(yǔ)言來(lái)對(duì)網(wǎng)站進(jìn)行修飾。除此之外還有動(dòng)態(tài)交互網(wǎng)頁(yè)ASP、PHP、JSP、Flash、XML等技術(shù)。本站點(diǎn)在這些動(dòng)態(tài)交互網(wǎng)頁(yè)技術(shù)中準(zhǔn)備著重使用ASP技術(shù)。

3.2 設(shè)計(jì)的要求

導(dǎo)航清晰，布局合理，層次分明，頁(yè)面的鏈接層次不要太深，盡量讓用戶用最短的時(shí)間找到需要的資料。保持統(tǒng)一的風(fēng)格，有助于加深訪問(wèn)者對(duì)你網(wǎng)站的印象。在網(wǎng)頁(yè)設(shè)計(jì)中，根據(jù)和諧、均衡和重點(diǎn)突出的原則，將不同的色彩進(jìn)行組合、搭配來(lái)構(gòu)成美觀的頁(yè)面。界面要清爽千萬(wàn)不能讓用戶第一眼就感覺(jué)壓抑。應(yīng)多一些原創(chuàng)的內(nèi)容。適當(dāng)?shù)膭?dòng)態(tài)效果可以起到畫(huà)龍點(diǎn)睛的作用。

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

3.3 設(shè)計(jì)網(wǎng)頁(yè)要注意的問(wèn)題

網(wǎng)頁(yè)的標(biāo)題要簡(jiǎn)潔，明確;在文本要使用水平線，以分割不同部分;對(duì)重點(diǎn)段落要強(qiáng)調(diào)顯示;網(wǎng)頁(yè)中插入的圖片要盡量的小;圖形要附加文字說(shuō)明，以便關(guān)閉圖像時(shí)查看;網(wǎng)頁(yè)中引用的資料及商標(biāo)或圖標(biāo)，不能侵犯版權(quán)。

4 靜態(tài)網(wǎng)頁(yè)的設(shè)計(jì)和制作

4.1 主頁(yè)的設(shè)計(jì)制作

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

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

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

用Dreamweaver編輯主頁(yè)時(shí)，在空白處單擊鼠標(biāo)右鍵，選擇網(wǎng)頁(yè)屬性選項(xiàng)，將背景音樂(lè)選擇為準(zhǔn)備好的MIDI文件，單擊確定保存退出即可。水利百科主頁(yè)見(jiàn)圖2。

圖2 水利百科主頁(yè)

主頁(yè)沒(méi)有過(guò)多的樣式，因此加入一個(gè)飄動(dòng)的字符跟隨鼠標(biāo)的效果，在代碼＜style type=”text/css”＞＜!－－ －－＞＜/style＞中插入以下的CSS樣式代碼:

4.2 內(nèi)部網(wǎng)頁(yè)的設(shè)計(jì)和制作

4.2.1 水利動(dòng)態(tài)

此頁(yè)面的設(shè)計(jì)是以新聞為主，所以大部分應(yīng)該是文字。新聞發(fā)布后必須讓網(wǎng)站的訪問(wèn)者看到后臺(tái)發(fā)布的新聞。

主要制作新聞瀏覽頁(yè)news_list.asp和動(dòng)態(tài)細(xì)節(jié)頁(yè)面news_content.asp。主頁(yè) index.asp是由很多功能部分組成的，新聞系統(tǒng)的新聞瀏覽頁(yè)一般就嵌套在首頁(yè)上，所以index.asp頁(yè)面是用來(lái)顯示后發(fā)布的新聞標(biāo)題的。

new_list.asp是單擊 index.asp上面的水利動(dòng)態(tài)所打開(kāi)的數(shù)據(jù)庫(kù)中的所有新聞標(biāo)題頁(yè)面。而news_content.asp又是單擊 news_list.asp上面的新聞標(biāo)題所打開(kāi)的新聞詳細(xì)內(nèi)容頁(yè)面。設(shè)計(jì)包括:新聞標(biāo)題瀏覽功能頁(yè)面設(shè)計(jì)news_list.asp，新聞內(nèi)容顯示news_content.asp，滾動(dòng)新聞。

4.2.2 水利知識(shí)

水利知識(shí)的頁(yè)面設(shè)計(jì)主要以名詞解釋的形式出現(xiàn)，由于名詞量很大，因此在頁(yè)面的首部做一個(gè)名詞搜索引擎便于讀者查詢，名詞搜索引擎見(jiàn)圖3。

圖3 名詞搜索引擎

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

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

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

4.2.3 旅游景點(diǎn)

進(jìn)入此頁(yè)面，首先看到的是中國(guó)地圖，各個(gè)關(guān)于水利的旅游景點(diǎn)的地理名字都將做成鏈接的形式在圖中顯示，鏈接至另一個(gè)頁(yè)面則是關(guān)于該景點(diǎn)的介紹。

將每一個(gè)省的范圍與其景點(diǎn)的介紹之間加入超鏈接，在選中要鏈接的內(nèi)容后，用右鍵單擊，選超鏈接項(xiàng)，然后指向事先制作旋轉(zhuǎn)好的目錄內(nèi)的相關(guān)文件，這樣超鏈接就做好了。作好鏈接的中國(guó)地圖見(jiàn)圖5。

圖5 作好鏈接的中國(guó)地圖

4.2.4 建筑畫(huà)廊

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

選擇前面的兩種，因?yàn)檫@兩種文件格式能對(duì)圖像進(jìn)行很大程度的壓縮，使得在產(chǎn)生相近視覺(jué)效果的前提下，圖像文件的容量會(huì)小很多。

在這個(gè)欄目版面的設(shè)計(jì)和制作中，用到了相當(dāng)大的工作量。在主要內(nèi)容的設(shè)計(jì)上，力求把它做成真實(shí)的畫(huà)廊風(fēng)格。

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

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

4.2.5 留言板

應(yīng)該注意的問(wèn)題是動(dòng)態(tài)網(wǎng)頁(yè)和靜態(tài)網(wǎng)頁(yè)要合理的安排，合理的選擇，合理的結(jié)合在一起。隨著網(wǎng)頁(yè)文章越來(lái)越多，論壇帖子越來(lái)越多，數(shù)據(jù)庫(kù)已經(jīng)達(dá)到十多兆、幾十兆了，網(wǎng)頁(yè)的訪問(wèn)速度明顯下降，這時(shí)候只能把文章和帖子全部刪除，把數(shù)據(jù)庫(kù)的內(nèi)容全部轉(zhuǎn)化成靜態(tài)網(wǎng)頁(yè)。動(dòng)態(tài)網(wǎng)頁(yè)只是網(wǎng)站的輔助手段。

如果增加的動(dòng)態(tài)網(wǎng)頁(yè)，這個(gè)網(wǎng)站的內(nèi)容就會(huì)比較豐富，增加了它的交互性。

4.3 主頁(yè)和內(nèi)部網(wǎng)頁(yè)以及各子目錄的鏈接

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

5 總結(jié)

網(wǎng)頁(yè)的制作應(yīng)用有很多，從基礎(chǔ)的FrontPage開(kāi)始，到現(xiàn)在各種應(yīng)用軟件以及制作技巧的發(fā)展。另外，水利的發(fā)展更是日新月異?？傊?，可以將制作網(wǎng)站技巧與水利知識(shí)逐漸完善，豐富本次所做的網(wǎng)站。

［1］李國(guó)燕，焦永功.網(wǎng)站現(xiàn)代化與網(wǎng)頁(yè)設(shè)計(jì)［M］.北京:電子工業(yè)出版社，2001:16.

［2］譚浩強(qiáng)，趙豐年.網(wǎng)頁(yè)設(shè)計(jì)與制作［M］.中國(guó)鐵通出版社，2002:15.

TP393.092

B

1007－7596(2014)07－0024－04

2014－01－10

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