上网制作“网络地理图册”网页

 

对应软件已上传资源供下载， 标签： 网络地理图册 网页制作，资源类型：工具类

网络地理图册概念。一套网络地理图册就是由若干个[景点组网页]、[景点网页]构成的。

相对于在网络上建立自己的相册、博客，我们利用[网络地理图册---网页制作工具软件]，制作[景点组网页]、[景点网页]所涉及的概念要多一些，制作步骤也要复杂一些。因此，我们是按照一个已经作好的样例（“2010上海世博”部分展馆网络地理图册）为蓝本进行讲述。这样，陌生概念与实际效果做比对，更易于理解和掌握。

数据层面划分。按照数据层次组织角度讲，在[网络地理图册---网页制作工具软件]中，分为三个数据层面。第一数据层面：上传地图---上海世博导游图欧洲部分；第二数据层面：景点组---C区欧洲部分；第三数据层面：景点---16个展馆。

初识[景点组网页]、[景点网页]

在网络地理图册网页制作过程中：将所有数据化分为三个数据层面。第一数据层面：上传地图；第二数据层面：景点组；第三数据层面：景点。一个上传地图由若干景点组构成，每个景点组最多标注16个景点。网络地理图册网页制作成果以 [景点组网页]和[景点网页]两种形式出现。

[景点组网页]，如图0-1所示。

图0-1

[景点组网页]主要有两屏内容，第一屏，以上传地图为核心，‘上传地图’是一张示意性地图图片，没有比例尺，没有经纬度；第二屏，以谷歌地图为核心，谷歌地图有比例尺、经纬度。

‘第一屏’：主要由页眉、上传地图（JPG/PNG照片）、上传地图上景点和上传地图周围景点照片（一个景点最多8张JPG/PNG照片）组成。

上传地图、景点组照片和景点照片的图象编辑工作均要在制作网络地理图册前完成。

‘上传地图’的放置形式有三种：一是动画：地图上景点有动画；二是横放：地图横放，景点照片在地图上下两行；三是竖放：地图竖放，景点照片在地图两侧。

‘上传地图’的放置形式为横放、竖放情况下，系统会生成由地图上景点位置指向地图边缘景点照片的指示线。

第一数据层面（上传地图）工作主要有‘上传地图参数管理’、‘更新上传地图’两项内容。

第二数据层面（景点组）工作主要有‘景点组参数设置’、‘景点组谷歌地图窗口定位’两项内容。                 

‘地图景点指示线的颜色’有五种。一是黄色：表示该‘地图上景点所挂接[景点网页]类型’为‘两屏’；二是蓝色：表示该‘地图上景点所挂接[景点网页]类型’为‘第一屏’；三是绿色：表示该‘地图上景点所挂接[景点网页]类型’为‘第二屏’；四是黄绿色：表示该‘地图上景点所挂接[景点网页]类型’为‘其他网页’；五是棕色：表示该‘地图上景点所挂接[景点网页]类型’为‘景点组’，即该景点下挂接一[景点组网页]。

上传地图上景点由其图例表示，图例下挂网页形式与上传地图周围景点照片下挂网页形式一致。

第一屏和第二屏之间由景点组名称（下挂一个其他网页）、景点组简介和景点组照片（一个景点组最多8张JPG/PNG照片（含页眉））横向分割。

景点组照片下挂接形式有两种：第一种是挂接[景点组照片网页]，该网页将本景点组所有照片和相应文字说明全部列出，此时，该景点组照片标题颜色为黑色；第二种是挂接本[景点组网页]，不同的是上传地图被本景点组照片取代，此时，该景点组照片标题颜色为红色。

‘第二屏’：主要由谷歌地图、谷歌地图上景点和谷歌地图周围景点照片（一个景点最多8张JPG/PNG照片）组成。

