基于Web技術(shù)的數(shù)字化水族館的設(shè)計(jì)與實(shí)現(xiàn)

何 晶 張 鑫 肖嵐清 古笑雨 艾 玉 董俊麗

（大連海洋大學(xué)，遼寧 大連 116023）

基于Web技術(shù)的數(shù)字化水族館的設(shè)計(jì)與實(shí)現(xiàn)

何 晶 張 鑫 肖嵐清 古笑雨 艾 玉 董俊麗

（大連海洋大學(xué)，遼寧 大連 116023）

水族館是收集、飼養(yǎng)和展覽水生動(dòng)物的機(jī)構(gòu)，把Web技術(shù)和水族館結(jié)合起來(lái)，可以讓人們科學(xué)、方便地了解海洋生物。文章利用Web技術(shù)實(shí)現(xiàn)了供觀賞或普及科學(xué)知識(shí)的公共水族館以及供科研及教學(xué)專用的數(shù)字化水族館。

Web技術(shù)；數(shù)字化；水族館；水生動(dòng)物；海洋環(huán)境

1 概述

隨著人們生活水平的提高，人工飼養(yǎng)的水產(chǎn)品的需要量逐漸增加。再者人類天生對(duì)大海有一種親近的感覺(jué)，它來(lái)自于我們體內(nèi)細(xì)胞遠(yuǎn)古的記憶。我們每個(gè)人都對(duì)深海的未知世界充滿好奇。興趣指引我們走向知識(shí)的海洋，技術(shù)助我們乘風(fēng)破浪。把Web技術(shù)和水族館結(jié)合起來(lái)，讓人們科學(xué)、方便地了解海洋生物。結(jié)合Web技術(shù)讓客戶學(xué)習(xí)水生物知識(shí)，看到一片廣闊的大海。

2 總體設(shè)計(jì)

2.1 開(kāi)發(fā)環(huán)境簡(jiǎn)介

（1）Dreamweaver：Adobe Dreamweaver，簡(jiǎn)稱“DW”，中文名稱“夢(mèng)想編織者”，是美國(guó)MACROMEDIA公司開(kāi)發(fā)的集網(wǎng)頁(yè)制作和管理網(wǎng)站于一體的網(wǎng)頁(yè)編輯器，Dreamweaver是第一套針對(duì)專業(yè)網(wǎng)頁(yè)設(shè)計(jì)的視覺(jué)化網(wǎng)頁(yè)開(kāi)發(fā)工具，利用它可以輕而易舉地制作出跨越平臺(tái)限制和跨越瀏覽器限制的網(wǎng)頁(yè)。系統(tǒng)的網(wǎng)站功能就是以Dreamweaver為開(kāi)發(fā)平臺(tái)來(lái)實(shí)現(xiàn)的；（2）Flash：Flash是由macromedia公司推出的交互式矢量圖和Web動(dòng)畫(huà)的標(biāo)準(zhǔn)。網(wǎng)頁(yè)設(shè)計(jì)者使用Flash創(chuàng)作出既漂亮又有創(chuàng)意的動(dòng)畫(huà)效果。本系統(tǒng)網(wǎng)頁(yè)部分美工使用Flash實(shí)現(xiàn)；（3）Photoshop：Adobe Photoshop，簡(jiǎn)稱“PS”，是由Adobe Systems開(kāi)發(fā)和發(fā)行的圖像處理軟件。Photoshop主要處理以像素所構(gòu)成的數(shù)字圖像。使用其眾多的編修與繪圖工具，可以有效地進(jìn)行圖片編輯工作。Photoshop用于網(wǎng)頁(yè)部分圖片的美工處理。

2.2 系統(tǒng)構(gòu)架模式

在計(jì)算機(jī)飛速發(fā)展的今天，信息化、數(shù)字化已成為社會(huì)發(fā)展的必然趨勢(shì)。本系統(tǒng)構(gòu)架為B/S模式，其基本特征為：（1）數(shù)據(jù)的通信效率高，研發(fā)方便，成本不高；（2）電腦和手機(jī)上的瀏覽器即為客戶端，方便使用；（3）互動(dòng)性強(qiáng)，穩(wěn)定性好，安全性好，對(duì)數(shù)據(jù)的處理速度快。

