地表熱環(huán)境時(shí)空變化特征分析的動(dòng)態(tài)展示系統(tǒng)

張 飛，任 帥，王 娟，楊 霞，周 梅

（1. 新疆大學(xué) 資源與環(huán)境科學(xué)學(xué)院， 新疆 烏魯木齊830046；2. 新疆大學(xué) 綠洲生態(tài)教育部重點(diǎn)實(shí)驗(yàn)室，新疆 烏魯木齊830046；3. 新疆智慧城市與環(huán)境建模普通高校重點(diǎn)實(shí)驗(yàn)室，新疆 烏魯木齊830046）

地表熱環(huán)境時(shí)空變化特征分析的動(dòng)態(tài)展示系統(tǒng)

張 飛1,2,3，任 帥1，王 娟1，楊 霞1，周 梅1,2,3

（1. 新疆大學(xué) 資源與環(huán)境科學(xué)學(xué)院， 新疆 烏魯木齊830046；2. 新疆大學(xué) 綠洲生態(tài)教育部重點(diǎn)實(shí)驗(yàn)室，新疆 烏魯木齊830046；3. 新疆智慧城市與環(huán)境建模普通高校重點(diǎn)實(shí)驗(yàn)室，新疆 烏魯木齊830046）

將SRT項(xiàng)目以網(wǎng)頁(yè)的形式展現(xiàn)出來(lái),通過(guò)網(wǎng)頁(yè)將SRT項(xiàng)目的研究區(qū)域、研究目的、研究方法、研究結(jié)果以及數(shù)據(jù)成果進(jìn)行動(dòng)態(tài)展示，將展示系統(tǒng)上傳到網(wǎng)端服務(wù)器，可讓更多的人參與交流和學(xué)習(xí)，具有良好的交互性、共享性、開(kāi)放性、協(xié)作性和自主性，是傳統(tǒng)展板和PPT無(wú)法比擬的。

網(wǎng)頁(yè)制作；超文本標(biāo)記語(yǔ)言；展示系統(tǒng)

網(wǎng)頁(yè)是網(wǎng)絡(luò)的重要組成，網(wǎng)絡(luò)依賴網(wǎng)頁(yè)與用戶進(jìn)行交互[1]。讓用戶使用的計(jì)算機(jī)來(lái)解釋網(wǎng)頁(yè)的原因很清楚，就是盡量避免讓網(wǎng)絡(luò)承受太多的負(fù)擔(dān)[1]，盡可能使需要由網(wǎng)絡(luò)來(lái)傳輸?shù)男畔⒘孔钚』；谝陨峡紤]，發(fā)展了HTML 語(yǔ)言，即超級(jí)文本標(biāo)記語(yǔ)言。本文利用HTML語(yǔ)言把Dreamweaver、Flash、Photoshop等軟件與具體的網(wǎng)站設(shè)計(jì)工作結(jié)合起來(lái)，最終完成了項(xiàng)目展示系統(tǒng)的網(wǎng)站創(chuàng)建。

1 確定網(wǎng)站內(nèi)容與目標(biāo)

確定網(wǎng)站內(nèi)容與目標(biāo)需要考慮的因素包括：確定網(wǎng)站主題；網(wǎng)站要用到什么樣的元素;哪些元素需要重復(fù)使用；元素之間的聯(lián)系；元素如何運(yùn)動(dòng)；網(wǎng)站所需要的素材與資源；背景音樂(lè)的風(fēng)格；整個(gè)網(wǎng)站可以分成幾個(gè)邏輯塊，各個(gè)邏輯塊間的關(guān)系如何。根據(jù)以上因素構(gòu)建出網(wǎng)站的整體結(jié)構(gòu)，并畫(huà)出結(jié)構(gòu)關(guān)系，從而確定網(wǎng)站的選題內(nèi)容與整體風(fēng)格。

2 網(wǎng)站結(jié)構(gòu)規(guī)劃

