校园网站设计与实现论文.docx

《校园网站设计与实现论文.docx》由会员分享，可在线阅读，更多相关《校园网站设计与实现论文.docx（20页珍藏版）》请在冰豆网上搜索。

校园网站设计与实现论文

毕业设计（论文）

课题:

校园网站设计与实现

学生：

汪嘉语系部:

计算机应用系

班级：

计算机1022学号：

**********

*******

装订交卷日期:

2013年5月20日

4.4代码的实现以及关键代码………………………………………………13

校园网站分析与设计

摘要

校园网站是学校对外宣传的窗口，也是展示全校师生才能,加强对校外联系，互相学习，共同发展的阵地,学校网站建设的目的是促进师生与学校共同发展.

网站的实现采用了DREAMWEAVER8。

0和ASP进行网站设计的开发过程,对网站的设计及网站的实现进行了详细的说明。

本文主要是从ASP、DREAMWEAVER8.0的开发环境的架设开始,一步步进入ASP和DREAMWEAVER8。

0的奇幻世界。

网页制作工具Dreamweaver8。

0、ASP开发技术，采用VBScript脚本语言进行了开发。

内容主要包括HTML，DREAMWEAVER8.0，ASP,SQL语言的基本概念及高级应用，ASP与数据库的连接。

最后对其中的不足与存在的问题进行了讨论，提出了相应的解决方法。

功能上虽不是十分完备，但都是在调查研究后，并参考相关的系统资料，学习中外大型优秀网站的优点和特点进行开发设计的，具有一定的技术性。

关键词:

ASP；DREAMWEAVER8。

0；HTML；Access；VbScript

第一章　绪论

学院网站是学院的“商标”。

在这个高度信息化的社会里，建立学院自己的网站是最直接的宣传手段。

网站的超时空特性，不仅能让本地区的人们了解学院，更可让世界了解学院。

在Internet飞速发展的今天，互联网成为人们快速获取、发布和传递信息的重要渠道，它在人们政治、经济、生活等各个方面发挥着重要的作用。

Internet上发布信息主要是通过网站来实现的，获取信息也是要在Internet“海洋”中按照一定的检索方式将所需要的信息从网站上下载下来。

因此网站建设在Internet应用上的地位显而易见，它已成为政府、企事业单位信息化建设中的重要组成部分,从而倍受人们的重视。

为了更好的办学，提高学校知名度，特构建安徽职业学院学校网站.

1。

1开发目的

随着计算机技术的发展，网络技术对我们生活和工作显得越来越重要，特别是现在信息高度发达的今天，人们对最新信息的需求和发布迫切的需要及时性。

而动态交互式网页刚好提供了这些功能，本系统就是一个能够在网上实现新闻，文摘,资源等的网上发布,多栏目管理,实时的进行行为统计和记录的网上交互系统，达到师生间的交流。

1.2　开发工具的选用及介绍

Dreamweaver的介绍：

在本文中采用了Dreamweaver8。

0作为开发工具，并结合photoshop8.0做图片特效和flash工具做动态画面效果。

本文中简要说明了Dearweaver8。

0。

Dreamweaver是在网页设计与制作领域中用户最多、应用最广、功能最强大的软件,随着Dreamweaver8的发布，更坚定Dreamweaver在该领域的地位。

它集网页设计、网站开发和站点管理功能于一身，具有可视化、支持多平台和跨浏览器的特性,是目前网站设计、开发、制作的首选工具。

1、灵活的编写方式

Dreamweaver具有灵活编写网页的特点，不但将世界一流水平的“设计”和“代码"编辑器合二为一，而且在设计窗口中还精化了源代码，能帮助用户按工作需要定制自己的用户界面。

2、可视化编辑界面

Dreamweaver是一种所见即所得的HTML编辑器，可实现页面元素的插入和生成。

或视化编辑环境大量减少了代码的编写,同时亦保证了其专业性和兼容性，并且可以对内部的HTML编辑器和任何第三方的HTML编辑器进行实时的访问。

无论用户习惯手工输入HTML源代码还是使用可视化的编辑界面，Dreamweaver都能提供便捷的方式使用户设计网页和管理网站变得更容易。

