地表热环境时空变化特征分析的动态展示系统

张 飞，任 帅，王 娟，杨 霞，周 梅

（1. 新疆大学 资源与环境科学学院， 新疆 乌鲁木齐830046；2. 新疆大学 绿洲生态教育部重点实验室，新疆 乌鲁木齐830046；3. 新疆智慧城市与环境建模普通高校重点实验室，新疆 乌鲁木齐830046）

地表热环境时空变化特征分析的动态展示系统

张 飞1,2,3，任 帅1，王 娟1，杨 霞1，周 梅1,2,3

（1. 新疆大学 资源与环境科学学院， 新疆 乌鲁木齐830046；2. 新疆大学 绿洲生态教育部重点实验室，新疆 乌鲁木齐830046；3. 新疆智慧城市与环境建模普通高校重点实验室，新疆 乌鲁木齐830046）

将SRT项目以网页的形式展现出来,通过网页将SRT项目的研究区域、研究目的、研究方法、研究结果以及数据成果进行动态展示，将展示系统上传到网端服务器，可让更多的人参与交流和学习，具有良好的交互性、共享性、开放性、协作性和自主性，是传统展板和PPT无法比拟的。

网页制作；超文本标记语言；展示系统

网页是网络的重要组成，网络依赖网页与用户进行交互[1]。让用户使用的计算机来解释网页的原因很清楚，就是尽量避免让网络承受太多的负担[1]，尽可能使需要由网络来传输的信息量最小化。基于以上考虑，发展了HTML 语言，即超级文本标记语言。本文利用HTML语言把Dreamweaver、Flash、Photoshop等软件与具体的网站设计工作结合起来，最终完成了项目展示系统的网站创建。

1 确定网站内容与目标

确定网站内容与目标需要考虑的因素包括：确定网站主题；网站要用到什么样的元素;哪些元素需要重复使用；元素之间的联系；元素如何运动；网站所需要的素材与资源；背景音乐的风格；整个网站可以分成几个逻辑块，各个逻辑块间的关系如何。根据以上因素构建出网站的整体结构，并画出结构关系，从而确定网站的选题内容与整体风格。

2 网站结构规划

确立网站结构规划就是建立网站的结构层次图和定义导航。目录结构的好坏影响网站的浏览，决定了能否从网站中尽快获得信息，且对站点的维护、内容更新、扩充和移植有重要影响[2]。建立一个清晰简明的目录，各个板块中有子内容，每个子栏目在首页里仅保留名称。确定网站的静态内容与动态内容及其在网页上的位置与比例，并经常更新。根据本次SRT的需求除了SRT项目的“引言”、“研究区介绍”、“研究方法”、“结果分析”模块以外，还增加“实验室介绍”、“考察照片”、“温度反演”、“热点话题”和“联系我们”等模块，结构关系如图1所示。

图1 结构关系图

3 素材准备

确定好站点目标和结构之后，开始收集相关资源和材料。站点的内容一定要丰富。将不同的内容分几个板块，不但方便网站设计者，更方便用户获取相关信息[3]。要收集的资源和材料主要有以下几种：

1）文字资料。文字是网站的主题，无论多么复杂的网页，文本都是最基本的元素。无论是什么类型的网站，都离不开叙述性的文字。另外，文本有编辑方便、文件小和容易被下载等特点。本网页的文字资料来源于项目前期所收集的数据，以及经过处理后得出的数据。

2）图片资料。网站的一个重要要求是图文并茂，如果只有文字，浏览者看了不免觉得枯燥无味。文字的解说再加上一些相关图片，让浏览者能够了解更多信息，更能增加浏览者的印象。图片要和文字内容息息相关，要能相互补充。本网页的图片资料来源于项目前期所收集的影像资料，以及经过处理后得出的图片数据。部分图片、PSD文件来自于昵图网(www.nipic.com)和素材网(www.sccnn.com)。

3）代码片段。在编写代码时，程序员可以借鉴其他成熟、优秀的代码片段，以提高工作效率。本网页的部分源码来自于CSDN网（www.csdn.net）和源码之家网（www.mycodes.net）；部分层叠样式文件来自于站长之家网（down.chinaz.com）。

4 制作步骤

4.1 框架设计

根据本次SRT项目的需求，初步框架设想是将主页做成Flash，通过滑动鼠标可以显示各模块按钮，通过各模块按钮可以查看各模块内容，再将Flash发布为HTML[4]。其框架如图2。

图2 主页框架

在Photoshop CS4中利用各种图片素材将主页设计成符合项目的需求，保存为PSD格式，再将主页的PSD利用切片工具，将主页的PSD按照各模块以及按钮尺寸的要求，切成切片，保存为HTML文件，命名为“index”。打开Dreamweaver CS4，点击新建站点，将主页的HTML文件加载进去，同时注意保持原来的文件结构一致。

4.2 主页动画制作

