|
홈페이지만들기
→ 노프레임이란?
노프레임은 다른말로 원프레임, 통프레임 이라고도 말합니다.
말 그대로 프레임을 나누지 않은 상태의 웹페이지를 노프레임이라고 합니다.
태그코리아도 지금은 노프레임으로 바꾸긴 했습니다만 프레임을 오랫동안 사용했었습니다.
프레임을 사용하던 이유중에 하나가 관리가 쉽고 사이트 범위가 크게 벗어나지 않던 이유였습니다.
개인사이트에서는 손쉽게 관리하기 위해서 프레임을 사용하지만 좀 덩어리가 큰 사이트들은 대부분이
노프레임을 사용합니다.
오래전에는 노프레임을 사용하기 위해서 파일마다 전 메뉴소스를 계속 똑같이 같은 문서에 넣어서
노가다? 를 해가며 사용하는 사이트도 있었지만, 지금은 함수를 사용해서 프레임과 같은 효과를 볼수
있는 노프레임 사이트를 만들수 있습니다.
단, 홈페이지계정 사이트에서 PHP,제로보드4 등을 지원해 주는 계정이어야만 효과를 보실수 있습니다.
UTF-8 을 지원하는 계정에서는 안될수도 있으니 가입한 계정 사이트에서 미리 확인해 보시길 바랍니다.
홈페이지 만들기 기초강좌를 보신분은 아시겠지만 여기서도 똑같이 메모장과 FTP 프로그램을 사용하겠
습니다. 준비가 되신 분들은 아래 설명대로 차근차근 따라해 보시길 바랍니다.
아.. 그리고 파일을 저장할 폴더를 하나 만들어 두시길 바랍니다^^
폴더는 찾기 쉬운곳에 만들어 두세요.. 그래야 햇갈리지 않겠죠? 예를들어 바탕화면 같은곳에.. --ㆀ
노프레임의 예를 들어 보겠습니다.
상단 메뉴부분 ① |
로그인박스
또는
좌측메뉴
①
|
본문 내용부분 HTML ②
|
하단 카피라이트 주소부분 ③ |
위와 같은 사이트의 형태를 가지고 있다면 소스는 아래와 같이 하시면 됩니다.
<![CDATA[
<table width="800">
<tr>
<td height="100" colspan="2" bgcolor=cccccc><div align="center">상단 메뉴부분 ①</div></td>
</tr>
<tr>
<td width="150" bgcolor=cccccc>
<center>
로그인박스<br><br>
또는 <br><br>
좌측메뉴<br><br>
①
</center>
</td>
<td width="650">
<div align="center">본문 내용부분 HTML ②</div>
</td>
</tr>
<tr>
<td height="50" colspan="2" bgcolor=skyblue><div align="center">하단 카피라이트 주소부분 ③
</div>
</td>
</tr>
</table>
]]>
|
위와 같은 소스로 노프레임을 만드려면 HTML 문서파일을 총 3개 만들어서 연결해야 합니다.
첫번째 파일은 상단메뉴와 좌측메뉴를 구성하는 페이지 문서입니다.
두번째 파일은 처음 접속했을때 나오는 메인화면을 구성하는 페이지 문서입니다.
세번째 파일은 화면 제일 하단에 카피라이트 부분이 나오는 페이지 문서입니다.
그럼 위의 세가지 파일을 만들어 보겠습니다.
앞서 홈페이지 만들기 기초강좌를 보신분은 아시겠지만 메모장을 실행하시기 바랍니다.
먼저 위의 소스중 상단메뉴와 좌측메뉴의 부분을 저장하는데요..
메모장에 아래와 같이 소스를 복사해서 넣으세요.
<![CDATA[
<html>
<head>
<title>문서제목</title>
</head>
<body>
<table width="800">
<tr>
<td height="100" colspan="2" bgcolor=cccccc><div align="center">상단 메뉴부분 ①
</div></td>
</tr>
<tr>
<td width="150" bgcolor=cccccc>
<center>
로그인박스<br><br>
또는 <br><br>
좌측메뉴<br><br>
① </center>
</td>
<td width="650">
]]>
|
소스를 복사해서 넣으신 다음 아래그림과 같이 다른이름으로 저장을 합니다.
다름이름으로 저장하기를 누르신 다음 파일형식을 " 모든파일 " 로 선택하세요.
그리고 파일이름은 " topmenu.html " 로 저장을 합니다.
위처럼 하셨다면 다음은 " 메인화면 " 부분을 저장하겠습니다.
다시 메모장을 하나 실행하세요.
메모장을 실행하셨다면 아래소스를 복사해서 메모장에 붙여 넣으세요.
<? include "topmenu.html" ?>
<div align="center">본문 내용부분 HTML ②</div>
<? include "bottom.html" ?>
|
메모장에 붙여넣기를 다 하셨다면 위에서 처럼 똑같이 다른이름으로 저장을 합니다.
이때 파일이름은 " index.html " 로 저장하세요.
위의 소스를 보시면 아시는 분들은 아시겟지만 처음보는 소스가 위 아래에 있을겁니다.
바로 인크루드(include) 함수인데요, 이 함수는 HTML 파일문서를 불러오는 역할을 합니다.
이미 " topmenu.html " 파일을 만들었고 다음엔 " bottom.html " 파일을 만들것입니다.
그렇게 되면 " index.html " 파일에서 "topmenu.html "와" bottom.html "
파일을 불러오게 되는 것입니다.
" index.html " 을 만드셔서 저장을 하셨다면 마지막으로 " bottom.html " 만드실 차례입니다.
다시 메모장을 하나 실행하시기 바랍니다.
메모장을 실행하셨다면 아래소스를 복사해서 붙여넣으시기 바랍니다.
<![CDATA[
</td>
</tr>
<tr>
<td height="50" colspan="2" bgcolor=skyblue>
<div align="center">하단 카피라이트 주소부분 ③
</div>
</td>
</tr>
</table>
</body>
</html>
]]>
|
메모장에 붙여넣으셨다면 위에서 처럼 다른이름으로 저장합니다.
이때 파일이름을 " bottom.html " 로 저장합니다.
저장을 다 하셨다면 아래 그림과 같이 폴더에 세개의 HTML 파일이 있을겁니다.
자~ 정상적으로 파일이 다 저장 되었다면 다음페이지로 넘어가겠습니다.
다음페이지에서는 인터넷에 올리기, 제로보드와 연결하기 까지 설명하도록 하겠습니다.
→ 다음페이지 노프레임 사이트 만들기 2
|
|
