本文转自:广东海洋大学体育馆管理系统 开发日记(10)——前端设计 - 郭剑锋 - 云代码空间
http://yuncode.net/article/a_50f4d7e4edc2393
本文主要内容是web前端设计,包括html,css,js,jsp等技术。页面采用div+css布局,前台模板均是jsp页面,但不能直接访问,而是通过控制器调用,后面将会讲到。整个系统分为两大部分——用户前台和管理员后台。用户前台使用红色作为主色调,体现体育的激情;管理员后台用了蓝色作为主色调。
GYM配色示意图
GYM配色示意图
下面先制作页面公共部分。
header.jsp
接下来就是前台主页的设计了。
index.jsp
这里用到的jstl标签可以暂时忽略。因为现在是前端设计,不考虑后端传送的数据,只考虑如何显示,如何布局。另外用到了一个图片幻灯片播放,这是网上找来的一个代码,稍作修改即可使用。
代码底部的var def = "1"; 表示当前页面导航栏的第一个标签高亮。例如 var def = "2"; ,那么体育赛事标签高亮。这样做的好处是导航栏可以放到公共引用文件中,但在不同的页面下会高亮对应的标签,用户一看就知道自己当前在哪里。
关于css类和id的命名,一般涉及布局方面的用id,因为这一般只出现一次;其余的考虑重复使用,都用class。命名方式是单词之间用“-”隔开。具体css文件可下载打包文件查看。
至此主页模板制作完成。其他模块模板制作过程类似,下面仅给出注册和登录的页面源代码。
regist.jsp
login.jsp
效果图如下:
接下来就是管理员后台页面的前端设计了。管理员后台的所有页面、css以及js文件都放在WebRoot/admin目录下,目的是更好地管理和跟前台区分,不然写代码过程中会很容易混乱。这里跟前台设计过程差不多,但因为是后台,所以设计尽可能简洁。
admin/index.jsp
这个系统中有很多地方需要显示列表信息,例如场地列表,器材列表,用户列表......所有的表格都采用统一的无边框风格。
无边框表格
所有页面的目录结构如下
用户前台目录结构 管理员后台目录结构
每个模块下都有一个index.jsp,这是每个模块的首页,一般用于显示该模块下的信息。比如WebRoot/ground/index.jsp显示所有场地的列表。
其实前端设计大部分工作量就是布局,以及调试css,直到跟原设计大致一样。写代码前一定要有一个大致的设计思路,比如配色,风格,页面整体布局,文件目录结构......不然的话做出来的网页会不协调,而且容易导致大量的返工。至于css的运用技巧和页面布局需要平时多观察,多积累。大家平时看到不错的网页,可以看看它的源代码;也可以多到这里逛逛 http://yuncode.net/list/web,有什么好的源码别忘了保存到自己的代码库里 http://yuncode.net/mylib。
整个项目的源代码将在最后一篇文章里发布,系统有很多不完善的地方,有兴趣而且有时间的朋友可以一起去完善一下,并写一下开发日记记录自己的开发历程。
header.jsp
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path2 = request.getContextPath();
String basePath2 = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path2 + "/";
%>
<!--header-->
<div id="header">
<div class="content">
<div class="logo"> <a href="<%=basePath2 %>"><img src="<%=basePath2%>images/logo.png" width="100" height="100" /></a> </div>
<div class="name">
<h1> 广东海洋大学体育馆网上系统 </h1>
<span class="version">beta1.0</span> </div>
<div class="banner"> <img src="<%=basePath2%>images/banner.png" /> </div>
</div>
</div>
<!--navigation-->
<div id="menu">
<ul>
<li class="m_line"> <img src="<%=basePath2%>images/line1.gif" /> </li>
<li id="m_1" class='m_li' onmouseover='mover(1);'
onmouseout='mout(1);'> <a href="<%=basePath2%>">首页</a> </li>
<li class="m_line"> <img src="<%=basePath2%>images/line1.gif" /> </li>
<li id="m_2" class='m_li' onmouseover='mover(2);'
onmouseout='mout(2);'> <a href="<%=basePath2%>match/index.html">体育赛事</a> </li>
<li class="m_line"> <img src="<%=basePath2%>images/line1.gif" /> </li>
<li id="m_3" class='m_li' onmouseover='mover(3);'
onmouseout='mout(3);'> <a href="<%=basePath2%>ground/index.html">场地预定</a> </li>
<li class="m_line"> <img src="<%=basePath2%>images/line1.gif" /> </li>
<li id="m_4" class='m_li' onmouseover='mover(4);'
onmouseout='mout(4);'> <a href="<%=basePath2%>equipment/index.html">器材租借</a> </li>
<li class="m_line"> <img src="<%=basePath2%>images/line1.gif" /> </li>
<li id="m_5" class='m_li' onmouseover='mover(5);'
onmouseout='mout(5);'> <a href="<%=basePath2%>user/index.html">个人中心</a> </li>
<li class="m_line"> <img src="<%=basePath2%>images/line1.gif" /> </li>
<li id="m_6" class='m_li' onmouseover='mover(6);'
onmouseout='mout(6);'> <a href="<%=basePath2%>notice/index.html">公告</a> </li>
<li class="m_line"> <img src="<%=basePath2%>admin/images/line1.gif" /> </li>
<li id="m_7" class='m_li' onmouseover='mover(7);'
onmouseout='mout(7);'> <a href="<%=basePath2%>help/index.html">帮助</a> </li>
</ul>
</div>
<div style="height: 32px; background-color: #F1F1F1;">
<ul class="smenu">
<li style="padding-left: 29px;" id="s_1" class='s_li'
onmouseover='mover(1);' onmouseout='mout(1);'> 欢迎光临广东海洋大学体育馆网上系统
<% if(null == request.getSession().getAttribute("uName")) {%>
<span class="login"><a href="<%=basePath2%>login.html">登录</a> </span> <span class="reg"><a href="<%=basePath2%>regist.html">注册</a> </span>
<% }else{
out.print(request.getSession().getAttribute("uName"));
%>
<a href="<%=basePath2%>login.html?action=logout">退出登录</a>
<%}%>
</li>
<li style="padding-left: 141px;" id="s_2" class='s_li'
onmouseover='mover(2);' onmouseout='mout(2);'> </li>
<li style="padding-left: 252px;" id="s_3" class='s_li'
onmouseover='mover(3);' onmouseout='mout(3);'> </li>
<li style="padding-left: 364px;" id="s_4" class='s_li'
onmouseover='mover(4);' onmouseout='mout(4);'> </li>
<li style="padding-left: 476px;" id="s_5" class='s_li'
onmouseover='mover(5);' onmouseout='mout(5);'> <a href="<%=basePath2%>user/index.html?action=alterinfo">修改信息</a> <span class="split">|</span> <a href="<%=basePath2%>user/index.html?action=resetpwd">修改密码</a> <span class="split">|</span> <a href="<%=basePath2%>user/index.html?action=mybook">我的预约</a> <span class="split">|</span> <a href="<%=basePath2%>user/index.html?action=myrent">我的租借</a> </li>
<li style="padding-left: 588px;" id="s_6" class='s_li'
onmouseover='mover(6);' onmouseout='mout(6);'> </li>
<li style="padding-left: 700px;" id="s_7" class='s_li'
onmouseover='mover(7);' onmouseout='mout(7);'> </li>
</ul>
</div>
<!--header-->
footer.jsp
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path3 = request.getContextPath();
String basePath3 = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path3 + "/";
%>
<!--footer-->
<div class="clear"></div>
<div id="footer"> <a href="http://yuncode.net/10000" target="_blank">关于本站</a> - <a href="http://yuncode.net/10260" target="_blank">联系我们</a> - <a href="http://yuncode.net/10044" target="_blank">人才招聘</a> - <a href="http://yuncode.net/10044" target="_blank">免责条款</a> - <a href="http://yuncode.net/10056" target="_blank">意见反馈</a> - <a href="http://yuncode.net/10053" target="_blank">网站导航</a><br />
<br />
Copyright @ 2012-2013 www.jianfengstudio.com online services. <br />
All rights reserved.Security Powered by GDOU SE Class 1102 Group 22 <br />
粤ICP备xxxxxxxx号<br />
<br />
</div>
<script>
init();
movec();
</script>
<!--footer-->
header.jsp包括了页面头部和导航栏,footer.jsp包括了页面底部的相关信息和版权信息,这些每个页面都要用到,因此我把他们放在WebRoot/include里面,然后每个页面的头部和尾部都用<%@ include file="include/header.jsp"%>和<%@ include file="include/footer.jsp"%>来引用。这样做好处有两点,一是提高了代码的重用性,“以代码重用为荣,以复制粘贴为耻”;二是不会导致一处修改,每个文件都要修改。
接下来就是前台主页的设计了。
index.jsp
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"
contentType="text/html; charset=utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>广东海洋大学体育馆管理系统</title>
<link href="css/nav.css" rel="stylesheet" type="text/css" />
<script src="js/nav.js" type="text/javascript"></script>
<script src="js/focus.js" type="text/javascript"></script>
<link href="css/common.css" rel="stylesheet" type="text/css" />
</head>
<body>
<%@ include file="include/header.jsp"%>
<div id="main">
<div id="row_1">
<div id="slide">
<div class="sub_box">
<div id="p-select" class="sub_nav">
<div class="sub_more"> <a href="#" onfocus="this.blur()" title="更多"
style="font-family: Tahoma; font-size: 12px;" target="_blank">更多</a> </div>
<div class="sub_no" id="bd1lfsj">
<ul>
<li class="show"> 1 </li>
<li class=""> 2 </li>
<li class=""> 3 </li>
<li class=""> 4 </li>
<li class=""> 5 </li>
</ul>
</div>
</div>
<div id="bd1lfimg">
<div>
<dl class="show">
</dl>
<dl class="">
<dt> <a href="http://yuncode.net/article/a_50e1aebfde00097" title="" target="_blank"><img src="upload/1.jpg" /> </a> </dt>
<dd>
<h2> <a href="http://yuncode.net/article/a_50e1aebfde00097" target="_blank">12306网上订票系统瘫痪背后的那些事儿</a> </h2>
</dd>
</dl>
<dl class="">
<dt> <a href="http://yuncode.net/article/a_50e14d20e55bd0" title="" target="_blank"><img src="upload/2.jpg" /> </a> </dt>
<dd>
<h2> <a href="http://yuncode.net/article/a_50e14d20e55bd0" target="_blank">Google数据中心探访</a> </h2>
</dd>
</dl>
<dl class="">
<dt> <a href="http://yuncode.net/article/a_50e43ba8dd10777" title="" target="_blank"><img src="upload/3.jpg" /> </a> </dt>
<dd>
<h2> <a href="http://yuncode.net/article/a_50e43ba8dd10777" target="_blank">10个问题找到答案 搜狗VS百度语音助手</a> </h2>
</dd>
</dl>
<dl class="">
<dt> <a href="http://yuncode.net/article/a_50e1561624b8078" title="" target="_blank"><img src="upload/4.jpg" /> </a> </dt>
<dd>
<h2> <a href="http://yuncode.net/article/a_50e1561624b8078" target="_blank">Java图形——水纹倒映效果</a> </h2>
</dd>
</dl>
<dl class="">
<dt> <a href="http://yuncode.net/article/a_50e152fd4706497" title="" target="_blank"><img src="upload/5.jpg" /> </a> </dt>
<dd>
<h2> <a href="http://yuncode.net/article/a_50e152fd4706497" target="_blank">JAVA图形操作类</a> </h2>
</dd>
</dl>
</div>
</div>
</div>
</div>
<div id="match">
<div class="column"> 最新赛事 </div>
<div class="content">
<ul>
<c:forEach items="${requestScope.matchList}" var="list">
<li> <span class="title"><a href="match/index.html?mid=${list.getmId() }">${list.getmName()} </a> </span> <span class="time">${list.getmDate()}</span> </li>
</c:forEach>
</ul>
</div>
</div>
<div class="clear"></div>
<div id="sports-icon"> <img src="images/icon.jpg" /></div>
</div>
</div>
<script>
var def = "1";
</script>
<%@ include file="include/footer.jsp"%>
</body>
</html>
这里用到的jstl标签可以暂时忽略。因为现在是前端设计,不考虑后端传送的数据,只考虑如何显示,如何布局。另外用到了一个图片幻灯片播放,这是网上找来的一个代码,稍作修改即可使用。
代码底部的var def = "1"; 表示当前页面导航栏的第一个标签高亮。例如 var def = "2"; ,那么体育赛事标签高亮。这样做的好处是导航栏可以放到公共引用文件中,但在不同的页面下会高亮对应的标签,用户一看就知道自己当前在哪里。
关于css类和id的命名,一般涉及布局方面的用id,因为这一般只出现一次;其余的考虑重复使用,都用class。命名方式是单词之间用“-”隔开。具体css文件可下载打包文件查看。
广东海洋大学体育馆管理系统首页
至此主页模板制作完成。其他模块模板制作过程类似,下面仅给出注册和登录的页面源代码。
regist.jsp
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"
contentType="text/html; charset=utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>注册 - 广东海洋大学体育馆网上系统</title>
<link href="css/nav.css" rel="stylesheet" type="text/css" />
<script src="js/nav.js" type="text/javascript"></script>
<script src="js/focus.js" type="text/javascript"></script>
<link href="css/common.css" rel="stylesheet" type="text/css" />
<link href="css/account.css" rel="stylesheet" type="text/css" />
</head>
<body>
<%@ include file="include/header.jsp"%>
<div id="main">
<div id="row_1">
<div id="reg_banner"><img src="images/login_banner.jpg" /></div>
<div id="reg_div">
<form action="regist.html" method="post">
校园卡号:
<input name="uid" type="text" class="input_text" />
* <br />
姓 名:
<input name="name" type="text" class="input_text" />
* <br />
密 码:
<input name="password" type="password" class="input_text" />
* <br />
确认密码:
<input name="password2" type="password" class="input_text" />
* <br />
邮 箱:
<input name="email" type="text" class="input_text" />
* <br />
手机号码:
<input name="phone" type="text" class="input_text" />
* <br />
身份证号:
<input name="idcard" type="text" class="input_text" />
* <br />
<br />
<br />
<input type="submit" value="注册" class="btn" />
<input type="reset" value="重置" class="btn" />
</form>
</div>
</div>
</div>
<script>
var def = "1";
</script>
<%@ include file="include/footer.jsp"%>
</body>
</html>
login.jsp
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"
contentType="text/html; charset=utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>登录 - 广东海洋大学体育馆网上系统</title>
<link href="css/nav.css" rel="stylesheet" type="text/css" />
<script src="js/nav.js" type="text/javascript"></script>
<script src="js/focus.js" type="text/javascript"></script>
<link href="css/common.css" rel="stylesheet" type="text/css" />
<link href="css/account.css" rel="stylesheet" type="text/css" />
</head>
<body>
<%@ include file="include/header.jsp"%>
<div id="main">
<div id="row_1">
<div id="login_banner"><img src="images/login_banner.jpg" /></div>
<div id="login_div">
<form action="login.html" method="post">
<span class="tmp">用户名:</span>
<input name="uid" type="text" class="input_text" />
<br />
密 码:
<input name="password" type="password" class="input_text" />
<br />
<br />
<br />
<input type="submit" value="登录" class="btn" />
<input type="reset" value="重置" class="btn" />
</form>
</div>
</div>
</div>
<script>
var def = "1";
</script>
<%@ include file="include/footer.jsp"%>
</body>
</html>
效果图如下:
广东海洋大学体育馆管理系统主注册页面
广东海洋大学体育馆管理系统登录页面
接下来就是管理员后台页面的前端设计了。管理员后台的所有页面、css以及js文件都放在WebRoot/admin目录下,目的是更好地管理和跟前台区分,不然写代码过程中会很容易混乱。这里跟前台设计过程差不多,但因为是后台,所以设计尽可能简洁。
admin/index.jsp
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"
contentType="text/html; charset=utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>广东海洋大学体育馆管理系统后台</title>
<link href="css/nav.css" rel="stylesheet" type="text/css" />
<script src="js/nav.js" type="text/javascript"></script>
<script src="js/focus.js" type="text/javascript"></script>
<link href="css/common.css" rel="stylesheet" type="text/css" />
</head>
<body>
<%@ include file="include/header.jsp"%>
<div id="main">
<div id="row_1">
<% if(null == request.getSession().getAttribute("aId")) {%>
<div id="admin-login">
<form action="" method="post">
<p> 工号
<input name="aid" type="text" class="input_text" />
</p>
<p> 密码
<input name="password" type="password" class="input_text" />
</p>
<p>
<input name="action" type="hidden" value="login" />
<input name="" type="submit" value="登录" class="btn_submit" />
<input name="" type="reset" value="重置" class="btn_submit" />
</p>
</form>
</div>
<% }else{%>
<table class="admin-info" cellspacing="2px">
<c:forEach items="${requestScope.adminList}" var="list">
<tr>
<th scope="row">编号</th>
<td>${list.getaId()}</td>
</tr>
<tr>
<th scope="row">姓名</th>
<td>${list.getaName()}</td>
</tr>
<tr>
<th scope="row">身份证号</th>
<td>${list.getIdCardNo()}</td>
</tr>
<tr>
<th scope="row">出生日期</th>
<td>${list.getBirthdate()}</td>
</tr>
<tr>
<th scope="row">权限</th>
<td>${list.getPower()}</td>
</tr>
<tr>
<th scope="row">手机号码</th>
<td>${list.getPhone()}</td>
</tr>
<tr>
<th scope="row">入职日期</th>
<td>${list.getaEntry()}</td>
</tr>
<tr>
<th scope="row">状态</th>
<td>${list.getStatus()}</td>
</tr>
</c:forEach>
</table>
<br />
<br />
<h3 class="align-center"> <a href="index.html?action=logout">退出登录</a> </h3>
<%}%>
</div>
</div>
<script>
var def = "1";
</script>
<%@ include file="include/footer.jsp"%>
</body>
</html>
广东海洋大学体育馆管理系统后台
首页
这个系统中有很多地方需要显示列表信息,例如场地列表,器材列表,用户列表......所有的表格都采用统一的无边框风格。
无边框表格
所有页面的目录结构如下
用户前台目录结构 管理员后台目录结构
每个模块下都有一个index.jsp,这是每个模块的首页,一般用于显示该模块下的信息。比如WebRoot/ground/index.jsp显示所有场地的列表。
其实前端设计大部分工作量就是布局,以及调试css,直到跟原设计大致一样。写代码前一定要有一个大致的设计思路,比如配色,风格,页面整体布局,文件目录结构......不然的话做出来的网页会不协调,而且容易导致大量的返工。至于css的运用技巧和页面布局需要平时多观察,多积累。大家平时看到不错的网页,可以看看它的源代码;也可以多到这里逛逛 http://yuncode.net/list/web,有什么好的源码别忘了保存到自己的代码库里 http://yuncode.net/mylib。
整个项目的源代码将在最后一篇文章里发布,系统有很多不完善的地方,有兴趣而且有时间的朋友可以一起去完善一下,并写一下开发日记记录自己的开发历程。