打开Flash CS4，导入→导入到舞台，将制作动画所需的素材导入到Flash中，新建影片剪辑、按钮，调整素材中的各元件、按钮以及视频剪辑的位置如图3。

图3 元件位置

窗口→时间轴，调出时间轴设置各元件开始、变化以及终止动作的时间，就可以利用时间轴、补间动画调出意想不到的动画效果。利用增加和删除关键帧控制按钮和鼠标的动作。

窗口→动作，调出ActionScript编辑器，来控制动画效果以及鼠标事件，实现鼠标滑动屏幕时，Flash动画图片也随之变化，鼠标停留在导航栏时，显示出子栏的菜单按钮，点击按钮进入到相关的网页链接的功能，如图4所示（部分代码）。

图4 ActionScript代码

开始→导出→导出为动画，将制作的动画导出为“SWF”格式，并保存。同时将Flash源文件保存为Flash文档文件，以备后面的修改和添加动画。

打开Dreamweaver CS4，导入“index.html”，将页面上的切片图片替换为SWF动画，并保存。

4.3 子网页制作

打开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，并放入到站点文件夹中。“引言”、“研究区介绍”、“研究方法”、“结果分析”、“实验室介绍”、“热点话题”和“联系我们”等模块的子网页制作步骤同上。

4.4 特殊网页效果制作

“考察照片”、“温度反演”不同于其他模块网页，这两子网页主要是由JScript编写，来实现图片展示的动画效果。这里以“考察照片”子网页为例，讲解其主要制作步骤。

CSS→编辑规则，将页面背景设置为黑色。

插入→插入表格，并将表格居中，表格将作为照片展示的边框。

代码→打开代码编辑器，编写JScript代码，实现展示项目进行中的照片和研究区的实地照片，鼠标指向图片时，图片放大，并在信息栏显示出照片所包含的信息的功能，如图6所示(部分代码)。

图6 JScript代码

文件→在浏览器中预览→IExplore，在浏览器中查看制作效果，以便调整在Dreamweaver 中编辑时没有发现的编辑错误以及调整网页的美观度和协调度，然后保存成HTML，并放入到站点文件夹中。

4.5 添加链接

打开Flash CS4，文件→打开，打开主页动画Flash文档文件，窗口→动作，调出ActionScript编辑器，为动画上的各个按钮添加链接。

开始→导出→导出为动画，将制作的动画导出为“SWF”格式，并保存。同时将Flash源文件保存为Flash文档文件。

打开Dreamweaver CS4，文件→打开，打开主页“index.html”，将里面的动画替换为上面导出的SWF动画，并保存。

5 测 试

网站测试是指的当一个网站制作完上传到服务器之前针对网站的各项性能情况的一项检测工作[6]。它与软件测试有一定的区别，除了要求测试外观的一致性以外，还要求测试各种浏览器的兼容性[7]和在不同环境下的显示差异。本项目SRT网页展示系统所测试的主要内容是：网页显示的文字、图片数据是否与源数据一致；各页面配色是否合理；动画按钮灵敏度是否良好；各按钮链接是否正确。若发现不正确的地方，进行修改。

6 结 语

通过网页，将SRT项目的研究区域、研究目的、研究方法、研究结果以及数据成果进行动态展示，还可以将展示系统上传到网端服务器，让更多的人参与交流和学习。网页具有良好的交互性、共享性、开放性、协作性和自主性等主要特征，而这些特征正好符合SRT项目锻炼学生独立、创新能力的需求。

[1] 高复先.信息资源规划[M].北京：清华大学出版社,2002

[2] 吴云卫.网页制作学习软件——网页第三类接触[J].个人电脑,2004(3):52-54

[3] 吴冬曼.图书馆网站的功能与主页设计要素[J].图书馆理论与实践, 2002(2):32-36

[4] 关秀英.Flash CS4商业动画、片头与网站设计案例精解[M].北京:清华大学出版社,2010

[5] 毋玉芝,靳孝峰.基于Web标准的CSS在Dreamweaver8中的使用[J].焦作大学学报,2010(2):99-100

[6] 史伟,王晨.《网页制作》教学过程及方法心得体会[J].硅谷,2010 (4):47-49

[7] 莫安文.《网页制作技术》课程的理实一体化教学[J].中国科技信息,2010 (10):13-15

P208

B

1672-4623（2015）04-0017-03

10.3969/j.issn.1672-4623.2015.04.007

张飞，博士，副教授，主要从事干旱区资源与环境遥感应用研究。

2014-08-02。

项目来源：国家自然科学基金资助项目(41361045、41130531)；教育部“长江学者和创新团队发展计划”创新团队资助项目（IRT1180）；自治区青年科技创新人才培养工程资助项目（2013731002）；新疆绿洲生态（教育部省部共建）重点实验室开放课题资助项目（XJDX0201-2012-01）；新疆大学大学生创新训练计划资助项目（XJU-SRT-13065）；新疆大学校级精品课程“遥感地学分析”资助项目（2012-76-10）。