动态Web网页的制作工艺

动态Web网页的制作工艺

陈文博毕岱君

动态Web网页的制作工艺有其自身的特点。从技术层面来衡量,静
态网页的质量主要依赖于排版式样和页面的美术装璜。动态网页则不
然,它要求运行服务器端的程序,允许客户与Web站点交互,允许访问后
台数据库,并现场生成HTML。因此在动态网页的制作中,编程占有很大
份量。其中,功能正确与否是生命线。页面的视觉效果只是起到锦上
添花的作用。动态网页的开发环境相对来说比较复杂,又要涉及到众
多软件工具,制作工艺比传统的客户/服务器软件开发更为细腻,必须
遵循一定的工艺规范才能保证软件质量和开发进度。出于商业目的,
国外的软件商家热衷于推销软件产品本身,对产品开发工艺的披露却
常常是闪烁其辞。因此,我们尤其要注意软件开发工艺的经验积累。
在项目组开发中,有时需要多人使用不同的工具软件,按一定工艺
流程完成一系列动态页面的设计制作。一般应先完成页面的功能设计
和调试,再进行页面的视觉修饰,最后加入含有多媒体成分的素材。既
要做到功能的完美无缺,又要使页面赏心悦目。
目前,微软的ASP(Active Server Pages)技术与组件对象配合的
动态Web开发方法正日臻完善,使发布后台数据库的信息更实用化,比
传统的CGI(Common Gateway Interface )方式有了质的飞跃,标志着
按工艺流程的方式批量开发动态网页的条件已经成熟。微软的这套方
法主要建立在Visual InterDev和FrontPage两个软件之上。
开发组的工作环境
下图描绘了一个小组的动态Web开发环境。整个开发工作在一个W
indows NT的Intra net企业网环境下展开,若干PC工作站担负着动态
网页制作过程中各个工艺环节的特定任务。其中FrontPage是面向一
般程序员或非专业人员的,InterDev是面向程序员的;VB、VC++用于开
发专用的组件对象,供ASP引用。制作完成的网页在Intranet上测试通
过之后再向外界发布。

