校园网站设计 - 图文

毕业设计（论文）专用纸

第四章．网站设计总体方案设计

4.1 网站简要说明

这个校园新闻网是个集新闻、信息、交流为一体的网站，是为了让在校学生能刻苦学习的同时，得到适当的放松，并了解学院信息办发布的最新信息技术而设计的。系统的各种功能设计能够符合学院网站的要求，信息，公告，广告，调查等发布功能的实现，能够给网站更多的生气，更多的实现了用户与学院之间的交互性。

4.2 网站可用性讨论

4.2.1 网页布局

实际内容占据网页的大部分空间，为50%～80%，导航部分不超过20%。颜色的选择以青白色为主，没有使用太多的颜色来修饰某个对象，此外，正文和背景色的对比度较大，一般字色为默认的黑色，并且用了不同的背景色条区分正文区与其他功能区。为了提高网页的可读性，标题区、标题行和正文区使用了不同大小的字体，正文使用的是静止的文字，且字体足够大，以便于阅读。

为了帮助用户方便地浏览，每个网页都设有标题导航，且网页标题清楚地表明了网页的内容。在网页的组织上，每个网页都是按照“倒金字塔”原则进行编写，即从一个简单的结论开始渐次展开。网页排版符合用户的阅读习惯，采用横向排列方式。 一个网页的大小一般不超过3万字节，以使用户在10秒钟之内能打开网页。而且要为每一个链接加上描述信息，因为当一个链接被点击后，要把所有指向同一目标的链接都表示成已被访问过，这样便于用户浏览。在链接旁注明下载文件的大小，帮助用户预测下载时间。

4.2.2 主题鲜明、富有特色

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

要做到主题鲜明突出，力求简洁，要点明确，以简单明确的语言和画面告诉大家本站点的主题，吸引对本站点有需求的人的视线，对无关的人员也能留下一定的印象。对于一些LOGO标志应充分加以利用。调动一切手段充分表现网站的个性和情趣，突出个性，这样才能够办出网站的特色。

第 9 页 共 46 页

毕业设计（论文）专用纸

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

页头：准确无误地标识站点名称和学院标志； E-mail地址：用来接收用户垂询； 联系信息：如普通邮件地址或电话； 版权信息：让用户了解系统信息。

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

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

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

一个好的网站的基本要素是用户进入后，与本网站相关的信息都可以方便快捷地找到，其中要借助于相关的站点，所以做好导引是一项重要的工作。超文本这种结构使全球所有联上因特网的计算机成为超大规模的信息库，链接到其它网站轻而易举。 在设计网页的导引组织时，应该给出多个相关网站的链接，使得用户感到想得到的信息就在鼠标马上就可以点击的地方。

4.3 网站流程图

网站服务 网站浏览 用户浏览 查看撰写留言 未注册论坛浏览 注册登陆论坛 论坛浏览和发帖 退 出

图2 网站流程图

该流程图是从用户的角度开始的，登录用户可以更好地使用本站提供的信息服

第 10 页 共 46 页

毕业设计（论文）专用纸

务、个性化服务及定期的网站活动；而未登录用户仅仅可以浏览信息，无法进行社区等本站相关的活动及服务。

4.4 网站模块结构

网站基本结构图 网站前台模块 会员模块 图片鉴赏模块 资源下载模块 网站浏览模块 留言系统模块 论坛会员注册模块 论坛会员浏览模块 会员论坛工具模块 登陆验证模块 后台管理模块 资源管理模块 栏目管理模块 网站维护模块 论坛维护模块

图3 网站模块结构

4.5 本章小结

在本章中，主要阐述了网站设计的方案设计，和系统模块的建立，系统设计需要设计软件系统的体系结构、用户界面、数据库、模块等，从而在需求与代码之间建立桥梁。系统设计分两个阶段：高层设计阶段和详细设计阶段，高层设计阶段的重点是网站的体系结构设计。详细设计阶段的重点是管理界面设计、数据库设计和模块设计。在体系结构设计之前要阅读需求文档，明确设计任务。

第 11 页 共 46 页

毕业设计（论文）专用纸

第五章 结构设计与具体实现

5.1 整体设计 5.1.1 结构设计

本网站的各个功能入口比较多，因此需要一个专门的文件来显示各种后台入口，而且在网页中还要显示出用户在留言板块和管理员在后台模块的信息，因此整个网站我使用了框架（Frame）结构，这样操作比较方便，结构美观。具体结构实现见（5.2界面设计）。

5.1.2 数据库的连接

数据只有用数据库来管理才能有自动化管理的可能。数据的结构将影响整个管理机制的应用，而且一旦建立以后要修改常会出现麻烦。所以一开始就要仔细慎重地搭建一个完整而合理的结构。Microsoft Access数据库相对其它的数据库来说要简单容易操作些，本网站信息发布系统中的数据库文件就是Access类型的数据库，数据库中共有20张表（具体表单见附录表二）。

以下是本系统与数据库建立连接的conn.asp源代码： <% dim conn dim connstr dim db

db=\ '数据库文件的位置 Set conn = Server.CreateObject(\

connstr=\conn.Open connstr sub CloseConn() %>

数据库文件data.mdb在连接文件嵌入下，各页面都能够访问数据库，这是实现交互性的前题。（数据库设计见图）

conn.close set conn=nothing

end sub

第 12 页 共 46 页