网站设计制作简要说明.docx

《网站设计制作简要说明.docx》由会员分享，可在线阅读，更多相关《网站设计制作简要说明.docx（23页珍藏版）》请在三一办公上搜索。

1、1、引言早期的动态网页主要采用CGI技术，由于编程困难、效率低下、修改复杂，所以一直是专业程序员的专利。ASP的出现，改变了这个现状，ActiveServerPages即ASP是微软开发的一种类似HTML（HypertextMarkupLanguage超文本标识语言）、Script（脚本）与CGI（CommonGAtewayInterface通用网关接口）的结合体。ASP问世以来，每天正在以成千上万的ASP网站在INTERNET中诞生。它以简单易学，却功能强大。被越来越多的人们所喜爱。本次毕业设计我选择的课题是：利用ASP设计学校网站设计南部县伏虎中学网站，目的是通过该网站的规划和设计，给人们

2、了解我们学校提供了一个平台，拉近了教育和社会之间的距离。让人们足不出户，轻松快捷的获得学校各种信息，展示了学校和教师的风采。同时也通过该平台，学校可以及时了解社会对我们学校的建议和意见，以便我们学校在今后的工作中及时改正。网站的规划和设计，从系统的调研，系统的分析，系统的设计到系统的实现，利用软件工程的思想作为指导，开发了这个完整的系统，提高了自己的专业知识和实际相结合的能力。2、系统设计21 开发设计思想本系统开发设计思想：尽量采用学校现有软硬件环境，及先进的网站系统开发方案，从而达到充分利用学校现有资源，提高系统开发水平和应用效果的目的。系统采用模块化程序设计方法，这样既便于系统功能的各种

3、组合，又便于未参与开发的技术维护人员补充，维护。系统应具备数据库维护功能，及时根据学校信息的需求进行数据的添加，删除，修改等操作。22 开发和运行环境选择开发工具：FLASH5.0，Adobe Photoshop 6.0，Dreamweaver UltraDev 4。服务器端运行环境：Windows2000+IIS。客户端运行环境：Windows9x，Windows2000。23 系统功能分析系统功能分析是在系统开发的总体任务的基础上完成的。本站需要完成功能主要有：新闻文章发布：学校新闻，教育科研，名校名师，学生园地，招生信息等的介绍。留言系统：对来访者提供网上留言，从而让学校及时得到社会的反

4、馈，以便和社会沟通和交流。在线调查系统：本站提供对教育和学校的热点问题进行网上调查的专栏，来访者可以通过网上调查对热点问题投上代表自己的一票。流量统计系统：本站可以对流量从多方面进行统计。包括开站天数，浏览总数，当天浏览总数，上一天浏览总数，本月浏览总数，上月浏览总数，平均浏览总数。24 系统功能模块设计在系统功能分析的基础上，得到如图所示的系统功能模块图。 南部县伏虎中学网站前台 新闻文章栏目 交互栏目 在线调查 流量统计 前台新闻栏目 学校新闻浏览 教育科研浏览 名校名师浏览 学生园地浏览 招生信息浏览另外为了进一步实现家校联系，特设计了家长频道和学生频道。在家长频道中，设计了教学公告，到

5、校记录，家长留言，家长预约，家庭教育等子栏目。在学生频道中，设计了高招信息，高考话题，高考题库，开学报道，学生提问，学生意见等子栏目。家长频道中的家长留言，学生频道中的学生提问，学生意见3个子栏目是为了体现家长，学生，学校3方面互动，及时交流的一个栏目。更加方便了学生，家长对教育的资源发表心声。为了家长，学生，教师和其它任何来访者，可以获得学校的教育资源，还设计了资源下载栏目，资源下载栏目包括：软件下载，试卷下载，教案下载，表格下载4个子栏目。 新闻文章后台管理 新闻后台管理 教育后台管理 名师后台管理 学生后台管理 招生后台管理系统功能结构图下面我将对每个模块的总体设计作简要说明。1 新闻文

