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

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

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

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

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

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

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

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

1 概述

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

2 總體設(shè)計

2.1 開發(fā)環(huán)境簡介

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

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

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

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

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)動植物的生產(chǎn)活動。水產(chǎn)養(yǎng)殖分淡水養(yǎng)殖和海水養(yǎng)殖。

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

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

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

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

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

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

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

3 各模塊功能實現(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是一種用來表現(xiàn)HTML（標(biāo)準(zhǔn)通用標(biāo)記語言的一個應(yīng)用）或XML（標(biāo)準(zhǔn)通用標(biāo)記語言的一個子集）等文件樣式的計算機語言。CSS不僅可以靜態(tài)地修飾網(wǎng)頁，還可以配合各種腳本語言動態(tài)地對網(wǎng)頁各元素進行格式化，能夠?qū)W(wǎng)頁中元素位置的排版進行像素級精確控制，擁有對網(wǎng)頁對象和模型樣式編輯的能力，并支持濾鏡；（3）網(wǎng)頁框架集：框架是瀏覽器窗口中的一個區(qū)域，它可以顯示與瀏覽器窗口的其余部分中所顯示內(nèi)容無關(guān)的HTML文檔。框架集是HTML文件，它定義一組框架的布局和屬性；（4）模版與庫：簡化網(wǎng)頁，提高工作效率。

3.2 擴展功能

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

4 特色與創(chuàng)新

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

5 結(jié)語

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

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

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

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

TP391

1009-2374（2017）07-0018-02

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

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

A