谷歌地图上有景点（由景点对应的图例表示）、景点指示线和简单图形（点、线、面，最多16个），谷歌地图两侧和下面有景点对应的景点照片。鼠标移动到谷歌地图上景点时，自动显示景点文字信息。

‘谷歌地图景点指示线的颜色’有五种。一是黄色：表示该‘景点所挂接[景点网页]类型’为‘两屏’；二是蓝色：表示该‘景点所挂接[景点网页]类型’为‘第一屏’；三是绿色：表示该‘景点所挂接[景点网页]类型’为‘第二屏’；四是黄绿色：表示该‘景点所挂接[景点网页]类型’为‘其他网页’；五是棕色：表示该‘景点所挂接[景点网页]类型’为‘景点组’，即该景点下挂接一[景点组网页]。

在[景点组网页]‘第二屏’下边是景点组补充信息，最多为10个。编辑按钮在[景点组列表页面]。

从[景点组网页]派生出其它两种网页，一是仅仅有第一屏的[地图景点组网页]，二是仅仅有第二屏的[谷歌景点组网页]。

[景点网页] ，如图0-2所示。

图0-2

[景点网页]主要有两屏内容，包括以上传地图为中心的第一屏，和以谷歌地图为中心的第二屏。

‘第一屏’：主要由页眉、上传地图（JPG/PNG照片）、上传地图上一个景点和周围景点照片（一个景点最多8张JPG/PNG照片）或景点组照片组成。上传地图也可由景点照片替代。

上传地图上的景点下挂该景点的一个其他网页。

第一屏和第二屏之间由景点名称（下挂一个其他网页）、景点简介横向分割。

‘第二屏’：主要由谷歌地图、谷歌地图上景点和谷歌地图两侧景点照片（一个景点最多8张JPG/PNG照片）组成。

谷歌地图上有景点（由景点对应的图例表示）、一个简单图形（点、线、面，一个图形最多8个节点），谷歌地图两侧有景点对应的景点照片。

第三数据层面（景点）的编辑工作主要有‘景点的地图位置编辑’、‘景点网页参数设置（含景点谷歌地图定位与绘图）’两项内容。

从[景点网页]派生出仅有第一屏的[地图景点网页]和仅有第二屏的[谷歌景点网页]。

注册。首次进入[网络地理图册---网页制作工具软件]首页，首先应该进行‘注册’。

 按照注册格式要求进行新注册，成功‘注册’后，系统自动进入“登录”页面，此时，可按照刚才注册的用户名、密码和验证码（需要大写）进行登录。

提示：注册成功后，系统自动建立一缺省地图，在该地图上建立一缺省景点组，在该景点组上建立一个缺省景点，供操作使用。

 

第一节：完成第一数据层面工作

 

登陆并进入上传地图列表：

注册成功后，从[网络地理图册---网页制作工具软件]首页登陆。通过‘登陆’页面，首先进入[上传地图列表] ，如图1-1。

图1-1

 

1、上传地图参数设计。在[上传地图列表]页面，直接进入[上传地图参数设计]页面，如图1-2。调整上传地图显示的宽和高。

图1-2

提示：调整上传地图显示的宽和高，比较直观的方法是：将鼠标移动到地图右下角的手形处，按住鼠标左键进行拖动，到满意位置后，抬起鼠标左键，执行‘手形’下面的‘确认’按钮，地图宽、高编辑框内的数值相应改变，最后，按‘确认，返回’按钮。

[上传地图参数设计]页面内一些名词解释:

‘上传地图放置形式’：为了丰富网页上地图的显示形式，为适应地图横、竖等多种形状，系统设置了‘上传地图放置形式’参数，来解决地图在页面上的布局问题。动画：适合地图为普通长方形，且地图上的景点的照片在其位置上动画显示；横放：适合地图横宽，地图宽只能为960，景点的照片分布在地图的上下两边，具体位置由景点地图序号设定；竖放：适合地图竖长，地图宽需要<=560，景点的照片分布在地图的左右两边，具体位置由景点地图序号设定。

