1.首页设置
在chapter06项目的webcontent目录下创建一个名称为index.jsp的页面文件,该文件使用<jsp:forword>动作元素跳转到项目客户端展示的首页
<body>
<jsp:forward page="client/index.jsp"></jsp:forward>
</body>
2.文件移植
将第一章传智书城案例中的client文件复制到webcontent目录下,并将client文件夹下的所有.html文件改为,jsp文件
运行后发现页面中中文都是乱码,需要将每一个JSP文件中都加上page指令即可,代码如下
<%@ page languager="java" contentType="tent/html;charset=UTF-8" pageEncoding="UTF-8“
%>
3.修改JSP页面中的地址和链接
点击页面右上角注册时会出现“404”错误,需要在index.jsp页面文件中的链接和图片等路径前,加入"${pageContext.request.conetxtPath}/client/"即可
4.抽取页面代码
1)、创建head.jsp文件
在web工程的WebContent目录下创建一个名称为client的文件
在其中创建一个head.jsp文件,用来盛放网页的头部,相关代码如下:
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<div id="divhead">
<table cellspacing="0" class="headtable">
<tr>
<td>
<a href="index.jsp">
<img src="${pageContext.request.contextPath}/client/images/logo.png" width="200" height="60" border="0" />
</a>
</td>
<td style="text-align:right">
<img src="${pageContext.request.contextPath}/client/images/cart.gif" width="26" height="23" style="margin-bottom:-4px" /> <a href="#">购物车</a>
| <a href="#">帮助中心</a>
| <a href="#">我的帐户</a>
| <a href="${pageContext.request.contextPath}/client/register.jsp">新用户注册</a>
</td>
</tr>
</table>
</div>
2)、创建menu_search.jsp文件
此文件用来盛放网页的菜单项
代码如下:
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<div id="divmenu">
<a href="#">文学</a>
<a href="#">生活</a>
<a href="#">计算机</a>
<a href="#">外语</a>
<a href="#">经管</a>
<a href="#">励志</a>
<a href="#">社科</a>
<a href="#">学术</a>
<a href="#">少儿</a>
<a href="#">艺术</a>
<a href="#">原版</a>
<a href="#">科技</a>
<a href="#">考试</a>
<a href="#">生活百科</a>
<a href="#" style="color:#FFFF00">全部商品目录</a>
</div>
<div id="divsearch">
<form action="#" id="searchform">
<table width="100%" border="0" cellspacing="0&#