3、功能更多的CSS支持——CSS可视化设计、CSS检查工具

4、动态跨浏览器验证

当保存时系统自动检查当前文档的跨浏览器有效性,可以指定何种浏览器为测试用浏览器，同时系统自动检验以确定页面有没有目标浏览器不支持的tags或CSS结构。

动态跨浏览器有效性检查功能可以自动核对tags和CSS规则是否适应目前的主浏览器。

5、强大的WEB站点管理功能

6、内建的图形编辑引擎

7、Dreamweaver的集成特性

Dreamweaver8继承了Fireworks、Flash和Shockwave的集成特性，可以在这些Web创作工具之间自由地切换，轻松地创建美观实用的网页。

8、丰富的媒体支持能力

可以方便地加入Java、Flash、Shockwave、ActiveX以及其他媒体。

Dreamweaver具有强大的多媒体处理功能，在设计DHTML和CSS方面表现得极为出色，它利用JavaScript和DHTML语言代码轻松地实现网页元素的动作和交互操作。

Dreamweaver还提供行为和时间线两种控件来产生交互式响应和进行动画处理.

9、超强的扩展能力

Dreamweaver还支持第三方插件，任何人都可以根据自己的需要扩展Dreamweaver的功能，并且可以发布这些插件。

1。

3ASP的介绍

ASP技术ASP（ActiveServerPages动态网页）是微软公司推出的一种用以取代CGI（CommonGatewayInterface通用网关接口）的技术.目前,Internet上的许多基于Windows平台的Web站点已开始应用ASP来替换CGI。

简单地讲，ASP是一个位于服务器端的脚本运行环境,通过这种环境，用户可以创建和运行动态的交互式Web服务器应用程序,如交互式动态网页,包括使用HTML表单收集和处理信息，上传与下载等等。

通常情况下，用户通过浏览器看到的网页大多是静态的，目前Internet上的许多站点,仍然提供“静态"（static）的主页内容。

ASP与常见的在Client端实现动态主页的技术如JavaApplet、ActiveXControl、VBScript、JavaScript等不同，ASP中的命令和Script语句都是由服务器来解释执行的，执行结果产生动态生成的Web页面并送到浏览器；而Client端技术的Script命令则是由浏览器来解释执行.由于ASP是在服务器端解释执行，开发者可以不必考虑浏览器是否支持ASP；同时由于它在服务器端执行,开发者也不必担心别人下载程序从而窃取编程逻辑。

ASP通过后缀名为。

asp的ASP文件来实现，一个.asp文件相当于一个可执行文件，因此必须放在Web服务器上有可执行权限的目录下。

当用户从浏览器输入了.asp文件的地址后,浏览器就将这个URL请求发给WebServer,如果WebServer上装了ASP，就调用ASP.ASP读出相应。

asp文件，解释并执行命令，动态生成一个HTML页面回传WebServer,然后WebServer再把结果发送给浏览器.ASP文件的制作和HTML类似，且和HTML开发集成，可以在同一个过程完成,利用ASP将可以执行的脚本嵌入到HTML文件中（将HTML文件的后缀名改为。

asp），这使得HTML文件的编写与脚本的开发融合在一起。

通过ASP内置的对象、服务器组件（ServerComponent）可以完成非常复杂的任务，而且用户还可以自己开发或利用别人开发的服务器组件完成专门的任务.ASP比较网关及服务器扩展模式有着以下优点:

（1）完全与HTML文件融合在一起；

（2）容易创建，不需要其它编译、链接程序；

（3）面向对象的并通过ActiveXServer对象可扩展。

第二章　开发环境及需求分析

2.1项目背景

HTML作为一种样式语言，随着Internet上信息量的增多和交互性的加强使HTML显得越来越难以胜任的情况之下,而ASP能够彻底实现用户与管理人员的交互性，在ASP编程语言高度发展的形式下，ASP能够很好的解决这些复杂交互的动态性，于是我们也开始了对学院网站的动态开发,即而让学院网站更加的互动.

2。

2　开发环境

2.2。

1 系统平台

采用Browser/Server体系结构，服务器端采用运行最低配置要求（全部为中文环境）操作系统Windows2000AdvServer，Windows2000Server脚本解释器Vbscripts5.6以上版本，安装MicrosoftInternetExplorer5.5以上版本既可获得：

