<< 통프레임 홈페이지 설계하기
>>
통프레음 홈페이지에 대한 자료를 원하시는 분이 있어서 이렇게 글을
적게 되었습니다.
제가 사용하고 있는 전체 디렉토리 구조를 알려 드리겠습니다.
차근차근 살펴 보세요.!!
public_html
+ main
+ frame
- main.html
&nb
sp; :
홈페이지 초기화면
-
top2.html
:
페이지의 취쪽 부분, 왼족 메뉴가 있다.
-
top3.html
:
페이지의 위쪽 부분, 왼쪽 메뉴가 없다.
-
bottom.html &nbs
p; :
페이지의 아래 부분
- menu.html
&nb
sp; :
페이지의 상단 메뉴바
-
left.html
:
페이지의 왼쪽 메뉴
+
sms
&nb
sp; :
문자나라 메뉴
-
index.html
; :
문자나라 메인 화면
-
left.html
:
왼쪽 메뉴
+
include &n
bsp;
; :
전체 설정 파일이 들어 있다.
-
head.html
:
php 작성시 필요한 기본적 정보가 들어 있다.
-
dbconfig.html &n
bsp; :
db 접속에 관련된 정보가 들어있다.
-
copyright.html : 카피라이터
부분이 들어 있다.
-
style.css
:
홈페이지 전체 스타일 시트
경우에 따라서는 js 디렉토리를 만들어 javascript 자료를 넣어두면
쓰기 편하다.
위의 디렉토리 구조가 제가 사용하는 디렉토리 구조를 간략하게 만든
겁니다.
이제 main/frame 디렉토리의 파일을 이용해서 통프레임을 만들어 보겠
습니다.
일단.. 홈페이지의 전체적인 구성을 생각합니다.
전 위쪽메뉴, 왼쪽메뉴, 내용 이렇게 3가지로 만들 겠습니다.
일단.. 테이블을 하나 만들어서 전체적인 틀을 잡습니다.
제 홈피의 경우는 다음과 같겠죠..
========================== 전체 구조
================================================
<html>
<HEAD>
<TITLE>형화의 PHP 페이지</TITLE>
<LINK REL='stylesheet' TYPE='text/css'
HREF='../../style.css'>
<META content="text/html; charset=ks_c_5601-
1987"
http-equiv=Content-Type>
</HEAD>
<body>
<table width="750" bgcolor="#003399"
cellspacing=0
border=0 cellpadding=0>
<tr>
<td colspan='2'>
위쪽 메뉴
</td>
</tr>
<tr>
<td>
왼쪽 메뉴
</td>
<td>
내용이 들어간다.
</td>
</tr>
</table>
</body>
</html>
========================== /전체 구조
================================================
이렇게 됩니다. 여기서.. 내용 전까지를 top2.html 로 사용하시고,
그리고, 내용 다음부터 마지막 까지를 bottom.html 로 저장하면 됩니
다.
========================= top2.html
================================================
<html>
<HEAD>
<TITLE>형화의 PHP 페이지</TITLE>
<LINK REL='stylesheet' TYPE='text/css'
HREF='../../style.css'>
<META content="text/html; charset=ks_c_5601-
1987"
http-equiv=Content-Type>
</HEAD>
<body>
<table width="750" bgcolor="#003399"
cellspacing=0
border=0 cellpadding=0>
<tr>
<td colspan='2'>
위쪽 메뉴
</td>
</tr>
<tr>
<td>
왼쪽 메뉴
</td>
<td>
========================= /top2.html
================================================
========================= bottom.html
================================================
</td>
</tr>
</table>
</body>
========================= /bottom.html
================================================
그리고, 이제 위쪽 메뉴를 만드시면 됩니다.
프로그램을 만들때는 일단 테이블을 이용해서 전체 구조를 잡으세요.
위쪽 메뉴를
만들기 위해
일단 테이블의 width=100% 으로 하시고 테이블 안에 필요한 내용을 넣
으시면 됩니다.
전체 홈페이지가를 보기 좋게 만들려면 table 을 잘 쓰시는게 상책입
니다.
================================= menu.html
==============================================
<table width=100%
bgcolor="#c8d8f8"
cellspacing=0 border=0 cellpadding=0>
<tr>
<t
d>HOME</td>
<t
d>게시판</td>
<t
d>자료실</td>
<t
d>강좌</td>
</tr>
</table>
================================= /menu.html
==============================================
이런식으로 만드시면 됩니다. 만들어 졌으면 top2.html 의 "위
쪽 메뉴"
에 menu.html 을
include 하면 됩니다. 그리고, 왼쪽 메뉴도 top.html 과 비슷하게 만
드시면 되지요.
여기서 중요한 점은 테이블을 사용해서 디자인을 맞춰야 된다는 것입
니다.
외쪽 메뉴에 메뉴목록, 함수검색, 배너 등이 들어간다. 다음과 같이
하면 됩니다.
일단. 테이블을 만들어서 각 row 마다 메뉴목록, 함수검색, 배너를 넣
을수 있도록
합니다.
그리고, 나서 각 메뉴들을 테이블 형식으로 만들면 되지요.
================================= left.html
==============================================
<table width=100%
bgcolor="#c8d8f8"
cellspacing=0 border=0 cellpadding=0>
<tr>
<t
d>
메뉴
목록 테이블
</
td>
</tr>
<tr>
<t
d>
함수
검색 테이블
</
td>
</tr>
<tr>
<t
d>
배너
테이블
</
td>
</tr>
</table>
&nb
sp;
================================= /left.html
==============================================
이렇게 left.html 을 설계하시면 됩니다. 지금까지 한것을 보면 다른
페이지에
들어가는 페이지는
전부 테이블로 시작하고, width=100% 인걸 보실수 있습니다.
이렇게 하면 한번 만들고 나서 나중에 다른곳에 끼워 넣기가 편합니
다.
그럼.. 이제 메인 화면을 만들어 보겠습니다.
================================== main.html
===============================================
<?
# 위쪽 메뉴와 외쪽 메뉴 링크
require("../frame/top2.html");
echo "통프레임을 이용한 메인 페이지 입니다!!!";
# 아래쪽 링크
require("../frame/bottom.html");
?>
================================== /main.html
===============================================
=================================== top2.html
===============================================
<html>
<HEAD>
<TITLE>형화의 PHP 페이지</TITLE>
<LINK REL='stylesheet' TYPE='text/css'
HREF='../../style.css'>
<META content="text/html; charset=ks_c_5601-
1987"
http-equiv=Content-Type>
</HEAD>
<body>
<table width="750" bgcolor="#003399"
cellspacing=0
border=0 cellpadding=0>
<tr>
<td colspan='2'>
<?
# 위쪽 메뉴 링크
require("../frame/menu.html");
?>
</td>
</tr>
<tr>
<td>
<?
# 왼쪽 메뉴 링크
require("left.html");
?>
</td>
<td>
=================================== /top2.html
===============================================
=================================== left.html
===============================================
<table width=100%
bgcolor="#c8d8f8"
cellspacing=0 border=0 cellpadding=0>
<tr>
<t
d>
<?
# 메뉴목록 테이블
require("list.html");
?>
</
td>
</tr>
<tr>
<t
d>
<?
# 함수검색 테이블
require("../frame/search.html");
?>
</
td>
</tr>
<tr>
<t
d>
<?
# 배너 테이블
require("../frame/baner.html");
?>
</
td>
</tr>
</table>
=================================== /left.html
===============================================
=================================== bottom.html
===============================================
</td>
</tr>
<?
# copyright 링크
require("../../include/copyright.html");
?>
</table>
</body>
=================================== /bottom.html
===============================================
이렇게 하면 전체 통프레임 홈피를 만들수 있게 됩니다.
[참고] require() 와 include() 는 지정한 파일을 해석한
다는 위미에서는
비슷합니다.
require() 는 지정한 파일을 가져와서 소스에 추가하지
만 include()
는 호출때 마다
지정한 파일을 해석합니다. 그렇기 때문에 while, for 등
의 중첩문에서는
require() 를 사용할 수 없습니다.
그리고, if 문등에서 사용할때 꼭 "{",
"}"
를 사용해서 공간을 지정해 주셔야 됩니다.
여기서 중요한 것은 top2.html 을 보시면 아래와 같은것이 있습니다.
require("../frame/menu.html")
require("left.html");
여기서 menu.html 은 상대경로로 frame 디렉토리를 나타낸것은 위쪽
메뉴는 각
메뉴마다 변하지 않기 때문에
상대경로로 하나의 파일을 가리키게 한 것이고, 왼쪽 메뉴는 상위 메
뉴마다 다를수
있기 때문에
그 디렉토리에 있는 left.html 을 읽게 한 것입니다.
새로운 메뉴를 만들려면 일단.. 왼쪽 메뉴에 무엇을 넣을건지 정하시
고..
만약 왼쪽 메뉴가 이미 만들어져 있으면 ln 명령어를 사용해서 심볼
릭 링크를
하시면 좋습니다.
$ ln -s 이미만들어진파일 링크를마들파일
$ ln -s ../frame/left.html left.html
이렇게 하시면 관리하기도 편합니다.
그리고, top.html 과 bottom.html 을 include 하시면 됩니다.
그럼... 질문은 Q & A 를 이용해 주세요.!!