| 다음과 같은 html소스를 가지고 홈페이지 만들기를 시작할까 합니다.
자료 > all.html top.html bottom.html index.html
마루호스팅의 계정을 사용한다는 전제로 모든 강좌를 진행하고자 합니다.
홈페이지의 형태는 다음 그림과 같은 일반적인 모양을 예로 설명을 합니다.
다음은 드림위버를 이용하여 표를 만든 그림입니다.
드림위버로 자기가 만들고자 하는 형태의 페이지를 표로 만들어 봅니다.
해당소스의 html 코드를 따로 복사하여 메모장에 붙인 것이 다음 그림과 같습니다.
All.html
<html>
<head>
<title>무제 문서</title>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
</head>
<body>
<table width="86%" height="374" border="1">
<tr>
<td height="116" colspan="2"><div align="center">상단메뉴부분</div></td>
</tr>
<tr>
<td width="22%" height="181"><p align="right">메뉴1</p>
<p align="right"> 메뉴2</p>
<p align="right"> 메뉴3</p>
</td>
<td>
<div align="center">본문내용</div>
</td>
</tr>
<tr>
<td colspan="2"><div align="center">하단 주소부분</div></td>
</tr>
</table>
</body>
</html>
|
제로보드를 이용한 노프레임 홈페이지는 크게 3가지 부분으로 구성이 됩니다.
제일 윗부분① 과 본문부분② 그리고 아래부분③으로 나뉩니다.
제일 윗부분을 구성하는 파일명을 top.html, 본문을 구성하는 파일명을 index.html, 아랫부분을 구성하는 파일명을 bottom.html 이라 이름 붙입니다.
그림1에서 각 부분에 해당 되는 부분을 그림2에 표시하였습니다.
각 부분을 떼어서 각각 메모장으로 붙여서 3개의 파일명으로 저장을 합니다.
Top.html
<head>
<title> 무제 문서 </title>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
</head>
<body>
<table width="86%" height="374" border="1">
<tr>
<td height="116" colspan="2"> <div align="center">상단메뉴부분</div></td>
</tr>
<tr>
<td width="22%" height="181"><p align="right"> 메뉴1 </p>
<p align="right">메뉴2</p>
<p align="right">메뉴3</p>
</td>
<td>
|
bottom.html
</td>
</tr>
<tr>
<td colspan="2"><div align="center"> 하단 주소부분 </div></td>
</tr>
</table>
</body>
</html> |
메인부분 index.html
| <div align="center"> 본문내용 </div> |
이제 이 세개의 파일을 자신의 계정으로 업로드 합니다.
익스플로러를 ftp 프로그램으로 사용할 수 있습니다.
주소창에 ftp://자신의도메인.com 을 치면 계정아이디와 패스워드를 묻는 창이 나옵니다.
자신의 아이디와 비밀번호를 입력하여 자신의 계정으로 로그인 합니다.
로그인 하면 자신의 계정에 있는 public_html이란 디렉토리가 보입니다.
마루호스팅의 모든 계정에서는 웹관련 파일을 public_html/ 아래에 두어야만 합니다.
public_html 디렉토리를 더블클릭하여 이동한 후에 조금전에 만든 3개의 파일을 업로드 합니다.
만약, 다른 디렉토리에서 테스트를 원한다면 public_html/ 밑에 디렉토리를 별도로 만들어서 올립니다.
자 이제 웹브라우저로 자신의 홈페이지에 있는 파일을 열어봅니다.
자신의 주소를 치게 되면 public_html/ 디렉토리 아래의 index.html 파일이 열립니다.
열린 페이지 에서는 달랑 텍스트 한 줄이 있습니다. “본문내용”
index.html 파일이 원래 만든 페이지로 보이게 하기 위해서는 index.html 파일에 다른 두 개의 파일, top.html과 bottom.html을 불러들여 보여주어야 합니다.
이를 위해서는 다음 그림과 같은 내용을 추가합니다.
메모장에서 위의 두 줄을 입력, 저장하여 ftp로 기존 파일을 바꾸어 줍니다.
혹은 ssh로 접속하여 vi 명령을 사용하여 index.html 파일을 열어 직접 추가하여 줍니다.
<? include "top.html" ?>
<div align="center"> 본문내용 </div>
<? include "bottom.html" ?> |
** 손에 익지 않더라도 vi 를 잘 사용하시면 홈페이지 구축 고수의 지름길로 갈 수 있습니다.^^
이제 브라우저로 다시 열어봅니다. 처음에 만들었던 원래의 페이지가 나왔습니다.^^
정리를 하자면, 전체 페이지는 메뉴를 포함하는 top파일과 아래 주소부분을 포함하는 bottom파일과 메인내용이 들어가는 index파일로 나누고 index파일에서 두 개의 파일을 읽어 들여 하나의 페이지를 완성하는 것입니다.
이것이 제로보드를 이용한 노프레임 홈페이지를 만들기 위한 중요한 포인트입니다.
이제 제로보드를 이용해서 노프레임 홈페이지 구축을 위한 절반의 길을 오셨습니다.^^
|
