一、实验目的和要求1) 熟悉Web站点的信息交互模型和结构2) 熟悉Web界面设计的基本思想和原则3) 掌握Web界面设计的工具和技术二、实验内容与原理(一) 实验内容:要求根据Web界面设计的原则(简洁、一致性、对比度)，进行Web界面规划、概要设计和设计要素的选择，利用一种界面设计工具(Dreamweaver / Frontpage)完成网页设计。
(二)实验步骤：1)选择一种界面设计工具，并熟悉它；2）针对一个具体的网站（学校、个人、公司）设计应用，进行Web界面规划和概要设计；3）选择WEB界面设计要素，设计出网页三、设计方案1）使用的数据库是MySQL，数据库表如图所示：news表:news_user表:2)该网站为新闻发布系统，该网站有浏览新闻、添加新闻、修改新闻、删除新闻功能。
用户权限分为管理员、普通用户权限。
a)网站主页b）单击标题，检测如果未登陆，进入登陆页面c)如果没有登陆账号，则进行注册d)如果登陆成功则进入新闻浏览界面。
如果是普通用户，浏览界面如图所示：如果是权限用户，浏览界面如图所示：e)详细内容：f) 如果是管理员用户，则有更新新闻权限,如下图所示：f) 如果是管理员用户，则有添加新闻权限,如下图所示：我使用的开发工具是VS2012,工程类型为 Web Forms Application.VS2012集成了 MVC 4，全面支持移动和HTML5，WF 4.5相比WF 4，更加成熟。
该版本中包含了新的Metro应用程序模板，增加了JavaScript功能、一个新的动画库，并提升了使用XAML的Metro应用程序的性能。
3）网站业务流图登陆进入系统用户是否合法F T普通用户管理员新闻浏览新闻添加新闻删除新闻浏览新闻删除网站使用三层架构。
分为DAL,BLL ，UI 层。
a)DAL 层，需要下载 for MySQL,然后需要引进动态链接库。
即可通过简单设置连接MySQL 数据库。
在该层我设计了一个MySqlDataCommand 类，通过该类对 进行封装，提供了完整的连接MySQL 数据库，进行增、删、改、查等操作的方法。
1.public MySqlDataCommand(string _commandText);该函数为MySqlDataCommand 的构造函数，_commandText 指定SQL 语句，可通过构造函数构造MySqlDataCommand 的对象，进行对数据库相关表数据增删改查等操作。
2.public void AddParameters(string aParametersName, object value); 该函数为MySqlDataCommand 对象的成员mCommand （MySqlCommand ）添加参数，进行对数据库的相关操作，可有效避免SQL 注入。
3.public void ClearParameters()清除mCommand 的参数。
4.public MySqlDataReader ExecuteSqlDataReader()执行SQL语句，并返回MySqlDataReader对象，通过该对象可获取查询出的数据。
5.public int ExecuteNonQuery()执行SQL语句，并返回影响行数（例如你删除一条数据，影响函数就为1）6. public object ExecuteScalar()执行SQL语句，返回查询到的第一行第一列数据。
7. protected void TransactionBegin()打开数据库并开启事务,当对数据库相关操作出现问题时可回滚到之前的状态。
8.protected void TransactionCommit()提交事务并关闭数据库。
9.public static string GetConnectionStr()获取数据库连接字符串，存储在web.config的连接字符串是已经加密后的，这里进行了解密操作，来获取解密后的连接字符串。
b)BLL层即为业务逻辑层，调用DAL层函数，并进行一些逻辑判断，返回实体类等数据。
下面为新闻查看逻辑类具体举例。
1.public List<News> Resource()通过调用DAL层函数，可获取所有新闻，并以List<News>的形式返回所有数据。
方便进行相关数据的绑定。
News为实体类，与数据库中News表匹配，方便操纵返回数据。
2. public int count()返回新闻总数。
3.public bool DeleteNews(int NewsID)删除指定主键所对应的新闻。
如果删除失败返回false，否则返回true4.public bool UpdateNews(int aId,string atitle, string acontentcue, string acontent)修改指定主键所对应的新闻，可修改内容包括标题、新闻概要、新闻内容。
如果修改失败则返回false，否则返回true。
c)UI层。
包括界面（aspx)与界面后台代码（aspx.cs)，调用BLL层代码，对网站用户的请求进行响应。
前台页面用JavaScript验证，提高与用户交互性。
例如在注册时没有填写用户名，不提交数据，直接提示用户输入用户名。
后台也进行了有关用户信息、用户权限的判断，保证系统安全性以及与用户交互性。
1.JavaScript代码①$("#i_pwd").blur(function () { });检测密码输入是否符合格式，如果小于长度小于6，或有非法字符等问题则提示用户，注册不能成功。
②$("#i_identify_pwd").blur(function () { });检测确认密码是否与密码相符，如果不符合则提示用户，注册不能成功。
③$('#SelectText').bind({});点击搜索按钮时判断输入内容是否符合相应要求。
如不符合则提示用户，不予查询。
2.界面后台代码①News.aspx.cs Page_Loadprotected void Page_Load(object sender, EventArgs e){//判断用户是否登录，如果未登录则页面转到登陆页面if (Session["news_user_sign"] == null){Response.Redirect("Login.aspx", false);}else{Binder();}}②News.aspx.cs Repeter ItemCommandprotected void viewdan_ItemCommand(object source,RepeaterCommandEventArgs e){//如果点击查看具体内容按钮则转到NewsContent界面if (mandName == "seeContent"){int _sId = Convert.ToInt32(mandArgument);var _result = from news _sNew in lnewswhere _sNew.Id == _sIdselect _sNew;_selectNews = _result.ToList<news>()[0];Server.Transfer("NewsContent.aspx");}//如果点击更新新闻则转到NewsAdd界面else if (mandName == "updateNews"){//获取特定新闻主键Session["news_Id"] = mandArgument;Response.Redirect("NewsAdd.aspx");}//删除新闻else if (mandName == "deleteNews"){int _news_Id = Convert.ToInt32(mandArgument);MySqlDataCommand mycmd = new MySqlDataCommand("delete from news where Id=" + _news_Id);mycmd.ExecuteNonQuery();Response.Redirect("News.aspx");}}③News.aspx.cs Repeter ItemDataBoundprotected void viewdan_ItemDataBound(object sender,RepeaterItemEventArgs e){if (e.Item.ItemIndex != -1){//判断用户登录权限，如果是普通用户则不可进行删除新闻和修改新闻操作if ((byte)Session["news_user_sign"] == 0){LinkButton lbUpdate =e.Item.FindControl("lbUpdate") as LinkButton;LinkButton lbDelete =e.Item.FindControl("lbDelete") as LinkButton;lbUpdate.Visible = false;lbDelete.Visible = false;}}④News.aspx.cs Page_Loadprotected void Page_Load(object sender, EventArgs e){//如果是更新新闻if (Session["news_Id"] != null){if (!IsPostBack){MySqlDataCommand mycmd = new MySqlDataCommand("select * from news where Id=" + Session["news_Id"]);MySqlDataReader dReader =mycmd.ExecuteSqlDataReader();while (dReader.Read()){ReflectionFunction.ReaderToObject(dReader,_anews);}txtTitle.Text = _anews.title;txtContentcue.Text = _anews.contentCue;txtContent.Text = _anews.content;}}else{//如果是添加新闻if (Session["news_user_sign"] != null &&(byte)Session["news_user_sign"] == 1){lbTitle.Text = "新闻添加";lbSign.Visible = false;if (!IsPostBack){if (Request.QueryString["Success"] != null) {lbSign.Visible = true;}}}}d)实体类与数据库中表进行匹配，方便后台数据使用，是代码结构清晰。