비가 올듯 말듯 하면서 안오고 버티는 날씨입니다.
강좌를 진행하면서 전에 궁금했던 한가지 의문이 풀리는 느낌입니다.
사용자도 많고 명성있는 그누보드에 왜 초보자를 위한 강좌하나 없을까 궁금했던 의문이 말입니다.
아마도 몇분 정도는 시도하시다가
워낙 손이 많이 가고 머리가 아픈 작업이어서 그만 두시지 않았을까 하는....ㅠ.ㅠ
생각보다는 무지 손이 많이 가는 작업이군요.
누가 시켜서 하는 것도 아니면서 잠시 푸념을...^^

지난번 강좌에서 미리 본 구조를 여기서 부터 직접 만들어 보겠습니다.

1. 나모와 에디터 플러스 프로그램을 실행 시킵니다.
에디터플러스는 지난 강좌의 첨부파일로 올려 놓은 압축 파일 속에 있습니다.

2. 나모의 화면에서 아래의 그림처럼 가로 2칸 세로 3칸의 표를 만듭니다.


3. 아래의 그림처럼 표가 생겼을 것입니다.


4. 표에 오른쪽 마우스를 대고 클릭하여 표속성 창을 열어서 아래그림처럼
너비에서는 픽셀을 체크하고 500을 넣습니다.
높이는 그냥 퍼센트에만 체크합니다.
선종류를 감추기로 선택합니다.


5. 아래 그림처럼 표가 변하였습니다.


6. 젤 윗줄의 셀 두개를 선택하여 오른쪽 마우스로 표-셀합치기를 선택합니다.
셀 두개가 합쳐졌을 겁니다.
다시 맨 아래 줄의 셀 두개를 선택하여 위의 방법으로 셀을 합칩니다.


7. 표가 그림처럼
윗줄엔 셀 하나
가운데엔 셀 두개
아랫줄엔 하나로 변합니다.


8. 표의 맨 윗줄에 커서를 댄 후 오른 쪽 마우스로 셀속성을 열어
그림처럼 너비에 500픽셀로 되어 있는지 확인하고
수평정렬은 기본값에
수직정렬은 위를 선택한 후 적용 확인을 누릅니다.

같은 방법으로 가운데 줄의 왼쪽셀을 오른 쪽 마우스로 열어
셀속성에서 셀의 너비를 159픽셀로 설정하고
수직정렬을 위로 설정합니다.

가운데 줄의 오른쪽 셀을 같은 방법으로
셀 너비 341 픽셀
수직 정렬 위에 설정합니다.

마지막 줄의 셀속성에서
셀너비 500픽셀
수직정렬 위로 선택합니다.

7. 하얀 여백의 아무곳에서나 오른쪽 마우스를 클릭하여 문서속성창을 엽니다.


8. 열린 창에서 배경 그림 박스 옆의 찾아보기를 선택하여 다운 받으신 이미지가 들어 있는
폴더 속의 back.gif를 클릭한 후 적용 버튼을 누릅니다.
바탕에 배경 패턴이 깔렸을 겁니다.
패턴을 어떻게 쓰는지 모르는 분들이 많으셔서 패턴 적용법까지 넣어 보았습니다.

다시 표의 아무 부분이나 클릭하셔서 색깔박스를 누르셔서 표의 배경색을 하얀색으로 채워 줍니다.
전체적인 패턴을 적용했기 때문에 게시판이 들어갈 자리가 뚫려 보이지 않게 하기 위하여
흰색으로 채워주는 것입니다.


9. 같은 창의 스타일 메뉴를 눌러서
아래와 같이 왼쪽 여백 0 오른쪽 여백 0을 설정한 후 적용-확인을 누릅니다.


10.표가 위쪽으로 달라 붙었을 겁니다.

11.이제 셀에 다운 받은 이미지들을 넣어 보겠습니다.
이 과정을 자세하게 설명하는 것은 이 과정을 알아야만 혼자서 표를 만들고
그 표를 나눠서 각자의 파일로 나눌수 있기 때문입니다.
맨 위의 셀에 커서를 놓고 메뉴의 삽입-그림-그림을 차례로 누릅니다.
그림 속성창이 뜨면 찾아 보기 버튼을 눌러서 다운 받은 파일 중 [구조1]폴더 속의
maeu1.jpg 파일을 찾아 클릭합니다.

메뉴그림이 불러와졌을 겁니다.
같은 방법으로 두번째 줄 왼쪽엔 sub1.jpg를 오른쪽엔 index1.jpg를 삽입합니다.
맨 아래줄엔 tail1.jpg를 삽입합니다.