6、章模块新闻文章是本网站的重点。网站作为一种媒体，应当可以提供足够多的用户感兴趣的信息。南部县伏虎中学网站作为学校的一个窗口，为了满足社会对学校信息的了解的愿望，本站的新闻文章主要开设五个方面的栏目。分别是：学校新闻，教育科研，名校名师，学生园地，招生信息等。对新闻文章模块的总体设计是分为前台浏览和后台管理子模块。来访者通过前台点击可以浏览到本网站有关新闻文章等各种信息。这些信息包括：学校新闻快讯信息，教育科研信息，名校和名师的各种信息，学生园地信息，学校招生相关的信息等。本后台管理子模块完成对学校新闻文章发布子模块中的五个栏目进行后台管理员才能操作的添加信息，编辑信息，删除信息等操作。以上栏目

7、的设置，是为了满足任意一个网站来访者。为满足家长，学生的2个特定类别的来访者，特设置了家长频道和学生频道，家长频道栏目信息根据针对家长的需求，栏目包括，教学公告，到校记录，家长留言，家长预约，家庭教育。其中教学公告包括作业公告，考试公告等子栏目。家长留言是一个互动栏目，这个栏目专门针对家长，对学校政策，教学进度的询问，意见等。学生频道栏目实现信息主要都是与学生紧密相关的栏目，比如高招信息，高考题库等。2留言模块来访者中有不少人对学校的发展和现状有很多建议和观点需要对学校提出，作为学校的窗口，所以本站需要提供让来访者发言的平台，正是由于这个原因，所以本网站设计和规划有留言模块，本模块又分为浏览着

8、前台发言和浏览子模块以及后台管理员删除修改发言子模块。3在线调查模块本网站对一些社会热点提供在线调查的栏目，来访者可以对网站上的社会热点问题投上代表自己观点的一票。这样就可以综合民意得到教育等热点从而决定以后的发展方向。4流量统计模块作为管理员应该实时知道本网站的流量。流量统计的数据包括：网站开站的天数，浏览的总数，当日的浏览数，昨日的浏览数，本月的浏览数，上月的浏览数，平均来访数等。一个网站如果没有流量，那么就说明了这个网站开设的栏目没有吸引力。作为管理员就学校可以通过流量及时知道网站开设新栏目后流量是否有变化等。5资源下载模块一个学校网站，如果可以提供浏览着获得学校信息资源，可以提供家，校

9、，师，生互动交流这些栏目还不够，学校的各种考试试卷等教育资源，也是来访者非常想获得的，所以，设计了教育资源下载模块。下载的资源包括教案，试卷，其它软件等。3、后台数据库的设计通过以上功能模块的分析和设计可以知道，本网站设计需要涉及到后台数据库的设计。在数据库应用系统的开发过程中，数据库的结构设计是一个非常重要的问题。数据库结构设计的好坏将直接对应用系统的效率以及实现的效果产生影响，好的数据库结构会减小数据库的存储量，数据的完整性和一致性比较高，系统具有较快的响应速度，简化基于此数据库的应用程序的实现等。在数据库系统开始设计的时候应该尽量考虑全面，尤其应该仔细考虑用户的各种需求，避免浪费不必要的

10、人力和物力。31 数据库需求分析数据库需求分析是数据库结构设计的第一个阶段，是非常重要的一个阶段。在这个阶段主要是收集基本数据，数据结构以及确定数据处理的流程，组成一个详尽的数据字典，为以后进一步设计打下基础。在仔细调查本站运作过程的基础上，我们得到本网站所处理的数据流程如图所示。 管理员 登录 输入登录信息 来访者登录网站 网站后台管理 DB 数据库 各种信息的浏览信息交互 管理方向 各种信息后台管理资源下载 密码管理通过以上数据流程可以看出：管理员通过登录网站，输入正确的用户名和密码可以进行网站管理。进入管理状态后可以选择管理的项目，可以是对包括对管理员密码在内的系统设置信息的修改，也可以

11、是对本网站的各种数据库中其它的信息进行后台管理，包括对学校概况，学校新闻，教育科研，名校名师，学生园地，招生信息，招聘信息等管理。管理的内容分为：对信息的添加，修改，删除，审核等操作。来访者可以在浏览器中输入学校网址登录网站，通过点击网站的链接浏览各种相关信息。这些信息是通过调用后台数据库中相关信息在前台显示的。针对本网站的数据结构，可以通过对以上对本站数据流程的内容和数据关系分析，得出以下的数据项和数据结构如下： 新闻信息：新闻类别号，标题，所属专栏，文章来源，文章作者，内容，发布时间，点击次数，关键字， 状态等。 新闻类别：类别号、类别名。 新闻所属栏目：栏目号，类别号，栏目名。 管理员信

