需要完成任務：
（1）根據要求設計靜態首頁
（2）進行動態JSP首頁設計
準備知識：
JSP頁面元素：HTML，註釋、腳本元素（java片段、聲明、表達式）、指令元素、動作元素
指令元素
實例1 指令元素 page使用：page.jspp
<%@page contentType="text/html;charset=utf-8"%>
<%@page import="java.sql.*"%>
<%@page import="java.util.*"%>
<%@page language="java"%>
<%@page pageEncoding="utf-8"%>
<%! int s=200;%>
<p>您的s值爲<%=s%></p>
<table border=1>
<%
for(int i=1;i<=3;i++)
{
%>
<tr>
<td width=100><%=i%>1</td>
<td width=100><%=i%>2</td>
</tr>
<%}%>
</table>
實例2 指令元素include使用 include.jsp
<%@page contentType="text/html;charset=utf-8"%>
<p>主頁內容：</p>
<p>這是主頁</p>
<hr/>
<p>子頁內容</p>
<%@include file="page.jsp"%>
實例3 首頁設計
（1）index2.jsp頁內容
<%@page contentType="text/html;charset=utf-8"%>
<html>
<body>
<%@include file="header.html"%>
<table align="center">
<tr>
<td valign="top"><%@include file="left.html"%> </td>
<td><%@include file="right.html"%> </td>
</tr>
</table>
<%@include file="bottom.html"%>
</body>
</html>
（2）header.html頁內容
<%@page contentType="text/html;charset=utf-8"%>
<p align="center">歡迎參觀我的空間</p>
<hr/>
（3）bottom.html
<%@page contentType="text/html;charset=utf-8"%>
<hr/>
<p align="center">版權所有：新起點 2014-2015<p>
（4）left.html
<%@page contentType="text/html;charset=utf-8"%>
<table width="100" border="1">
<tr>
<td>首頁</td>
</tr>
<tr>
<td>我的愛好</td>
</tr>
<tr>
<td>我的大學</td>
</tr>
<tr>
<td>我的照片</td>
</tr>
</table>
（5）right.html頁內容
<%@page contentType="text/html;charset=utf-8"%>
<table width="400" border="1">
<tr>
<td height="37">主要內容：</td>
</tr>
<tr>
<td height="275"> </td>
</tr>
</table>
效果
（6）更改主頁內容，實現CSS佈局
<%@page contentType="text/html;charset=utf-8"%>
<html>
<head>
<title>無標題文檔</title>
<link href="css/css.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="wrap">
<div class="header">
<%@include file="header.html"%>
</div>
<div class="left">
<%@include file="left.html"%>
</div>
<div class="right">
<%@include file="right.html"%>
</div>
<div class="bottom">
<%@include file="bottom.html"%>
</div>
</div>
3.JSP動作標記
實例：include
（1）主頁
<%@page contentType="text/html;charset=utf-8"%>
<html>
<body>
<p>jsp include動作標記測試</p>
<hr/>
有參數
<jsp:include page="cs.jsp">
<jsp:param name="type" value="china"/>
</jsp:include>
<hr/>
無參數
<jsp:include page="cs.jsp"/>
</body>
</html>
（2）cs子頁
<%@page contentType="text/html;charset=utf-8"%>
<%
String type=request.getParameter("type");
if(type!=null)
out.print("您傳來的參數值爲"+type);
%>
效果圖：
實例forward：
（1）主頁：
<%@page contentType="text/html;charset=utf-8"%>
<html>
<body>
<p>jsp forward動作標記測試</p>
<hr/>
<jsp:forward page="cs.jsp">
<jsp:param name="type" value="china"/>
</jsp:forward>
</body>
</html>
cs頁代碼如上題
效果圖：
（3）常見含有超級鏈接，左側點擊右側顯示內容
left頁更改：
<tr>
<td><a href="index2.jsp?no=aihao" >我的愛好</a></td>
</tr>
<tr>
<td><a href="index2.jsp?no=daxue">我的大學</a></td>
</tr>
index2主頁更改：
<%@page contentType="text/html;charset=utf-8"%>
<html>
<body>
<%
String type=request.getParameter("no");
%>
<%@include file="header.html"%>
<table align="center">
<tr>
<td valign="top"><%@include file="left.html"%> </td>
<td>
<jsp:include page="right.jsp">
<jsp:param name="type" value="<%=type%>"/>
</jsp:include>
</td>
</tr>
</table>
<%@include file="bottom.html"%>
</body>
</html>
right頁更改：
<%@page contentType="text/html;charset=utf-8"%>
<%
String content="";
String type=request.getParameter("type");
if(type==null)
content="空";
else if(type.equals("aihao"))
{
content="我的愛好:就是任性";
}else if(type.equals("daxue"))
{
content="我的大學:我的大學生活很酷！";
}
%>
<table width="400" border="1">
<tr>
<td height="37">主要內容：</td>
</tr>
<tr>
<td height="275">
<%=content%>
</td>
</tr>
</table>
作業：
（1）完成寵物網站JSP設計
（2）考慮forward與動態include、靜態include區別
相關知識：
（1）<%@page 使用
（2）<%@include使用
（3）<jsp:include使用
（4）<jsp:forward使用
（5）html、CSS使用
參考資料：