Web服务器IIS6.0，Windows2000自带

数据引擎MicrosoftAccess

权限要求对Access数据库具有建表、备份的权限

空间大小初次安装至少10M可用空间

硬件要求PIII500CPU256M内存或更高

带宽要求10M共享或更高

客户端软件，包括单机操作系统和浏览器软件,分别选用Windows2000和InternetExplorer，数据库系统采用MicrosoftAccess有利于方便操作。

2。

2.2 运行需求

在调试和运行过程中,应该能够让系统正常使用时不出错，若运行时遇到不可恢复的系统错误，也应该保证数据完好无损，对数据的精确度、时间特性、适应性等都有一定要求,要求系统运行时,能够保证数据的正确性、信息的可靠性、实现的高效性、系统的易使用性、系统管理的可维护性、信息的可测试性、数据的复用性、数据库的安全保密性、数据的可移植性以及网络互联性.

第三章首页设计

3.1首页说明

3.1.1前台首页显示

下面通过首页来说明网站整体的功能，如图3—1所示:

图3-1网站首页图

1.首页的最顶部排列显示大类新闻或文章，用户可以直接点击查看各项大类新闻里面的各项小类新闻，直到阅读每条详细信息.

2。

站点首页，教学科研，教学专题，资源下载,图片鉴赏等各个栏目，后台可以控制排序和位置调整，或显示条数设置。

3.图片，下载等显示可以任意排序，而且可以直接点击查看相关信息进行查看和更新信息。

4。

设有专题显示和网站调查系统,以及网站的一些统计数据信息，可以按不同条件进行文件信息搜索。

5。

公告部分显示最新发布的各项学院通知信息.

3。

1.2网站的管理

本系统是实现信息发布，多栏目管理，设有网站管理与论坛管理分开管理;使论坛具有更灵活的管理条件。

一、基本功能介绍：

1、网站基本资料设置（网站名称、网址、等等...一些基本设置）.

2、后台可增加一级分类和二级分类（可更改或添加）前台自动更新.

3、网站底部功能菜单设置内容增加更改.

4、可添加无数条公告前台自动显示.（内附多功能编辑器）

5、站内新闻及教学文章添加与修改。

（内附多功能编辑器）

6、模板添加和管理，导入,导出。

7、投票系统后台可添加多个投票项目，可以设置前台显示例数。

前台发表评论功能。

8、强大的广告管理功能，后台自行添加广告代码即可!

9、在数据库，对密码进行了MD5加密。

10、数据库备份与恢复

二、文章功能介绍:

1、文章分类栏目管理功能,专题栏目管理功能,分类模版设置管理。

2、自由编辑（HTML）栏目模版，可设置多个模版。

3、搜索页面自定义编辑（HTML）模版。

4、文章添加功能可自选标题颜色是否推荐,固顶，热门等功能。

5、支持URL转向，如果设置了网址，那么打开此文章后，自动跳转到设置的URL。

6、前台支持固顶文章，推荐文章和热点文章的调用，文章模糊搜索功能.

7、内部使用了多功能编辑器可方便地用拖动的方式进行图文混排、图片文件上传、微缩图上传显示效果处理等操作。

三、下载功能介绍：

1、下载栏目分类添加与修改。

2、添加软件可自行上传软件自动识别文件大小。

3、前台支持软件固顶功能，热门功能和推荐功能的调用，支持模糊搜索。

4、软件管理与审核，回收站管理，评论管理。

四、图片功能介绍：

1、图片栏目分类管理与修改。

2、添加图片可自行上传图片自动识别图片的大小。

3、前台支持图片固顶功能，热门功能和推荐功能的调用,支持模糊搜索。

4、图片管理与审核，回收站管理，评论管理。

五、频道管理功能:

1、可任意添加删除频道（可链接外部链接）。

2、频道间的排序功能.

六、友情连接功能:

1、可添加无数分类例为LOGO连接和文字连接。

2、后台直接添加连接和前台申请链接.

3、链接修改，删除，审核链接等一些功能

七、网站公告管理功能：

1、所有栏目公告，其他页面栏目公告