12、息：用户名，密码等。 留言信息：用户名，电子邮箱地址，来自地区，主页地址，OICQ号，ICQ号，头像，留言内容等。 留言后台管理员信息：用户名，密码等。 在线调查信息：调查的主题编号，主题名称，主要观点1，主要观点2，主要观点3，主要观点4，观点1的票数，观点2的票数，观点3的票数，观点4的票数。 流量统计信息：总流量，今日流量，昨日流量，本月流量，上月流量，开站日期，最后访问IP。 资源信息：每条资源信息包括文字介绍信息和资源存放信息2个方面，文字介绍信息和新闻信息一样，作为新闻信息的一种，所以这里重点研究资源存放信息，资源上传后存放信息包括：资源编号，信息编号，存放路径3个属性项。信息编号

13、对应该资源文字信息在新闻信息中的编号。存放路径存放资源上传后的存放的路径和文件名。有了上面的数据结构，数据项和数据流程，就能进行下面的数据库设计。32 数据库概念结构设计这一设计阶段是在需求分析的基础上，设计出能够满足网站设计需求的各种实体，以及确定它们之间的关系，为后面的逻辑结构设计打下基础。本网站根据上面的设计规划出的数据项和数据结构得出的实体有新闻实体，新闻类别实体，新闻栏目实体，管理员实体，留言信息实体，在线调查信息实体，流量统计实体等。下面详细介绍本系统主要的实体以及主要实体之间的关系。1：信息实体E-R图： 信息信息实体 信息编号 主题 类别号 . 栏目号2：信息类别实体E-R图：

14、 信息类别实体 类别编号 类别名称 3：信息栏目实体E-R图： 信息栏目实体 栏目编号 类别编号 栏目名称 4：管理员实体E-R图： 管理员实体 用户编号 用户名 用户密码 5：资源实体属性图 资源实体 资源编号 信息编号 资源路径 6：主要的实体和实体之间的关系E-R图如图所示。资源实体对应11 信息实体 1 属于 1 类别实体 1 属于 管理 管理 1 栏目实体 管理 管理员实体33 数据库逻辑结构设计我们需要将上面的数据库概念结构转化为ACCESS2000数据库系统所支持的实际数据模型，也就是数据库的逻辑结构。在上面的实体以及实体之间关系的基础上，我们就可以形成数据库中的表格以及各个表格

15、之间的关系。根据分析阶段得出的的结论，结合本网站对有关数据的存储的需要，更加方便实现该网站预期的所有功能，现将本系统设计成5个数据库表，每个表的字段名、类型、宽度设计如下：数据库中各个表格的设计结果如表31到表32所示。每个表格对应在数据库中的一个表。表31为新闻信息表。该表用来记录存储本网站新闻信息相关的各种信息：字段名类型宽度说明newsid自动编号长整型新闻编号typeid数字小数类别编号borderid数字小数栏目编号topic文本80主题content备注备注新闻内容ntime日期8发布时间hits数字小数阅读次数keys备注备注关键字img文本50相关图片nfrom文本100来源m

16、odify文本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密

17、码3-5：资源信息表：该表用来存放本网站管理员信息。字段名类型宽度说明id自动编号长整型资源编号Newsid文本15对应的信息编号Lujin文本14资源存放路径以上是本系统的库表结构的设计简要说明。4、网站的实现完成了以上的后台数据库的设计后，下面就可以对前面系统分析阶段逻辑设计出的功能模块将技术设计转化成为物理实现，是系统建设的实现阶段。因此，网站的实现的成果将是系统分析和设计阶段的结晶。4.1：安装网站设计相关软件：本站设计需要用到FLASH8.0，Adobe Photoshop 8.0，Dreamweaver等网页设计相关的软件。其中FLASH8.0主要完成网页中相关动画的设计和处理。A

18、dobe 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

19、及其组件。43、主页的设计来访者输入网址，首先打开的就是学校网站的主页，主页设计应该美观，同时提供足够多的链接，以便来访者可以通过链接导航到自己所关心的信息页面上去。下面是该首页运行的界面图：该页面的布局结构是 型布局结构。具体的说：在网页的上面是log图片和导航条。Log图片表明网站的主题：南部县伏虎中学网站。导航条将本站的栏目分成了学校概况，学校新闻，教育科研，名校名师，学生园地，招生信息，诚聘英才，校长信箱，网上留言等栏目。这些导航栏目分别设计有相应的文字链接，点击这些文字链接可以进入相应的页面。打开专业的网页设计工具Dreamweaver UltraDev 4。1：新建一个网页文件，保

