网页制作六六顺｜第六讲：人面桃花相映红

嗯，按计划，这是咱们的最后一次讲座啦！这回咱们可要玩点真正高级的，讨论最具吸引力的网页交互技术以及最近出现的一些新技术。不过非常遗憾，因为篇幅的关系，我仍然只能触及皮毛，主要讨论HTML对这些技术的引用，关于这些技术本身……只好以后有机会再说啦！

一、嵌入脚本程序

HTML的SCRIPT元素可用来在网页中插入脚本（Script）程序。它使用LANGUAGE属性来指定所用的脚本语言。目前能够使用的语言主要是JavaScript和VBScript。

1．JavaScript

Netscape提出的JavaScript是基于特性（property）的小型脚本语言。用JavaScript编写的脚本程序可加强客户和服务器应用程序的功能。例如，嵌入HTML中的JavaScript脚本能够识别和响应表单输入和网页导航等用户发起的事件。它可以不经网络传输直接在客户端进行检查和验证，比如用户将字母填入电话号码中，JavaScript脚本就会反馈错误信息。

HTML中嵌入脚本程序使用SCRIPT元素：

<SCRIPT>…</SCRIPT>

脚本的文本插入在SCRIPT元素的起始和结束标记之间。

对于JavaScript，必须将SCRIPT元素的LANGUAGE属性设置为JavaScript：

<SCRIPT LANGUAGE=”JavaScript”>
</SCRIPT>

LANGUAGE属性是必须使用的，除非用SRC属性来指定脚本语言：

<SCRIPT SRC=”http:common.JavaScript”>
</SCRIPT>

SRC属性是可选的。使用SRC属性时，可用来指定脚本程序文本的URL：

<SCRIPT LANGUAGE=”JavaScript” SRC=url>

SCRIPT元素内的脚本语句在网页载入时就立即会被计算，但其功能被存储起来，而没有执行。当网页中某事件激活时，脚本中的语句才会执行。同样，SRC URL信息也是立即读入和计算的，而且当网页中同时含有脚本文本时，SRC脚本先计算。

由于有的浏览器不支持SCRIPT元素，所以为了保证脚本文本不会被显示到网页中，可将脚本内容放入HTML注释中。例如：

<!– Begin to hide script contents from old browsers.
<!– End the hiding here.–>

您要问啦，我刚知道一点HTML，现在又要学习JavaScript了吗？不错！谁让您闯入日新月异的Web世界呢？不过，您如果实在来不及学习，又实在受不了JavaScript脚本产生的许多特殊效果，您就试试第二讲我告诉您的一些JavaScript小工具吧，它可以让您不怎么懂JavaScript，自动生成一些标准的脚本程序，只要稍加修改即可使用了。

2．VBScript

Visual Basic Script是由Microsoft提出的，它可用来创建活动网页。VBScript为Web浏览器提供了自动化和定制化的脚本能力。VBScript是Visual Basic程序语言的子集，因此您只要熟悉VB，很容易就能使用VBScript。不熟悉也没关系哦，因为VB非常简单易学，而VBScript比VB还简单呢。

在HTML文档中使用VBScript时，需要将代码包括在<SCRIPT> … </SCRIPT>标记中，就和JavaScript一样。同样，它也要求使用LANGUAGE属性来指定语言：

<SCRIPT LANGUAGE=”VBS”>
</SCRIPT>

下面是VBScript的一个使用示例，它假定在HTML文档的其他地方已创建一个称作“btnHello”的按钮：

<SCRIPT LANGUAGE="VBS">
<!-- 注释符号使不支持VBScript的浏览器中不会显示VBScript代码
Sub btnHello_OnClick
   MsgBox "Hello, 今天天气真好！"
End Sub
-->
</SCRIPT>

这样，当用户点击按钮“btnHello”时，就会显示一个信息框，内写“Hello, 今天天气真好！”。

注意哦，VBScript和微软的其他产品一样，只能运行于Windows平台。所以您的服务器如果不是Windows，就不要试图使用了。

二、嵌入Java小应用

Sun公司发明的Java使HTML作者有可能在网页中包含实时音频、动画或其他应用。方法是在网页中嵌入Java小应用（Applet）。这些小应用必须事先用Java开发工具进行编译才能插入HTML文档中。