地图横放、竖放时，地图上的景点指示线为系统自动生成，无须在上传之前编辑。

景点在地图上有两种显示形态，一种是景点图例，一种是景点照片，通过‘地图景点显示’、‘地图景点尺寸’统一设置。在‘上传地图放置形式’为动画情况下，通过‘地图景点动画照片’、‘景点动画照片尺寸’两个参数统一设置，确定景点动画的内容和大小。

在地图上，景点旁还可显示标注，标注类型通过‘地图景点提示’统一设定，具体内容是在每个景点的编辑中完成。

谷歌地图的显示形态只有一种：矩形地图加左、右、下16个景点的一张照片，具体显示景点哪张照片，由‘谷歌周边照片’参数统一确定，景点照片的位置由景点的谷歌地图序号决定。谷歌右边照片全部空缺时，由景点组对应的文字简介填充。

2、更新上传地图。进入[景点组列表] 页面后，可直接进入[更新上传地图]页面，如图1-3。利用该页面的‘地图文件浏览’按钮，选择已经编辑好的地图JPG/PNG图象文件，对上传地图文件进行更换。地图名称、网页背景色、照片大小限制等参数设置，可用系统缺省值，也可在之后随时调整。

图1-3

 

第二节：完成第二数据层面工作

 

进入景点组列表：

由于页面限制，为了达到较好的视觉效果，一个景点组网页上的景点最多为16个。为了满足实际需要，“网络地理图册”引进了景点组的概念，将景点组视为第二数据层面，这样，地图上不管有多少个景点，都可按16个一组进行显示管理。因此，地图落实到显示时，就以景点组为核心了。

在“网络地理图册”中，上传地图是示意的，但谷歌地图可以是放大缩小，有比例尺，有经纬度，因此，为了增加地图的表现力，在“网络地理图册”中，一张上传地图可以有多个景点组，一个景点组对应一个谷歌地图。

进入[景点组列表]页面。在景点组列表中选择一个景点组，如图2-1。

1、景点组参数设置。

通过‘景点组参数设置’，进入[景点组参数设置]页面，如图2-2。该页面内容主要是[景点组网页] 类型设置和景点组的文字信息设置。

图2-2

 

2、景点组谷歌地图窗口定位。

该页面上部分是调整谷歌地图显示范围、中心点，之后，通过‘按窗口中心点居中显示’、‘保存，返回’按钮确认。

图2-3

 

3、景点组照片管理。

在“网络地理图册”中，一景点组可挂界8张JPG/PNG照片，JPG/PNG照片大小是受限制的，限制参数是由[更新上传地图]页面内的‘照片大小限制’参数来决定的，如该参数选取200，那么，在上传景点组照片时，JPG/PNG照片要小于200*2KB。第一张是景点组网页的页眉，其它照片主要是围绕景点组主题，对地图加以辅助说明的照片，如专题、规划、效果图等。在上传一张照片时，除JPG/PNG照片，还有照片标题，说明、说明标题，照片说明有字数限制，可双语同时上传，如希望作成双语网页，则事先准备好中英文稿件。汉字标题最好小于7个字，说明小于1000个字，英文标题最好小于16个字母，说明小于1000字母。[景点组照片管理]页面见图2-4。

 [景点组照片管理] 按钮位置见图2-2、图2-3。

图2-4

 

4、景点组对应的谷歌地图上绘制简单几何图形

在“网络地理图册”中，一景点组对应的谷歌地图上可绘制最多16个简单几何图形（点、线、多边形），一个图形最多8个顶点。在[景点组列表]页面中，先选择一个景点组，然后通过景点组谷歌地图的图形序号设置，进入图形编辑页面。对于谷歌地图上绘制图形操作，可在较熟练后进行。

 

第三节：完成第三数据层面工作

 

进入景点列表：

