网站设计制作简要说明.docx
- 文档编号:28123056
- 上传时间:2023-07-08
- 格式:DOCX
- 页数:29
- 大小:660.68KB
网站设计制作简要说明.docx
《网站设计制作简要说明.docx》由会员分享,可在线阅读,更多相关《网站设计制作简要说明.docx(29页珍藏版)》请在冰豆网上搜索。
网站设计制作简要说明
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,AdobePhotoshop6.0,DreamweaverUltraDev4。
服务器端运行环境:
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类别实体
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,AdobePhotoshop8.0,Dreamweaver等网页设计相关的软件。
其中FLASH8.0主要完成网页中相关动画的设计和处理。
AdobePhotoshop8.0主要完成网页中相关的图片的大小,格式转化,效果处理等。
Dreamweaver主要完成网页的排版、布局设计。
4.2建立Asp的运行环境
签于目前流行的windows操作平台有windowsxp等。
下面针对这XP操作平台上建立Asp运行环境的一些简要介绍。
在windows2000/XP上建立Asp的运行环境
在windows2000/XP上运行Asp的环境也是IIS。
如果安装的是windows2000Server,IIS5.1将作为一个默认选项被安装。
如果使用的是windows2000/XP中文专业版,则需要使用控制面板“添加/删除程序”来安装IIS及其组件。
4.3、主页的设计
来访者输入网址,首先打开的就是学校网站的主页,主页设计应该美观,同时提供足够多的链接,以便来访者可以通过链接导航到自己所关心的信息页面上去。
下面是该首页运行的界面图:
该页面的布局结构是∏型布局结构。
具体的说:
在网页的上面是log图片和导航条。
Log图片表明网站的主题:
南部县伏虎中学网站。
导航条将本站的栏目分成了学校概况,学校新闻,教育科研,名校名师,学生园地,招生信息,诚聘英才,校长信箱,网上留言等栏目。
这些导航栏目分别设计有相应的文字链接,点击这些文字链接可以进入相应的页面。
打开专业的网页设计工具DreamweaverUltraDev4。
1:
新建一个网页文件,保存为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:
1pxsolid#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;color:
#666666;text-decoration:
none;}
a:
visited.more{color:
#666666;text-decoration:
none;}
a:
hover.more{color:
#333333;text-decoration:
underline;}
img{border:
0px;}
利用布局表格工具,设置好网页的表格布局。
然后就可以在表格中添加单元格。
利用表格的属性面板和单元格属性面板设定好各自的属性以后,就可以在单元格中添加文字和插入图片。
布局设计好的网页如下:
代码设计:
为了实现首页显示学校快讯,教育科研,名校名师,学生园地等文字信息以及为了方便管理。
不是在每个栏目设计静态的文本信息,而是内嵌java脚本,脚本的数据源来自一个和数据库相连接的asp文件:
new.asp。
下面给出学校快讯,教育科研,名校名师,学生园地对应的四个java脚本语句:
1:
typeid=10&n=10? m=14"> 2: typeid=11&n=10? m=14"> 3: typeid=12&n=10? m=14"> 4: typeid=13&n=10? m=14"> 通过比较这四条脚本语句可以发现,脚本调用的是同一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="selecttop"&n&"*fromnewswheretypeid="&cstr(typeid)&"andaudit=1orderbynewsidDESC" 这里的audit表示已经是审核通过的信息。 最后的信息显示是按newsid号倒序排列。 另外在该文件的开头有包含文件: --#includefile="function/DBOpen.asp"--> 该文件用于链接数据库。 在文件的末尾有包含文件: --#includefile="function/DBclose.asp"--> 该包含文件用于关闭数据库。 4.4显示新闻和下载文件的shownews.asp设计 在首页中大量的新闻信息是通过链接到shownews.asp文件来显示新闻信息的。 比如在首页中点击学校快讯中的任一新闻,就可以链接到该页面并显示该新闻的详情。 下面是学校快讯中“南部县伏虎中学教学成果显著”这条新闻后显示的页面,该新闻的链接语句是: shownews.asp? newsid=413 这里的传递的参数newsid用于传递显示的新闻的编号。 该页面的设计过程首先在DreamweaverUltraDev4中排版设计,设计的界面如图所示: 对比实际运行的界面和设计界面可以看出,导航条的设计不是在这里直接给出,而是通过脚本调用一个js文件。 这样设计的好处在与可以和其它的页面共享该导航的js文件。 调用脚本的语句如下: 该newsbar.js文件的语句如下: document.writeln(" document.writeln(" document.writeln(" typeid=9>学校概况"); document.writeln(" typeid=10>学校新闻"); document.writeln(" typeid=11>教育科研"); document.writeln(" typeid=12>名校名师"); document.writeln(" typeid=13>学生园地"); document.writeln(" typeid=14>招生信息"); document.writeln(" typeid=15>诚聘英才"); document.writeln(""); document.writeln(""); 另外对比shownews.asp文件还可以看出,该页面中的新闻标题和新闻内容也是调用其它的语句和脚本的。 新闻标题调用asp脚本: <%=rs("topic")%>用于显示记录集中的topic字段值。 该字段是通过sql语句实现的查询记录集中的字段值。 相关的sql查询语句如下: rs.open"select*fromnewswherenewsid="&cstr(request("newsid")),conn,1,1 该语句实现从news表中查询newsid编号等于传递的参数newsid的记录。 对于新闻的内容显示也和新闻的主题显示类似,这里就不再说明。 最后这里介绍一下该页面显示的与本新闻相关的新闻的实现技术: 首先要从数据库中news表的字段说起,在news表中有一个keys字段。 我们可以利用sql语句在news表中查询keys值和该新闻关键字类似的记录,就可以得到相关信息。 Sql语句如下: rsc.open"selecttop"&aboutnews&"*fromnewswherekeys
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 网站 设计 制作 简要 说明