IT数码

前 言   

    随着气象服务领域拓展和互联网技术的广泛应用，各级台站继开通农网服务平台之后，逐步开展了基于互联网的气象服务，为用户提供包括政策法规、气象知识、天气实况和预报资料以及防雷、121、多媒体广告、升空物释放等诸多方面的气象服务信息。其中，在实况和预报资料显示方面已突破传统的利用表格显示各站点资料的方法，进而采用在站点底图上定位城市（或乡镇）并动态显示实况(或预报，或其它方面的资料)的方式。本文就如何实现网页中站点定位加以阐述，供参考。

1 网页布局、绝对定位和相对定位
    在网站设计的过程中，通常用“表格”来分割和界定各显示内容，用“层”和“层”的位置、隐现等来界定各活动元素、显示不同层次的资料，用“CSS”来描述元素的显示风格，从而达到界面美观、内容丰富和风格活泼的目的。
    尽管如此，仍然经常发生因页面改变大小或屏幕分辨率改变时发生错位现象。这是因为表格与层的定位原理不一样：表格使用的是相对定位（Rclative Positioning），即按文字流的顺序从左到右从上到下排列对象，一个对象的位置取决于其前面的对象（类似于在段落中删掉一个字，后面的字自动前移）；层采用的是绝对定位（Absolute Positioning），使用精确的座标系。此座标系的建立决定于该绝对定位元素母层次级的上一个绝对定位元素，如—个层包含另—个层时，子层的定位座标系建立在母层基础上，如没有上层绝对定位元素则相对于BODY元素。当页面改变大小或屏幕分辨率发生改变时，相对定位的元素由于重新排列相互位置使位置改变，而绝对定位的元素如层等会保持原有位置，从而产生错位。
    解决这个问题的方法就是利用“绝对定位的座标系决定于上一层次绝对定位元素”的原理，在表格里插入一个绝对定位但没有LEFT和TOP属性的层（实质上是放进了—个随相对定位元素同步改变位置的绝对定位座标系），这样它的子层将以此座标为基准进行绝对定位，即使改变分辨率与窗口大小也不会造成错位了。

2 “层的精确定位”自动编程实现方法
    在Dreamweaver中插入一个表格，并将表格的对齐方式设为“居中”，以便在改变显示器分辨率后仍能得到满意的显示效果。根据事先设计的格式和内容，编辑各单元格的资料。插入一个层到存放站点底图的单元格（该单元格的高度和宽度设置成与底图大小—致）作为“父层”，并保持该层的左边界和上边界的空值（这两个参数绝对不能有数值，否则就变成绝对定位了），在层中插入站点底图和若干个新层作为“子层”（在插入“子层”时，保持文字光标在“父层”内，否则，子层不能实现相对于“父层”的绝对定位），用鼠标调整各子层与底图的站点位置—致。至此就初步实现了“层的精确定位”。
采用此方法处理的网页的缺点是：具有明显的静态网页特性。要实现资料的动态显示和选择性显示还需进行数据库编程和JAVA编程（即配合站点实况、预报数据库进行进—步的处理实现动态网页效果，并可配合“子层”显示属性控制对应站点的资料是否显示），操作烦琐。

3 “层的精确定位”手工编程实现方法
    实际应用中，通常利用数据库保存站点和站点信息（或实况、预报），因此只要在数据库中增加站点上边界和左边界两个字段，分别存放子层的“top”和“left”值，实现子层在程序中自动生成，不仅可以简化网页设计而且能有选择地显示站点资料。

    在网页页面设计时，直接将站点底图插入单元格，然后在此单元格中插入位置属性为relative的层并将宽度和高度设置成底图大小，并在该层中根据按一定条件选择的资料，生成并列嵌套的若干位置属性为absolute的子层即可。
3.1 设计数据库（示例数据库，具体内容可根据需要进行修改或扩充），并用SQL、Access或Mysql实现。
3.2 编辑包含各站点的底图，同时从Photoshop中取出站点对应的坐标，并添加到数据库。其中横坐标对应数据库的STATIONLEFT，纵坐标对应数据库的STATIONTOP。
3.3 编写一个采集实时资料（自动站数据由单收站每小时广播一次；本站自动站数据可从ZZ.TXT文件中实时获取。如果需要的话，也可向相关台站提供自动传输实时数据的软件，进而获得该台站的实时资料）和预报资料（或从单收站上获取，或自己录入）的软件，实时更新数据库的内容。
3.4 用asp或php编写资料显示代码（以下为php编写的资料显示代码。其中$condition是显示条件，“sub／head.php”为保存在sub子目录的网页头部文件，“sub/head.php”为保存在sub子目录的网页尾部文件，(.\image\dt.gif）为保存在image子目录的底图文件）。
<?include（“sub/head.php”）；?>
<?
$DB_SERVER=‘127.0.0.1’；
$DB_USER=‘username’；
GDB_PASS=‘password’；
$DB_NAME=‘weather’；
$1ink=mysql_connect($DB_SERVER，$DB_USER，$DB_PASS)
or die(“连接数据库失败”)：
mysql_select_db($DB_NAME)：
?>
<table width=750 border=0 align=center cellpadding=0 cellspacing=0
bgco1or=#ffffff style=‘border-bottom：#000000 lpx solid’>
<tr>
<td
Style=‘background—image:url(.\image\dt.gif)；width：640px；height：803px’>
<div style=“position:relative; width:640px; height:803px;”
<?
if(isset($＿GET[‘condition’]))
$Condition=$＿GET[‘condition’];
$query＿string=“select*from dbname where”.$condition.“order by SEQ”；
$result=mysql＿query($query＿string) or die(“查询失败”.$query＿string);
if(mysql＿num＿rows($result)!=0)
{
while($row=mysql＿fetch＿array($result))
{
echo“<div id=”.$row[‘SEQ’].” style=’position:absolute;
left:“.$row[’STATIONLEFT’].”px; top:“.row[’STATIONTOP’].”px;
width:40px; heiht:13px;z-index:“.$row[’SEQ’].”’><a href=#
title=’“.$row[’REALTIME’].”’
<font size=2 color=#000000>“.$row[’STATIONNAME’].”</font></a></div>”；
}
}
?>
</div
</td>
</tr></table>
<?include(“sub/tail.php”);?>

4 结语 
    气象服务产品从“手写”→“打字机打印”→“打印机打印”的文字文稿和图文文稿形式发展到利用互联网提供电子文字文稿以及电子图文文稿形式，不仅是服务手段的更新，也是服务能力和水平的展现。“层的精确定位”是利用互联网进行气象服务时使用的一个技术手段，其宗旨也是最大限度地利用现有资源，以直观、快捷、方便的形式将服务产品展现给各类用户，更大程度地提高气象服务的吸引力和亲和力。