티스토리 뷰

JSP

[JSP #1 ] 홈페이지 첫 화면 구성

녹색꼬맹이 2017. 9. 11. 14:57
반응형
SMALL


홈페이지 Main 화면 관리.


Top, Center, Bottom 으로 구성하여 관리하는 것이 편함.

 

아래에 있는 Layout 에 코드를 3개로 쪼개 Top.jsp, index.jsp, Bottom.jsp 로 구성.

 

 

 



이렇게 구성할 경우 페이지가 변경되면 CENTER 부분 코드만 수정 및 변경해 주면 되니까 편리하게 관리할 수 있음.

 


top.jsp

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <!-- index top region -->
<html>
    <head>
        <title>홈페이지</title>
    </head>
    <body>
        <div align = "center">
            <table border="1" width="800" height="600">
                
                <tr height="10%">
                    <td colspan = "2" align="center">
                    <a href="index.jsp">Main</a> | 로그인 | 회원가입 | <a href="company.jsp">회사소개</a>
                    </td>
                </tr>
                
                <tr>
                    <td width="20%" align = "center">tree/view</td>
                    <td >
 cs



index.jsp

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
 
<!-- index top region  -->
<%@ include file = "top.jsp" %>
 
<!-- index center region -->
<h3>여기에 자료출력</h3>
<ul>
    <li><h3><a href="student/student.jsp">학생관리프로그램</a></h3>
</ul>
 
<!-- index bottom region -->
<%@ include file = "bottom.jsp"%>
 cs

 

top.jsp 와 bottom.jsp 를 구성 한 뒤 index.jsp 에
<%@ include file = "top.jsp" %>

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

 

를 추가해주면 구성 완료.

 

 

<a href="student/student.jsp"> : 클릭했을 경우 student/student.jsp 경로에 있는 페이지를 실행하라는 의미.

 

 

 

 

 

bottom.jsp

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <!-- index bottom region -->
</td>
                </tr>
                
                <tr height="10%">
                    <td colspan = "2" align="center">Kg itbank</td>
                </tr>
                
            </table>
        </div>
    </body>
</htm
 cs

 

 

 

 


 

 

 

 

 

이런 식 으로 구성한 뒤 첫 번째 화면에서 회사 소개 Tab 을 눌렀을 경우 Center(index.jsp) 쪽의 내용을 변경 한다.

 

 

 

company.jsp

1
2
3
4
5
6
7
8
9
10
11
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
 
<!-- index top region  -->
<%@ include file = "top.jsp" %>
 
 
<h3>우리 회사는 월급은 많고 일이 별로 없는 회사입니다.</h3>
 
<!-- index bottom region -->
<%@ include file = "bottom.jsp"%>
 cs

 

구성은 똑같이 top.jsp와 bottom.jsp 를 include 해 주고

변경될 사항만 변경해 주면

 

 

Center 쪽 Layout 만 변경되는걸 확인할 수 있다.

 

 

 

 

 

 

 

 

반응형
LIST
저작자표시

'JSP' 카테고리의 다른 글

[JSP #6 ] script 를 이용하여 새로운 창 띄우기.(window.open) & 회원가입 유무 확인.  (0) 2017.09.13
[JSP #5 ] 간단한 CSS 입히기.  (0) 2017.09.13
[JSP #4 ] DAO작성 Select Query  (0) 2017.09.11
[JSP #3 ] DAO작성 Insert, Delete Query  (0) 2017.09.11
[JSP #2 ] 작업을 분리하기 위한 작업 - DTO & DAO(Connection)  (0) 2017.09.11
댓글