网站设计制作说明

1、引言
早期的动态网页主要采用CGI技术，由于编程困难、效率低下、修改复杂，所以一直是专业程序员的专利。
ASP的出现，改变了这个现状， Active Server Pages即ASP是微软开发的一种类似HTML（Hypertext Markup Language超文本标识语言）、Script（脚本）与CGI（Common GAteway Interface 通用网关接口）的结合体。ASP问世以来，每天正在以成千上万的ASP网站在INTERNET中诞生。它以简单易学，却功能强大。被越来越多的人们所喜爱。
本次毕业设计我选择的课题是：利用ASP设计学校网站设计－南部县伏虎中学网站，目的是通过该网站的规划和设计，给人们了解我们学校提供了一个平台，拉近了教育和社会之间的距离。让人们足不出户，轻松快捷的获得学校各种信息，展示了学校和教师的风采。同时也通过该平台，学校可以及时了解社会对我们学校的建议和意见，以便我们学校在今后的工作中及时改正。
网站的规划和设计，从系统的调研，系统的分析，系统的设计到系统的实现，利用软件工程的思想作为指导，开发了这个完整的系统，提高了自己的专业知识和实际相结合的能力。
2、系统设计
2．1 开发设计思想
本系统开发设计思想：
尽量采用学校现有软硬件环境，及先进的网站制作系统开发方案，从而达到充分利用学校现有资源，提高系统开发水平和应用效果的目的。
系统采用模块化程序设计方法，这样既便于系统功能的各种组合，又便于未参与开发的技术维护人员补充，维护。
系统应具备数据库维护功能，及时根据学校信息的需求进行数据的添加，删除，修改等操作。
2．2 开发和运行环境选择
开发工具：FLASH5.0，Adobe Photoshop 6.0，Dreamweaver UltraDev 4。
服务器端运行环境：Windows2000+IIS。
客户端运行环境：Windows9x，Windows2000。
2．3 系统功能分析
系统功能分析是在系统开发的总体任务的基础上完成的。本站需要完成功能主要有：
新闻文章发布：学校新闻，教育科研，名校名师，学生园地，招生信息等的介绍。
留言系统：对来访者提供网上留言，从而让学校及时得到社会的反馈，以便和社会沟通和交流。
在线调查系统：本站提供对教育和学校的热点问题进行网上调查的专栏，来访者可以通过网上调查对热点问题投上代表自己的一票。
流量统计系统：本站可以对流量从多方面进行统计。包括开站天数，浏览总数，当天浏览总数，上一天浏览总数，本月浏览总数，上月浏览总数，平均浏览总数。
2．4 系统功能模块设计
在系统功能分析的基础上，得到如图所示的系统功能模块图。
南部县伏虎中学网站前台
新闻文章栏目 交互栏目 在线调查 流量统计
前台新闻栏目
学校新闻浏览 教育科研浏览 名校名师浏览 学生园地浏览 招生信息浏览
另外为了进一步实现家校联系，特设计了家长频道和学生频道。
在家长频道中，设计了教学公告，到校记录，家长留言，家长预约，家庭教育等子栏目。
在学生频道中，设计了高招信息，高考话题，高考题库，开学报道，学生提问，学生意见等子栏目。
家长频道中的家长留言，学生频道中的学生提问，学生意见3个子栏目是为了体现家长，学生，学校3方面互动，及时交流的一个栏目。更加方便了学生，家长对教育的资源发表心声。
为了家长，学生，教师和其它任何来访者，可以获得学校的教育资源，还设计了资源下载栏目，资源下载栏目包括：软件下载，试卷下载，教案下载，表格下载4个子栏目。
新闻文章后台管理
新闻后台管理 教育后台管理 名师后台管理 学生后台管理 招生后台管理
系统功能结构图
下面我将对每个模块的总体设计作简要说明。
1． 新闻文章模块
新闻文章是本网站的重点。网站作为一种媒体，应当可以提供足够多的用户感兴趣的信息。南部县伏虎中学网站作为学校的一个窗口，为了满足社会对学校信息的了解的愿望，本站的新闻文章主要开设五个方面的栏目。分别是：学校新闻，教育科研，名校名师，学生园地，招生信息等。对新闻文章模块的总体设计是分为前台浏览和后台管理子模块。来访者通过前台点击可以浏览到本网站有关新闻文章等各种信息。这些信息包括：学校新闻快讯信息，教育科研信息，名校和名师的各种信息，学生园地信息，学校招生相关的信息等。本后台管理子模块完成对学校新闻文章发布子模块中的五个栏目进行后台管理员才能操作的添加信息，编辑信息，删除信息等操作。以上栏目的设置，是为了满足任意一个网站来访者。为满足家长，学生的2个特定类别的来访者，特设置了家长频道和学生频道，家长频道栏目信息根据针对家长的需求，栏目包括，教学公告，到校记录，家长留言，家长预约，家庭教育。其中教学公告包括作业公告，考试公告等子栏目。家长留言是一个互动栏目，这个栏目专门针对家长，对学校政策，教学进度的询问，意见等。学生频道栏目实现信息主要都是与学生紧密相关的栏目，比如高招信息，高考题库等。
2．留言模块
来访者中有不少人对学校的发展和现状有很多建议和观点需要对学校提出，作为学校的窗口，所以本站需要提供让来访者发言的平台，正是由于这个原因，所以本网站设计和规划有留言模块，本模块又分为浏览着前台发言和浏览子模块以及后台管理员删除修改发言子模块。
3．在线调查模块
本网站对一些社会热点提供在线调查的栏目，来访者可以对网站上的社会热点问题投上代表自己观点的一票。这样就可以综合民意得到教育等热点从而决定以后的发展方向。
4．流量统计模块
作为管理员应该实时知道本网站的流量。流量统计的数据包括：网站开站的天数，浏览的总数，当日的浏览数，昨日的浏览数，本月的浏览数，上月的浏览数，平均来访数等。一个网站如果没有流量，那么就说明了这个网站开设的栏目没有吸引力。作为管理员就学校可以通过流量及时知道网站开设新栏目后流量是否有变化等。
5．资源下载模块
一个学校网站，如果可以提供浏览着获得学校信息资源，可以提供家，校，师，生互动交流这些栏目还不够，学校的各种考试试卷等教育资源，也是来访者非常想获得的，所以，设计了教育资源下载模块。下载的资源包括教案，试卷，其它软件等。
3、后台数据库的设计
通过以上功能模块的分析和设计可以知道，本网站设计需要涉及到后台数据库的设计。
在数据库应用系统的开发过程中，数据库的结构设计是一个非常重要的问题。数据库结构设计的好坏将直接对应用系统的效率以及实现的效果产生影响，好的数据库结构会减小数据库的存储量，数据的完整性和一致性比较高，系统具有较快的响应速度，简化基于此数据库的应用程序的实现等。
在数据库系统开始设计的时候应该尽量考虑全面，尤其应该仔细考虑用户的各种需求，避免浪费不必要的人力和物力。
3．1 数据库需求分析
数据库需求分析是数据库结构设计的第一个阶段，是非常重要的一个阶段。在这个阶段主要是收集基本数据，数据结构以及确定数据处理的流程，组成一个详尽的数据字典，为以后进一步设计打下基础。
在仔细调查本站运作过程的基础上，我们得到本网站所处理的数据流程如图所示。
管理员
登录
输入登录信息 来访者登录网站
网站后台管理 DB 数据库 各种信息的浏览
管理方向 各种信息后台管理
密码管理
通过以上数据流程可以看出：管理员通过登录网站，输入正确的用户名和密码可以进行网站管理。进入管理状态后可以选择管理的项目，可以是对包括对管理员密码在内的系统设置信息的修改，也可以是对本网站的各种数据库中其它的信息进行后台管理，包括对学校概况，学校新闻，教育科研，名校名师，学生园地，招生信息，招聘信息等管理。管理的内容分为：对信息的添加，修改，删除，审核等操作。
来访者可以在浏览器中输入学校网址登录网站，通过点击网站的链接浏览各种相关信息。这些信息是通过调用后台数据库中相关信息在前台显示的。
针对本网站的数据结构，可以通过对以上对本站数据流程的内容和数据关系分析，得出以下的数据项和数据结构如下：
● 新闻信息：新闻类别号，标题，所属专栏，文章来源，文章作者，内容，发布时间，点击次数，关键字， 状态等。
● 新闻类别：类别号、类别名。
● 新闻所属栏目：栏目号，类别号，栏目名。
● 管理员信息：用户名，密码等。
● 留言信息：用户名，电子邮箱地址，来自地区，主页地址，OICQ号，ICQ号，头像，留言内容等。
● 留言后台管理员信息：用户名，密码等。
● 在线调查信息：调查的主题编号，主题名称，主要观点1，主要观点2，主要观点3，主要观点4，观点1的票数，观点2的票数，观点3的票数，观点4的票数。
● 流量统计信息：总流量，今日流量，昨日流量，本月流量，上月流量，开站日期，最后访问IP。
● 资源信息：每条资源信息包括文字介绍信息和资源存放信息2个方面，文字介绍信息和新闻信息一样，作为新闻信息的一种，所以这里重点研究资源存放信息，资源上传后存放信息包括：资源编号，信息编号，存放路径3个属性项。信息编号对应该资源文字信息在新闻信息中的编号。存放路径存放资源上传后的存放的路径和文件名。
有了上面的数据结构，数据项和数据流程，就能进行下面的数据库设计。
3．2 数据库概念结构设计
这一设计阶段是在需求分析的基础上，设计出能够满足网站设计需求的各种实体，以及确定它们之间的关系，为后面的逻辑结构设计打下基础。本网站根据上面的设计规划出的数据项和数据结构得出的实体有新闻实体，新闻类别实体，新闻栏目实体，管理员实体，留言信息实体，在线调查信息实体，流量统计实体等。
下面详细介绍本系统主要的实体以及主要实体之间的关系。
1：信息实体E-R图：
信息信息实体
信息编号 主题
类别号 ……. 栏目号
2：信息类别实体E-R图：
信息类别实体
类别编号 类别名称
3：信息栏目实体E-R图：
信息栏目实体
栏目编号 类别编号 栏目名称
4：管理员实体E-R图：
管理员实体
用户编号 用户名 用户密码
5：资源实体属性图
资源实体
资源编号 信息编号 资源路径
6：主要的实体和实体之间的关系E-R图如图所示。
信息实体 1 属于 1 类别实体
属于 管理 管理
栏目实体 管理 管理员实体
3．3 数据库逻辑结构设计
我们需要将上面的数据库概念结构转化为ACCESS2000数据库系统所支持的实际数据模型，也就是数据库的逻辑结构。
在上面的实体以及实体之间关系的基础上，我们就可以形成数据库中的表格以及各个表格之间的关系。
根据分析阶段得出的的结论，结合本网站对有关数据的存储的需要，更加方便实现该网站预期的所有功能，现将本系统设计成5个数据库表，每个表的字段名、类型、宽度设计如下：
数据库中各个表格的设计结果如表3－1到表3－2所示。每个表格对应在数据库中的一个表。
表3－1为新闻信息表。
该表用来记录存储本网站新闻信息相关的各种信息：
字段名 类型 宽度 说明
newsid 自动编号 长整型 新闻编号
typeid 数字 小数 类别编号
borderid 数字 小数 栏目编号
topic 文本 80 主题
content 备注 备注 新闻内容
ntime 日期 8 发布时间
hits 数字 小数 阅读次数
keys 备注 备注 关键字
img 文本 50 相关图片
nfrom 文本 100 来源
modify 文本 30 编辑人
audit 数字 长整型 是否审核
auditer 文本 50 审核人
writer 文本 50 作者
imgsize 数字 小数 图片大小
3-2：新闻类别表：
该表用来存放本网站新闻信息的类别名称。
字段名 类型 宽度 说明
typeid 自动编号 长整型 类别编号
typename 文本 50 类别名称
3-3：新闻栏目表：
该表用来存放本网站新闻信息的类别名称。
字段名 类型 宽度 说明
borderid 自动编号 长整型 类别编号
typeid 自动编号 长整型 类别编号
bodername 文本 50 类别名称
3-4：管理员信息表：
该表用来存放本网站管理员信息。
字段名 类型 宽度 说明
userid 自动编号 长整型 用户编号
name 文本 15 用户名
pwd 文本 14 密码
3-5：资源信息表：
该表用来存放本网站管理员信息。
字段名 类型 宽度 说明
id 自动编号 长整型 资源编号
Newsid 文本 15 对应的信息编号
Lujin 文本 14 资源存放路径
以上是本系统的库表结构的设计简要说明。
4、网站的实现
完成了以上的后台数据库的设计后，下面就可以对前面系统分析阶段逻辑设计出的功能模块将技术设计转化成为物理实现，是系统建设的实现阶段。因此，网站的实现的成果将是系统分析和设计阶段的结晶。
4.1：安装网站设计相关软件：
本站设计需要用到FLASH8.0，Adobe Photoshop 8.0，Dreamweaver等网页设计相关的软件。
其中FLASH8.0主要完成网页中相关动画的设计和处理。
Adobe Photoshop 8.0主要完成网页中相关的图片的大小，格式转化，效果处理等。
Dreamweaver主要完成网页的排版、布局设计。
4.2 建立Asp的运行环境
签于目前流行的windows操作平台有windows xp等。下面针对这XP操作平台上建立Asp运行环境的一些简要介绍。
在windows 2000/XP上建立Asp的运行环境
在windows 2000/XP上运行Asp的环境也是IIS。如果安装的是windows 2000 Server,IIS5.1将作为一个默认选项被安装。如果使用的是windows 2000/XP中文专业版，则需要使用控制面板“ 添加/删除程序”来安装IIS及其组件。
4．3、主页的设计
来访者输入网址，首先打开的就是学校网站的主页，主页设计应该美观，同时提供足够多的链接，以便来访者可以通过链接导航到自己所关心的信息页面上去。下面是该首页运行的界面图：
该页面的布局结构是 ∏型布局结构。具体的说：在网页的上面是log图片和导航条。Log图片表明网站的主题：南部县伏虎中学网站。导航条将本站的栏目分成了学校概况，学校新闻，教育科研，名校名师，学生园地，招生信息，诚聘英才，校长信箱，网上留言等栏目。这些导航栏目分别设计有相应的文字链接，点击这些文字链接可以进入相应的页面。
打开专业的网页设计工具Dreamweaver UltraDev 4。
1：新建一个网页文件，保存为index.asp，接着设置页面属性，在属性页中标题：南部县伏虎中学。背景图案：img/bg_line.gif。
定义页面中表格，单元格，文字和链接的表现风格。本页面定义的语句如下：

