毕业设计网站前台设计
第五章 系统的实现
模块化程序设计的优点在于各个模块功能开发的相对独立性，对于每个页面都相同的页眉和页脚来说，如果在每个页面里都分别包含，这样每个页面里都包含一样的代码，如果需要进行某一部分的更新，则需要更新所有页面，这样的工作不仅容易出错，而且效率极低，所以一个折衷的方法就是将页眉和页脚制作成一个独立的页面（通用模板），然后每个页面都基于这个页面，这样制作的页面不仅结构清晰，而且更有利于维护。
5.1 首页实现
5.1.1 首页模板实现
为了减轻工作量,保持各个页面之间的一致性,在这里首先设计了整个站点的通用模板model1.dwt.asp，如图5-1所示。
图5-1 model1模块设计
(1)选中【插入】|【模板对像】|【创建模板】命名为model1。
(2)设计页面插入表格，页眉区插入flash：../images/banner.swf。
(3)在设计导行栏时，为了便于从后台更改菜单,这里利用代码读取数据库中menu表的内容，引用如下代码：
(4)中间插入了可编辑区域EditRegion1。
(5)友情链接:
1、部门链接，链接到校内其他部门的网站，如宣党委办公室、传部等；
2、推荐链接，链接到校外其他大型的网站，如苏州党建、江苏党建等；
3、设为首页，将本站首页，代码如下：
4、收藏本站,将本站加入收藏夹,代码如下:
5、管理登录,链接到登录界面“../admin/login.asp”。
(6)页脚部分
显示版权所有 Copyright? 2008 苏州市职业大学-党委组织部苏州市职业
大学。
(7)最终运行结果,如图5-2所示。
图5-2 model1.dwt.asp
5.1.2 首页具体实现
下面就跟据图示作具体介绍，所有工作都是在可编辑区域实现的。
根据开发前讨论，我们划分了五个功能版块，设计首页主体布局,如图5-3所示。
图5-3 index.asp模块设计
(1) 公示、通知、工作动态版块功能实现
1、分别建立公示、通知、工作动态各自的记录集，从【绑定】面板中拖动记录集字段，绑定到相应单元格中；
2、分别选中记录集字段所在行，单击【服务器行为】面板中的【添加】按钮，在弹出的菜单中选择【重复区域】命令，设置相应的显示条数；
3、分别在重复区域下插入一行一列表格，在单元格中输入文字“暂无信息”，分别选中表格，单击【服务器行为】面板中的【添加】按钮，在弹出的菜单中选择【显示区域】中的【如果记录集为空则显示区域】命令，打开【如果记录集为空则显示区域】对话框，选择相应的记录集，单击【确定】按钮，完成设置。
4、以公示为例设置信息的详细页面链接，选择公示记录集标题字段，在【属性】面板中的【链接】框中输入如下代码：
这就完成了公示的详细内容页面的链接设置，通知和工作动态与设置公示的方法大致相同，这里不再赘述。
5、设置信息标题的页面链接，单击每个版块的
到ShowAll.asp页面。以公示为例，选取
框中输入如下代码：
都要跟据此版块跳转，在【属性】面板中的【链接】
这就完成了公示的信息标题页面的链接设置，通知和工作动态与设置公示的方法大致相同，这里不再赘述。
(2) 图片新闻版块功能实现
图片新闻版块给网面增加了美化效果，它的主要实现方式是在代码中插入文件调用语句来实现的。
将光标定位到图片新闻版块的单元格中，切换到代码视图，在当前位置插入文件调用语句：<!--#include file=image_news.asp-->。
下面给出文件image_news.asp的部分代码：
图片进行超链接进入image_newsdatail.asp页面，显示具体图片信息内容。
(3)文件下载版块功能实现
文件下载版块的功能是要先通过后台的文件上传功能，选择要上传的文件，把文件上传到服务器的指定文件夹(files)中，文件下载版块通过代码读取文件的文件名并显示在页面中实现下载功能。代码如下：
根据变量i规定只能显示六条可下载文件。要想下载更多点击
具体效果，如图5-4显示。
即可。
图5-4 文件下载页面设计
5.2 信息列表页面实现
信息列表页面主要是用来显示本网站的新闻列表，从内容上来说，是一个导向性很强的模块，让浏览者能迅速浏览到本网站最新新闻。
下面以ShowAll.asp页面为例，此页面利用model1.dwt.asp作为通用模板，设计完成信息列表页面的布局，如图5-5所示。
图5-5 信息列表页面
(1) 建立记录集，如图5-6 所示。这里Request.QueryString("type2")中的"type2"是从"index.asp"页面传递过来的URL参数。单击【确定】按钮，完成设置；
(2) 从【绑定】面板中拖动记录集字段，绑定到相应单元格中；
(3) 选中记录集字段所在行，单击【服务器行为】面板中的【添加】按钮，在弹出的菜单中选择【重复区域】命令，设置相应的显示条数；
(4) 在重复区域下插入一行一列表格，在单元格中输入文字“暂无信息”，
选中表格，单击【服务器行为】面板中的【添加】按钮，在弹出的菜单中选择【显示区域】中的【如果记录集为空则显示区域】命令，打开【如果记录集为空则显示区域】对话框，选择相应的记录集，单击【确定】按钮，完成设置。
图5-6 记录集
(5) 设置信息列表详细页面的链接，选择记录集标题字段，在【属性】面板中的【链接】框中输入如下代码：
这就完成了信息列表详细内容页面的链接设置。
(6) 设置信息列表导航栏，对于记录数很多的信息列表，如果一次性全部显示在网页上，不仅网页响应速度很慢，而且网页也因为很，导致上下拉动和查看信息较为麻烦，这里我们应用到【记录集分布】对记录进行分布显示，代码如下：
菜单列表页面(MenuShow.asp)的实现与信息列表页面实现的方法大致相同，在此不在赘述。
5.3 详细内容页面实现
详细内容页面作为信息列表页面的下级页面，其只显示一条记录，所以信息列表页面要简单的多，只需要取得信息列表页面传递过来的URL参数，就能唯一确定一条记录，然后将这条记录的信息显示在页面中。
下面以信息详细内容页面（MenuDatail.asp）页面为例，此页面利用model1.dwt.asp作为通用模板，设计完成信息列表页面的布局，如图5-7所示。
图5-7 详细内容页面
(1) 建立记录集，如图5-8所示。这里URL参数N_id是从"ShowAll.asp"页面传递过来编号。单击【确定】按钮，完成设置；
图5-8 记录集
(2) 从【绑定】面板中拖动记录集字段，绑定到相应单元格中；
需要说明的是，这里的新闻内容是要经过管理员审核通过才能显示的，如果审核未通过则显示“内容审核中?”, 其功能通过以下代码实现：
菜单详细内容页面(NewsDatail.asp)的实现与信息详细内容页面实现的方法大致相同，在此不在赘述。
5.4 后台登录页面实现
动态网站都是通过后台进行管理的，而登录页面（login. asp）就相当于管理员进入后台管理系统的一道门。只有输入正确的用户名和密码才能进入后台管理首页（adminindex.asp）。操作步骤如下：
（1）基本页面设计
新建一个“VBScript”的动态页，并保存文件名为“login. asp” 。利用表格设计网页布局，最终完成的网页布局，如图5-9所示。
图5-9 后台登录页面
后台登录页面的制作比较简单，主要由表单，两个文本域，一个图像区域构成，表单的名称为“form1”,管理员在文本域中输入用户名和密码后，图像区域提交表单的动作为ChkLogin.asp,表单提交的方法为“POST”。 ChkLogin.asp的内容如下：
ChkLogin.asp的作用是检查用户输入的用户名、密码是否合法，如果合法则转到后台首页adminindex.asp,如果不合法，则转到错误信息提示页面，如图5-10 所示。
图5-10 错误信息提示页面