第三章 信息交流与发布系统总体分析与设计 paper51.com §3.1 总体设计思路 http://www.paper51.com “OS”课程教学网站信息交流与发布系统目的就是起到信息的相互传递作用,故方便快捷是本系统设计的宗旨,最大的体现人性化设计是本系统的目标。无论是课件阅览部分,信息留言板块还是在线聊天系统,无一不遵循着设计的初衷。毕竟本网站并非综合性或娱乐性的网站,除了学习,能够留住用户的理由并不充分,故整个信息交流与发布系统都简单易学,且没有要求正式的用户注册,为信息的交流提供了最便捷的渠道。 http://www.paper51.com 根据设计初衷,本系统划分为一下三部分组成。 paper51.com
第一部分:在线课件阅览系统 通过课件向用户展示“OS”课程整体内容,提供详细资料。 copyright paper51.com 第二部分:信息留言系统 提供用户进行咨询和留言的平台。 http://www.paper51.com
第三部分:即时信息交流系统 提供用户进行一对一,一对多和多对多的信息交流平台。 内容来自www.paper51.com §3.2 在线课件发布系统分析设计 paper51.com
§3.2.1 在线课件发布系统重要性 内容来自论文无忧网 www.paper51.com 在线课件阅览系统是信息交流与发布系统三个组成部分之一,虽然其设计开发难度不高,但工作量却不容忽视,且其重要性不亚于整个网站的任何一个系统,因为它是用户了解和学习“OS”课程的重要渠道。 http://www.paper51.com §3.2.2 课件发布系统设计流程 内容来自www.paper51.com 本系统主要是将老师所给的PPT格式的“OS”课程课件转换为HTML网页格式供远程用户浏览。课件主页采用静、动相结合的方式,即静态的文字和动态的gif图片相结合并配以背景音乐,给用户感觉良好的界面,续而激发阅读课件的欲望。 paper51.com 课件首页由Dream Waver制作,外观图示顶部图片是学校新区景色,左上角鲜明的标出了西南科技大学的字样,给人以一目了然的感觉。首页主体主要由文字链接构成,并规则放于框架之中,层次分明,重点突出。且首页还提供网站首页、在线考试、留言和聊天系统的链接,充分体现了网站设计的初衷――方便适用。最后页面底部,辅以常规型的联系方式和版权所有等,再搭上适当的底色和图片,以及动听的背景音乐,课件首页的构建就此基本完成。 内容来自论文无忧网 www.paper51.com
课件阅览主页面如“图3.1”所示: http://www.paper51.com http://www.paper51.com 图3.1 课件阅览主页面 内容来自www.paper51.com 下面是网页链接代码段: copyright paper51.com <p align="center"><font size="5"><ahref="l1.asp" class="style1" target="_blank" >计算机操作系统概述</a></font></span></p> paper51.com 这里需要强调的是,课件首页包括整个课件的网页制作都应用了Dream Waver所带的CSS,而href后面所链接的内容就是点击“计算机操作系统概述”时所看到的页面。这里,为了方便用户对其他章节的阅览,特别使用target="_blank"这一语句,所起的作用是采用弹出式窗口的形式。 http://www.paper51.com 接着便是对课件页面的设计。“OS”课程教学课件主要取自指导老师所提供的PPT课件,通过逐一复制整理,转换为网页形式课件,其工作量之大可想而知。由于课件基本由文字和简单图片构成,故为了方便用户阅读,体现网站的人性化设计,课件阅览页面对网页色彩的搭配很是讲究。课件背景以淡蓝色为主基调,正文深蓝色的文字和背景形成了鲜明的对比色,在用户长时间阅读时减少眼部的疲劳。课件总共由九章组成,每一章又包含了不同的小节数。于是,在设计制作时,我以每一节单独为一个页面,并且每个页面都提供了与网站、课件首页链接的导航条,同时,也有与本章各节相连的链接地址,让用户可以方便地浏览自己所需要的章节,而不会迷茫在书海之中。另外,为了让每节的课件内容具备整体感,我采用了外部CSS方法,并加载于课件每一节的页面,此方法简单适用,且具有同内部CSS相同的效果。下面就是每节页面所共同调用的外部CSS代码[2]: paper51.com .content { 内容来自论文无忧网 www.paper51.com font-family:"宋体"; 内容来自论文无忧网 www.paper51.com font-size:16px; 内容来自www.paper51.com line-height:normal; http://www.paper51.com
font-weight:lighter; http://www.paper51.com color: #000066; copyright paper51.com text-decoration:none; http://www.paper51.com } http://www.paper51.com .title1 { paper51.com …… 内容来自论文无忧网 www.paper51.com } paper51.com
.title2 { http://www.paper51.com …… copyright paper51.com } paper51.com .down { paper51.com …… paper51.com } http://www.paper51.com
body { http://www.paper51.com
background-image:url(picture/Winterwoman.jpg); copyright paper51.com
} paper51.com a:link { 内容来自www.paper51.com
…… 内容来自www.paper51.com } copyright paper51.com a:hover { http://www.paper51.com font-size:16px; 内容来自www.paper51.com
font-weight:bold; copyright paper51.com color: #FF00FF; paper51.com text-decoration:underline; 内容来自www.paper51.com } 内容来自论文无忧网 www.paper51.com CSS样式表的建立是从Dream Waver的状态栏处点击设计,在CSS样式处新建类,新建类必须以“.”开头,上文代码“.content”后大括号中代码是对课件内容的样式设计,同理,“title1”、“title2”、 “down” 、“body”分别是对各大小标题和底部链接的式样设计以及背景图片。而“a:link”和“a:hover”所对应代码,分别指代链接文字和当鼠标移动至链接文字上方时的文字状态。 paper51.com §3.2.3 课件发布系统后期工作 内容来自论文无忧网 www.paper51.com 整个课件的设计制作就此告一段落。回过头来浏览整个课件,感觉整个课件色彩种类过于繁多,而页面却仍显单调。于是,我将文字和背景色彩调控在三种以内,同时在每节课件顶部放置一体现学校风采且色彩搭配合理的图片,在纵观整个页面,顿时有一种焕然一新的感觉。同时,无论是课件的首页还是每一节的页面,都提供了与主页、留言版、聊天室等页面的链接地址,使其虽为单独一部分,却实与整个网站浑然一体。 内容来自www.paper51.com §3.3 用户信息反馈发布系统分析设计 http://www.paper51.com §3.3.1 用户信息反馈发布系统重要性及模块设计 内容来自www.paper51.com 作为一个远程教育网站,具备一个良好的与用户沟通的平台是必不可少的。因为用户的对网站包括课程的信息反馈,是网站建设跟上用户需求的关键因素之一。我们的网站设计初衷就是适合用户使用,能否听到用户的建议,及时给予用户合理的答复,并一步步提升网站质量等等,不但关系到本网站的发展,更影响着学校的声誉。用户信息反馈发布系统就在本网站中担当起了这一重任,它建立起了用户直接与管理员沟通的桥梁。 内容来自www.paper51.com 根据系统功能分析,得到系统整体框架图如下: 内容来自论文无忧网 www.paper51.com 内容来自www.paper51.com 图3.2 用户信息反馈发布系统功能模块图 内容来自论文无忧网 www.paper51.com §3.3.2 系统组成构造 内容来自www.paper51.com
用户信息反馈发布系统共由十三个文件组成,每个文件各司其职,最终构建成了用户和管理员以及用户和用户之间交流的平台。现将个文件及其功能介绍如下: copyright paper51.com ⑴信息反馈公布index.asp:此页面用于用户管理员和用户在线查看公布信息。⑵管理员登录login.asp:管理员由此登录系统,进行信息维护。 paper51.com ⑶管理员退出logout.asp:执行管理员退出功能。 http://www.paper51.com
⑷信息输入write.asp:用户在此输入信息进行留言。 copyright paper51.com ⑸信息回复reply.asp:执行管理员对用户信息回复功能。 内容来自www.paper51.com
⑹信息删除del.asp:执行管理员对用户发布信息和回复的删除功能。 内容来自论文无忧网 www.paper51.com
⑺页面顶部top.asp:镶套在每个页面顶部的功能条。 paper51.com ⑻数据库链接connection.asp:数据库调用代码。 内容来自www.paper51.com ⑼conn.asp:数据库对应连接文件。 内容来自论文无忧网 www.paper51.com ⑽层叠样式表bbs.css:各页面共同调用的外部样式表。 内容来自www.paper51.com ⑾数据库文件guest.mdb:信息存取数据库。 http://www.paper51.com
⑿背景音乐“记事本.rm”:信息发布页面所调用的音乐。 内容来自论文无忧网 www.paper51.com
⒀图片文件夹images:整个系统所调用的图片。 内容来自www.paper51.com 为清晰展现用户信息反馈发布系统各功能模块,下图为系统流程图: copyright paper51.com
内容来自www.paper51.com 图3.3 信息反馈发布系统流程图 http://www.paper51.com §3.3.3 数据库设计 内容来自论文无忧网 www.paper51.com 用户信息反馈发布系统简而言之就是信息留言平台,在这部分的设计制作中,后台调用了OFFICEXP办公系统套件所自带的Access数据库系统[3]。建立了名为“guest”的数据库,并在数据库中建立了以下四张表: 内容来自www.paper51.com
1.admin表 内容来自论文无忧网 www.paper51.com
列名 paper51.com 数据类型 内容来自论文无忧网 www.paper51.com 可否为空 http://www.paper51.com
说明 内容来自www.paper51.com Id paper51.com
自动编号 内容来自论文无忧网 www.paper51.com NOT NULL 内容来自论文无忧网 www.paper51.com
登录编号(主键) copyright paper51.com Admin http://www.paper51.com
文本 内容来自论文无忧网 www.paper51.com NULL http://www.paper51.com 管理员名字 copyright paper51.com Password http://www.paper51.com 备注 内容来自www.paper51.com NULL 内容来自论文无忧网 www.paper51.com 管理员密码 内容来自www.paper51.com Home http://www.paper51.com
文本 内容来自www.paper51.com NULL 内容来自www.paper51.com 网站主页 copyright paper51.com Page 内容来自论文无忧网 www.paper51.com 数字 http://www.paper51.com NULL paper51.com 页数 copyright paper51.com
total paper51.com 数字 http://www.paper51.com NULL 内容来自论文无忧网 www.paper51.com 允许输入字数 内容来自论文无忧网 www.paper51.com 表3.1 管理员信息表 copyright paper51.com 2. guest表 内容来自www.paper51.com 列名 内容来自论文无忧网 www.paper51.com
数据类型 内容来自www.paper51.com 可否为空 copyright paper51.com 说明 paper51.com Id 内容来自www.paper51.com
自动编号 paper51.com NOT NULL http://www.paper51.com
用户编号(主键) http://www.paper51.com User name copyright paper51.com 文本 copyright paper51.com NULL paper51.com 用户名 paper51.com Time paper51.com
日期/时间 内容来自论文无忧网 www.paper51.com
NULL 内容来自论文无忧网 www.paper51.com 发布信息时间 内容来自论文无忧网 www.paper51.com Title 内容来自论文无忧网 www.paper51.com 文本 copyright paper51.com
NULL http://www.paper51.com 信息题目 copyright paper51.com Content paper51.com 备注 内容来自www.paper51.com
NULL copyright paper51.com
信息内容 内容来自www.paper51.com ip copyright paper51.com 文本 http://www.paper51.com NULL copyright paper51.com 用户IP地主 copyright paper51.com
内容来自论文无忧网 www.paper51.com 文本 内容来自论文无忧网 www.paper51.com NULL 内容来自论文无忧网 www.paper51.com
用户邮箱 http://www.paper51.com
occation copyright paper51.com
文本 内容来自www.paper51.com
NULL 内容来自论文无忧网 www.paper51.com 来自哪里 copyright paper51.com 表3.2用户信息表 paper51.com 3. reply表 http://www.paper51.com 列名 copyright paper51.com
数据类型 copyright paper51.com
可否为空 http://www.paper51.com 说明 http://www.paper51.com
R_id http://www.paper51.com 自动编号 内容来自www.paper51.com NOT NULL 内容来自www.paper51.com 回复编号(主键) http://www.paper51.com R_time paper51.com 日期/时间 内容来自www.paper51.com
NULL 内容来自www.paper51.com 回复时间 内容来自www.paper51.com R_content 内容来自论文无忧网 www.paper51.com
备注 paper51.com NULL 内容来自论文无忧网 www.paper51.com
回复内容 paper51.com R_ip http://www.paper51.com 文本 copyright paper51.com NULL 内容来自论文无忧网 www.paper51.com 回复者IP地址 内容来自论文无忧网 www.paper51.com
R_username http://www.paper51.com 文本 paper51.com NULL paper51.com 回复者名称 内容来自www.paper51.com 表3.3 管理员回复信息表 paper51.com 4. stycss 内容来自论文无忧网 www.paper51.com 列名 内容来自www.paper51.com 数据类型 copyright paper51.com 可否为空 copyright paper51.com 说明 copyright paper51.com S_id http://www.paper51.com 自动编号 内容来自www.paper51.com NOT NULL 内容来自论文无忧网 www.paper51.com 颜色编号 copyright paper51.com Tcolor paper51.com 文本 内容来自论文无忧网 www.paper51.com NULL paper51.com 主标颜色 paper51.com Tcolor1 http://www.paper51.com
文本 paper51.com NULL paper51.com 附标1颜色 paper51.com
Tcolor2 内容来自论文无忧网 www.paper51.com
文本 内容来自论文无忧网 www.paper51.com NULL paper51.com 附标2颜色 内容来自www.paper51.com Hcolor paper51.com 文本 http://www.paper51.com
NULL copyright paper51.com 主页背景图片 内容来自论文无忧网 www.paper51.com Bgcolor http://www.paper51.com
文本 http://www.paper51.com NULL http://www.paper51.com 回复页颜色 paper51.com Bdtj http://www.paper51.com 文本 http://www.paper51.com NULL 内容来自论文无忧网 www.paper51.com 回复背景颜色 http://www.paper51.com
Top1 paper51.com
文本 paper51.com NULL http://www.paper51.com
页顶颜色 http://www.paper51.com Link copyright paper51.com 文本 内容来自论文无忧网 www.paper51.com NULL http://www.paper51.com 链接颜色 http://www.paper51.com Tdc copyright paper51.com 文本 paper51.com NULL copyright paper51.com 信息标题颜色 copyright paper51.com Tdc1 http://www.paper51.com
文本 内容来自www.paper51.com NULL paper51.com 信息内容颜色 http://www.paper51.com Background paper51.com
文本 copyright paper51.com NULL paper51.com |