지난 강좌까지 우리는 그누보드를 설치하고 환경설정을 하였으며
head와 index tail을 만들어서 불러 오는 방법을 함께 알아 보았습니다.
여기까지만 해도 노프레임과 그누보드를 혼자 꾸미시기에는 지장이 없으실 것이라고 생각합니다만
처음의 약속대로 제가 갔던 곳까지 끝까지 함께 가볼 예정입니다.
이번 강좌부터는 응용과정이라고 생각하시면 그 의미가 맞을지....

강좌 시작하기 전에
head와 index tail의 개념에 대해서 한번 더 짚고 넘어 가도록 하겠습니다.
head는
대부분 메인메뉴를 넣는, 홈페이지의 상단 부분입니다.
만드는 방법에 따라서는 페이지마다 변화하는 메뉴를 삽입할 수도 있고
<참고페이지>
http://aechae.com/board/index2.php

한가지 형태의 메뉴를 공통적으로 쓸 수도 있습니다.
<참고페이지>
http://grinbi62.com/main.html

페이지가 바뀔 때마다 메뉴화면 까지 변하면 더 멋있고 그럴듯하지만
플래시를 능숙하게 다루는 상황이 아니라면 한가지 메뉴를 고정적으로 쓸것을 권합니다.
페이지가 바뀔 때마다 메뉴를 새로 불러와야 한다면 속도가 그만큼 떨어지니까요.
웹상에서 한번 버튼을 클릭하여 새로운 페이지가 열릴 때마다
컴퓨터는 자신의 하드디스크 일정공간에 임시파일로 저장을 합니다.
(내컴퓨터-C드라이버-Documents and Settings-김말순-Local Settings-TemporaryInternet Files)
같은 페이지를 다시 불러 올때는 웹상에서 불러 오는 것이 아니라
하드디스크에 저장된 페이지를 불러 옵니다.
같은 페이지를 두번째 들어 갈 때는 속도가 빠르게 느껴지는 것은 그 때문입니다.
메뉴의 형태에 관한 부분은 각자의 상황에 따라서 잘 판단 하시기 바랍니다.

index는
게시판이나 컨텐츠 등이 들어가는 본문 페이지로써 웹페이지가 4개라고 했을 때
head나 tail은 하나가 될수도 있고 여러개가 될수도 있지만 index는 4개가 됩니다.
각자의 페이지는 index1.php index2.php index3.php 등이나 임의의 파일명을 갖게 되고
head나 tail도 마찬가지입니다. 그 이름들은 알아서 기억하기 쉽게 만드시면 됩니다.

Tail은
Copyright ⓒ 2006 abcd Corp. All rights reserved의 문구와 연락처 등이 있는 하단 부분으로
대부분 하나를 만들어서 공통적으로 불러다 씁니다.

기본 개념을 길게 설명하는 것은 이 부분을 잘 이해하지 못하는 분들이 많으시다는 것도 있지만
이 개념에서 출발해야만 체계적인 과정으로 홈페이지를 제작할 수 있기 때문입니다.

개념론은 이쯤하고 다시 강좌에 들어 갑니다.
오늘은 자신이 직접 디자인한 컨텐츠 페이지(index)에 head와 tail을 붙이는 방법에 대해서 알아봅니다.
처음엔 저도 이과정에서 막혔지만 개념을 알고나면 너무도 쉬운 작업입니다.
이번 강좌에서는 6강에서 제공하여 드린 이미지중
[구조2] 폴더에 들어 있는 세개의 이미지를 활용합니다.
나모와 에디터플러스를 실행하시기 바랍니다.

7강에서 만든 head와 tail을 그대로 써도 되지만 복습하는 의미에서
처음부터 다시 만들어 볼것입니다.

1. 나모를 실행하셨으면 새파일을 엽니다.(상단 좌측의 종이모양 버튼입니다)

2. 그림과 같이 셀이 밑으로 세줄인 표를 만듭니다.


3. 표속성을 엽니다.
1)너비에 픽셀체크 후 500
2)높이의 %에만 체크
3)배경의 색깔 박스를 눌러서 흰색으로 채운 뒤 적용-확인을 누릅니다.


4. 빈 화면의 아무데서나 오른쪽 마우스로 문서속성을 엽니다.
1)배경그림 박스에서 제공해드린 back.gif를 찾아 클릭한 후 적용을 누릅니다.

2)스타일을 눌러 왼쪽=0 위쪽=0을 입력 한 후 적용-확인을 누릅니다.

5. 아래 그림처럼 바탕 패턴이 적용 되었습니다.


6. 첫번째 셀에 커서를 위치 시킨 후에 메뉴-삽입-그림-그림경로에서
[구조2] 폴더의 head2.jpg를 찾아서 불러 옵니다.

7. 두번째 셀에 index2.jpg를 삽입합니다.

8. 세번째 셀에 tail2.jpg를 불러옵니다.
그림과 같은 화면이 되었을 것입니다.


9. 이제부터 파일을 나눌 것입니다. 에디터 플러스를 실행시킵니다.

10.나모 화면에서 셀의 첫줄 헤드그림을 살짝 클릭하여 선택표시가 되게 합니다.

