商城管理员登录成功后，会进入商城管理主页admin_index.jsp，商城管理主页是商城管理员的主要工作页面， admin_index.jsp界面如下图所示：
打开admin_index.jsp页面文件，修改页面代码。修改后的admin_index.jsp页面代码如下：
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
String host=request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+host+"/";
request.setAttribute("basePath", basePath);
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html>
<head>
<title>商城管理</title>
</head>
<frameset rows="60px,*,30px" title="topFrame" name="myFrame" id="myFrame" cols="*" frameborder="1" border="0" framespacing="0">
<frame src="admin_top.jsp" name="topFrame" scrolling="no" noresize="noresize" id="topFrame" title="topFrame" frameborder="0"/>
<frameset cols="232px,*" id="frameset" frameborder="no" border="0" framespacing="0">
<frame src="admin_left.jsp" height="764px" name="leftFrame" id="leftFrame" title="leftFrame" scrolling="no" frameborder="0"/>
<frame src="<%=host%>/admin/admin_shop.jsp" height="764px" name="rightFrame" scrolling="auto" id="rightFrame" title="rightFrame" frameborder="0"/>
</frameset>
<frame src="admin_bottom.jsp" name="bottomFrame" scrolling="no" noresize="noresize" id="bottomFrame" title="bottomFrame" frameborder="0"/>
</frameset>
</html>admin_index.jsp页面布局采用了frame框架，整个页面划分为三个区域：顶部区域是页面的标题，对应admin_top.jsp页面；中间区域分为两部分，左侧部分是功能菜单，对应admin_left.jsp页面，右侧部分是主要的工作区域，分别对应admin_shop.jsp、admin_class.jsp、admin_seal.jsp页面，对应的页面依据选择的功能菜单项变化；底部区域是页面的底部，对应admin_bottom.jsp页面。
新建admin_top.jsp页面
在WebContent的admin目录下，建立admin_top.jsp页面文件，文件代码如下：
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
String host=request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+host+"/";
request.setAttribute("basePath", basePath);
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!-- 导入css样式文件 -->
<link type="text/css" rel="stylesheet" href="<%=host %>/admin/css/common.css" />
<link type="text/css" rel="stylesheet" href="<%=host %>/admin/css/login.css" />
</head>
<body>
<div class="titlebar">
<div class="title">商城后端管理系统</div>
</div>
</body>
</html>新建admin_left.jsp页面
在WebContent的admin目录下，建立admin_left.jsp页面文件，文件代码如下：
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
String host=request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+host+"/";
request.setAttribute("basePath", basePath);
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!-- 导入css样式文件 -->
<link type="text/css" rel="stylesheet" href="<%=host %>/admin/css/common.css" />
<link type="text/css" rel="stylesheet" href="<%=host %>/admin/css/menuleft.css" />
<!-- 导入jquery文件 -->
<script type="text/javascript" src="<%=host %>/script/jquery-1.9.1.js" charset="utf-8"></script>
<script type="text/javascript" src="<%=host %>/admin/script/admin_left.js" charset="utf-8"></script>
</head>
<body style="background:#f8f8f8;">
<div class="adminmenu">
<div class="adminmenuparent hotselect" id="shopmenu" onclick="hotSelect(this,'<%=host%>/admin/admin_shop.jsp')">
<div class="menuparentitem">
<div class="menuparenttext">店铺管理</div>
</div>
</div>
<div class="adminmenuparent" id="classmenu" onclick="hotSelect(this,'<%=host%>/admin/admin_class.jsp')">
<div class="menuparentitem">
<div class="menuparenttext">分类项管理</div>
</div>
</div>
<div class="adminmenuparent" id="sealmenu" onclick="hotSelect(this,'<%=host%>/admin/admin_seal.jsp')">
<div class="menuparentitem">
<div class="menuparenttext">运营统计</div>
</div>
</div>
</div>
</body>
</html>admin_left.jsp页面用于显示功能菜单，用户单击功能项菜单，框架的工作区域会加载相对应的功能页面。例如，用户单击“分类项管理”菜单，框架的工作区域会加载admin_class.jsp页面。
该页面引入了外部样式文件menuleft.css，在admin目录下的css目录新建menuleft.css样式文件，样式代码如下：
.adminmenu
{
margin-top:20px;
width: 100%;
overflow-x:hidden;
background-color: #f8f8f8;
}
.adminmenuparent
{
width:100%;
height: 52px;
line-height:52px;
margin: 0 auto;
cursor: pointer;
}
.menuparentitem
{
width:100%;
height: 52px;
line-height:52px;
text-align: center;
}
.hotselect
{
background-color: #e8e8e8;
}该页面也引入了外部JS文件admin_left.js脚本文件，在admin目录下新建script目录，在script目录下新建admin_left.js脚本文件，代码如下：
var selectObj = null;
$(function(){
selectObj = $("#shopmenu");
})
function hotSelect(obj,url)
{
$(obj).addClass("hotselect");
if( obj != selectObj )
{
$(selectObj).removeClass("hotselect");
}
window.parent.rightFrame.location.href = url;
selectObj = obj;
}脚本文件的hotSelect方法是admin_left.jsp页面的菜单项鼠标单击事件的响应处理函数，该函数首先变换菜单项的样式，然后设置框架的rightFrame加载由参数url指定的页面。
新建admin_bottom.jsp页面
在WebContent的admin目录下，建立admin_bottom.jsp页面文件，文件代码如下：
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> </head> <body> <div style="height:30px;text-align:center;"> <span>编程训练营 <a href="http://www.hgzp.com.cn" target="view_window">milihua.com</a></span> </div> </body> </html>
新建admin_shop.jsp页面
该页面是店铺管理页面，主要用于店铺管理业务，如店铺的查询、审核和关闭。当前页面内容为空，在后面的课程中会完善该页面。
在WebContent的admin目录下，建立admin_shop.jsp页面文件，文件代码如下：
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> </head> <body> 商铺管理页面 </body> </html>
新建admin_class.jsp页面
该页面是分类项管理页面，主要用于商品分类项的添加、修改与删除。当前页面内容为空，在后面的课程中会完善该页面。
在WebContent的admin目录下，建立admin_class.jsp页面文件，文件代码如下：
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> </head> <body> 分类项管理页面 </body> </html>
新建admin_seal.jsp页面
该页面是运营统计页面，主要用于统计店铺数量及商品种类。当前页面内容为空，在后面的课程中会完善该页面。
在WebContent的admin目录下，建立admin_seal.jsp页面文件，文件代码如下：
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> </head> <body> 运营统计页面 </body> </html>
上述所有文件编写完成后，在Server中运行admin_index.jsp页面，如果之前没有登录系统，页面会跳转到admin_login.jsp登录页，登录成功后，页面会自动跳转到admin_index.jsp页。在admin_index.jsp页面，用鼠标单击左侧的功能项菜单，右侧工作区域会加载与菜单项对应的功能页面。