JavaWeb 使用JSP实现传智书城前台页面（教材学习笔记）

注：因为需要用到一些图片素材以及相关的css所以讲工程放在了下载里面，如果需要的话可以点击下载（相关素材点这里）

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" />&nbsp;<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">
		<tr>
			<td style="text-align:right; padding-right:220px">
				Search 
				<input type="text" name="textfield" class="inputtable" id="textfield" value="请输入书名"
				onmouseover="this.focus();"
				onclick="my_click(this, 'textfield');"
				onBlur="my_blur(this, 'textfield');"/> 
				<a hre