wpe1.jpg (19651 字节)
图1 动态Web开发组的Intranet环境
整个开发工作是按小组的形式展开的,必然会碰到多人修改同一
个页面代码的情况。这就要求在项目组的开发过程中必须注意软件产
品的版本控制。这项工作可由版本控制软件来辅助进行,例如Microso
ft的SourceSafe,以避免多人交叉改动同一软件时所产生的混乱局面
。这样做不但有助于加快开发的进度,还可以提交满足不同需要的系
列产品。
InterDev和FrontPage的配合使用
在开发过程中InterDev与FrontPage既有分工也有合作。Visual
InterDev是创建动态Web站点的集成开发环境,可在其中结合各种脚本
开发ASP和HTML应用程序。Web程序的骨架及各种控制、处理功能都是
利用InterDev来设计的。FrontPage是Web站点的创建、管理和页面修
饰工具。利用它可方便地创建漂亮的HTML页面,并对已生成的Web应用
程序进行页面上的修饰和编辑。
Visual InterDev是配合ASP开发的主导工具,它是为Internet和I
ntranet创建数据驱动型动态Web应用程序的完整工具集。虽然ASP可
用常规的文本编辑器生成,但采用Inter Dev作为开发工具具有以下优
点:
1. 为创建Web应用程序提供集成、可视的快速开发环境
在InterDev下,可使用ASP、VBScript以及JScript,便捷地将Web
应用程序与现行系统相集成,并可与VB、VC++ 、VJ++　及多种第三方
工具开发的可重用服务器和客户机组件对象相集成,开发出的应用程
序具有更广泛的兼容性。
InterDev可对各种类型的Web文件(如.asp和.htm)的语法进行敏
感的颜色标识,以便于区分各种脚本。
由于InterDev下集成了有关数据库访问、页面预览等功能,使应
用程序的开发可以在同一环境下迅速完成,免去了在各种工具间进行
切换的烦琐与等待,从而为开发人员节省了大量的时间。
2. 能自动保持本地文件与Web服务器上文件的同步
当在InterDev下创建本地项目或文件后,它将自动在Web服务器上
为其建立拷贝。这样,当使用其它工具(如FrontPage)对Web服务器中
的文件进行修改后,InterDev可自动重新加载本地文件,使其保持最新
版本。因此,InterDev可与FrontPage共享其中的工程项目,并使用相
同的HTML编辑器。
3. 集成数据库访问并支持对数据库表的编辑
利用InterDev,可实现Web优化的数据库存取和丰富的数据库编程
功能,并可运用熟悉的VBScript与JScript 快速创建功能强大的数据
库驱动Web站点。
对于SQL Server等数据库,无法在其中直接对库表进行编辑,但在
InterDev下无须编写任何代码即可直接打开数据库表,并对其进行编
辑。
4. 支持项目管理
选定InterDev的New Web Wizard,即可新建Workspace,由此可创
建新的Web站点应用程序。InterDev会在Web根目录wwwroot下建立备
份,以保持Web站点与本地文件的同步。InterDev还会自动在项目中放
置文件Global.asa和名为Images的文件夹,前者负责存储整个应用程
序中用到的全局设置,后者则包含了Web页面上所要显示的各种图形。
InterDev环境中包含了客户机与服务器方的编程工具、数据库连
接工具、内容编辑工具、出版与站点管理工具以及基于小组的开发支
持功能。这些工具连同预先创建的部件、向导和样本,可使开发人员
更快地创建和部署Web应用,极大地提高了生产率。
要想创建动态、交互、高效、美观的Web页面,可结合上述两种工
具进行开发。首先,在InterDev下创建Workspace,为每个页面编写ASP
或HTML应用程序,着重进行功能上的设计。然后,在FrontPage的编辑
器下打开该文件,对页面进行编排和重组,使布局更加合理、美观,并
可加入用第三方语言设计的ActiveX构件。此外,还可结合PhotoShop
对图形、按钮等进行加工。
结合InterDev与FrontPage制作完主页后,可通过本地工作站的PW
S(Personal WebSe rver)服务器用IE 4.0进行测试。修改完成后,可
在FrontPage Explorer下利用其提供的发布功能将其导入系统服务器
上的IIS(Internet Information Server),从而可使客户用前端的浏
览器下载并浏览服务器上的这些应用程序。
开发示例
下面我们通过对前文提到的显示authors序表的页面进行适当的
修饰,来进一步认识网页的制作工艺。
在只完成功能上的设计后,下载到浏览器中,显示的页面如下:

wpe2.jpg (29489 字节) 图2
功能测试正确无误之后,在FrontPage中用Editor对代码和页面进
行调整和修饰,最后的*.asp代码如下:
<html>
<head>
<meta NAME="GENERATOR" Content="Microsoft FrontPage 3.0"
>
<meta HTTP-EQUIV="Content-Type" content="text/html; char
set=gb_2312-80">
<title>Authors Listing</title>
</head>
<body>
作
者人员表
<big>:</big>
<%Set Connection=Server.CreateObject("ADODB.
Connection")
　 Connection.Open "authors"
　Set RS=Connection.Execute("SELECT * FROM authors")
%>
<img src="WB01430_.GIF" alt="WB01430_.GIF (6251 bytes
)" style="margin -left: 40px" WIDTH="485" HEIGHT="62">
<table BORDER="0">
<tr>
<% For i=0 to RS.Fields.Count-1 %>
<td ALIGN="CENTER" BGCOLOR="#800000"><% =RS(i).Name %></stro
ng>
</td>
<% NEXT %>
</tr>
<% Do While Not RS.EOF %>
<tr>
<% For i=0 to RS.Fields.Count-1 %>
<td BGCOLOR="f7efde" ALIGN="CENTER"><% =RS(i) %> 
</td>
<% Next %>
</tr>
<%
　RS.MoveNext
　Loop
　RS.Close
　Connection.Close
%>
</table>
</body>
</html>
再次下载到浏览器中,显示的页面如下图所示。从图中可以看出
画面在外观上有了显著变化,代码也复杂了一些,其中有些代码是由Fr
ontPage的可视化工具自动添加上去的,纯手工编写的代码并不多。

wpe3.jpg (24693 字节)
图3

摘自：《计算机世界报》