在“网络地理图册”中，将景点视为第三数据层面，一个景点在上传地图和谷歌地图上各有一个对应位置，即两套坐标数据。在“网络地理图册”中，上传地图上的一个景点可以视为一个终极点，如标杆、水井等；另外，也可以视为是一个点，在该点上挂接另一套地理图册，从而形成一个一套地理图册上景点组内若干景点挂接若干一套地理图册，一级一级链接构建大型地理图册的途径，该问题属于高级应用，建议在基本操作熟练之后，再尝试。

有关景点的基础信息编辑操作主要包括‘景点的地图位置编辑’、 ‘景点网页参数设置’。

进入[景点列表]页面，如图3-1所示。在此页面，可生成一个新景点。在此页面也可进行‘景点的地图位置编辑’、‘景点网页参数设置’等景点编辑工作。

图3-1

1、景点的地图位置编辑。

进入[景点的地图位置编辑]页面，如图3-2。

 

 

图3-2

确定景点在上传地图上位置有两种方法，比较直观的是在[地图景点位置编辑]页面的上传地图上，单击鼠标左键，重新确定景点在地图上的位置，通过‘保存’按钮保存。另一种方法是直接修改景点地图坐标X，Y的数值来实现。

2、景点网页参数设置。

[景点网页参数设置]是景点网页个性化的主要步骤，如图3-3，景点网页参数设置主要包括三个内容，一是景点在谷歌地图上精确定位，通过窗口的放大与缩小、移动等操作，确定景点的位置后，需执行谷歌地图右边的‘窗口中心按景点居中显示’按钮，这是地图数据操作的特点；二是在谷歌地图上编辑简单图形，以提高景点在谷歌地图上的表现力，谷歌地图上图形编辑是锦上添花的工作，初学阶段可跳过；三是有关景点网页上的地图与景点的布局、表现形式设计。在景点网页上，为了突出地图、景点的空间表现力，围绕着地图、景点的照片、文字、链接等多种形式的信息，设置了一些参数，通过这些参数的联合试用，可以设计出丰富多彩的页面形式，具体参数设置与页面效果的关系需要工作经验的积累。

图3-3

景点网页参数设置工作，也可日后由具体情况熟悉、资料掌握的人员，作为景点基础信息维护人员，通过景点网页登陆，对景点各类信息进行编辑与维护。

3、景点照片管理。

在“网络地理图册”中，[景点照片管理]页面与[景点组的照片及说明编辑]页面风格基本一样，操作步骤、功能设计也大同小异，但是两个页面。一个景点最多可上传8张照片，对照片格式（JPG/PNG）、大小均有要求，一张照片有一个名称、一个简介有一个标题。在景点页面中与照片有关的参数设置，均以照片序号为依据，因此，各个景点的照片的序号应有统一设计，如“样例”中，各个景点的照片1统一为“页眉照片”，照片2为“国旗”， 中文名称最好小于7汉字。[景点照片管理] 按钮位置见图3-2、图3-3。

具体操作：进入[景点照片管理]页面，如图3-4，上传景点的照片及说明。景点照片管理工作，也可日后由具体情况熟悉、资料掌握的人员，作为景点基础信息维护人员，通过景点网页、地图网页，对景点各类信息更新维护。

 

图3-4

 

第四节：完成[景点组网页]、[景点网页]网址参数记录工作

 

在[网络地理图册---网页制作工具软件]中，类似于博客文章或网络相册制作一样，制作成果就是两类网页,一是景点组网页,二是景点网页。通过上面操作，完成了地图、景点组、景点三个数据层面的制作，现在可以通过‘获取[景点组网页] 网址通道’，如图2-1，进入图4-1页面，通过1：对所选取景点组第一屏地图预处理、2：获取[景点组网页]参数和3：[景点组网页]三个步骤，完成[景点组网页]、[景点网页]网址参数获取工作。

 

 

 

图4-1