7.7 一个Homepage系统的制作实例
假如我们现在要制作一个Homepage系统，首先要做的工作就是确定整个Homepage系统
的总体规划，所要介绍的内容范围和目的，文件目录树的结构等，其次就是要根据所订的方
针来准备大量的媒体素材，最主要的是文本和图像资料。当根据这些媒体资料定义超链时，
即要使得整个系统的层次结构清晰，达到令人一目了然的效果，又要让系统形成一定的网状
交错结构，以便于用户交叉索引。同时，为了扩大读者面，最好制作中文和英文两种版本。
中文版的Homepage只需在中文操作系统下制作就可以了，当然Web浏览器也必须在中文操作
系统下观看中文版的Homepage。
下面，我们假设要制作一个介绍某旅游公司的Homepage系统。
1.主页设计
首先，很有必要为该页写一个总标题，主页（即第一页）的<TITLE>项一般不省略，因为
读者很可有能将该页加入到他的热表（或称为书签）系统中。这时，热表项的名字就以该页
的总标题来命名（如本例中的“欢迎您来到XX旅游公司”）；反之，如果该页省略了总标题
，则热表项就会以该页的URL信息命名（如本例中的“www.abc.com.cn”），着实令人晦涩
难懂。
在整个主页的正文部分不妨先显示出本公司的名称（可以用扫描仪将名人题写的公司名称图片
转换为图像文件，一般再将该图像转换成透明背景图，使它能与整个文档的背景相融合），另
外，还可放置一些该公司特有的标记图案（如果图案不是矩形的，也应该制成透明背景图）。
由于我们打算提供中文和英文两种版本，因此接着可以设置一个超链，来指向英文版（这里采
用一个图形"toeng.gif"作为超链入口）。
然后，我们就可以把整个Homepage系统的总体结构显示出来。在本例中，我们将此系统分为八
大模块，所以，可分别设置八个超链来指向这八大模块。为了在主页中安放这八个超链文本，
可采用一个一行二列的Table表结构，表中每一列分别放置四个超链文本。放置的方法可采用无
次序的<UL>型列表结构，但本例中，则通过在每一个表项前放置一个小球图案（"ball.gif"）来
代替<UL>结构。
最后，我们可以留下一个email地址让用户通过电子邮件系统把他们的意见和建议邮寄给该公司
的Web管理员。为了让用户可以直接发送email,我们可以将该地址设置为一个超链，其中URL信
息采用"mailto:"的方式。这样，只要用户一触发这一超链，Web浏览器就会自动调用电子邮件
软件，并填好相应的邮件地址。
本主页的部分源程序如下所示：
<HTML><HEAD><TITLE>欢迎您来到XX旅游公司</TITLE></HEAD>
<BODY BACKGROUND="grmarble.jpg">
. . . . . .
<CENTER><A HREF="/defaulte.htm" ><IMG SRC="http://202.97.224.112/image//toeng.gif" BORDER=0></A><P>
<TABLE CELLPADDING=3 BORDER=4 WIDTH="90%">
<TR><TD><H3>
<IMG SRC="http://202.97.224.112/image/ball.gif"> <A HREF="/survey/surveyc.htm">公 司 情 况 简 介</A><P>
<IMG SRC="http://202.97.224.112/image/ball.gif"> <A HREF="/spots/spotsc.htm">旅 游 景 点 介 绍</A><P>
<IMG SRC="http://202.97.224.112/image/ball.gif"> <A HREF="/hotel/hotelc.htm">住 宿 与 饮 食</A><P>
<IMG SRC="http://202.97.224.112/image/ball.gif"> <A HREF="/traffic/traffic.htm">交 通 工 具 设 施</A><P>
</H3><TD><H3>
<IMG SRC="http://202.97.224.112/image/ball.gif"> <A HREF="/pri-dat/pri-datc.htm">价 目 和 日 程 表</A><P>
<IMG SRC="http://202.97.224.112/image/ball.gif"> <A HREF="/guide/guidec.htm">导 游 人 员 介 绍</A><P>
<IMG SRC="http://202.97.224.112/image/ball.gif"> <A HREF="/achive/achivec.htm">取 得 的 成 果</A><P>
<IMG SRC="http://202.97.224.112/image/ball.gif"> <A HREF="/news/newsc.htm">最 新 旅 游 动 态</A><P>
</H3></TABLE><P><HR>
<IMG SRC="http://202.97.224.112/image/mail.gif"> <B>请把你的意见和建议寄往</B><I>
<A HREF="MAILTO: [email protected]">[email protected]</A></I>
</CENTER>
</BODY></HTML>
这段程序的显示效果如图7－20所示。
图7－20 文档的主页
其中一对<CENTER>标记表示把内容显示在窗口中央。<BODY>标记中的BACKGROUND
属性表示文档的背景图案，通常它是一幅很小的图像，Web浏览器会将它从左至右，从上
至下地填满整个窗口。&nbps;表示增加一个空格实体（entity），由于Web浏览器忽略多余的
空格，因此为了定义空格必须采用空格实体（HTML中采用实体的概念来定义一些特殊字符）。
2.各模块详细设计
当初步划分了各个模块以后，必须明确各模块之间并非相互独立无关，而是一个紧密交错的
网状结构。例如在旅游景点模块中包含一些超链，分别指向与该景点相关的住宿与饮食、
交通工具、价目、日程、导游等模块中的信息。而住宿与饮食模块中也包含一些超链，分别
指向该宾馆所在地的旅游景点介绍、交通工具、价目、日程、导游等模块中的信息。各个模块
之间你中有我，我中有你的目的是因为顾客们的侧重点各不相同：有的顾客是以哪里景色美而
决定去哪里旅游，他就会选择景点模块为入口；而有的顾客已了解景点的信息，但十分关心
住宿情况，则会选择住宿模块为入口；当然也不能排除有些以谁是导游而决定区哪里旅游的
顾客。所谓青菜萝卜，各有所爱，但无论以哪里为入口的顾客均能获得详尽而满意的信息服务。
在各个模块之中，旅游景点模块是最重要的模块之一，可以运用多种方法来使这部分的信息
页更加生动活泼。例如，可以将某旅游点中的一些名胜古迹的风景图片扫描成图像文件后，
再经过图像处理软件（如Photostyler）加工和拼装，就可把它标记成一幅可点图（运用<IMG>
标记中的ISMAP属性），并利用MapEdit工具生成相应的map文件。这样，用户只要选中可点
图中的某一块景色，就会显示出关于此景的详细介绍，如图7－21所示：
图7－21 利用可点图介绍景点
图7－21的右下图中所示的一个喇叭图案被标记成一个指向某声音文件的超链，用户的鼠标
一旦触发它就会播放关于该景色的解说词。同样，也可以适当加入一些视像媒体来丰富信
息表现的多样化。但必须注意到，视像文件的数据量极大,因此必须精心挑选素材,剪辑出
短短几秒钟的精彩片段。
3.获取反馈信息
在用户津津有味的浏览各大名胜的介绍时，往往就会产生一种想去实地一游的冲动。因此，
很有必要编写一些较详细的Form表，来直接获取用户对某条旅游线路的预定信息。
例如，Form表的内容可包括用户的姓名，联系地址，电话（可采用单行文本输入框的样式）
以及让用户选择旅游线路，日程，住宿规格等等（可采用组合框、复选框、单选框等样式)
，最后还可以让用户填入他的特殊要求（可采用TEXTAREA多行文本输入框）。当然，还需
要编写相应的CGI程序，才能处理用户传来的Form数据。具体制作可参见7.6节。