웹마스터 팁
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
제목 | 글쓴이 | 날짜 |
---|---|---|
링크 클릭시 사운드 효과 [3] | REAL | 2003.04.09 |
이미지 링크로 사용하다가 짤렸을때 대체 이미지 [6] | REAL | 2003.04.09 |
새창뜨는 링크 누를때 스크롤바 고정시키기 [8] | REAL | 2003.04.09 |
textbox의 값을 오른쪽부터 채우기. [1] | RedEye | 2003.04.12 |
[html 초보용] 홈페이지 무작정 따라하기!①
[6]
![]() | 깻잎사랑=_=v | 2003.04.14 |
[html 초보용] 홈페이지 무작정 따라하기!②
[3]
![]() | 깻잎사랑=_=v | 2003.04.14 |
textarea 세로 글쓰기 [1] | ZipShin | 2003.04.15 |
이미지 테두리에 점선 두르기 [6] | ZipShin | 2003.04.15 |
label태그 아십니까? [6] | ZipShin | 2003.04.27 |
쭘식 메뉴만들기 - 세로 슬라이드 메뉴
[11]
![]() | 쭘's | 2003.04.29 |
HTML 암호화시킨것 풀어주는소스(암호화도가능) [11] | 호호짱 | 2003.05.06 |
더블클릭으로 웹문서 새로고침 하기 [3] | RedEye | 2003.05.09 |
동영상이 로딩될때까지 이미지 보여주기 [8] | ZipShin | 2003.05.19 |
세계인구와 한국인구 구하기 애플릿 소스 [3] | TimeMode | 2003.05.19 |
onload 두개 사용하려고 할때... [5] | chosun815 | 2003.05.20 |
CSS파일이용하여 링크에 건반효과주기(강력추천) [8] | 호호짱 | 2003.05.23 |
무심코 지나치기 쉬운 인푸트(input)폼에 대한 몇가지들.... [4] | RedEye(rinja) | 2003.05.23 |
개미선 없애기.. [10] | -크크크- | 2003.06.04 |
[초보자용] 노프레임 이해하고 만들기 [16] | zeroMD™ | 2003.06.05 |
[re] 쭘's식 홈페이지 만들기 No.3 - 깔끔 노프레임 (미리보기 포함) [5] | 파마아줌마 | 2003.07.21 |