企业办公信息管理系统的设计与实施+ER图+需求分析(12)
2 UserName nvarchar 50 否 用户名
3 Password nvarchar 50 否 密码
4 Age int 4 是 年龄
5 DepartmentID int 4 是 否 部门ID
6 PositionID int 4 否 职位ID
7 GroupID int 4 否 分组ID
8 Phone nvarchar 50 是 电话
9 EMail nvarchar 50 否 邮件
10 Address nvarchar 50 是 地址
11 SignatureImage nvarchar 50 是 签收图片
5 详细设计
本章主要介绍企业办公管理系统的详细设计以及设计过程中的一些想法。目的是对本系统进行详细设计的介绍，在总体设计的基础上进一步明确系统的结构，详细地介绍系统各个模块，为进行后面的实现和测试做准备。本章在介绍完整体设计的基础上，在大致的讲述部分模块的详细设计，包括邮件系统，权限的动态管理等。
5.1 网站的主界面设计
本小结主要介绍系统网站的界面上的相关详细设计。
5.1.1 登录界面
登录界面采用HTML5技术，尽量减少图片的使用，保证登录界面的简洁、美观，界面如图 5.1所示
图 5.1登录界面
在界面的布局上，采用两个TextBox输入框，其中一个为正常的输入框，另一个为密码输入狂，两个输入框都带有required的属性，保证在页面提交时，账户和密码都有填写，否则提示输入相关的信息。相关的代码如下：
<p class="inputWrap">
<asp:TextBox ID="userName" placeholder="用户帐号" autofocus required runat="server"></asp:TextBox>
</p>
<p class="inputWrap">
<asp:TextBox ID="password" type="password" placeholder="请输入密码" required runat="server"></asp:TextBox>
</p>
5.1.2 母版页
母版页的界面如图 5.2所示：
图 5.2欢迎界面
在母版页的设计上，运用大量的DIV+CSS设计模式，来达到上图所示的效果，首先设计一个长160px，高580px的p，用于放置左侧的提示框以及下方的导航栏，在提示框内使用多个lable标签，来展示相关的数据；在下方的导航栏内，放置一个Treeview的控件，设置内部值，通过点击相关的结点跳转到相关的界面上，简单方便。在界面的上方，放置一个高70px的p，用于容纳“主页”、“重新登录”，“修改密码”等按钮，方便用户的使用，整个界面剩余的空白处，用作ContentPlaceHolder（内容页区域），ContentPlaceHolder的大小为844x800px。