2、后台直接添加连接和前台申请链接。

3、链接修改，删除，审核链接等一些功能。

八、留言本功能：

1、留言本前台浏览留言和发表留言功能.

2、管理员回复，修改，删除等功能。

九、用户密码功能：

管理员在线修改密码。

十、数据库管理:

1、在线数据库压缩需FSO的支持。

2、在线数据库备份。

3、在线数据库操作注意，请备份好数据库在进行操作。

4、空间占用查看管理需FSO的支持.

十一、JS代码管理:

1、普通文章的JS代码。

2、普通文章的JS代码.

十二、上传文件管理

1、文章频道的上传文件.

2、图片频道的缩略图。

3、图片频道的上传图片。

4、下载频道的软件图片。

5、下载频道的上传软件.

6、网站广告的上传图片。

7、清除无用文件。

第四章网站总体方案设计

4。

1网站简要说明

这个校园新闻网是个集新闻、信息、交流为一体的网站,是为了让在校学生能刻苦学习的同时，得到适当的放松，并了解学院信息办发布的最新信息技术而设计的。

系统的各种功能设计能够符合学院网站的要求，信息,公告，广告，调查等发布功能的实现，能够给网站更多的生气，更多的实现了用户与学院之间的交互性.

4.2网站可用性讨论

4。

2。

1网页布局

实际内容占据网页的大部分空间，为50％～80％,导航部分不超过20%。

颜色的选择以青白色为主，没有使用太多的颜色来修饰某个对象，此外，正文和背景色的对比度较大，一般字色为默认的黑色,并且用了不同的背景色条区分正文区与其他功能区。

为了提高网页的可读性,标题区、标题行和正文区使用了不同大小的字体,正文使用的是静止的文字，且字体足够大，以便于阅读。

为了帮助用户方便地浏览,每个网页都设有标题导航,且网页标题清楚地表明了网页的内容。

在网页的组织上，每个网页都是按照“倒金字塔”原则进行编写，即从一个简单的结论开始渐次展开。

网页排版符合用户的阅读习惯，采用横向排列方式.

一个网页的大小一般不超过3万字节,以使用户在10秒钟之内能打开网页。

而且要为每一个链接加上描述信息，因为当一个链接被点击后，要把所有指向同一目标的链接都表示成已被访问过，这样便于用户浏览.在链接旁注明下载文件的大小，帮助用户预测下载时间。

4.2。

2主题鲜明、富有特色

在目标明确的基础上，完成网站的构思创意即总体设计方案.对网站的整体风格和特色做出定位，规划网站的组织结构。

要做到主题鲜明突出,力求简洁,要点明确，以简单明确的语言和画面告诉大家本站点的主题，吸引对本站点有需求的人的视线，对无关的人员也能留下一定的印象。

对于一些LOGO标志应充分加以利用.调动一切手段充分表现网站的个性和情趣，突出个性，这样才能够办出网站的特色.

Web站点主页的基本成分包括:

页头：

准确无误地标识站点名称和学院标志。

E-mail地址：

用来接收用户垂询。

联系信息：

如普通邮件地址或电话。

版权信息：

让用户了解系统信息.

重复利用已有信息,如用户手册、公共关系文档、技术手册和数据库等可以轻而易举地用到学院的Web站点中，以减轻数据库的负担。

4.2.3版式编排布局合理性

网页设计作为一种视觉语言，当然要讲究编排和布局，虽然主页的设计不等同于平面设计，但它们有许多相近之处,应充分加以利用和借鉴。

站点设计简单有序，主次关系分明，将零乱页面的组织过程，混杂的内容，依整体的布局的需要进行分组归纳，经过进行具有内在联系的组织排列，反复推敲文字、图形与空间的关系,使浏览者有一个流畅的视觉体验。

4.2。

4相关站点引导链接

一个好的网站的基本要素是用户进入后，与本网站相关的信息都可以方便快捷地找到，其中要借助于相关的站点,所以做好导引是一项重要的工作。

超文本这种结构使全球所有联上因特网的计算机成为超大规模的信息库，链接到其它网站轻而易举。

在设计网页的导引组织时，应该给出多个相关网站的链接,使得用户感到想得到的信息就在鼠标马上就可以点击的地方。