本系統(tǒng)的實(shí)現(xiàn)模式為：（1）用戶前臺(tái)頁(yè)面：客戶端瀏覽器訪問(wèn)Web服務(wù)器。用戶端的瀏覽器和Web服務(wù)器之間的交流采用HTTP協(xié)議；（2）后臺(tái)網(wǎng)站設(shè)計(jì)：網(wǎng)頁(yè)設(shè)計(jì)采用Dreamweaver，系統(tǒng)采用B/S模式，數(shù)據(jù)的處理和存儲(chǔ)都是在Web服務(wù)器上進(jìn)行。

2.3 系統(tǒng)基本功能介紹

基于Web技術(shù)的數(shù)字化水族館系統(tǒng)功能模塊有水產(chǎn)養(yǎng)殖、深海世界、海洋資源、交流互助，如圖1所示：

圖1 數(shù)字化水族館結(jié)構(gòu)圖

2.3.1 水產(chǎn)養(yǎng)殖模塊。水產(chǎn)養(yǎng)殖是人工操作下培育、繁殖以及收獲水養(yǎng)動(dòng)植物的生產(chǎn)活動(dòng)。水產(chǎn)養(yǎng)殖分淡水養(yǎng)殖和海水養(yǎng)殖。

淡水養(yǎng)殖：（1）養(yǎng)殖種類：魚(yú)類、蝦類、爬行類、兩棲類、水生植物等；（2）養(yǎng)殖方式：池塘養(yǎng)殖、山塘水庫(kù)養(yǎng)殖、河涌養(yǎng)殖、涵仔養(yǎng)殖、網(wǎng)箱養(yǎng)殖、高密度流水養(yǎng)殖；（3）養(yǎng)殖品種的選擇：品種選擇是養(yǎng)殖生產(chǎn)過(guò)程的重中之重，品種是好還是壞關(guān)系到漁業(yè)生產(chǎn)的效益，要根據(jù)自身的生產(chǎn)條件和資金狀況以及市場(chǎng)需求導(dǎo)向從而確定養(yǎng)殖品種；（4）魚(yú)種放養(yǎng)：放種前工作，品種混養(yǎng)及合理密養(yǎng)，輪捕輪放，網(wǎng)箱養(yǎng)魚(yú)的放養(yǎng)密度，魚(yú)種放養(yǎng)時(shí)間。

海水養(yǎng)殖：（1）養(yǎng)殖對(duì)象：魚(yú)、蝦蟹、貝、藻及海參等；（2）養(yǎng)殖地：淺海、灘涂、港灣、圍塘等；（3）優(yōu)點(diǎn)：突出發(fā)展一些單位面積產(chǎn)量高、生產(chǎn)周期短、經(jīng)濟(jì)價(jià)值高的蝦類、貝類、魚(yú)類及棘皮動(dòng)物等。

2.3.2 深海世界模塊。如果不去接觸未知，我們的感覺(jué)將變得遲鈍，你只有探索才知道答案，深海世界將滿足你的好奇心。收集各種罕見(jiàn)的海底生物資料，用圖片，視頻的形式讓客戶近距離感受海底世界。

（1）丑八怪：在生存條件的影響下，生物的形態(tài)變得千奇百怪，尤其是深海中的那些生物，常年見(jiàn)不到陽(yáng)光，受水壓影響長(zhǎng)得異常丑陋；（2）神秘探索：海底有各種你想象不到的景觀，我們將帶你走進(jìn)高冷的海底世界。

2.3.3 海洋資源模塊。海洋資源指的是自然資源分類之一。指形成和存在于海水或海洋中的有關(guān)資源。我們提供全球海域中魚(yú)類資源分布以及中國(guó)對(duì)資源利用情況。