確立網(wǎng)站結(jié)構(gòu)規(guī)劃就是建立網(wǎng)站的結(jié)構(gòu)層次圖和定義導(dǎo)航。目錄結(jié)構(gòu)的好壞影響網(wǎng)站的瀏覽，決定了能否從網(wǎng)站中盡快獲得信息，且對(duì)站點(diǎn)的維護(hù)、內(nèi)容更新、擴(kuò)充和移植有重要影響[2]。建立一個(gè)清晰簡(jiǎn)明的目錄，各個(gè)板塊中有子內(nèi)容，每個(gè)子欄目在首頁(yè)里僅保留名稱。確定網(wǎng)站的靜態(tài)內(nèi)容與動(dòng)態(tài)內(nèi)容及其在網(wǎng)頁(yè)上的位置與比例，并經(jīng)常更新。根據(jù)本次SRT的需求除了SRT項(xiàng)目的“引言”、“研究區(qū)介紹”、“研究方法”、“結(jié)果分析”模塊以外，還增加“實(shí)驗(yàn)室介紹”、“考察照片”、“溫度反演”、“熱點(diǎn)話題”和“聯(lián)系我們”等模塊，結(jié)構(gòu)關(guān)系如圖1所示。

圖1 結(jié)構(gòu)關(guān)系圖

3 素材準(zhǔn)備

確定好站點(diǎn)目標(biāo)和結(jié)構(gòu)之后，開(kāi)始收集相關(guān)資源和材料。站點(diǎn)的內(nèi)容一定要豐富。將不同的內(nèi)容分幾個(gè)板塊，不但方便網(wǎng)站設(shè)計(jì)者，更方便用戶獲取相關(guān)信息[3]。要收集的資源和材料主要有以下幾種：

1）文字資料。文字是網(wǎng)站的主題，無(wú)論多么復(fù)雜的網(wǎng)頁(yè)，文本都是最基本的元素。無(wú)論是什么類型的網(wǎng)站，都離不開(kāi)敘述性的文字。另外，文本有編輯方便、文件小和容易被下載等特點(diǎn)。本網(wǎng)頁(yè)的文字資料來(lái)源于項(xiàng)目前期所收集的數(shù)據(jù)，以及經(jīng)過(guò)處理后得出的數(shù)據(jù)。

2）圖片資料。網(wǎng)站的一個(gè)重要要求是圖文并茂，如果只有文字，瀏覽者看了不免覺(jué)得枯燥無(wú)味。文字的解說(shuō)再加上一些相關(guān)圖片，讓瀏覽者能夠了解更多信息，更能增加瀏覽者的印象。圖片要和文字內(nèi)容息息相關(guān)，要能相互補(bǔ)充。本網(wǎng)頁(yè)的圖片資料來(lái)源于項(xiàng)目前期所收集的影像資料，以及經(jīng)過(guò)處理后得出的圖片數(shù)據(jù)。部分圖片、PSD文件來(lái)自于昵圖網(wǎng)(www.nipic.com)和素材網(wǎng)(www.sccnn.com)。

3）代碼片段。在編寫代碼時(shí)，程序員可以借鑒其他成熟、優(yōu)秀的代碼片段，以提高工作效率。本網(wǎng)頁(yè)的部分源碼來(lái)自于CSDN網(wǎng)（www.csdn.net）和源碼之家網(wǎng)（www.mycodes.net）；部分層疊樣式文件來(lái)自于站長(zhǎng)之家網(wǎng)（down.chinaz.com）。

4 制作步驟

4.1 框架設(shè)計(jì)

根據(jù)本次SRT項(xiàng)目的需求，初步框架設(shè)想是將主頁(yè)做成Flash，通過(guò)滑動(dòng)鼠標(biāo)可以顯示各模塊按鈕，通過(guò)各模塊按鈕可以查看各模塊內(nèi)容，再將Flash發(fā)布為HTML[4]。其框架如圖2。

圖2 主頁(yè)框架

在Photoshop CS4中利用各種圖片素材將主頁(yè)設(shè)計(jì)成符合項(xiàng)目的需求，保存為PSD格式，再將主頁(yè)的PSD利用切片工具，將主頁(yè)的PSD按照各模塊以及按鈕尺寸的要求，切成切片，保存為HTML文件，命名為“index”。打開(kāi)Dreamweaver CS4，點(diǎn)擊新建站點(diǎn)，將主頁(yè)的HTML文件加載進(jìn)去，同時(shí)注意保持原來(lái)的文件結(jié)構(gòu)一致。

4.2 主頁(yè)動(dòng)畫(huà)制作

打開(kāi)Flash CS4，導(dǎo)入→導(dǎo)入到舞臺(tái)，將制作動(dòng)畫(huà)所需的素材導(dǎo)入到Flash中，新建影片剪輯、按鈕，調(diào)整素材中的各元件、按鈕以及視頻剪輯的位置如圖3。

圖3 元件位置

