范例系统的设计与应用（一）

14-1　结构说明

14-2　动态菜单的设计

14-3　Cookies的处理

14-4　动态产品展示

14-5　新上市产品

14-6　索取详细信息

在前面的章节中，笔者介绍了各种SQL Server的应用、ASP程序设计的语法、ADO对象以及其他相关对象的使用等。在下面的实务设计中，笔者将采用另外一种方式来介绍ASP程序与SQL Server的应用，也就是说，在本章中将采用范例说明的方式讲解；同时，介绍如何将范例系统快速应用在用户的工作环境中。

14-1  结构说明

这个范例系统可以分为两大部分：

·         前台菜单系统。

·         后台数据管理系统。

虽然区分为两种不同性质的系统，但本质上仍离不开HTML标记、ASP程序语法、SQL Query、ASP程序应用的各种对象等。由于程序说明、画面展示非常多，因此在本章中仅仅介绍与“前台菜单系统”相关的子系统。

以下是组成“前台菜单系统”所使用的程序名称、功能以及所使用的程序语言、技术摘要说明。

前台菜单系统

前台菜单系统的组成，如下图所示：

“Function.asp”：负责产生动态菜单内容。其中所包含的程序语言有：HTML标记，CSS，javascript，ASP，SQL Query以及ADO对象等。打开的表有：“产品类别”以及“产品基本信息”。

“ProDuctShow.asp”：负责产品的展示、切换以及Cookies的读写等。所使用的程序语言有：HTML标记，CSS，javascript，ASP，SQL Query以及ADO对象等。打开的表有：“系统信息”、“产品基本信息”、“产品类别”以及“币别信息”等。

“MoreInfo.asp”：负责收集客户选择的信息，并且将相关的选择信息以E-Mail的方式发送到管理员的信箱中。所使用的程序语言有：HTML标记、CSS，javascript，ASP，SQL Query，ADO对象以及CDO对象等。打开的表有：“基本信息”、“系统信息”、“产品基本信息”等。

“PdRequest.inc”：这是一个外部引用文件，在这个文件内处理的信息为“Cookies”相关的信息；用以建立、设置、更新用户的选择信息。

虽然在“前台菜单系统”中，有这么多的子系统，但它们基本上都可以独立运行；同时，各子系统之间并没有绝对的关联性存在。因此，如果用户觉得某一子系统非常符合自己的需求时，也可以独立地将该子系统分离，加到用户的系统中。

14-2  动态菜单的设计

这是一个结合各种网页设计语言、数据库程序设计、CSS等技术的子系统。以下是这个子系统的画面：

在上图中，除了“Login.asp”与“Address.asp”两个程序外，其他都属于“Function.asp”程序的控制范围。在“Function.asp”程序的控制范围中，除了“关于我们”、“新上市产品”以及“索取详细信息”之外，都属于动态菜单。所谓“动态菜单”，并不是选择之后会自动移动、自动伸展。实际上，“动态菜单”的内容会因为产品类别的增减、上架产品的增减而自动变化。

例如：新增一项名为“Pocket PC 汽车充电器”产品之后，动态菜单上会立即自动增加一个选项。例如：删除“鼠标垫”，在网页重新更新内容之后，这项分类就会自动消失。这些自动产生的改变，对于操作人员而言，是完全不需要更改程序，或重新编辑HTML文件的内容。以下是“Function.asp”程序段以及设置说明。

14-2-1　设置CSS属性

本段程序代码的主要作用在于设置网页上文字表现的方式。例如设置“颜色”、“字体大小”及“字形”等属性。有关CSS的设置部分，请读者参考与CSS相关的书籍，在后续章节中，笔者将不再详细叙述。

“Function.asp”程序段

10: <style TYPE="text/css">

11: <!--

12: .SystemAdmin { font-size= 10pt ; color: #0000ff }

13: .ChiDingtitle { font-size: 16pt; color: #44FF00 }

14: .ChiDing01 {  font-size: 9pt; color: #00000;  font-family: Arial Bold;}

15: .ChiDing02 {  font-size: 9pt; color: #0066CC ;}

16: a:active {  color: BlueViolet; text-decoration: none }

17: a:link {  color: DarkSlateGray; text-decoration: none }

18: a:visited {  color: DarkSlateGray; text-decoration: none }

19: a:hover {  color: #0088DD; text-decoration: none }

20: --></style>

程序说明

本段程序主要设置各种类型的文字输出状态。例如：在HTML标记中指定Class=“Chiding01”时，此段文字所使用的字体即为“大小（font-size）9点（pt）”、“颜色（color）为黑色（RGB色表：#000000即为黑色）”、“字形（font-family）为Arial Bold”。其他如：“a:link”则表示设置超链接属性的HTML标记，在浏览器上显示时光标、文字等的输出方式。详细资料请读者自行参考与CSS有关的书籍。

14-2-2　固定的选项设计

下面三段程序是属于固定内容的，主要用途在于提供固定不变的功能选项。例如“索取详细信息”，这个选项所有的功能都是由“MoreInfo.asp”程序提供；同时，这个选项也不会有其他功能。因此，采用固定的超链接方式，打开指定的ASP程序。

“Function.asp”程序段

27:  <div id=cItem>

28:  <table class="ChiDing01" border=0 cellpadding=1 cellspac-ing=1 width='100%'>

29: <tr>

30:      <td width="20">&nbsp;</td>

31:      <td><a style="cursor:Hand" align="absbottom" target="mainframe"><font color=#000000>关于我们</font></a></td>

32: </tr>

33:  </table>

35:  <div id=cItem4>

36:  <table class="ChiDing01" border=0 cellpadding=1 cellspac-ing=1 width='100%'>

37: <tr>

38:      <td width="20">&nbsp;</td>

39:      <td><a href="/NewArrival.asp" style="cursor: Hand" align="absbottom" target="mainframe"><font color=#000000>新上市产品</font></a></td>

40: </tr>

41:  </table>

[1] [2] [3] [4] [5] [6] [7] [8] [9] [10] 下一页