（1）資源概況：世界水產(chǎn)品中85%左右產(chǎn)自海洋。水深大于300m的深海蘊(yùn)藏著豐富的資源。近些年以來(lái)，各個(gè)國(guó)家在深海領(lǐng)域的競(jìng)爭(zhēng)激烈程度與日俱增；（2）基本分類：按照資源有無(wú)生命、來(lái)源、能否恢復(fù)以及屬性分類；（3）我國(guó)現(xiàn)狀：我國(guó)海洋資源雖然豐富，但開(kāi)發(fā)利用的程度很低。水產(chǎn)養(yǎng)殖業(yè)長(zhǎng)期以來(lái)被看作“富民產(chǎn)業(yè)”是因?yàn)槠渚哂酗暳舷禂?shù)低、不與農(nóng)爭(zhēng)土地、投資回報(bào)較快、經(jīng)濟(jì)效益相對(duì)高等特點(diǎn)。我國(guó)的河流、湖泊、水庫(kù)、池塘等水域多數(shù)處于亞熱帶還有溫帶，氣候溫和，雨量充沛，適合魚(yú)類的養(yǎng)殖，并且淡水水域遼闊；（4）世界資源分布：幾個(gè)大漁場(chǎng)都處在中高緯度的溫、寒帶地區(qū)，而熱帶水域漁業(yè)資源貧乏。

2.3.4 交流互助模塊。交流互助板塊的目的在于充分發(fā)揮信息時(shí)代消息靈通快捷的作用，讓大家足不出戶，便可以和世界各地的朋友交流。支持線下留言，方便大家合理利用時(shí)間。如果你經(jīng)常在互聯(lián)網(wǎng)上讀到各種優(yōu)秀的關(guān)于水生物方面的文章，如果你有一定相關(guān)經(jīng)驗(yàn)愿意幫助別人，在這里你可以充分發(fā)揮自身價(jià)值。如果你有一顆好奇心，在這里你可以盡情地提出問(wèn)題，有很多小伙伴樂(lè)于幫助你一起解決。如果你有滿滿的求知欲，在這里你可以盡情學(xué)習(xí)，得到很多想了解的知識(shí)。如果你想認(rèn)識(shí)很多志同道合的朋友，在這里你可以與人一起交流?？蛻糁g可以交流問(wèn)題，實(shí)現(xiàn)互助，也可以討論共同的愛(ài)好和對(duì)當(dāng)今海洋戰(zhàn)略的看法。

3 各模塊功能實(shí)現(xiàn)的關(guān)鍵技術(shù)

3.1 基礎(chǔ)功能

（1）網(wǎng)站鏈接：網(wǎng)站鏈接分為內(nèi)鏈和外鏈。內(nèi)鏈?zhǔn)侵副菊緝?nèi)部的鏈接，外鏈?zhǔn)侵竿獠烤W(wǎng)站指向本站的鏈接；（2）CSS樣式：CSS是一種用來(lái)表現(xiàn)HTML（標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言的一個(gè)應(yīng)用）或XML（標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言的一個(gè)子集）等文件樣式的計(jì)算機(jī)語(yǔ)言。CSS不僅可以靜態(tài)地修飾網(wǎng)頁(yè)，還可以配合各種腳本語(yǔ)言動(dòng)態(tài)地對(duì)網(wǎng)頁(yè)各元素進(jìn)行格式化，能夠?qū)W(wǎng)頁(yè)中元素位置的排版進(jìn)行像素級(jí)精確控制，擁有對(duì)網(wǎng)頁(yè)對(duì)象和模型樣式編輯的能力，并支持濾鏡；（3）網(wǎng)頁(yè)框架集：框架是瀏覽器窗口中的一個(gè)區(qū)域，它可以顯示與瀏覽器窗口的其余部分中所顯示內(nèi)容無(wú)關(guān)的HTML文檔。框架集是HTML文件，它定義一組框架的布局和屬性；（4）模版與庫(kù)：簡(jiǎn)化網(wǎng)頁(yè)，提高工作效率。

3.2 擴(kuò)展功能