12.그림이 삽입되어 아래의 형태가 되었을 겁니다.
만약 이 형태가 아니라면 처음부터 다시 순서대로 해보시기 바랍니다.


13.이제 테이블이 완성 되었습니다.
만약을 위하여 이미지가 들어 있는 폴더에 test.html로 저장을 하세요.

14.이제부터가 정말 중요합니다.
화면상에서 두번째줄 메뉴1그림을 한번 클릭한 후 선택 표시가 되면 나모 하단의 메뉴중 HTML을 누릅니다.
html코드가 주욱 나오는 중에 현재 커서가 있는 위치가 검게 반전 되어 있을 것입니다.


15.반전된 부분의 border="0">의 >뒤쪽에서 부터 맨 상단의 htm 꼭대기 까지 전부 드래그 하여
선택한 후 Ctrl+c 로 복사하세요.


16.함께 제공하여 드린 에디터플러스평가판을 실행시키세요.
설치가 안되었다면 지금 설치를 하시기 바랍니다.
에디터플러스의 메뉴에서 파일-새파일-다른파일들을 순서대로 클릭하면
파일종류가 나옵니다. 거기서 PHP를 선택합니다.
아래와 같은 빈 문서가 열렸을 겁니다.


17.빈 문서에 아까 복사해 두었던 html 소스를
Ctrl+v로 붙여 넣습니다.
그림처럼 되었나요?


18.이제 head1.php를 완성시킬 단계입니다.
에디터 플러스의 메뉴에서 파일-저장을 클릭한 후 폴더를 선택하면
파일 이름을 저장하는 박스가 뜰 것입니다.
파일이름을 head1.php로 저장하세요.
php까지 적어 넣어 줘야 합니다.
head가 아닌 head1로 저장하는 것 잊지 마시구요.

19.다음은 index1.php를 만들어 보겠습니다.
나모의 표중 두번째 줄 오른쪽 셀의 오렌지색 이미지를 클릭하여 선택 표시가 나오면
나모 하단 메뉴의 HTML메뉴를 눌러서 html 모드로 갑니다.
아래처럼 반전이 되어 있습니다.


20.반전된 부분의 마지막 border="0">의 >에서 부터 시작하여 head1.php를 만들면서
선택했던 바로 뒷부분 까지 그림처럼 선택합니다.


21.선택된 소스를 Ctrl+C로 복사합니다.
에디터 플러스에서 앞의 방법으로 파일-새파일-다른파일들-PHP를 순서대로 눌러서
새 PHP 파일을 만든 뒤 Ctrl+V로 붙여 넣기를 합니다.

22.head1.php가 저장된 폴더에 index1.php로 저장합니다.
반드시 php확장자 까지 적고 index.php가 아닌 index1.php라는 이름으로 저장하는 것 잊지 마시길...
이제 head1.php 파일이 만들어 졌습니다.

23.tail1.php를 만듭니다. 다시 나모의 표로 갑니다.
앞서 index1.php를 만들면서 선택했던 바로 뒷부분 부터
맨아래 html이 닫힌 부분까지 그림처럼 전부 선택합니다.


24.Ctrl+c로 복사한 후 에디터 플러스에서 새 PHP파일을 만듭니다.
Ctrl+V로 붙여 넣기 한 후 앞에 만든 파일들이 들어 있는 폴더에
tail1.php로 저장합니다.
확장자까지 적는 것과 파일명 유의하시길...

이제 여기까지 해서 head.php, index.php, tail.php를 만들었습니다.
아직 끝난 것은 아닙니다.
이미지들을 그누보더가 설치된 계정으로 업로드를 하고 이미지의 경로부분을 수정해야 합니다.

다시 집중하여 진도 나갑니다.

25.FTP로 계정에 접속합니다.
/public_html 하위 디렉토리에 imgdata라는 폴더를 하나 만드세요.
접속된 상태에서 파일-새폴더를 누르시면 됩니다.
폴더 이름은 설명과 이해를 하기 쉽게 imgdata로 통일하겠습니다.
실제 홈페이지를 만드실 때도 이곳에 이미지 데이타를 넣어 두시고
그 주소를 기억 하시면 됩니다.
이미지가 들어 있는 주소는 http://abc.com/imgdata입니다.
여러분의 도메인이 http://bbb.com이고 그안에 이미지를 넣었을 때
menu1.jpg의 주소는 http://bbb.com/imgdata/menu1.jpg가 됩니다.
나머지 이미지들도 http://bbb.com/imgdata/xxxx1.jpg가 됩니다.

꼭 기억 하시길....

