Web界面设计解说.doc

课 程 实 验 报 告 专 业 年 级 课 程 名 称 指 导 教 师 学 生 姓 名 学 号 实 验 日 期 实 验 地 点 实 验 成 绩 教务处制 20 年 月 日  实验项目 名称 Web界面设计 实验 目的及要求 1) 熟悉Web站点的信息交互模型和结构 2) 熟悉Web界面设计的基本思想和原则 3) 掌握Web界面设计的工具和技术 实验内容 要求根据Web界面设计的原则(简洁、一致性、对比度)，进行Web界面规划、概要设计和设计要素的选择，利用一种界面设计工具(Dreamweaver / Frontpage)完成网页设计。 实验步骤 1)选择一种界面设计工具，并熟悉它 2）对实验2的系统进行设计应用，进行Web界面规划 3）选择WEB界面设计要素，设计出网页 4）对web界面的布局、内容、风格、色彩等方面进行说明 一、系统结构 1.学生登录 管理员登录 系统设计 数据库设计与实现 针对学生成绩管理系统的需求，我们对数据库的设计要求如下： 学生信息表： 编号 字段名称 数据类型 1 姓名 文本 2 密码 文本 3 学号 文本 4 电话 文本 5 QQ 文本 6 语文 文本 7 数学 文本 8 英语 文本 管理员信息表： 编号 字段名称 数据类型 1 姓名 文本 2 密码 文本 3 电话 文本 2系统界面设计（网页设计） 首页采用框架格式，管理员登录与学生登录两个界面。 学生登录成功后，会显示其主界面，修改密码信息、查看成绩退出登录 查看成绩 修改密码或信息 管理员登录成功后 增加用户如果用户名已存在，会提示用户名已经存在 实验环境 操作系统：Windows 7； Web服务器：IIS 6.1； ???开发工具：Macromedia Dreamweaver 8、Adobe photoshop； 数据库：Microsoft access 2003 实验结果与 分析 界面描述： 风格：普通登录界面，界面较为简洁。 布局：自由式布局。由于界面内容较少，所以采用了自由式的布局。 颜色：标题栏以白色为底，下面的登录界面内容以橄榄绿为底，色彩分明。 标志：界面左上角设计有学校校徽的标志，右上角插入了一张学校的图片。 内容：简单的登录式界面，直截了当，易于操作。 通过这次课程设计学会的基本步骤、基本方法，开发了自己的逻辑思维能力，培养了分析问题、解决问题的能力。 主界面 查看成绩 修改信息 退出登录 管理员登录 主界面 增加学生信息 修改学生信息 删除学生信息 录入学生成绩 修改学生成绩 删除学生成绩