|
 4. 사이트 제작하기
4-4. 페이지 연결하기
지금까지 제작한 9개의 페이지를 Anchor 태그(<a>)를 이용하여 연결해 봅니다. 여기에서는 빌더에 의해 자동으로 생성된 페이지의 경로(모듈변수가 포함되어 있는 경로)를
Anchor 태그의 속성값으로 지정하는 방법에 대해 알아 봅니다.
각 페이지의 경로를 알아 내는 방법과 Anchor를 이용한 연결 방법은 다음과 같습니다.
그림_11 : 특정 페이지의 경로
그림과 같이 각 페이지의 경로 알아 내신 후 해당 페이지의 HTML 소스보기 작업창을 열어 HTML 소스를 수정하시기 바랍니다.
## 수정된 코드명 [index]의 HTML 소스
<HTML>
<HEAD>
<meta http-equiv='Content-Type' content='text/html; charset=ks_c_5601-1987'>
<TITLE></TITLE>
</HEAD>
<BODY topmargin="0" leftmargin="0">
<!-- 메인메뉴 TABLE -->
<table border=1 width=100% height=34 bgcolor=cecece>
<tr>
<td align=right>
<a href='{{$template}}/index.php'>HOME</a> |
<a href='{{$template}}/company/ceo.php'>회사소개</a>
<a href='{{$template}}/product/product_01.php'>제품소개</a> |
<a href='{{$template}}/bbs/free_bbs.php'>게시판</a>
</td>
</tr>
</table>
<!-- 서브메뉴 및 본문 TABLE -->
<table border=1 width=100% height=350>
<tr>
<td width=130><!-- 서브메뉴 출력 영역 -->
서브메뉴
</td>
<td><!-- 본문 출력 영역 -->
본문
</td>
</tr>
</table>
</BODY>
</HTML>
## 수정된 코드명 [ceo]의 HTML 소스
<HTML>
<HEAD>
<meta http-equiv='Content-Type' content='text/html; charset=ks_c_5601-1987'>
<TITLE></TITLE>
</HEAD>
<BODY topmargin="0" leftmargin="0">
<!-- 메인메뉴 TABLE -->
<table border=1 width=100% height=34 bgcolor=cecece>
<tr>
<td align=right>
<a href='{{$template}}/index.php'>HOME</a> |
<a href='{{$template}}/company/ceo.php'>회사소개</a>
<a href='{{$template}}/product/product_01.php'>제품소개</a> |
<a href='{{$template}}/bbs/free_bbs.php'>게시판</a>
</td>
</tr>
</table>
<!-- 서브메뉴 및 본문 TABLE -->
<table border=1 width=100% height=350>
<tr>
<td width=130 valign=top><!-- 서브메뉴 출력 영역 -->
(1) CEO 인사말 <br>
(2) 회사약도
</td>
<td align=center><!-- 본문 출력 영역 -->
ceo 인사말
</td>
</tr>
</table>
</BODY>
## 수정된 코드명 [map]의 HTML 소스
<HTML>
<HEAD>
<meta http-equiv='Content-Type' content='text/html; charset=ks_c_5601-1987'>
<TITLE></TITLE>
</HEAD>
<BODY topmargin="0" leftmargin="0">
<!-- 메인메뉴 TABLE -->
<table border=1 width=100% height=34 bgcolor=cecece>
<tr>
<td align=right>
<a href='{{$template}}/index.php'>HOME</a> |
<a href='{{$template}}/company/ceo.php'>회사소개</a>
<a href='{{$template}}/product/product_01.php'>제품소개</a> |
<a href='{{$template}}/bbs/free_bbs.php'>게시판</a>
</td>
</tr>
</table>
<!-- 서브메뉴 및 본문 TABLE -->
<table border=1 width=100% height=350>
<tr>
<td width=130 valign=top><!-- 서브메뉴 출력 영역 -->
(1) CEO 인사말 <br>
(2) 회사약도
</td>
<td align=center><!-- 본문 출력 영역 -->
회사약도
</td>
</tr>
</table>
</BODY>
이제 브라우저에서 지금까지 작업하신 내용을 확인해보시기 바랍니다.
그림_12 : 인덱스 소스 수정 후
|
4-1. 사이트구조 & 메뉴 
4-8. 게시판 모듈 추가하기