26.업로드를 시작합니다.
업로드 하는 방법입니다.
1) 접속 되어 있는 상태에서 계정상에 새로 만든 폴더를 더블 클릭하여 그 폴더 안으로 들어 갑니다.
2) 화면 아랫부분의 현재 이미지가 들어 있는 컴퓨터 하드디스크상의 폴더로 들어 갑니다.
3) FTP의 모드가 바이너리인지 확인합니다.
4) jpg파일들을 전부 선택한 후 업로드 버튼을 누르시면 됩니다.

27.업로드가 끝났으면 이제 에디터 플러스에서 php파일들을 불러와서
경로를 수정하겠습니다.
먼저 head1.php파일을 불러 옵니다.
아래의 그림같은 화면이 보일 것입니다.


28.일단 타이틀을 바꿔 주도록 하겠습니다.
타이틀은 사이트로 들어갔을 때 브라우저 최상단에 보이는 홈페이지의 제목입니다.
'제목없음'이라는 글자를 '테스트중입니다'로 바꿔 봅니다.

29.패턴으로 깔았던 back.gif의 링크주소를 바꿔 줍니다.

바꾸기 전


바꾼 후


30.menu1.jpg의 경로도 바꾸어 줍니다.

바꾸기 전


바꾼 후


31.저장을 하고 index1.php과 tail1.php파일도 경로를 같은 방법으로 수정합니다.

32.FTP로 php 파일들을 전부 그누보더로 업로드 합니다.
폴더는 그누보더가 설치된 메인 폴더입니다.
즉, 현재 계정상에 head.php등이 들어 있는 폴더라는 이야기 입니다.
전송시의 모드는 아스키입니다.

33.전송이 끝났으면 이제 head1.php와 tail1.php를
지난 게시판 관련 강좌에서 만든 게시판의 상단과 하단에 불러 와 보도록 하겠습니다.
디자인과 크기, 모양 등은 나중에 자신이 직접 만들어서 얼마든지 바꿀수 있으므로
노프레임이 제대로 되는지에만 집중하시면 됩니다.

* 잠시 쉬어 가는...*
따라 하시면서 느끼셨겠지만
노프레임이란 우리가 함께 만들어 본 것처럼 하나의 표를 나눠서 표에 컨텐츠를 넣은 후
테이블들을 닫지 않은 상태에서 head와 index, tail로 분리하고
분리된 파일들을 웹상에서 다시 하나로 합치는 것이라고 보시면 됩니다.

이제 전에 생성 시켰던 게시판의 상단과 하단에 각자의 파일을 불러 와보겠습니다.
브라우저 상에서 자신의 도메인/그누보더/index.php를 불러와서 로그인한 후
admin을 눌러서 게시판관리-게시판 관리를 누릅니다.
앞서 만들어 두었던 게시판의 수정모드로 갑니다.
게시판을 아직 생성시키지 않으신 분들은 이 강좌의 3번과 4번 강좌를 보시기 바랍니다.
게시판 수정모드에 대한 부분은 이미 충분히 설명 하였으므로 생략합니다.

33.
상단 파일경로에 ../head1.php를
하단 파일경로에 ../tail1.php를 넣습니다.
이 파일들은 우리가 함께 만들어서 그누보더의 메인폴더로 올려 놓은 것들입니다.
확인을 눌러서 별로 예쁘지는 않지만 아래의 그림 같은 모양으로
헤드와 테일이 붙어 있다면 노프레임에 성공한 것입니다.


제대로 붙은 모양이 되었습니다.
축하 드립니다.
아직 사용하지 않은 index1.php는 다양한 노프레임 구조를 배울 때 활용할 것입니다.
다음 강좌에서는 노프레임의 형태들을 만들어 보고
게시판이 아닌 컨텐츠 페이지를 구성하는 것도 알아 보겠습니다.
강좌가 진행되는 사이 지난 강좌에서 미리 그림으로 보여드린
메인 페이지에 주로 쓰이는 기역자 구조가 아닌 일자형 구조로 방향이 바뀌었군요.
기역자 구조는 다음에 다시 다루겠습니다.
테이블을 닫지 않는다는 것과
테이블의 위치만 정확하게 파악 하시면 이번 강좌만으로도 기역자형 구조를 만드시는데
어려움이 없을 것입니다. 미리 예습해 보시길 권합니다.
여기까지 따라 하시느라고 수고 많으셨습니다.
다음 강좌는 게시판이 아닌 본문컨텐츠형의 인덱스로 헤드와 테일을 불러와서
노프레임을 만드는 방법에 대해서 알아 보겠습니다.
많은 초보 분들이 궁금해 하시는 부분이기도 하고 저역시 이 문제로 막막했었습니다.
그럼 저녁식사들 즐겁게 하시고 다음 강좌에서 뵙겠습니다.