利用布局表格工具，设置好网页的表格布局。然后就可以在表格中添加单元格。利用表格的属性面板和单元格属性面板设定好各自的属性以后，就可以在单元格中添加文字和插入图片。
布局设计好的网页如下：
代码设计：为了实现首页显示学校快讯，教育科研，名校名师，学生园地等文字信息以及为了方便管理。不是在每个栏目设计静态的文本信息，而是内嵌java脚本，脚本的数据源来自一个和数据库相连接的asp文件： new.asp。下面给出学校快讯，教育科研，名校名师，学生园地对应的四个java脚本语句：
1：
2：
3：
4：
通过比较这四条脚本语句可以发现，脚本调用的是同一asp文件，只是一个typeid不一样。在数据库的设计中我们以及知道，这个参数是新闻的类别编号。由于这四类不同的信息都是存储在数据库中的news表中，要实现信息的分类就可以通过设定这个类别编号。这里的typeid=10对应学校新闻，typeid=11对应教育科研，typeid=12对应名校名师，typeid=13对应学生园地。
下面简单的介绍一下news.asp文件的代码：
在news.asp文件中首先获得上面传递的参数。通过下面的语句实现：
typeid=request("typeid")
n=trim(request("n"))
这里的n是查询表中符合条件的多少条记录的参数。
接着通过下面的语句从数据库news表中查询符合条件的最后的n条记录：
sql="select top " & n & " * from news where typeid=" & cstr(typeid) & " and audit=1 order by newsid DESC"
这里的audit表示已经是审核通过的信息。最后的信息显示是按newsid号倒序排列。
另外在该文件的开头有包含文件：