11.선택 된 상태에서 나모 하단의 HTML버튼을 눌러서 html모드로 갑니다.
아래와 같이 반전 되어 있을 것입니다.


12.border="0">의 >바로 뒤에서 부터 꼭대기 까지 드래그 하여 선택합니다.


13.선택 된 부분을 Ctrl+c로 복사합니다.

14.에디터 플러스로 갑니다.
에디터 플러스에서 파일-새파일-다른파일들-PHP를 눌러 새 php파일을 만듭니다.

15.빈화면에 아까 복사한 소스를 Ctrl+V로 붙여 넣습니다.
그림과 같이 복사 되었을 것입니다.


16.제목없음으로 되어 있는 타이틀의 글자를 수정합니다.
저는 '노프레임 만들기'로 바꿨습니다.

17.패턴으로 적용했던 back.gif의 경로를 7강에서 만든 계정상의 경로로 바꾸어 줍니다.
처음 이 강좌를 보신 분은 7강을 참고 하시기 바랍니다.

<바꾸기 전>


<바꾼 후>


18.head2.jpg의 경로를 바꾸어 줍니다.

<바꾸기 전>


<바꾼 후>


19.경로 바꾸기가 다 끝났습니다.
head2.php로 저장합니다.

20.이제 tail2.php를 만들 차례입니다.
index2.php는 지난번 강좌와는 다른 방법으로 만들어야 하기 때문에
tail2를 만들고 나서 설명하겠습니다.
다시 나모로 갑니다.

21.그림처럼 16번째 줄의 </tr>부터 맨아래 끝까지 선택하여 복사합니다.


22.선택 된 부분을 Ctrl+c로 복사합니다.

23.에디터 플러스로 가서 새 php파일을 만든 후 붙여 넣기를 합니다.

24.앞서 했던 경로 수정 방법으로 tail2.jpg의 경로를 수정한 후 tail2.php로 저장합니다.
이제 tail2.php가 만들어 졌습니다.
수고 하셨습니다.

25.index2.php파일을 만들 차례입니다.
그누보드로 노프레임 홈페이지를 만드려는 분들이 가장 난감해 하는 부분입니다.
그렇지만 방법은 아주 쉽습니다.
그누보드에서 기본적으로 제공된 원본 index.php를 불러서 수정하면 됩니다.

27.FTP로 접속하여 그누보드 메인 폴더에서 원본 index.php를 아스키 모드로 다운 받습니다.

28.에디터 플러스에서 index.php를 엽니다.
환경에 따라 다르지만 대충 아래의 그림과 같이 되어 있을 것입니다.


29.그림을 보며 설명합니다.
충분히 숙지하시기 바랍니다.


30.그림과 설명을 보시니 그누보드로 만드는 노프레임의 구조가 이해가 되시죠?
이제 그림에서 설명한대로 필요 없는 부분을 지우고 우리가 만든 소스로 교체 해 보겠습니다.
먼저 다운 받은 index.php가 열려 있는 상태에서 새이름으로 저장합니다.
index2.php로 저장해야겠죠?

31.index2.php의 내용을 수정할 것입니다.
1)먼저 include_once("$g4[path]/lib/latest.lib.php");가 있는 3번줄과 공란인 4번줄을 지웁니다.
2)$g4[title] = ""; 에서 ""안에 홈페이지 제목을 적어 줍니다. EX)노프레임 만들기
3)include_once("./_head.php");에서 _head.php를 우리가 만든 head2.php로 바꿔 적습니다.
4)하단의 include_once("./_tail.php");에서 _tail.php를 tail2.php로 바꿔 줍니다.
아래의 그림처럼 되었으면 일단 안전하게 저장을 합니다.


32.다시 나모로 갑니다.
html 모드로 가서 그림처럼 12열의 </td>에서 부터 15열의 </td>까지 드래그 하여 복사합니다.


33.에디터 플러스로 갑니다.
아까 저장했던 index2.php에 그림처럼 붙여 넣은 후 index2.jpg 이미지의 경로를 수정합니다.


34.저장 후 업로드 합니다.
이미지들은 imgdata 폴더에 바이너리로
php파일들은 그누메인폴더에 아스키로 업로드 합니다.

35.전송이 끝났으면 브라우저 상에서 도메인/그누보드/index2.php로 불러 옵니다.
아래 그림과 같이 제대로 붙어 있으면 성공한 것입니다.


제대로 되었죠?
축하 드립니다.

본문 컨텐츠로 노프레임을 만드는 방법에 대해서 같이 알아 보았습니다.
여기까지 잘 따라 하셨으면 이제 기본적인 노프레임 홈페이지 만드는 것에 대해서는
어느 정도의 개념이 잡히셨을 것이라고 생각됩니다.

다음 강좌에서는
기역자형과 니은자형을 섞어서 보다 스패셜한 구조의 메인 화면을 만드는 방법을
같이 알아 보도록 하겠습니다.
다음 강좌까지만 따라 하시면 어떤 형태의 노프레임도 자신있게 구현하실 수 있을 것입니다.
수고 하셨습니다.