要将Java小应用添加到HTML网页中，必须使用APPLET元素。该元素支持CODE属性，它指定小应用的代码（不是Java源代码，而是编译后生成的Class代码）。一般还应该使用WIDTH属性和HEIGHT属性指定小应用在网页中运行时所占的面积，例如：

<APPLET CODE=”MyApplet.class” WIDTH=100 HEIGHT=140>
</APPLET>

APPLET元素的完整用法如下（其中方括号括入的内容表示可选）：

<APPLET
[CODEBASE = codebaseURL]                                     <!-- Applet的基础URL-->
CODE = appletFile                                            <!-- Applet的类文件名-->
[ALT = alternateText]                                        <!--类似IMG的ALT属性-->
[NAME = appletInstanceName]                                  <!-- Applet实例的名字 -->
WIDTH = pixels HEIGHT = pixels                               <!--Applet区域的尺寸-->
[ALIGN = alignment]                                          <!--Applet的对齐方式-->
[VSPACE = pixels] [HSPACE = pixels]                          <!--Applet附近的留白-->
> 
[<PARAM NAME = appletAttribute1 VALUE = value>]
[<PARAM NAME = appletAttribute2 VALUE = value>]
<!-- PARAM指定applet属性，applet用getParameter()方法来访问其属性-->
……
[alternateHTML]
</APPLET>

三、嵌入对象

1．EMBED元素

EMBED元素允许将各种对象直接放入HTML网页：

<EMBED SRC=”images/embed.shg”>

EMBED元素可嵌入任何类型的文档对象，用户查看网页时，需要在自己的计算机上安装正确查看相应数据类型的应用程序。

如果指定对象的宽度和高度，则嵌入对象将改变尺寸以适应其空间大小：

<EMBED SRC=”images/embed.shg” WIDTH=250 HEIGHT=50>

嵌入到HTML文档中的对象可通过在Netscape窗口中双击鼠标来激活。此时支持嵌入对象的应用程序将被启动，并装载嵌入对象。例如，如果 .shg图形文件被嵌入到文档中，用户双击此图形时，Netscape将启动PaintBrush（除非.shg与另一应用程序关联），并在PaintBrush中将此图形打开。

由于这样的特性，使用EMBED元素时，必须保证用户具有适当的应用程序来打开嵌入的对象。否则，HTML文档将不能按希望的方式显示。

为加强EMBED的使用，Netscape支持插件（Plug-in）功能。基本上，插件是与Netscape客户端没有本地支持的MIME数据类型相关联的动态代码模块。插件有三种工作模式：嵌入、全屏幕或隐藏。

2．OBJECT元素

HTML中具有多种多媒体类型的元素和属性，为统一起见，W3C定义了OBJECT元素，使它既具有IMG元素的作用，又为处理各种不同的多媒体对象提供统一的解决方法，并能为网页中的对象初始化各种参数。

OBJECT元素目前主要被Microsoft用来支持其ActiveX控件和其他媒体对象。它可直接将对象嵌入HTML文档，作用类似于IMG元素，但提供了插入媒体而不是静态图象的机制。

OBJECT元素的用法如下例，它在网页中插入Label ActiveX控件：

<OBJECT CLASSID="clsid:{99B42120-6EC7-11CF-A6C7-00AA00A47DD2}"
  ID=lbl1
  WIDTH=90
  HEIGHT=90>
  <PARAM NAME="angle" VALUE="30" >
  <PARAM NAME="alignment" VALUE="2" >
  <PARAM NAME="BackStyle" VALUE="0" >
  <PARAM NAME="caption" VALUE="Hello there">
  <PARAM NAME="FontName" VALUE="Arial">
  <PARAM NAME="FontSize" VALUE="20">
  <PARAM NAME="FontBold" VALUE="1">
  <PARAM NAME="frcolor" VALUE="8421376">
</OBJECT>

由于OBJECT元素被设计为媒体插入元素，因此它同IMG元素一样支持一些标准格式化属性，如HEIGHT、WIDTH、ALIGN、BORDER、HSPACE及VSPACE等。

