24. 템플릿 페이지
EX1>
layout_jstl.jsp
; 초기 화면
; header(홈으로,회사소개,제품소개,질문게시판)과 footer, 메인으로 구분
; header의 메뉴를 클릭하면 main만 변경됨.( main, item, company, qna )
<%@ page language="java" contentType="text/html; charset=EUC-KR"
pageEncoding="EUC-KR"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>
</head>
<body>
<%
String content=request.getParameter("page");
if(content==null){
content="main.jsp";
}
%>
<div >
<jsp:include page="header.jsp"/>
</div>
<div>
<!-- content변수에 저장되에 있는 페이지가 포함된다. -->
<jsp:include page="<%=content %>"/>
</div>
<div>
<jsp:include page="footer.jsp"/>
</div>
</body>
</html>
header.jsp
<%@ page language="java" contentType="text/html; charset=EUC-KR"
pageEncoding="EUC-KR"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>
<style type="text/css">
#header{
width:1000px;
height: 100px;
text-align: right;
background-color: pink;
margin: auto;
}
</style>
</head>
<body>
<div id="header">
<a href="layout_jstl.jsp?page=main.jsp">홈으로</a>|
<a href="layout_jstl.jsp?page=company.jsp">회사소개</a>|
<a href="layout_jstl.jsp?page=item.jsp">제품소개</a>|
<a href="layout_jstl.jsp?page=qna.jsp">질문게시판</a>
</div>
</body>
</html>
main.jsp
<%@ page language="java" contentType="text/html; charset=EUC-KR"
pageEncoding="EUC-KR"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>
<style type="text/css">
#content{
width:1000px;
height: 600px;
background-color: orange;
margin: auto;
}
</style>
</head>
<body>
<div id="content">
<h2>우리우리홈쇼핑입니다.</h2>
</div>
</body>
</html>
company.jsp
<%@ page language="java" contentType="text/html; charset=EUC-KR"
pageEncoding="EUC-KR"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>
<style type="text/css">
#content{
width:1000px;
height: 600px;
background-color: purple;
margin: auto;
}
</style>
</head>
<body>
<div id="content">
<h2>우리회사소개</h2>
<div>
우리회사는 좋은 회사예요~~~
</div>
</div>
</body>
</html>
item.jsp
<%@ page language="java" contentType="text/html; charset=EUC-KR"
pageEncoding="EUC-KR"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>
<style type="text/css">
#content{
width:1000px;
height: 600px;
background-color: silver;
margin: auto;
}
</style>
</head>
<body>
<div id="content">
<h2>제품소개</h2>
<ul>
<li><a href="">제품1</a></li>
<li><a href="">제품2</a></li>
<li><a href="">제품3</a></li>
<li><a href="">제품4</a></li>
</ul>
</div>
</body>
</html>
qna.jsp
<%@ page language="java" contentType="text/html; charset=EUC-KR"
pageEncoding="EUC-KR"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>
<style type="text/css">
#content{
width:1000px;
height: 600px;
background-color:lime;
margin: auto;
}
</style>
</head>
<body>
<div id="content">
<h2>질문게시판</h2>
</div>
</body>
</html>
footer.jsp
<%@ page language="java" contentType="text/html; charset=EUC-KR"
pageEncoding="EUC-KR"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>
<style type="text/css">
*{
margin:0px;
}
#footer{
width:1000px;
height: 100px;
text-align: right;
background-color:aqua;
margin: auto;
}
</style>
</head>
<body>
<div id="footer">
교육센터주소:서울시 종로구 xxx<br/>
문의전화:02-xxx-xxxx<br/>
이메일:xxx
</div>
</body>
</html>