초보의 [노프레임 무조건 따라하기] -9.노프레임 만들기-4

9강을 준비하면서 1강부터 지난 8강까지 따라 하신 분이 과연 몇분이나 있을까 하는
의문이 생기더군요.
코멘트들이 없으시니 아무도 필요로 하지도 않는 곳에서 아까운 시간을 보내는 것 같은 회의 때문에
잠시 기운이 빠지기도 했습니다만
단 한분이라도 끝까지 따라 하시는 분이 계시고 그분께 작은 도움이라도 될 수 있다면
그것만으로 의미 있는 일이라고 여기며 마음을 다잡아 봅니다.

이번 강좌는 역기역자 형태의 head와 일자형 index.
역니은자 형태 tail로 메인페이지를 완성하는 과정입니다.
주메뉴가 들어있는 상단과 가운데 줄 왼쪽 부분을 head3.php로
가운데 줄 오른쪽에 최근 게시물을 넣어 index3.php으로 만들어 봅니다
tail3.php은 역니은자형이 될 것입니다.
이미지는 [구조3]폴더의 이미지들을 사용합니다.
최근 게시물 스킨은 베이직을 제 홈페이지에 맞게 수정해서 썼던 것을
첨부 파일로 올려 두었으니 우선 그것을 사용하여 설명하겠습니다,.
스킨 사용법은 첨부 파일을 다운 받은 후에 압축을 푸시고
그누보드-skin-latest폴더에 폴더째 아스키 모드로 올리시면 됩니다.

강좌 진행합니다.

1. 나모와 에디터 플러스를 실행시킵니다.

2. 나모에서 가로2개 세로3개의 셀로 된 표를 만듭니다.

3. 표 속성에서
너비-픽셀에 체크 후 500
높이-% 체크
선종류-감추기
배경-색깔을 흰색으로 채운 후 적용-확인버튼을 누릅니다.

4. 첫줄의 셀 두개를 선택한 후 표-셀 합치기로 합칩니다.

5. 세번 째 줄의 셀 두개를 선택한 후 역시 셀을 합쳐 줍니다.

6. 가운데 줄의 오른쪽 셀을 셀나누기-가로를 선택하여 두개로 나누어 줍니다.
아래의 그림과 같은 형태가 되었습니다.


7. 문서 속성을 연 후
1)배경그림에서 back.gif의 경로를 찾아서 클릭 후 적용
2)스타일에서 왼쪽=0 위쪽=0 을 입력한 후 확인을 누릅니다.
표가 왼쪽과 위쪽으로 달라 붙고 패턴이 적용되었을 것입니다.

8.
1)첫줄의 셀............................너비-500픽셀 높이-% 수직정렬-위로 설정
2)두번째 줄의 왼쪽 셀..............너비-160픽셀 높이-336픽셀 수직정렬-위로 설정
3)두번째 줄의 오른쪽 위의 셀....너비-340픽셀 높이-204픽셀 수직정렬-위로 설정
4)두번째 줄의 오른쪽 아래 셀....너비 340픽샐 높이-132픽셀 수직정렬-위로 설정
5)세번째 줄의 셀.....................너비 500픽셀 높이-% 수직정렬-위로 설정 합니다.
가운데 줄의 셀 높이를 지정해 주는 것은 디테일한 구조이기 때문에
구성에 대한 적응력을 높이기 위해서 입니다.

9.
1)첫번째 셀...............................[구조3]폴더의 menu3.jpg를 삽입.
2)두번째 줄 왼쪽 셀....................[구조3]폴더의 sub3.jpg를 삽입.
3)두번째 줄 오른쪽 위의 셀..........비워 둡니다.(최신글 자리)
4)두번째 줄 오른쪽 아래의 셀.......[구조3]폴더의 con3.jpg 삽입.
5)세번째 줄...............................[구조3]폴더의 tail3.jpg를 삽입합니다.
그림과 같은 형태가 되었습니다.


10.
html 편집모드에서 그림과 같이 선택한 후 복사합니다.
역기역자형 헤드파일을 만들 것이기 때문에
서브메뉴 이미지가 들어 있는 셀 까지 헤드에 들어가게 선택하였습니다.


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

12.복사한 소스를 붙여 넣습니다.

13.
1)타이틀을 노프레임 만들기로 바꿔 줍니다.
2)9번째 열 background=에서 back.gif의 경로를 계정상의 경로로 수정합니다
3)menu3.jpg의 경로를 수정합니다.
4)sub3.jpg의 경로를 수정합니다.