四、SSI

SSI是Server Side Includes的缩写。它是这样一种技术，将它施加于HTML网页时，能够使网页增加一些实时功能，例如显示当前时间、进行逻辑条件比较、查询或更新数据库存或者发送Email等。

SSI是在不进行编程或加入CGI程序的情况下进行工作的。它仅需在HTML网页中插入一些特殊字符（称为SSI记号(Token)）。当网页经HTTP服务器发送到发出请求的客户端时，服务器在网页中扫描这些特殊的标记。一旦发现标记，服务器就解释标记中的数据，并将执行标记数据中指定的动作。

SSI是与HTTP服务器相关的，并不是所有的服务器都能支持SSI。Netscape和Spry的Web服务器能够支持。

一个SSI记号的基本格式为：

<!- -#<tag><variable set> – ->

其中，<!–# 为起始符，SSI记号总是以此开头；<tag> 是一个SSI标记（Tag）；<variable set>是一个或多个变量及变量值，其格式为“变量名=”变量值””，变量值与 <tag> 有关，各种标记取值各不相同；–> 为结束符，SSI记号总是以此结束。也就是说，SSI记号以HTML注释的形式出现，因而不支持SSI的服务器仅需简单地将其忽略即可。

日前使用的SSI已有所改进，称为SSI+。SSI+ 文档的文件扩展名为 .sht、.shtm或shtml。为了提高效率，Web服务器仅在这些文件中扫描SSI+ 记号。

SSI+ 目前支持以下标记：

• echo：将某些变量的数据插入到HTML网页中。
• include：将文件内容插入到HTML网页中include记号所在的位置。
• fsize：将给定文件的大小插入到HTML网页中fsize记号所在的位置。
• flastmod：将给定文件最后一次修改日期插入到HTML网页中flastmod记号所在的位置。
• exec：执行一个外部可执行文件。
• config：设置某些HTML输出选项。
• odbc：查询和更新ODBC数据库。
• email：当用户访问HTML网页提交HTML表单时，发送Email。
• if：基于逻辑比较，进行SSI操作的条件执行或HTML文本的条件打印。
• goto：不执行SSI代码或打印HTML文本，直接跳转到指定记号位置。
• label：为goto标记提供跳转位置。
• break：中断HTML文档。

下面是echo标记的一个使用示例：

The Greenwich Mean Time is <!--#echo var="DATE_GMT"--> and I am so happy to be here.

当用户浏览网页时，它就会被显示为下面的形式：

The Greenwich Mean Time is Fri Jul 21 21:24:48 1995 and I am so happy to be here.

SSI的详细内容可参考《Web技术大全》。

五、CGI

过去，网页大多数信息都是静止的，信息内容只有在站点管理人员更新后才能发生变化。公共网关接口CGI（Common Gateway Interface）的提出从根本上改变了这种局面，使Web访问达到半自动水平，让HTML文件在客户机和服务器之间有了更多的交互性。

CGI是扩展Web服务器功能的一种接口，通过它可与访问Web网页的用户进行交互。CGI扩展了服务器分析浏览器输入、并基于用户输入返回信息的能力。换个角度讲，CGI使得程序员编写与Web服务器进行通信的程序更加简单。

也就是说，CGI协议定义了程序与Web服务器进行通信的标准方法，因而程序员不需专门知识，就可使用任何计算机语言编写与Web服务器通信的程序。此程序可与所有支持CGI协议的Web服务器协同工作。

通过这个公共网关接口，服务器可以向CGI程序发送信息，CGI程序也可以向服务器回送信息。CGI程序与服务器、客户机的关系及遵守的协议和标准如下图所示。

由此可见，CGI程序必须存储在HTTP服务器所在的计算机上，它是HTTP服务器的亲密伴侣，二者可以直接通信，CGI程序从HTTP服务器动态接收数据，并把处理结果返回给服务器。因此，用户不能从浏览器直接执行CGI程序，而必须通过HTTP服务器间接进行。