4.3网站流程图

如图4-1所示：

图4-1网站流程图

该流程图是从用户的角度开始的，登录用户可以更好地使用本站提供的信息服务、个性化服务及定期的网站活动；而未登录用户仅仅可以浏览信息,无法进行社区等本站相关的活动及服务。

4.4具体代码的实现以及重点

<％

'建立与数据库的连接

setconn=Server。

CreateObject（”ADODB.Connection"）

conn。

Provider="Microsoft。

Jet.OLEDB。

4。

0"

conn。

OpenServer。

MapPath（”/data/testdb.mdb"）

％>

〈%

’查询数据库多条记录（一条记录）

setrs=server。

CreateObject（"ADODB。

recordset”）

sql=”select*frommainorderbyDatedesc"

rs.opensql,conn，1,2

％>

<%

'插入数据到数据库中（传递值方法：

Post）

setrs=server。

CreateObject（"ADODB。

recordset”）

user=request。

Form（"user”）

qq=request.Form（”qq"）

title=request。

Form（”title"）

content=request.Form（”content"）

sql="select*frommain"

rs.opensql,conn，1，3

rs.addnew'插入记录

rs（”User"）=user

rs（"Qq”）=qq

rs（"Title"）=title

rs（"Content”）=content

rs（"Date”）=now（）

rs.update’刷新数据库

％>

<%

’删除数据库中某一记录（传递值方法：

Get）

liuyan_id=request。

QueryString（”id"）

setrs=server.CreateObject（”ADODB.recordset"）

sql=”select*frommainwhereid="＆liuyan_id

rs。

opensql,conn，1,2

rs.delete

%>

〈%

'更新数据库中某一记录（传递值方法：

Post）

id=request.Form（”id_edit"）

sql="select*frommainwhereid=”&id

setrs=server。

CreateObject（”ADODB.recordset”）

user=request。

Form（"user"）

qq=request。

Form（”qq”）

title=request。

Form（”title”）

content=request.Form（”content”）

rs.opensql,conn,1,3

rs（”User”）=request。

form（”user”）

rs（”Qq”）=request.form（”qq”）

rs（”title"）=request.form（”title”）

rs（”Content”）=request。

form（"content"）

rs（"Date”）=now（）

rs.update’更新数据库记录

%〉

〈%

rs.close'关闭recordset对象

setrs=nothing

conn。

close'关闭数据库连接

setconn=nothing’释放connection对象

%>

①conn。

execute方法：

sql="select＊fromadm"

setrs=conn。

execute（sql）

②rs.open方法：

sql="select＊fromtable”

setrs=server。

createobject（"adodb。

recordset"）

rs.opensql,conn,1，1

很明显，conn。

execute方法效率高很多，但是rs.opensql,conn,1，1的功能多些（参数多的原因，例如:

rs。

opensqlstr，conn，1,3--—->（表示打开数据库的方式）

rs。

addnew新增加一条记录rs.delete

rs（"name"）="hudi"将hudi的值传给name字段

rs.update刷新数据库）。

新闻的添加:

〈%

’建立与数据库的连接

setconn=Server.CreateObject（"ADODB.Connection"）

conn.Provider="Microsoft.Jet.OLEDB.4.0”

conn。

OpenServer.MapPath（"。

。

/data.mdb"）

％>

〈bodytopmargin=”40”link=”green”alink=”green"vlink=”green">

新闻后台管理系统〈ahref=”add。

asp">添加新闻〈/a〉

〈/div>〈/td>

〈tdwidth=”14％"height=”9”bgcolor=”#CCCCCC"〉〈divalign=”center"〉ID

〈tdwidth=”56%"bgcolor="#CCCCCC”>新闻分类

〈tdwidth="18%"bgcolor=”#CCCCCC”〉删除〈/div>〈/td〉

编辑

〈%

’查询数据库多条记录（一条记录）

setrs=server。

CreateObject（”ADODB。

recordset"）

sql=”select＊fromnewsorderbyDatedesc"

rs。

opensql,conn,1，2

’response。

Write（rs.recordcount）

%〉

〈%fori=1tors。

recordcount%>