## 여기서 잠깐 ##
쪽지를 주신 몇분이 계셨습니다.
그중에 어떤 분은 왜 이미지 경로를 그렇게 적어 줘야 하는지 물으셨고
또 어떤 분은 어떤 경로를 적어 줘야 하는지 물어 오셨습니다.
처음부터 따라 하지 않으신 분이라 여겨 집니다.
강좌를 원만하게 진행하기 위하여 우리는 사전에 약속을 하였습니다.
모든 이미지는 여러분의 계정상에 imgdata 폴더를 만들어서 그안에 업로드 시키기로 말입니다.
그 경로는 도메인/imgdata/입니다.
예를 들어 도메인이 http://bbb.com이라면
이미지가 들어갈 경로는 http://bbb.com/imgdata/모든.jpg가 되는 것입니다.
지금부터 보시는 분이라면 자신의 계정상에 imgdata라는 폴더를 만드신 후에 따라 하시기 바랍니다.
강좌에서 쓰이는 모든 이미지와 에디터 플러스는 이 강좌의 6강에 첨부 파일로 올려져 있습니다.
이제 이미지의 경로 수정 부분에 대해서는 그림을 생략합니다.

14.경로를 수정하셨으면 head3.php로 저장합니다.

15.나모로 갑니다.
이제 tail3.php를 만들 차례입니다.
index3.php는 좀 복잡하므로 tail3.php를 먼저 만듭니다.
html모드에서 그림처럼 선택하여 복사합니다.


16.에디터 플러스로 갑니다.
새 php 파일을 만든 후 복사한 소스를 붙여 넣습니다.

17.
1)con3.jpg의 경로를 수정합니다.
2)tail1.jpg의 경로를 수정 한 후 tail3.php로 저장합니다.
이제 tail3.php까지 마쳤습니다.

18.메인 화면의 인덱스 파일을 만들 차례입니다.
좀 복잡하지만 앞의 강좌에서 이미 개념을 파악하고 한번 만들어 보았으므로
따라만 하시면 어려울 것이 없습니다.
8강에서 불러 왔던 그누보드에서 제공된 원본 index.php를 에디터 플러스에서 불러 옵니다.
만약 지우셨다면 계정상에서 아스키 모드로 다운 받으시면 됩니다.

19.에디터 플러스를 연 상태에서 나모로 갑니다.
html 모드에서 그림처럼 선택하여 복사합니다.


20.에디터 플러스로 갑니다.
아직 붙여 넣으시면 안됩니다.
원본 index.php를 엽니다.
아래의 그림을 잘 보시기 바랍니다.


21.위의 그림을 참고하여 아래처럼 수정합니다.


22.그림처럼 수정 되었다면 index3.php로 저장하고 업로드 합니다.

23.노파심에서 업로드 해야 할 목록을 확인합니다.
1)제공해드린 최신글 스킨......그누보드-skin-latest에 폴더째 아스키 모드로
2)제공해 드린 이미지.............imgdata 폴더에 바이너리로
3)PHP파일 세개....................그누보드 메인 폴더로 아스키 모드.

24.업로드가 끝났으면 브라우저상에서 index3.php를 불러 옵니다.
주소는 http://도메인/그누보드/index3.php입니다.

25.
화면이 아래 그림처럼 보인다면 메인 화면을 성공적으로 만드신 것입니다.


축하 드립니다.
여기까지 무사히 따라 오셨다면 이제 어떤 형태의 노프레임도 자유자재로 만드실 수 있을 것입니다.
방법을 아셨으니 부지런히 그누사이트를 드나 드시면서
스킨이나 팁을 뒤져 마음에 드는 것을 본인 것으로 하시면 됩니다.

지금까지 우리는 함께 게시판 상단과 하단파일을 만들어서 적용하고
본문 컨텐츠 페이지를 만드는 법과
그리고 메인 페이지를 만들면서 복잡한 형태의 노프레임을 구현하는 방법에 대해서
같이 알아 보았습니다.
생각보다도 훨씬 더 신경이 쓰이고 같이 만들어 가면서 설명하려다 보니 꽤 큰 작업이군요.

남은 강좌는
1)최근 게시물을 다듬는 방법,
2)최근 게시물의 링크밑줄 없애는 법,
3)화면이 바뀔 때 마다 브라우저상에 길게 나타나는 주소의 꼬리를 잘라서 고정시키는 것과
4)반드시 알아 두어야 할 기본적인 테그언어 등
네 강좌만 남았습니다.
그 강좌들이 끝나고 난 뒤에는 한숨 돌리며 여러분의 반응을 본 뒤에
제가 정말 자신있고 대외적으로 인정 받기도 한,
플래시로 네비게이션 만드는 강좌를 취미삼아 해볼까 합니다.
관건은 강좌를 보시거나 따라 하고 계신 분의 반응이며 그것은 코멘트로 나타나겠죠?
처음 부터 여기까지 따라 오신 분이 계시다면 코멘트를 남겨 주시면 감사하겠습니다.
수고하셨습니다.
곧 다음 강좌 올리겠습니다.