窗口→時(shí)間軸，調(diào)出時(shí)間軸設(shè)置各元件開(kāi)始、變化以及終止動(dòng)作的時(shí)間，就可以利用時(shí)間軸、補(bǔ)間動(dòng)畫(huà)調(diào)出意想不到的動(dòng)畫(huà)效果。利用增加和刪除關(guān)鍵幀控制按鈕和鼠標(biāo)的動(dòng)作。

窗口→動(dòng)作，調(diào)出ActionScript編輯器，來(lái)控制動(dòng)畫(huà)效果以及鼠標(biāo)事件，實(shí)現(xiàn)鼠標(biāo)滑動(dòng)屏幕時(shí)，F(xiàn)lash動(dòng)畫(huà)圖片也隨之變化，鼠標(biāo)停留在導(dǎo)航欄時(shí)，顯示出子欄的菜單按鈕，點(diǎn)擊按鈕進(jìn)入到相關(guān)的網(wǎng)頁(yè)鏈接的功能，如圖4所示（部分代碼）。

圖4 ActionScript代碼

開(kāi)始→導(dǎo)出→導(dǎo)出為動(dòng)畫(huà)，將制作的動(dòng)畫(huà)導(dǎo)出為“SWF”格式，并保存。同時(shí)將Flash源文件保存為Flash文檔文件，以備后面的修改和添加動(dòng)畫(huà)。

打開(kāi)Dreamweaver CS4，導(dǎo)入“index.html”，將頁(yè)面上的切片圖片替換為SWF動(dòng)畫(huà)，并保存。

4.3 子網(wǎng)頁(yè)制作

打開(kāi)Dreamweaver CS4，編寫CSS[5]（部分代碼）如下：

/* Logo */

#logo {

f oat: left;

width: 260px;

background: url(images/homepage01.gif) repeat-x left bottom;

height: 70px;

}

#logo h1 {

padding: 100px 0px 15px 0px;

text-transform: lowercase;

font-family: "仿宋";

}

/* Menu */

#menu {

f oat: right;

background: url(images/homepage01.gif) repeat-x left bottom;

}

插入→插入表格，并在表格中加入描述性文字，效果如圖5所示。

圖5 插入文字

保存HTML，并放入到站點(diǎn)文件夾中。“引言”、“研究區(qū)介紹”、“研究方法”、“結(jié)果分析”、“實(shí)驗(yàn)室介紹”、“熱點(diǎn)話題”和“聯(lián)系我們”等模塊的子網(wǎng)頁(yè)制作步驟同上。

4.4 特殊網(wǎng)頁(yè)效果制作

“考察照片”、“溫度反演”不同于其他模塊網(wǎng)頁(yè)，這兩子網(wǎng)頁(yè)主要是由JScript編寫，來(lái)實(shí)現(xiàn)圖片展示的動(dòng)畫(huà)效果。這里以“考察照片”子網(wǎng)頁(yè)為例，講解其主要制作步驟。

CSS→編輯規(guī)則，將頁(yè)面背景設(shè)置為黑色。

插入→插入表格，并將表格居中，表格將作為照片展示的邊框。

代碼→打開(kāi)代碼編輯器，編寫JScript代碼，實(shí)現(xiàn)展示項(xiàng)目進(jìn)行中的照片和研究區(qū)的實(shí)地照片，鼠標(biāo)指向圖片時(shí)，圖片放大，并在信息欄顯示出照片所包含的信息的功能，如圖6所示(部分代碼)。

圖6 JScript代碼

文件→在瀏覽器中預(yù)覽→IExplore，在瀏覽器中查看制作效果，以便調(diào)整在Dreamweaver 中編輯時(shí)沒(méi)有發(fā)現(xiàn)的編輯錯(cuò)誤以及調(diào)整網(wǎng)頁(yè)的美觀度和協(xié)調(diào)度，然后保存成HTML，并放入到站點(diǎn)文件夾中。

4.5 添加鏈接

打開(kāi)Flash CS4，文件→打開(kāi)，打開(kāi)主頁(yè)動(dòng)畫(huà)Flash文檔文件，窗口→動(dòng)作，調(diào)出ActionScript編輯器，為動(dòng)畫(huà)上的各個(gè)按鈕添加鏈接。

開(kāi)始→導(dǎo)出→導(dǎo)出為動(dòng)畫(huà)，將制作的動(dòng)畫(huà)導(dǎo)出為“SWF”格式，并保存。同時(shí)將Flash源文件保存為Flash文檔文件。

