DOC《登录界面设计方法》

登录界面设计方法 只需修改login.

jsp,即可按照您的需要把登录界面设计成任意的样式,只要包含现有的form即可. 下面以OA系统为例做简要说明: 打开login.jsp(在tomcat\webapps\oa下). 登录界面主要是由一个id为"loginDiv"的Div构成,如下代码: 这个Div的class类型为loginform,loginform的定义在css文件中,定义如下: .loginform{height:370px;

background:#FFFFFF;

width:680px;

overflow:hidden;

border:1px solid #000000;

padding:10px;

} 这一行下面,可以看到,登录界面分为以下几部分: "header"部分:即登录界面的以下部分: 如果要修改这部分,需要对标有?的Div中代码进行修改 "登录左侧图"部分:即登录界面的以下部分: ? 如果要修改这部分,需要对标有?的Div中代码进行修改 "用户名密码输入"部分:即登录form: ? 如果要修改这部分,需要对标有?的Div中代码进行修改 特别注意:form部分只有样式可以改,其它内容不能修改(因为涉及用户名、密码、认证码、验证码这些重要项目) "footer"部分:即登录界面最下面的部分: 如果要修改这部分,需要对标有?的Div中代码进行修改 特别说明:如果要修改login.jsp,请注意: 修改login.jsp时,body之前的部分不要修改. 将来版本升级时,如果新版本涉及了login.jsp的更新,那么系统会自动覆盖您更新过的界面,因此,如果您用第三种方式修改了界面,建议单独保存一下修改的内容,这样如果升级时涉及了login.jsp的更新,那么只要再按原来的方式重新修改有关部分即可.当然,绝大多数情况下升级不涉及login.jsp. 以上是OA系统login.jsp的简要说明.TC、PB、CRM、HR、CC等各个系统的login.jsp也在相应的目录下,如果需要,可以按自己的需要把各个系统的登录界面都做相应的修改. 下面以真实的客户登录界面为例改一下登录界面: 首先需要做一个背景图片,如下图所示,图片大小为780*420. 图片命名为mylogo.gif,放到tomcat\webapps\oa下,跟login.jsp同一级目录. 定义css body{ background:#F1FDEA;

} .myloginform{ width:780px;

height:420px;

padding-top:24px;

overflow:hidden;

background:#F1FDEA;

background-image: url(mylogo.gif);

background-repeat:no-repeat;

} 依次修改登录主界面Div "header"部分: 去掉了header之前的左侧logo,仅保留了右侧的内容. "登录左侧图"部分: 去掉了登录左侧的图 "用户名密码输入"部分: 将登录表单移到了固定的位置 "footer"部分: 由于公司浏览器比较固定,去掉了footer的提示部分. 示例代码文件点击此处下载 修改完成后替换login.jsp,重新访问,如下图所示: