웹마스터 팁
page_full_width" class="col-xs-12" |cond="$__Context->page_full_width">
[초보자용] 노프레임 이해하고 만들기
2003.06.05 17:27
http://zeromd.com일단 노프레임이란
말 그대로 No frame ...
프레임이 없다는 말씀.
프레임이 있는 홈페이지는 메뉴바가 오른쪽이나 위쪽에 항상
고정되어 있고, 내용만 바를 주~~욱 내려서 봅니다.
그런데 노프레임이 프레임이 따로 없어서 메뉴도 오른쪽 바를
내리면 같이 주~~욱 내려갑니다. 보통 검색사이트나 신문 등은
이런 노프레임으로 되어있죠.
노프레임을 만드려면 일단 테이블을 이해해야 합니다.
------------------------------
: menu :
------------------------------
: : :
: : :
: : :
: menu : content :
: : :
: : :
: : :
: : :
: : :
------------------------------
: copyright :
------------------------------
제홈피나 대부분 이런 형식으로 되어있습니다.
그러면 일단 테이블을 만듭니다.
<html>
</html>
<body>
<table>
<tr>
<td></td>
</tr>
<tr>
<td></td>
<td>
여기에 content 내용이 들어가겠죠.
</td>
</tr>
<tr>
<td></td>
</tr>
</table>
</body>
테이블을 만들었으면 이것을 이용해서
헤더와 푸터를 만듭니다.
헤더와 푸터라는 말 자체는 특별한 의미는 없습니다.
파일이름이랑은 상관없다는 말씀. 단지 위에 붙고, 아래 붙는다는 것.
위에서 content 는 파일마다 바뀌겠지만, 헤더와 푸터는 바뀌지 말아야 합니다.
헤더와 푸터의 파일이름을 header.html, footer.html이라고 하고,
내용 부분을 content.html이라고 합시다.
그러면 header.html에 content의 앞부분 즉
------------------------------
: menu :
------------------------------
: :
: :
: :
: menu :
: :
: :
: :
: :
: :
---------
가 헤더가 되는 것입니다.
그래서 header.html은 다음과 같이 되고...
<html>
</html>
<body>
<table>
<tr>
<td></td>
</tr>
<tr>
<td></td>
<td>
이 되겠죠.
그러면 content의 뒷부분
:
:
:
:
:
:
:
:
------------------------------
: copyright :
------------------------------
은 푸터가 됩니다.
footer.html은 다음과 같이 됩니다.
</td>
</tr>
<tr>
<td></td>
</tr>
</table>
</body>
마지막으로 content.html은
인클루드를 이용해서 header.html과 footer.html을 삽입합니다.
content.html을 살펴보면
<? include"header_zeromd.html"; ?>
여기에 content 내용이 들어가겠죠.
<? include"footer_zeromd.html"; ?>
이렇게 됩니다.
그래서 주소창에서 content.html을 읽게 되면
------------------------------
: menu :
------------------------------
: : :
: : :
: : :
: menu : content :
: : :
: : :
: : :
: : :
: : :
------------------------------
: copyright :
------------------------------
이렇게 나옵니다.
이제 content만 바꾸면서 여러 파일을 만들 수 있겠죠.
주제를 바꿔서 header과 footer도 다양하게 할수 있겠습니다.
허접설명이었지만, 끝까지 봐줘서 고맙습니다.
모르시는 부분 있으면 질문해주세요..
말 그대로 No frame ...
프레임이 없다는 말씀.
프레임이 있는 홈페이지는 메뉴바가 오른쪽이나 위쪽에 항상
고정되어 있고, 내용만 바를 주~~욱 내려서 봅니다.
그런데 노프레임이 프레임이 따로 없어서 메뉴도 오른쪽 바를
내리면 같이 주~~욱 내려갑니다. 보통 검색사이트나 신문 등은
이런 노프레임으로 되어있죠.
노프레임을 만드려면 일단 테이블을 이해해야 합니다.
------------------------------
: menu :
------------------------------
: : :
: : :
: : :
: menu : content :
: : :
: : :
: : :
: : :
: : :
------------------------------
: copyright :
------------------------------
제홈피나 대부분 이런 형식으로 되어있습니다.
그러면 일단 테이블을 만듭니다.
<html>
</html>
<body>
<table>
<tr>
<td></td>
</tr>
<tr>
<td></td>
<td>
여기에 content 내용이 들어가겠죠.
</td>
</tr>
<tr>
<td></td>
</tr>
</table>
</body>
테이블을 만들었으면 이것을 이용해서
헤더와 푸터를 만듭니다.
헤더와 푸터라는 말 자체는 특별한 의미는 없습니다.
파일이름이랑은 상관없다는 말씀. 단지 위에 붙고, 아래 붙는다는 것.
위에서 content 는 파일마다 바뀌겠지만, 헤더와 푸터는 바뀌지 말아야 합니다.
헤더와 푸터의 파일이름을 header.html, footer.html이라고 하고,
내용 부분을 content.html이라고 합시다.
그러면 header.html에 content의 앞부분 즉
------------------------------
: menu :
------------------------------
: :
: :
: :
: menu :
: :
: :
: :
: :
: :
---------
가 헤더가 되는 것입니다.
그래서 header.html은 다음과 같이 되고...
<html>
</html>
<body>
<table>
<tr>
<td></td>
</tr>
<tr>
<td></td>
<td>
이 되겠죠.
그러면 content의 뒷부분
:
:
:
:
:
:
:
:
------------------------------
: copyright :
------------------------------
은 푸터가 됩니다.
footer.html은 다음과 같이 됩니다.
</td>
</tr>
<tr>
<td></td>
</tr>
</table>
</body>
마지막으로 content.html은
인클루드를 이용해서 header.html과 footer.html을 삽입합니다.
content.html을 살펴보면
<? include"header_zeromd.html"; ?>
여기에 content 내용이 들어가겠죠.
<? include"footer_zeromd.html"; ?>
이렇게 됩니다.
그래서 주소창에서 content.html을 읽게 되면
------------------------------
: menu :
------------------------------
: : :
: : :
: : :
: menu : content :
: : :
: : :
: : :
: : :
: : :
------------------------------
: copyright :
------------------------------
이렇게 나옵니다.
이제 content만 바꾸면서 여러 파일을 만들 수 있겠죠.
주제를 바꿔서 header과 footer도 다양하게 할수 있겠습니다.
허접설명이었지만, 끝까지 봐줘서 고맙습니다.
모르시는 부분 있으면 질문해주세요..
댓글 16
제목 | 글쓴이 | 날짜 |
---|---|---|
HTML필수 항목( 기본구조)- 초보자용 입니다! | 김수한 | 2003.07.25 |
노프레임 홈만들기 (1) - 표로 레이아웃 만들고 그림 삽입하기 [45] | @kihwa | 2003.07.11 |
내 카페/홈페이지에 뉴스 달기 소스 공개 [9] | 깜보 | 2003.07.10 |
쭘's식 홈페이지 만들기 No.5 - (미리보기 포함) [18] | 쭘's | 2003.07.07 |
도메인 주소를 고정한 페이지를 새로고침해도 처음으로 돌아가는것을 방지 ★ [24] | 새벽이슬 | 2003.07.05 |
노프레임 게시판을 만들때 이미지 경로지정 [11] | webzang | 2003.06.26 |
쭘's식 홈페이지 만들기 No.4 - (미리보기 포함) [26] | 쭘's | 2003.06.16 |
[매크로] 노프레임 페이지 작성시 나모에서 링크 타겟 매크로로 입력하기 [4] | 김병희 | 2003.06.14 |
쭘's식 홈페이지 만들기 No.3 - 깔끔 노프레임 (미리보기 포함) [37] | 쭘's | 2003.06.07 |
[re] 쭘's식 홈페이지 만들기 No.3 - 깔끔 노프레임 (미리보기 포함) [5] | 파마아줌마 | 2003.07.21 |
[초보자용] 노프레임 이해하고 만들기 [16] | zeroMD™ | 2003.06.05 |
CSS파일이용하여 링크에 건반효과주기(강력추천) [8] | 호호짱 | 2003.05.23 |
HTML 암호화시킨것 풀어주는소스(암호화도가능) [11] | 호호짱 | 2003.05.06 |
쭘식 메뉴만들기 - 세로 슬라이드 메뉴 [11] | 쭘's | 2003.04.29 |
[html 초보용] 홈페이지 무작정 따라하기!② [3] | 깻잎사랑=_=v | 2003.04.14 |
[html 초보용] 홈페이지 무작정 따라하기!① [6] | 깻잎사랑=_=v | 2003.04.14 |
스스로 사라지는 웹페이지 만들기 [3] | 최재철 | 2003.04.08 |
노프레임홈페이지 디비기 4 - 쌍벽 [36] | 리디 | 2003.04.08 |
HTML 기본 구성 ( HTML 왕초보만 보세혀.. ) [7] | kkaza™ | 2003.04.05 |
홈페이지의 위아래를 바꾸어 보자! [10] | 세죠위그이 | 2003.04.01 |