打開(kāi)Dreamweaver CS4，文件→打開(kāi)，打開(kāi)主頁(yè)“index.html”，將里面的動(dòng)畫(huà)替換為上面導(dǎo)出的SWF動(dòng)畫(huà)，并保存。

5 測(cè) 試

網(wǎng)站測(cè)試是指的當(dāng)一個(gè)網(wǎng)站制作完上傳到服務(wù)器之前針對(duì)網(wǎng)站的各項(xiàng)性能情況的一項(xiàng)檢測(cè)工作[6]。它與軟件測(cè)試有一定的區(qū)別，除了要求測(cè)試外觀的一致性以外，還要求測(cè)試各種瀏覽器的兼容性[7]和在不同環(huán)境下的顯示差異。本項(xiàng)目SRT網(wǎng)頁(yè)展示系統(tǒng)所測(cè)試的主要內(nèi)容是：網(wǎng)頁(yè)顯示的文字、圖片數(shù)據(jù)是否與源數(shù)據(jù)一致；各頁(yè)面配色是否合理；動(dòng)畫(huà)按鈕靈敏度是否良好；各按鈕鏈接是否正確。若發(fā)現(xiàn)不正確的地方，進(jìn)行修改。

6 結(jié) 語(yǔ)

通過(guò)網(wǎng)頁(yè)，將SRT項(xiàng)目的研究區(qū)域、研究目的、研究方法、研究結(jié)果以及數(shù)據(jù)成果進(jìn)行動(dòng)態(tài)展示，還可以將展示系統(tǒng)上傳到網(wǎng)端服務(wù)器，讓更多的人參與交流和學(xué)習(xí)。網(wǎng)頁(yè)具有良好的交互性、共享性、開(kāi)放性、協(xié)作性和自主性等主要特征，而這些特征正好符合SRT項(xiàng)目鍛煉學(xué)生獨(dú)立、創(chuàng)新能力的需求。

[1] 高復(fù)先.信息資源規(guī)劃[M].北京：清華大學(xué)出版社,2002

[2] 吳云衛(wèi).網(wǎng)頁(yè)制作學(xué)習(xí)軟件——網(wǎng)頁(yè)第三類接觸[J].個(gè)人電腦,2004(3):52-54

[3] 吳冬曼.圖書(shū)館網(wǎng)站的功能與主頁(yè)設(shè)計(jì)要素[J].圖書(shū)館理論與實(shí)踐, 2002(2):32-36

[4] 關(guān)秀英.Flash CS4商業(yè)動(dòng)畫(huà)、片頭與網(wǎng)站設(shè)計(jì)案例精解[M].北京:清華大學(xué)出版社,2010

[5] 毋玉芝,靳孝峰.基于Web標(biāo)準(zhǔn)的CSS在Dreamweaver8中的使用[J].焦作大學(xué)學(xué)報(bào),2010(2):99-100

[6] 史偉,王晨.《網(wǎng)頁(yè)制作》教學(xué)過(guò)程及方法心得體會(huì)[J].硅谷,2010 (4):47-49

[7] 莫安文.《網(wǎng)頁(yè)制作技術(shù)》課程的理實(shí)一體化教學(xué)[J].中國(guó)科技信息,2010 (10):13-15

P208

B

1672-4623（2015）04-0017-03

10.3969/j.issn.1672-4623.2015.04.007

張飛，博士，副教授，主要從事干旱區(qū)資源與環(huán)境遙感應(yīng)用研究。

2014-08-02。

項(xiàng)目來(lái)源：國(guó)家自然科學(xué)基金資助項(xiàng)目(41361045、41130531)；教育部“長(zhǎng)江學(xué)者和創(chuàng)新團(tuán)隊(duì)發(fā)展計(jì)劃”創(chuàng)新團(tuán)隊(duì)資助項(xiàng)目（IRT1180）；自治區(qū)青年科技創(chuàng)新人才培養(yǎng)工程資助項(xiàng)目（2013731002）；新疆綠洲生態(tài)（教育部省部共建）重點(diǎn)實(shí)驗(yàn)室開(kāi)放課題資助項(xiàng)目（XJDX0201-2012-01）；新疆大學(xué)大學(xué)生創(chuàng)新訓(xùn)練計(jì)劃資助項(xiàng)目（XJU-SRT-13065）；新疆大學(xué)校級(jí)精品課程“遙感地學(xué)分析”資助項(xiàng)目（2012-76-10）。