1100310120 潘飞达
Web界面设计
一 实验目的和要求
1) 熟悉Web站点的信息交互模型和结构
2)熟悉Web界面设计的基本思想和原则
3)掌握Web界面设计的工具和技术
二 预备知识
Web界面设计是人机交互界面设计的一个延伸，是人与计算机交互的演变。Web界面设计与站点外观直接相关，站点的界面外观是否友好直接关系到是否能吸引人的关注。人性化的设计是Web界面设计的核心，如何根据人的心理、生理特征，运用技术手段，创造简单、友好的界面，是Web界面设计的重点。
(1) Web信息交互模型
模型涉及到信息的三种类型
1)数据：当一条信息被反复、简单的提供时称为数据，比如机票价格。
2)复杂信息：而用来叙述事件时称为复杂信息，如多媒体信息。
3)过程性信息：在信息有明确目标，并相互作用时称为过程性信息，如在线练习、在线测试等。
模型涉及到信息的两种特性：
1)动态性：信息在不断的变化，具有动态性；
2)一致性：信息元素的组织方式具有一致性
(2)Web信息设计模型
设计模型中要考虑到信息的两个方面：
1)第一是应该呈现或略去什么信息。
2)第二个方面指的是信息该如何被表现。
(3)Web界面设计基本原则
1) 了解浏览者的心理状态
2) 内容与形式的统一
3) 减少浏览层次
4) 特点明确
5) 统一整体的形象
6) Web界面设计的3C原则
(4)Web界面概要设计
1)Web界面框架设计：Web网站规划 、建立原型系统、详细设计、正式实施
2)Web界面的内容与风格的设计:网站内容设计的原则、Web界面的风格
3)Web界面设计的语言与文化：网站应设置多语言选择，在网站设计和建设中进行跨文化研究
(5)Web界面设计要素
n Web界面布局
n Web界面的色彩
n Web界面的字体
n Web界面的动画与多媒体
n Web界面的导航
(6)Web界面设计技术与工具
主要的技术包括超文本标记语言HTML、客户端脚本语言JavaScript、JavaApplet、服务器端脚本语言。
三、实验内容
1、选择界面设计工具：Dreamweaver ，辅助工具Photoshop
2、设计内容：糗事百科网页
本网站内容充实，在主页的设计上运用了模板，框架等。分页面上运用了导航条。专业机构的研究表明，彩色的记忆效果是黑白的3.5倍，所以网站要色彩丰富。本网站的底色为浅棕色，配以白色和棕色的文字，色彩搭配非常适宜。
在导航条中，链接处显得简单明确，分类合理，让人一目了然。整个界面简单大气，毫无冗余和凌乱之感，十分赏心悦目。
3、Web网站设计的原则：
（1）简洁。因为做的是以笑话为主题的网站，所以特点鲜明，导航放在网页的最上方，版本及设计者信息放在网站最下方，所用的字体为微软雅黑，整体的颜色浅棕色，页面上所有的元素都有明确的含义和用途。
（2）一致性。各个页面都使用相同的页边距、文本，图形之间使用相同的间距；主要图形、标题和符号旁边留下相同的空白，在每页都放有导航图标。页面中的每个元素与整个页面以及网站的色彩和风格上保持了一致，图标都采用了相同的设计风格。文字的颜色同图像保持了一致。
此网站的目的是建立一个笑话网站主页，主要目的是进行发帖，让用户浏览信息，所以网站的功能都放在导航页上。本网站的用户都是追赶潮流的年轻人，所以会加一下特效，而本网站的风格和现在个人网站的主流风格类似，所以用起来比较上手。
第二篇：Web课程设计报告
目录
1 系统应用背景........................................................................................................................ 3
2 系统需求分析........................................................................................................................ 4
3 系统技术分析........................................................................................................................ 5
3. 1 技术分析.................................................................................................................... 5
3.1.1 ASP.NET简介.................................................................................................... 5
3.1.2 SQL Sever 2008简介........................................................................................ 5
3.2 可行性分析................................................................................................................. 6
3.2.1 技术可行性...................................................................................................... 6
3.2.2 操作可行性...................................................................................................... 6
4 系统设计............................................................................................................................... 7
4.1 系统流程.................................................................................................................... 7
4.2 系统结构.................................................................................................................... 9
4.3 数据库逻辑结构设计................................................................................................... 9
4.4 物理结构设计............................................................................................................ 11
5 界面设计............................................................................................................................. 11
5.1 登录页面的Login.aspx设计..................................................................................... 11
5.2 用户注册页面Register.aspx：................................................................................. 14
5.3 留言板页面message.aspx:........................................................................................ 17
6 系统实现............................................................................................................................. 19
7 总结.................................................................................................................................... 21
8 参考文献............................................................................................................................. 21
1 系统应用背景
在网络网络技术迅速发展以信息交流频繁的今天，网络应用已经渗透到人类社会的各个角落。作为网络世界的支撑点的网站，更是人们关注的热点：政府利用网站宣传自己的施政纲领，日益成为与百姓交流的直通车；企业利用网站宣传自己的形象，进而挖掘无限商机；个人利用网站展示个性风采，创建彼此沟通的桥梁。越来越多的网站建立了自己的WWW网站。
随着网络技术的不断发展，网络应用已经渗透到人类社会的各个角落。作为网络世界的支撑点的网站，更是人们关注的热点：政府利用网站宣传自己的施政纲领，日益成为与百姓交流的直通车；企业利用网站宣传自己的形象，进而挖掘无限商机；个人利用网站展示个性风采，创建彼此沟通的桥梁。越来越多的企业和个人希望拥有自己的网站，开辟网络世界里的一片天地。
BBS 系统是最常见的一类网上社区，是 Internet 上最重要的应用之一。随着Internet 的普及，许多原本只提供 Telnet 方式登录的 BBS 系统也提供了允许用户使用 HTTP 协议方式进行网上交流的功能，Telnet 与 HTTP 的应用界限开始交融。当用户在网上冲浪访问到一个制作精美、内容丰富的网站时，会想到将自己的喜爱之情告诉网站的制作人。同样，当用户看到一个不能令人满意的网站时，也会想到将自己的高见留给网站的维护者，希望他们能有所改进。这时就要用到互动式网络一个重要的功能——留言板系统。留言板是网站上用户交流信息、相互沟通的乐园。留言板是一种最为简单的 BBS 应用。借助留言板，浏览者可以张贴留言给站长或其他浏览者。在企业或单位内部的局域网中，留言板提供了员工之间交流的绝好的场所。
留言板可以说是网上最常见的，网站留言管理方式是基于ASP.NET和脚本语言，将动态网页和数据库结合，通过应用程序来处理留言。
2 系统需求分析
留言板就是利用计算机硬件，软件设备和网络基础设施用来记录，展示文字信息的载体，有比较强的时效性。例如：如果你想要解决你不知道的一些问题，你可以在上面进行留言，知道的人会对你的问题进行针对性的回答，你还可以继对他的回答进行留言，大家可以很方便的进行交流和沟通，总的来说。该系统具有5个功能模块：
（1） 登录界面：
做出登录界面，然后通过输入用户或者管理员用户名和密码来登录。
（2） 留言版面：
做出留言版面,留言者能看到自己的留言，用户名和地址
（3） 用户的权利与义务:
用户是普通用户口令登录只可留言，如果用户用管理员口令登录则可以实现对用户留言的回复、删除等功能
（4）留言:
留言者在留言时不能为空，若为空时将提醒留言者“留言失败”；成功提交留言时 “留言成功”。
（5）后台数据库:
采用ADP.NET动态网页技术实现网页与数据库之间的连接，WEB中当一个文件将变量传送到另一个文件后，自动产生一个变量，并通过SQL语句进行数据库操作，从数据库中读出数据，并显示出来。
1.数据库架构
留言板数据库中数据表的字段类型。包括：ID（自动递增，不可重复）、标题、内容、姓名、电话、IP、日期、回复内容。
2.过滤垃圾信息
判断用户是否不停输入相同字符的信息，如果相同 字符信息重复连续出现4次，将自动视为垃圾留言信息，系统不给予留言或者回复功能。
3.添加、删除、修改数据表项
根据实际应用，可自行添加、删除或者修改数据表中的字段类型，实现灵活化数据库管理功能。对实用价值不高的字段进行删除，有利于数据从数据库中的读取和存储速度。
4.留言板数据库维护及备份
为管理员提供数据备份功能。后台管理员可以自定义在某一定时间后，对留言板进行数据备份，便于数据出错后，可以即时恢复正常，保障用户信息不丢失。
3 系统技术分析
3. 1 技术分析
本系统功能模块包括住户信息管理、投诉管理、报修管理、缴费管理、住户停车管理和系统设置。
3.1.1 ASP.NET简介
用ASP.NET是一个Web开发平台，提供可构建企业级应用所需的服务，编程模型和团建基础结构。虽然ASP.NET的语法基本上与前辈ASP兼容，但是ASP.NET是一个全新的编程框架，旨在用于快速开发Web应用程序。作为微软平台的一部分，ASP.NET提供了一种基于构件的，可扩展的且易于使用的方法，用于构件、部署和运行供所有在浏览器活移动设备中使用的Web应用。
3.1.2 SQL Sever 2008简介
用SQL Sever是一种高性能的关系数据库系统（RDBMS),其主要特点有:
?与Windows 9x和Windows NT集成
?提供企业级的数据库复制
?提供并行的体系结构
?支持超大型数据库
?与OLE对象紧密集成
对客户/服务器用户的一个主要挑战就是中央管理跨整个企业范围内的对个服务器。SQL Sever用一个称为分布式管理框架（DMF）的企业级系统管理框架来实现。DMF有对象、服务器和用户管理Miccrosoft SQL Sever的其他组件组成。
SQL Sever Enterprise Manage位安排和管理多喝服务器提供了一个图形化用户界面（GUI），Sever提供的分布式管理对象（DMO）的能力给SQL Sever引擎和服务器提供可一个对行啊接口。该层包括用户接口组件使用的OLE SQL Sever对象及任何遵循OLE Sever引擎和服务的途径。该层包含数据库引擎的后端，并提供有SQL Executive所管理的核心管理服务。
3.2 可行性分析
3.2.1 技术可行性
这个留言板网站是为了满足人们的需求而产生的，采用B/S三层体系结构，表示层用ASP.NET开发平台，业务层用C#编程语言，数据层用ADO.NET。后台数据存储用SQL Sever2008数据库。三层结构体系能够负责客户机与服务器、服务器和服务器之间的连接和通信，实现应用与数据库的高效连接：提供一个三层结构的应用开发、运行、部署和管理的平台。这三种层结构在曾与曾之间相互独立，任何一层的改变不会影响其他曾的功能。上述技术使用与本网站的开发。因此，本网站的开发在技术上是可行的。
3.2.2 操作可行性
网站运行于Windows环境，其用户操作页面友好设计“网站导航”便于用户操作。
网站的基本操作如下：
?普通用户
自己留言，也可以观看别人的留言
?管理员
可以回复、对不文明的留言进行删除等操作
4 系统设计
4.1 系统流程
4.2 系统结构
4.3 数据库逻辑结构设计
这本课题设计规划的实体有管理员，用户，留言和留言回复板块，本实体的联系如下图
用户的实体属性图4
留言板的实体属性图6
回复留言的实体属性图7
4.4 物理结构设计
本课题目前为数据库建立的4张表。
?管理员的表admin，包括登录密码和登录名
?登录表login，主要记录登录信息，包括ID,name，sex，truename，phone，email，address等基本信息。
?回复用户表guest，主要记录回复用户的信息，包括ID，UserName，sex，url，qq，email，content，reply，posttime。
?留言用户表 guesttest，只要记录用户的信息，包括ID，UserName，qq，content，posttime。
5 界面设计
页面本人主要负责界面设计中的登录页面、注册页面、留言页面和其相对应的控件代码制作
5.1 登录页面的Login.aspx设计
页面采用表单设计，用来让用户输入账号和密码的并检查用户名和密码与数据库里面用户信息表的信息是否一致，如果正确则跳转到留言板的主页showmessage.aspx，否则转到返回到login.aspx，继续输入用户名的账号和密码。若用户还未注册，可以点下面的注册链接，会链接到注册页面Register.aspx。若要进入管理员登录系统，对留言板系统进行管理，则可以使用admin作为登陆账号和密码。由于使用Visual studio2008作为开发工具，用户登录模块可以很简单的完成，添加显示当前时间的代码。添加了一个服务器行为—用户登录，用来判断用户输入的账号和密码与数据库中的是否一致。
登陆页面图8
核心代码如下
public partial class Login : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void Button2_Click(object sender, EventArgs e)
{
Response.Redirect("Register.aspx");
}
protected void Button1_Click(object sender, EventArgs e)
{
if (tname.Text == string.Empty && tpass.Text == string.Empty)
{
Response.Write("<script>alert('用户名与密码都不能为空！')</script>");
}
else
{
SqlConnection con=new SqlConnection (ConfigurationManager .ConnectionStrings ["con"].ConnectionString );
con.Open();
string cmdtname="select u_name from users where u_name='"+tname .Text +"'";
SqlCommand cmdname=new SqlCommand (cmdtname ,con );
SqlDataReader drname=cmdname .ExecuteReader ();
if (drname .Read ())
{
con.Close();
SqlConnection conn = new SqlConnection(ConfigurationManager.ConnectionStrings["con"].ConnectionString);
conn.Open();
string cmdtpass = "select u_pass from users where u_pass='" + tpass.Text + "'";
SqlCommand cmdpass = new SqlCommand(cmdtpass, conn);
SqlDataReader drpass = cmdpass.ExecuteReader();
if (drpass.Read())
{
conn.Close();
mima();
}
else
{
if (tpass.Text == string.Empty)
{
Response.Write("<script>alert('密码不能为空！')</script>");
con.Close();
}
else
{
Response.Write("<script>alert('密码错误！')</script>");
con.Close();
}
}
}
else
{
Response.Write("<script>alert('用户名不存在！')</script>");
con.Close();
}
}
}
5.2 用户注册页面Register.aspx：
页面采用表单，插入表格的设计。注册时需要输入用户名、昵称、密码、性别、电子邮箱、生日、QQ等。提交时，若输入的用户账号存在则要转到login.asp。可添加服务器行为—用户身份验证—检查新用户名。如下图所示：
注册页面图9
其核心控件代码为为
public partial class Register : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if(!IsPostBack)
{
return;
}
else
{
string u_name=this.Request.Form["username"];
string u_pass=this.Request.Form["userpass"];
string u_sex=this.Request.Form["gender"];
string u_mail=this.Request.Form["mail"];
System.DateTime u_regtime=DateTime.Now;
string u_like=this.Request.Form["userlike"];
string year=this.Request.Form["year"];
string month=this.Request.Form["month"];
string day=this.Request.Form["day"];
DateTime u_birth=DateTime.Parse(year+"-"+month+"-"+day);
string u_qq=this.Request.Form["qq"];
string sql="insert into users(u_name,u_pass,u_sex,u_regtime,u_mail,u_like,u_birthday,u_qq) values(";
sql+="'"+u_name+"',";
sql+="'"+u_pass+"',";
sql+="'"+u_sex+"',";
sql+="'"+u_regtime+"',";
sql+="'"+u_mail+"',";
sql+="'"+u_like+"',";
sql+="'"+u_birth+"',";
sql+="'"+u_qq+"'";
sql+=")";
string str="select count(*) from users where u_name='"+u_name+"'";
SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["con"].ConnectionString);
con.Open();
SqlCommand cmd = new SqlCommand(str, con);
int r=(int)cmd.ExecuteScalar();
con.Close();
if(r>=1)
{
Response.Write("<script>alert('此用户已存在，请重新输入！')</script>");
}
else
{
con.Open();
SqlCommand cmd1=new SqlCommand(sql,con);
cmd1.ExecuteNonQuery();
con.Close();
Page.Controls.Clear();
Response.Write(u_name + "注册成功" + "<br><a href='Login.aspx'>返回</a>");
//Response.Write("<script>alert('注册成功！')</script>");
//Response.Redirect("Login.aspx");
}
}
}
}
5.3 留言板页面message.aspx:
该页面做了一个重复区域，来实现显示该版块所有留言信息。通过阶段变量显示登录的用户的用户名。建了两个记录集，发布留言的信息利用服务器行为——插入记录来实现写入数据库的表。该页面还添加了一服务器行为——用户身份验证——限制对页的访问。若未登录访问该地址，则自动跳转到用户登录页面login.asp。
如下图所示。
留言页面图10
其核心代码为
protected void btnsend_Click(object sender, EventArgs e)
{
SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["con"].ConnectionString);
con.Open();
string cmdtext = "insert into message(m_name,m_subject,m_content,m_phone,m_add,m_qq,m_mail,m_http,m_face,m_ip,m_datetime,m_replaytime) values(@name,@subject,@content,@phone,@add,@qq,@mail,@http,@face,@ip,@datetime,@datetime)";
SqlCommand cmd = new SqlCommand(cmdtext, con);
cmd.Parameters.Add("@name", SqlDbType.VarChar, 50);
cmd.Parameters["@name"].Value = this.tname.Text;
cmd.Parameters.Add("@subject", SqlDbType.VarChar, 100);
cmd.Parameters["@subject"].Value = this.tsubject.Text;
cmd.Parameters.Add("@content", SqlDbType.Text);
cmd.Parameters["@content"].Value = this.tcontent.Text;
cmd.Parameters.Add("@phone", SqlDbType.VarChar, 12);
cmd.Parameters["@phone"].Value = this.tphone.Text;
cmd.Parameters.Add("@add", SqlDbType.VarChar, 100);
cmd.Parameters["@add"].Value = this.tadd.Text;
cmd.Parameters.Add("@qq", SqlDbType.VarChar, 10);
cmd.Parameters["@qq"].Value = this.tqq.Text;
cmd.Parameters.Add("@mail", SqlDbType.VarChar, 30);
cmd.Parameters["@mail"].Value = this.tmail.Text;
cmd.Parameters.Add("@http", SqlDbType.VarChar, 50);
cmd.Parameters["@http"].Value = this.thttp.Text;
cmd.Parameters.Add("@face", SqlDbType.VarChar, 10);
cmd.Parameters["@face"].Value = this.dface.SelectedValue.ToString();
cmd.Parameters.Add("@ip", SqlDbType.VarChar, 15);
cmd.Parameters["@ip"].Value = GetIP();
cmd.Parameters.Add("@datetime", SqlDbType.DateTime );
cmd.Parameters["@datetime"].Value = DateTime.Now.ToString();
}
6 系统实现
用户注册：
注册成功：
用户登录：
用户留言：
发表成功：
查看留言：
7 总结
在课程设计开始前，我对这学期学的关于WEB的知识还不是很理解，后来在老师和同学的帮助下，对ASP有了一定的了解。这一段时间的努力，最后的结果固重要，但更重要的是它让自己了解了设计的一般过程。在做一个项目的时候，首先是进行需求分析，既各种功能需求以及系统结构都要在需求分析中做出来。接下来做的就是逻辑结构设计，通过逻辑结构设计出数据库。然后就是详细设计，通过需求分析中对各种功能的描述，利用自己所学的ASP.NET知识编写出相应的功能模块界面，这是个比较繁琐的阶段，需要大量的编写和修改各部分代码，以确保系统整体的可运行性。最后就到了验收成果的阶段，通过系统的运行测试，了解系统的一些问题和不足，并做出一定的修改，最终得到了现在的成果。
在整个课程设计过程中，也出现了很多的问题，在不断学习的过程中我能体会到设计是一个不断学习新鲜事物的过程，在设计初的不懂到最后能顺利完成，我体会到在实践中学习的重要性。由于前期工作没有打好基础，对系统的需求分析认识不够清楚，使得后续的工作不得不经常返回去修改个别代码，使我体会到在设计中的每一步的重要性，经过本次课程设计，我深刻体会到了一个软件的设计和它的发展是很严密的，要严格按照软件工程的方法和思想逐步完成，这次课程设计还有很多不足之处，比如功能不完整、页面不够美观等等，希望能继续改进。
8 参考文献
[1] 王吉庆．计算机教育应用[M]．北京：高等教育出版社，1995．
[2] 王松江．计算机辅助教学的误区与改进方法[J]．当代教育科学，2003，（8）：52-54．
[3] 冯恩民，沈玉波．一类批处理排队网络的稳定性［J］．工程数学学报，2004，21（5）:675－679．
[4] [美]杜威．计算机在教学中的应用[M]．宋小平译．北京：光明日报出版社，1988．