该文件用于链接数据库。
在文件的末尾有包含文件：

该包含文件用于关闭数据库。
4.4 显示新闻和下载文件的shownews.asp设计
在首页中大量的新闻信息是通过链接到shownews.asp文件来显示新闻信息的。比如在首页中点击学校快讯中的任一新闻，就可以链接到该页面并显示该新闻的详情。
下面是学校快讯中“南部县伏虎中学教学成果显著”这条新闻后显示的页面，该新闻的链接语句是：
shownews.asp?newsid=413
这里的传递的参数newsid用于传递显示的新闻的编号。
该页面的设计过程首先在Dreamweaver UltraDev 4中排版设计，设计的界面如图所示：
对比实际运行的界面和设计界面可以看出，导航条的设计不是在这里直接给出，而是通过脚本调用一个js文件。这样设计的好处在与可以和其它的页面共享该导航的js文件。调用脚本的语句如下：

该newsbar.js文件的语句如下：
document.writeln("");
document.writeln(" ");
document.writeln(" ");
document.writeln(" ");
document.writeln(" ");
document.writeln(" ");
document.writeln(" ");
document.writeln(" ");
document.writeln(" ");
document.writeln(" ");
document.writeln("

学校概况

学校新闻

教育科研

名校名师

学生园地

招生信息

诚聘英才

");
另外对比shownews.asp文件还可以看出，该页面中的新闻标题和新闻内容也是调用其它的语句和脚本的。
新闻标题调用asp脚本：<%=rs("topic")%>用于显示记录集中的topic字段值。该字段是通过sql语句实现的查询记录集中的字段值。相关的sql查询语句如下：
rs.open "select * from news where newsid=" & cstr(request("newsid")),conn,1,1
该语句实现从news表中查询newsid编号等于传递的参数newsid的记录。
对于新闻的内容显示也和新闻的主题显示类似，这里就不再说明。
最后这里介绍一下该页面显示的与本新闻相关的新闻的实现技术：
首先要从数据库中news表的字段说起，在news表中有一个keys字段。
我们可以利用sql语句在news表中查询keys值和该新闻关键字类似的记录，就可以得到相关信息。Sql语句如下：
rsc.open "select top " & aboutnews & " * from news where keys like '%" & trim(rs("keys")) & "%' and newsid<>" & cstr(rs("newsid")) & " and audit=1 order by ntime DESC",conn,1,1
shownews.asp文件除了显示新闻详细信息外，该文件同时还和下载资源的详细页面共用。为了在显示一般详细信息时候，不出现下载的字样，可以利用if 语句进行判断，利用if语句对变量xz进步判断，如果xz变量等于1，表明是资源下载的详细页面，这时候就显示下载字样，下载链接来自资源表中的该资源对应路径。
4.5 更多新闻页面的more.asp设计
在首页中的学校快讯，教育科研，名校名师，学生园地都只是显示了该类别的10条信息，如何得到更多的信息显示？需在首页之外另外设计更多信息显示的more.asp页面。在首页的导航条上面都可以链接到该页面。在首页的导航条中分别有下面的链接语句：
1：…
2：…
3：…
4：…
5：…
6：…
这些链接语句分别都是链接到more.asp文件，只是传递的参数不一样。Typeid=10…15分别对应学校新闻…诚聘英才。
在本页中就是通过获得的传递参数确定sql语句查询news中的类别号等于传递的类别号的所有信息的。
下面是传递参数为16的页面显示的界面图：
该页面显示的所有news表中typeid=16的新闻信息。
下面给出在Dreamweaver UltraDev 4中排版设计的结果：
下面介绍该页面实现显示传递的参数的所有信息的技术：
首先利用下面的代码实现建立一个记录集和实现sql查询：
set rs=server.createobject("adodb.recordset")
rs.open "select * from news where typeid=" & cstr(typeid) & " and audit=1 order by ntime DESC",conn,1,1
由于在news表中typeid等于传递的参数的记录可能非常多，那么全部在一页中显示不方便，所以该页又用到了数据的分页显示技术。
下面给出本页中用到的分页显示的代码：
<%
response.write "

---