（1）添加背景音樂(lè)：播放背景音樂(lè)；（2）播放Flash動(dòng)畫(huà)：在網(wǎng)站上下載和觀看水族館小短片和相關(guān)精彩視屏；（3）彈出菜單和下拉鏈表：更好的用戶體驗(yàn)；（4）聯(lián)系我們：指導(dǎo)用戶更好的使用網(wǎng)站；（5）跳轉(zhuǎn)菜單、上傳圖像：更好地突出網(wǎng)站的開(kāi)源共享性，使用戶體驗(yàn)更有趣；（6）網(wǎng)絡(luò)投票系統(tǒng)：幫助我們收集用戶信息和產(chǎn)品反饋，更好、更有針對(duì)性地進(jìn)行產(chǎn)品升級(jí)和重點(diǎn)用戶個(gè)性化服務(wù)；（7）留言板：通過(guò)建立社區(qū)論壇的方式，能夠加強(qiáng)網(wǎng)站的推廣，引入競(jìng)爭(zhēng)機(jī)制，完善產(chǎn)品環(huán)節(jié)的把控，在產(chǎn)生經(jīng)濟(jì)效應(yīng)的同時(shí)還能提高競(jìng)爭(zhēng)力。

4 特色與創(chuàng)新

（1）把傳統(tǒng)大型實(shí)體水族館放在一個(gè)網(wǎng)絡(luò)平臺(tái)上，實(shí)現(xiàn)虛擬化、微型化。充分發(fā)揮傳統(tǒng)水族館供觀賞及科研價(jià)值的同時(shí)又滿足大家想要節(jié)約時(shí)間等現(xiàn)實(shí)要求；（2）節(jié)約人力成本，避免了現(xiàn)實(shí)中建立生態(tài)系統(tǒng)展缸。魚(yú)缸占地面積大，能耗大，而且要考慮水質(zhì)、餌料、流速等因素，還要解決一些機(jī)械過(guò)濾、生物過(guò)濾等難題。數(shù)字化水族館實(shí)現(xiàn)綠色化的水族館，降低成本；（3）深海生物難以捕捉，傳統(tǒng)水族館通常展示標(biāo)本，數(shù)字化水族館直接避免了捕捉過(guò)程，且展示其動(dòng)態(tài)生活狀態(tài)；（4）增加了交流互助板塊，讓大家暢所欲言，補(bǔ)充遺漏知識(shí)點(diǎn)，不留遺憾。且大家可以根據(jù)自己的時(shí)間在任何地方選擇什么時(shí)候?yàn)g覽，避免時(shí)間限制與地理限制。

5 結(jié)語(yǔ)

本文將傳統(tǒng)的水族館和信息技術(shù)相結(jié)合，設(shè)計(jì)并實(shí)現(xiàn)了基于網(wǎng)站技術(shù)的數(shù)字化水族館。數(shù)字化水族館不受時(shí)間、地域限制，客戶可以根據(jù)自己的意愿選擇瀏覽目標(biāo)。在這個(gè)信息時(shí)代，將水生物放到網(wǎng)絡(luò)平臺(tái)上將成為一種趨勢(shì)。基于Web技術(shù)的數(shù)字化水族館可以為客戶提供一個(gè)學(xué)習(xí)專業(yè)知識(shí)、交流新發(fā)現(xiàn)的平臺(tái)。

[1]柴凱斌．淺談我國(guó)魚(yú)類增養(yǎng)殖業(yè)的現(xiàn)狀與未來(lái)發(fā)展[J]．科技致富向?qū)В?014，（30）.

[2]高艷波，李慧青，柴玉萍，麻常雷．深海高技術(shù)發(fā)展現(xiàn)狀及趨勢(shì)[J]．海洋技術(shù)學(xué)報(bào)，2010，（3）.

（責(zé)任編輯：黃銀芳）

TP391

1009-2374（2017）07-0018-02

10.13535/j.cnki.11-4406/n.2017.07.008

何晶（1997-），女，遼寧沈陽(yáng)人，大連海洋大學(xué)本科在讀學(xué)生，研究方向：食品科學(xué)與工程；張?chǎng)危?979-），男，吉林遼源人，大連海洋大學(xué)副教授，研究生，研究方向：計(jì)算機(jī)應(yīng)用技術(shù)。

A