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

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

1、创建head.jsp文件

在web工程的WebContent目录下创建一个名称为client的文件

在其中创建一个head.jsp文件，用来盛放网页的头部，相关代码如下：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

	

		

			

				
					 
				
			
			

				 购物车 
				| 帮助中心 
				| 我的帐户
				| 新用户注册							
			 
			
		
		
	

2、创建menu_search.jsp文件

此文件用来盛放网页的菜单项

代码如下：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

		文学 
		生活 
		计算机 
		外语 
		经管
		励志 
		社科 
		学术 
		少儿
		艺术 
		原版 
		科技 
		考试 
		生活百科 
		全部商品目录		



	

		

			

				Search 
				 
				
					 
				
			
		
	

3、创建foot.jsp文件

此文件是用来盛放网页的尾部

代码如下：

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>

	

		

			

			
			

					CONTACT US  
			
		
		

			
 COPYRIGHT
						2015 © BookStore All Rights RESERVED. 
			
		
	

4、创建index.jsp文件

并使用include指令将上述三个文件插入到index.jsp中，

代码如下：

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>












	  <%@include file="head.jsp"%>



	<%@include file="menu_search.jsp" %>



	

    	

        	

            	

            	

            	

            	

            	

        	
    	
	


    

		

			

				

				
					
					

						

							

				                            尊敬的网上书城用户， 　　

							　　为了让大家有更好的购物体验，3月25日起，当日达业务关小黑屋回炉升级！
具体开放时间请留意公告，感谢大家的支持与理解，祝大家购物愉快！

							        3月23日

							        传智播客 网上书城系统管理部

							
						
					
				
				

					
					
				
			
		
	
		

      <%@ include file="foot.jsp" %>

5、创建register.jsp文件

此文件是用来显示注册页面的

代码如下：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>










       <%@include file="head.jsp"%>


       <%@include file="menu_search.jsp" %>


	

		

			

				

					
新会员注册
						

							

								
会员邮箱：
								

								
								
								
请输入有效的邮箱地址
							
							

								
会员名：
								

								
								
字母数字下划线1到10位, 不能是数字开头
							
							

								
密码：
								

								
密码请设置6-16位字符
							
							

								
重复密码：
								

								
								
								
 
							
							

								
性别：
								
  
                                 男
									       
									 女
								
								
 
							
							

								
联系电话：
								

								
								
								
 
							
							

								
个人介绍：
								

								
								
								
 
							
						

						
					
				
			
		
	
    

     <%@ include file="foot.jsp" %>

6、测试

将web项目发布到tomcat服务器中，输入http://localhost:8080/web-chapter06/client/index.jsp进行访问，结果如下：