20、存为index.asp，接着设置页面属性，在属性页中标题：南部县伏虎中学。背景图案：img/bg_line.gif。定义页面中表格，单元格，文字和链接的表现风格。本页面定义的语句如下：body margin:0px;font-size:12px;overflow-x:hidden;overflow-y:scroll;color:#666666;LINE-HEIGHT: 160%table font-size:12px;LINE-HEIGHT: 160%td font-size:12px;.txt font-size:12px;border-width:0px;border-bottom:1px

21、 solid #000000;background-color:#def1f7;position:relative;top:0px;left:5px;padding-bottom:0px;color:#a0a0a0;a:link.list font-size:12px;color:#666666;text-decoration:none;a:visited.list color:#666666;text-decoration:none;a:hover.list color:#333333;text-decoration:underline;a:link.more font-size:12px;

22、color:#666666;text-decoration:none;a:visited.more color:#666666;text-decoration:none;a:hover.more color:#333333;text-decoration:underline;img border:0px;利用布局表格工具，设置好网页的表格布局。然后就可以在表格中添加单元格。利用表格的属性面板和单元格属性面板设定好各自的属性以后，就可以在单元格中添加文字和插入图片。布局设计好的网页如下：代码设计：为了实现首页显示学校快讯，教育科研，名校名师，学生园地等文字信息以及为了方便管理。不是在每个栏目设计

23、静态的文本信息，而是内嵌java脚本，脚本的数据源来自一个和数据库相连接的asp文件： new.asp。下面给出学校快讯，教育科研，名校名师，学生园地对应的四个java脚本语句：1：2：3：4：通过比较这四条脚本语句可以发现，脚本调用的是同一asp文件，只是一个typeid不一样。在数据库的设计中我们以及知道，这个参数是新闻的类别编号。由于这四类不同的信息都是存储在数据库中的news表中，要实现信息的分类就可以通过设定这个类别编号。这里的typeid=10对应学校新闻，typeid=11对应教育科研，typeid=12对应名校名师，typeid=13对应学生园地。下面简单的介绍一下news.a

24、sp文件的代码：在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号倒序排列。另外在该文件的开头有包含文件：该文件用于链接数据

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

26、计不是在这里直接给出，而是通过脚本调用一个js文件。这样设计的好处在与可以和其它的页面共享该导航的js文件。调用脚本的语句如下：该newsbar.js文件的语句如下：document.writeln();document.writeln( );document.writeln( 学校概况);document.writeln( 学校新闻);document.writeln( 教育科研);document.writeln( 名校名师);document.writeln( 学生园地);document.writeln( 招生信息);document.writeln( 诚聘英才);document.w

