1. 网站的功能
现如今,网站开发技术日益发展完善,基于 web 的网站设计与开发已成为当今企业和 积极探索和发展的热门技术.带有交互性的动态网站设计也越来越受到人们的重视. 出现了各种网站开发工具,如 dreamweaver、frontpage、记事本等,同时也需要一些网 页美化工具,如 photoshop、firework、flash 等等。在网站制作中要用到 Html 语言、 javascript、vbscript 脚本语言、asp 、php、 jsp 等网站开发技术,
xml 技术等等,同时 还能提供一些组件来丰富页面内容。动态网站还可与数据库连接,实现交互功能。
2.网站设计制作的理论和技术基础 .网站设计制作的理论和技术基础 制作的
2.1 网站用户界面设计原则
一个设计优秀的用户界面不仅要能够充分发挥软件的功能,而且要让用户使用方 便。用户界面设计的一个最基本也是最重要的依据是以用户为中心。因为设计软件是给 人使用的,一个软件使用效率的好坏取决于软件本身的设计和人是否能够方便的使用。 因此,用户界面的设计必须以用户为中心。
2.1.1 一般
软件的用户界面设计原则
(1) 一致性 一致性体现在用户界面的各个方面,包括界面元素、命令名称、信息表示和操作方 式。 (2) 容错性 一个好的用户界面应该在设计时尽量避免可能的出错情况,对于不可避免的错误, 应该尽量给用户提供恢复的手段。 对于可能发生灾难性后果的命令/操作, 应给出警告并 要求用户确认。 (3) 反馈 一个好的用户界面在任何情况下都应该对用户的操作做出反馈(除非用户不需要这 种反馈)。反馈使用户感觉到他在操作该软件,了解软件的当前运行状态。
2.1.2 网站用户界面设计原则
网站的用户界面设计, 除了要掌握用户界面设计的一般原则外, 还要把握其特殊性, 因为网站网页的主要功能是向浏览者提供信息,所以网站的界面设计和其它应用软件界 面设计存在一定的差异。
潍坊本科毕业论文
下面,根据界面设计的一般原则,结合网站开发平台的实际情况,认为网站开发平 台界面设计应遵循以下基本原则,如表 2-1 所示。
表 2-1 网站开发平台界面设计原则 界面
设计的一般原则 1 2 3 4 5 一致性 容错性、反馈 审美性 简易性 网站界面的设计原则 统一的风格 良好的交互 视觉效果 网页洁简 传输速度
2.2 网站用户界面设计技术
2.2.1 网站的页面布局
网站开发平台的页面布局总体上遵循了网站界面设计原则。根据网站开发平台的整 体组织结构,可以分两类页面:首页的页面布局、后台管理页面布局。下面介绍本网站的 页面布局: (1) 首页的布局 整个页面的布局采用了“三型”结构,主色调
采用了桔红的暖色色调,文字的大小 采用目前网上非常流行的 9pt,字体是宋体,对于叙述性的文字,采用黑色,对于链接, 活动的采用红色。教育科学与技术系的标志图片 logo 放在最上面,logo 下面是整个网 站的
导航栏,主体部分左边放置辅助模块,右边放置主要的新闻和消息,底部是
版权。 如图 2.1 所示。
1
潍坊本科毕业论文
图 2.1 首页的布局
(2) 后台管理布局 网站的后台主页面是用框架布局比较简单,用表格布局页面,点击每个超连接就会 打开一个新的页面,便于管理,如图 2.2 所示。
图 2.2 后台管理布局
2.2.2 网站的统一版面设计技术
由于网站中的网页要求有统一的风格和良好的视觉效果,即要求网站有统一的版 面,由于级联格式页(CSS )技术能集中管理 WEB 站点的格式元素(字体、背景、文本、
2.2.3 界面元素定位技术
界面元素定位是版面布局的重要内容之一。要使网页的界面布局具备报纸、杂志等 漂亮的布局,必须要对页面的界面元素进行定位。在网站开发平台中采用了以下几种界 面元素的定位技术:表格定位、块表示符<
和
定位和 CSS 定位,下面分 别进行讨论。
网站制作运用的 运用的开发技术 2.3 网站制作运用的开发技术
教科系网站在 Windows XP 系统下,在 Dreamweaver 软件中设计制作的,用到的语 言有 html 语言和脚本语言。本系统动态开发技术主要采用了 ASP 技术(ActiveX Server
2
潍坊本科毕业论文
Pages ), 它是新一代动态网页开发技术, 具有开发简单、 与浏览器类型无关、 功能强大、 。
平台的体系结构和开发环境 2.3.1 平台的体系结构和开发环境
该系统采用了B/S/D(Browser/server/Date server)的体系结构如图2.3所示。
Server 端 数据库 服务器 组 件 ADO 和 ODBC
WEB 服务器端 IIS5.0 和 ASP 环境 服务器脚本代码
教师用户
学生用户
2.3 图 2.3 B/S/D 的体系结构
三层结构中, 第一层(浏览器) 为表示层, 主要用于完成用户接口的功能; 用户在 客户端向 URL 指定的 Web 服务器提出服务申请,Web 服务器通过 HTTP 协议将用户所需 的信息传送给客户端。在这里,客户端的作用只是接收信息并用 WWW 浏览器显示出来。 第二层(为功能层, 主要用于完成客户请求的应用功能,Web 服务器在收到客户的请求后 与第三层中的数据库连接并进行数据处理, 而后通过 Web 将处理结果传回到客户端。第 三层(数据库服务器) 为数据层, 采用 Access 网络数据库, 主要完成的数据存储、加工 和管理功能。 网络操作系统、数据库系统和网络编程技术选择 (1) 操作系统平台: Windows xp; (2) 实现环境: IIS 5.0, 后台采用面向对象设计的ASP 编程技术; (3) 数据
库: Access 。
HTML语言 2.3.2 HTML语言
HTML 的英语意思是:Hypertext Marked Language,即超文本标记语言,是一种用来 制作超文本文档的简单标记语言。超文本传输协议规定了浏览器在运行 HTML 文档时所 遵循的规则和进行的操作.HTTP 协议的制定使浏览器在运行超文本时有了统一的规则和 标准。 HTML 编写的超文本文档称为 HTML 文档, 用 它能独立于各种操作系统平台, 1990 自
3
潍坊本科毕业论文
年以来 HTML 就一直被用作WWW(是 World Wide Web 的缩写,也可简写 WEB、中文叫 做万维网) 的信息表示语言,使用 HTML 语言描述的文件,需要通过 WEB 浏览器显示出 效果。
2.3.3 脚本语言
脚本程序设计在 Web 程序设计中占有很重要的地位,无论是客户端动态页面设计, 还是动态网站设计中的服务器端编程, 使用最多的就是脚本语言。 在众多的脚本语言中, 使用最广泛的是 JavaScript 和 VBScript。这两种语言即可作为客户端脚本语言,又可 以作为服务器端脚本语言。 JavaScript 是一种嵌入在 HTML 文件中的脚本语言,它是基于对象和事件驱动的, 能对诸如鼠标单击、表单输入、页面浏览等用户事件作出反应并进行处理。JavaScript 语言具有如下特点:
2.3.4 ASP 技术
ASP 是一种服务器端的脚本运行环境, 利用它我们可以产生和运行动态的、 交互的、 高性能的 web 服务应用程序。一个 ASP 应用程序通常以.asp 作为扩展名,ASP 文件通 常由文本、HTML 标志和 ASP 文件特有的脚本语句组成,其中 VBScript 是 ASP 中缺省 的脚本语言。 客户端通过浏览器向 web 服务器发送请求,web 服务器响应页面请求后调用文件, 然后解释执行每一条脚本语句,用 ADO 组件通过 ODBC 向数据库服务器发送数据请求 及
2.3.5 数据库访问技术 ADO
微软公司提供了一种对各类应用程序均适用、采用 ODBC 接口、通过结构化查询语 言 SQL 对数据库进行访问和操作的总体解决方案,这就是 OLEDB,它是一个组件对象模 型(COM)接口。可通过对存储在不同信息源上的数据进行统一访问能力。但是 OLEDB 应用程序编程接口的设计目的是为了给多种多样的应用程序提供优化功能,对 Web 应用 的开发者而言,并不需要如此复杂的 API。ADO(ActiveX Data Objects,ActiveX 数据 对象)技术则是一种良好的 Web 数据库访问解决方案,其编程接口简单,用它开发应用 程序十分便捷。 是一个 ASP 内置的服务器组件, ADO 它是一座连接 Web 应用程序和 OLEDB 的桥梁,运用它并结合 ASP 技术可在网页中执行 SQL 命令,达到数据库访问目的。 表 2-2 是 ADO 对象模型,它反映了 ADO 对象之间的关系。
4
潍坊本科毕业论文
表 2-2 ADO 对象
模型 Connecti Errors Comman Paramete RecordS Fields Field Paramete Error
3.教科系网站功能及体系结构的设计 .
网站教学平台的目标设计 3.1 网站教学平台的目标设计
教育技术专业网站教学平台各模块的功能如下:
3.1.1 教师部分的功能应该达到下面的要求
(1) 通过教学公告向学生发布信息、制定教学计划; (2) 将教学、专业、课程、实验信息发布到网站上; (3) 在网上发布教案; (4) 在网上发布作业、包括作业题目上载、公布作业、批阅作业,给出学生成绩; (5) 将常用的学习资源发布在网站上,便于学生下载使用; (6) 通过聊天空间与学生进行实时讨论; (7) 教师可以通过后台对页面进行管理,添加修改删除新闻,上传文件。
3.1.2 学生部分的功能应该达到下面的要求
(1) 阅读公告; (2) 在网上完成课程学习; (3) 在网上完成作业、包括作业下载、上传作业内容和作业成绩查询等; (4) 通过讨论组的形式向老师提出问题。
3.2 网站教学平台系统功能分析与设计 网站教学平台系统功能分析与设计
本网站共分为两个子系统,教师子系统和学生子系统.如表 3-1 所示。
5
潍坊本科毕业论文
表 3-1 教师子系统和学生子系统 首页
学生子系统
教师子系统
公 告 浏 览
新 闻 浏 览
在 线 学 习
作 业 上 载
资 源 学 习
新 闻 发 布
公 告 浏 览
资 源 管 理
作 业 批 改
后 台 维 护
3.2.1 教学内容发布
管理员发布网站新闻, 这些内容是该网站的主要内容。 各种新闻在页面上动态显示, 管理员可以通过后台对这些新闻进行添加、修改和删除。另外.系统可对教学内容提供 查询搜索功能。
3.2.2 公告功能
教师可以通过公告功能发布各项通知,例如以下内容: (1) 招生公告〔招生简章、招生专业介绍、招生站点联系方式〕 ; (2) 规章制度,包括各类管理又件等; (3) 课程安排,包括课程数学方式、课程播放表; (4) 临时通知和教材。
3.2.3 作业功能
对于作业,学上需要将作业通过上传的方式上交。因此系统需要提供以下功能: (1) 上传:格作业上载到指定地点、并按某种方式进行标识; (2) 批阅:教师可对作业进行批阅判分。
3.2.4 答疑功能
(1) 非实时答疑:系统需要完成一个讨论组的功能, 和解答; (2) 实时答疑:功能类似于聊天室。学生和老师可以同时登录到系统,进行实时交
6
以便学生和老师能顺利提问
潍坊本科毕业论文
流。
3.2.5 后台管理功能
后台登陆页面用户名密码验证功能,新闻管理页面对新闻的添加修改删除操作功 能。文件上传功能。
3.2.6 其他功能
站内搜索、友情链接等。
4.教科系网站数据库的设计 .
4.1 数
据库的需求分析
表 4-1 数据库需求分析表 管理系统 管理员信息表 教务公告信息表 教学管理信息表 专业建设信息表 专业介绍信息表 课程建设信息表 教学系统 实验教学信息表 实验室信息表 科研动态信息表 科研项目信息表 学生工作信息表 成人教育信息表
7
潍坊本科毕业论文
数据库的逻辑结构 结构设计 4.2 数据库的逻辑结构设计
在 Access 中建立数据库文件 mdb,此文件包含 jjh_admin、jjh_activ、jjh_news、 jjh_jiaoxue 等数据表。下面是以表 jjh_admin、jjh_activ 为例说明这些表的逻辑结构。 (1) 管理员信息表 jjh_admin 管理员信息包括 ID 号、用户名、密码、是超级管理员还是一般管理员。 (2) 教务公告信息表 jjh_activ 教务公告信息表包括 ID 号、公告标题、公告发布作者、是否推荐、公告来源、图 片地址、公告内容、点击次数、发布时间。 其逻辑结构如表 4-2 所示。
表 4-2 表的逻辑结构 表名 jjh_admin 字段名称 admin_id admin_name admin_password admin_flag jjh_activ activ_id activ_title activ_auther activ_tui activ_comefrom activ_images activ_content activ_hits activ_time 数据类型 自动编号 文本 文本 数字 自动编号 文本 文本 数字 文本 文本 备注 数字 日期时间 说明 字段编号 登陆用户名 登陆密码 是否为超级管理员 字段编号 公告标题 公告作者 是否推荐 公告来源 公告图片来源 公告内容 点击次数 公告发布日期
4.3 后台数据库的配置
本系统是在 Windows xp