也就是说，当浏览器要获取一个HTML文档时，它首先同服务器连接，并指出请求的HTTP文档名（通常浏览器向服务器发出一个HTTP GET方法）。然后，如果请求的HTML文档在服务器中存在，服务器就将它传递给浏览器，并关闭连接。浏览器并不知道服务器是否调用了CGI程序，也不关心怎样接收服务器端返回的数据。反之，从Web程序员的角度而言，只需关心CGI程序与服务器之间的输入和输出，而不必去考虑浏览器，因为服务器会以HTML文档的形式把输出结果提供给浏览器。

当HTTP服务器调用CGI程序时，必须执行以下几个关键的步骤：调用CGI程序并提供所需的数据（从浏览器发送过来的）；给CGI程序使用的环境变量赋值；处理CGI程序的输出数据。在服务器处理CGI的输出时，必须包括必要的HTTP头标信息，因为只有这样浏览器才能够正确解释CGI程序的输出。

CGI通信是通过标准输入和输出处理的，因此只要懂得某种程序语言输出和读入数据的方法，就可编写Web服务器应用程序。除输入与输出外，CGI程序几乎与其他程序的编写方法并无不同。

简言之，只要掌握任何一种编程语言，了解该语言的标准输入/输出方法，原则上就能使用该语言进行CGI编程。

CGI编程的详细内容可参阅拙著《Web技术大全》或《CGI程序设计指南》。

六、Flash

图象和多媒体信息一直是美化网页的重要手段，但由于Internet带宽有限，人们无法使用规模较大的文件，因而设法减小文件大小一直是重要的方法。Flash正是在这种背景下产生的一种全新的技术。

为了加强网页的动感，制作动画GIF是最常见的方法。但由于文件大小和gif89a图象格式本身的缺陷，动画GIF只适用于简单的制作要求，变化有限。鉴于此，有人以Macromedia Shockwave和JAVA applet取而代之，从而花样多变、声效互动，但是文件大小又无法减小。

针对这种情况，Future Wave公司把Cel Animator改良为支持网页动画的制作软件，并更名为FutureSplash Animator。由于反响极佳，多媒体巨擎Macromedia将其收归旗下，定名为 Macromedia FLASH 2。经过一段时间的发展和Macromedia的大肆宣扬，Flash 2极有可能成为新一代业界的动画标准。它具有以下优秀特征：

(1) 利用矢量图 (Vector Image)作输入，故此网页内的动画能随意拉大或缩小，并且拥有 ZOOM的功能，而图象文件极小。

(2) 可输入点阵图 (Bitmap)，以符合各类创作的需要。

(3) Macromedia接手开发Flahs后，与RealNetwork取得共识，在流媒体（streaming）技术上与RealAudio及RealVideo联手出击，市场前景非常看好。

(4) 文件极小，故能在声影画的同时仍能照顾一般拨号入网的用户。

(5) Netscape和IE都能自动安装Flash的插件（Plugins）。

您如果想要学习Flash技术，首先必须保证浏览器已安装Flash的Plugin，然后还应下载Macromedia Flash软件。

建立三维Flash的一般步骤如下：

• 在 3D Max 之类的软件中建立 3D 模型；
• 涂色然后把图片出成系列的位图；
• 在 Flash 中输入位图；
• 手动跟踪位图，描出矢量造型；
• 完成。

另一种也许更有效的作法是：

• 在 Adobe Deminsions 中建立三维动画；
• 在生成动画序列之前，先选择 PostScript 方式；
• 生成动画序列；
• 输出 AI 或者其它 Flash 可以识别的矢量图片；
• 在 Flash 中输入序列；
• 完成。

Flash的详细内容可在以下资源得到：

(1) http://www.macromedia.com/shockzone/edge/flash/
(2) Mailing List(The Shocker List): http://www.shocker.com/
(3) Newsgroups(Macromedia Flash): news://forums.macromedia.com/flash
(4) http://www.eastecho.net/flash.html

好了，“网页设计六六顺”讲座到这里就全部结束了。如果您没什么收获，真对不住，耽误您时间了；如果您觉得我满篇胡言乱语，请批评指正；如果您觉得尚有一二可取之处，或者希望进一步互相学习，亦请不吝来信赐教。总之，我在这里班门弄斧，讲了一通网页制作再基础不过的东西，还希望高手大虾带领我再学习、再进步。

微信 复制链接 X