27、riteln( );document.writeln();另外对比shownews.asp文件还可以看出，该页面中的新闻标题和新闻内容也是调用其它的语句和脚本的。新闻标题调用asp脚本：用于显示记录集中的topic字段值。该字段是通过sql语句实现的查询记录集中的字段值。相关的sql查询语句如下：rs.open select * from news where newsid= & cstr(request(newsid),conn,1,1该语句实现从news表中查询newsid编号等于传递的参数newsid的记录。对于新闻的内容显示也和新闻的主题显示类似，这里就不再说明。最后这里介绍一下该页面

28、显示的与本新闻相关的新闻的实现技术：首先要从数据库中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,1shownews.asp文件除了显示新闻详细信息外，该文件同时还和下载

29、资源的详细页面共用。为了在显示一般详细信息时候，不出现下载的字样，可以利用if 语句进行判断，利用if语句对变量xz进步判断，如果xz变量等于1，表明是资源下载的详细页面，这时候就显示下载字样，下载链接来自资源表中的该资源对应路径。4.5 更多新闻页面的more.asp设计在首页中的学校快讯，教育科研，名校名师，学生园地都只是显示了该类别的10条信息，如何得到更多的信息显示？需在首页之外另外设计更多信息显示的more.asp页面。在首页的导航条上面都可以链接到该页面。在首页的导航条中分别有下面的链接语句：1：2：3：4：5：6：这些链接语句分别都是链接到more.asp文件，只是传递的参数不一

30、样。Typeid=1015分别对应学校新闻诚聘英才。在本页中就是通过获得的传递参数确定sql语句查询news中的类别号等于传递的类别号的所有信息的。下面是传递参数为16的页面显示的界面图：该页面显示的所有news表中typeid=16的新闻信息。下面给出在Dreamweaver UltraDev 4中排版设计的结果：下面介绍该页面实现显示传递的参数的所有信息的技术：首先利用下面的代码实现建立一个记录集和实现sql查询：set rs=server.createobject(adodb.recordset)rs.open select * from news where typeid= & cst

31、r(typeid) & and audit=1 order by ntime DESC,conn,1,1由于在news表中typeid等于传递的参数的记录可能非常多，那么全部在一页中显示不方便，所以该页又用到了数据的分页显示技术。下面给出本页中用到的分页显示的代码：% response.write response.write 第 + cstr(curpage) + 页/总 + cstr(rs.pagecount) + 页 response.write 本页 + cstr(i-1) + 条/总 + cstr(rs.recordcount) + 条 if curpage = 1 then res

32、ponse.write 首页 前页 elseresponse.write 首页 前页 end ifif curpage = rs.pagecount thenresponse.write 后页 末页elseresponse.write 后页 末页end if%分页技术介绍见第五章的介绍。在该页面的左侧，显示的有推荐内容和热点文章二类信息。下面来重点介绍推荐内容实现的原理：在推荐内容的单元格中内嵌脚本：脚本中调用的文件是news.asp，传递的参数是kind和n。这里的kind值为hot，n为5。这里的hot参数不是表示news表中某个字段的值为hot，在实现的哪些信息是属于hot类别的时候，是

33、通过sql查询语句中的通过news表中的hits的次数反序输出。也就是说hits点击次数最多的记录显示。参数N的值传递显示信息的条数。实现的关键语句如下：sql=select top & n & * from news where typeid= & cstr(typeid) & and audit=1 order by hits DESC为了实现左边分类导读的子栏目的显示，可以从border表中查询出大类为当前的typeid编号的类别。然后利用循环语句分别将border表中符合条件的小类栏目显示到页面上。rs6.open select * from border where typeid=

34、& request(typeid) ,conn,1,1学生频道中的学生留言，学生意见栏目属于学生频道栏目，但是由于学生留言和学生反馈属于交互性的栏目，所以，在后台设计中，并没有把学生留言，学生意见作为学生频道的子类别，由于不是子类，那么这里就无法显示通过从border表中查询获得。所以在这里为了显示该栏目，可以利用一个if语句来进行判断类别值，如果类别typeid编号值为17(学生频道)，那么就利用if语句判断后另外添加显示学生留言等子栏目。 if request(typeid)=17 then response.write response.write 学生提问 & response.wri

35、te response.write 学生意见 & end if4.6 后台管理登录的实现实现登录的文件有：login.asp和check.asp二个文件。Login.asp文件提供输入用户名和密码已经校验输入的是否为空等判断。输入正确的用户名和密码是否正确是通过login.asp文件中表单提交的用户名和密码传递到check.asp文件中和数据库中user表用户名和密码对比是否正确，对正确的用户名和密码赋给一个session变量。进入到管理主页。实现的语句如下：session(purview)=rs(purview) session(name)=rs(name) response.redirec

36、t admin/index.asp该session变量的作用是在不同的网页之间传递登录用户的身份。因为管理页面的权限只有管理员才能进入。所有当管理员登录时利用session来将管理员的身份在不同的管理页面间传递着。当用户名和密码赋给一个session变量的同时也将网页转向管理主页。在管理主页的开头部分首先需要校验身份。校验的实现的方法是检查session变量是否为空。如果为空表明没有经过管理登录获得合法的session，那么就不能进入该页面。实现这个功能的语句如下：由以上的语句可以看出，如果session变量为空，则转向登录文件login.asp。下面是合法的session变量登录到管理主页的界面：该页面的实现使用了框架技术。整个页面分为左右二部分，左边是用户管理操作的一个列表。右边是对应的网页。管理部分的其它页面和实现的技术这里就不再一一介绍。详情可以参见源代码文件。4.7 资源下载栏目的设计资源下载重点需要设计出资源的信息的添加和资源的上传。在后台管理中，管理员可以通过点击资源下载栏目中的子栏目比如试