웹마스터 팁
page_full_width" class="col-xs-12" |cond="$__Context->page_full_width">
노프레임 홈만들기 (3) - 서브 페이지 만들고 제로보드에 적용하기
2003.07.26 22:26
01. main.htm 이 완성되었으니 이 파일을 수정하여 profile.htm 을 만들어 보겠습니다.
프로필 페이지는 중간에 나오는 이미지와 로그인이 들어간 위치에 대신
서브 메뉴가 들어간다는 점만 다릅니다. 먼저 main.htm 을 파일 >다른이름으로 저장하여
profile.htm 으로 저장합니다. 그리고 나서 수정하면 편하답니다.
서브 페이지들은 메인과 구조가 비슷해서 부분적으로만 수정하면 되므로
다른 이름으로 저장한 후 수정하면 나머지 부분들은 이미 만들어져 있기 때문에
링크 등은 수정할 필요가 없고 일부만 수정하면 되므로 시간도 훨씬 적게 걸립니다.
제로보드를 사용하지 않은 일반 페이지는 인쿨루드를 이용할 수도 있지만
전 다른이름으로 저장하고 수정해서 만듭니다. 이게 더 초보분들에게 이해가 쉽구요..
인쿨루드를 이용하는 법은 다른 강좌를 참고하세요..
02. 파란색 이미지를 클릭하고 그림 속성으로 들어가서 01.gif를 02.gif 로 이름을 바꿔줍니다
그러면 파란색 이미지가 노란색 이미지로 바뀌죠. 다른 서브페이지도 이런 식으로 만들면 간단해요
![38.gif](/files/attach/images/19360727/779/365/019/3c14d8bd25e937e52913c5c30a49ff9e.gif)
03. 프로필 페이지는 제로보드를 사용하지 않은 그냥 일반적인 페이지기 때문에
최근게시물이 들어간 표를 지우고 대신 프로필을 써넣으면 됩니다.
마찬가지로 로그인을 지우고 대신 메뉴를 넣고 링크를 만들면 완성입니다
![39.gif](/files/attach/images/19360727/779/365/019/99b983892094b5c6d2fc3736e15da7d1.gif)
04. about 메뉴에는 일반 페이지인 프로필과 제로보드를 이용한 백문백답이 있습니다.
백문백답을 클릭하면 그냥 게시판만 덩그러니 나오게 됩니다.
백문백답을 클릭했을 때도 프로필과 똑같은 페이지처럼 되도록 만들어줘야 합니다.
먼저 profile.htm을 다른이름으로 저장하기 해서 about.htm 으로 일단 저장합니다.
그리고 프로필이 적힌 부분을 삭제하고 대신 제로보드라고 알아보기 쉽게 적습니다.
![40.gif](/files/attach/images/19360727/779/365/019/3302093125098d74bd9c8479382f5a3e.gif)
05. 제로보드의 "드"자 끝에 커서를 위치시킨후 html 소스 보기 하세요.
그리고 그림처럼 제로보드 앞 부분만 복사해서 about_head.htm 이라고 저장합니다.
(단, 계정에 따라 확장자를 php 로 저장해야만 제대로 보이는 곳도 있습니다.)
주의할 것은 나모 5.1 버전 이하에선 그대로 저장하면 절대 안되고 메모장이나 에디트플러스로 저장하세요
왜냐하면 제로보드라는 글자를 기준으로 반씩 저장할 파일은
테이블이 닫히지 않은 불완전한 상태의 소스이기 때문에
나모가 자동으로 태그를 추가해서 소스가 이상해져 버리거든요...
5.1 이상 버전에서는 이 버그가 수정됐다고 하니 그대로 저장하셔도 되고 드림위버에서도 그냥 저장해도 되지만
텍스트 에디터 (에디터 플러스 강추)가 기왕이면 있는게 좋습니다. 스킨 만들 때는 필수거든요
![41.gif](/files/attach/images/19360727/779/365/019/f1d87f13873c07a098fc983888d436c6.gif)
마찬가지로 제로보드 글자 뒤 부분부터 복사해서 about_foot.htm 이라고 저장한 후
ftp 로 자신의 계정에 업로드합니다. 아무곳에나 올려도 되지만 되도록이면
제로보드 폴더와 같은 위치에 올리는게 경로를 쓸 때 편합니다.
06. 그럼 이제 제로보드 관리자 모드로 가서 게시판에 설정을 해줘야 합니다.
연결할 게시판의 기본설정 변경 > setup을 클릭해서 들어가세요
(no_100 이라는 게시판은 제가 강좌 목적으로 임의로 만든 게시판으로
백문백답 게시판의 이름이랍니다. 여러분도 각자 만들어야 하겠죠)
![44.gif](/files/attach/images/19360727/779/365/019/89c6ab15f1c5d9fd1cad2d13bb636ac0.gif)
07. 게시판 상, 하단에 표시될 내용 설정에 다음과 같이 헤더 푸터 파일의 경로를 써주세요
![45.gif](/files/attach/images/19360727/779/365/019/99b983892094b5c6d2fc3736e15da7d1_1.gif)
이때 경로는 상대경로나 절대경로 모두 가능한데 계정 상황에 따라 알아서 쓰셔야 해요
어떤 계정은 상대 경로로만 써야 되는 곳도 있거든요..
근데 경로 쓰는게 어렵다구요? 아까 절대 경로 쉽게 알아보는법 있었죠?
![21.gif](/files/attach/images/19360727/779/365/019/0676596da8720b7571914d3f94034747.gif)
빨간 글씨로 절대 경로가 나오는데 이걸 이용하면 쉽답니다.
desingsurf 까지 복사해서 쓰고 그 뒤부터는 폴더 이름 바꿔 적으면 돼요..
제로보드 폴더의 위치를 참고하여 헤더, 푸터 파일이 들어있는 곳의 경로를 적으세요
제 계정이 이렇거든요... 웹팁과 제로보드 폴더는 같은 위치에 있죠
- webtip - noframe - 헤더, 푸터 파일들이 들어 있어요
- css
- java
- zboard
- image
- counter
모든 게시판에 동일한 파일을 불러온다면 게시판마다 설정하지 마시고
그룹설정으로 들어가 상,하단에 불러올 파일에 경로를 적으면 더 간편하답니다
또 한가지 알려드리자면 헤더, 푸터 파일로 저장해서 경로를 써줘도 되지만
아예 헤더 부분 소스를 복사해서 게시판 상단에 출력할 내용에 붙여넣고
푸터는 게시판 하단에 출력할 내용에 소스를 복사해서 붙여넣어도 됩니다.
하지만 이렇게 하면 나중에 수정하기가 좀 번거로워지겠죠?
08. about 메뉴는 다 만들어졌고 이제 study 서브 메뉴를 만들어 볼께요
about.htm을 다른이름으로 저장하기 해서 study.htm 으로 일단 저장한 후 수정합니다.
앞에서와 마찬가지로 노랑색 이미지의 숫자만 바꾸면 다홍색 이미지로 바뀌겠죠
그리고 프로필과 백문백답을 웹팁, 포토샵으로 바꾸고 링크도 수정한 후에
제로보드라는 글자를 기준으로 위쪽은 study_head.htm, 아래쪽은 study_foot.htm 으로 저장합니다.
그 후에 게시판 설정에서 다음과 같이 경로를 적어주면 끝입니다.
웹팁과 포토샵이라는 게시판을 일단 만든 후에 각각 설정해 주면 됩니다.
![48.gif](/files/attach/images/19360727/779/365/019/a5da40b9e8a41bcd9a1aa0acd57d8c37.gif)
나머지 게시판과 링크 페이지도 이런 식으로 반복해서 만들어주면 간단히 완성 ^^
그리고 간혹 물어보시는 분들이 계셔서 하는 말인데
강좌용으로 만들어진 홈 레이아웃은 얼마든지 수정해서 쓰셔도 됩니다
별로 특이할 것도 없는 레이아웃이니 일일이 허락 안 받으셔도 돼요.
프로필 페이지는 중간에 나오는 이미지와 로그인이 들어간 위치에 대신
서브 메뉴가 들어간다는 점만 다릅니다. 먼저 main.htm 을 파일 >다른이름으로 저장하여
profile.htm 으로 저장합니다. 그리고 나서 수정하면 편하답니다.
서브 페이지들은 메인과 구조가 비슷해서 부분적으로만 수정하면 되므로
다른 이름으로 저장한 후 수정하면 나머지 부분들은 이미 만들어져 있기 때문에
링크 등은 수정할 필요가 없고 일부만 수정하면 되므로 시간도 훨씬 적게 걸립니다.
제로보드를 사용하지 않은 일반 페이지는 인쿨루드를 이용할 수도 있지만
전 다른이름으로 저장하고 수정해서 만듭니다. 이게 더 초보분들에게 이해가 쉽구요..
인쿨루드를 이용하는 법은 다른 강좌를 참고하세요..
02. 파란색 이미지를 클릭하고 그림 속성으로 들어가서 01.gif를 02.gif 로 이름을 바꿔줍니다
그러면 파란색 이미지가 노란색 이미지로 바뀌죠. 다른 서브페이지도 이런 식으로 만들면 간단해요
![38.gif](/files/attach/images/19360727/779/365/019/3c14d8bd25e937e52913c5c30a49ff9e.gif)
03. 프로필 페이지는 제로보드를 사용하지 않은 그냥 일반적인 페이지기 때문에
최근게시물이 들어간 표를 지우고 대신 프로필을 써넣으면 됩니다.
마찬가지로 로그인을 지우고 대신 메뉴를 넣고 링크를 만들면 완성입니다
![39.gif](/files/attach/images/19360727/779/365/019/99b983892094b5c6d2fc3736e15da7d1.gif)
04. about 메뉴에는 일반 페이지인 프로필과 제로보드를 이용한 백문백답이 있습니다.
백문백답을 클릭하면 그냥 게시판만 덩그러니 나오게 됩니다.
백문백답을 클릭했을 때도 프로필과 똑같은 페이지처럼 되도록 만들어줘야 합니다.
먼저 profile.htm을 다른이름으로 저장하기 해서 about.htm 으로 일단 저장합니다.
그리고 프로필이 적힌 부분을 삭제하고 대신 제로보드라고 알아보기 쉽게 적습니다.
![40.gif](/files/attach/images/19360727/779/365/019/3302093125098d74bd9c8479382f5a3e.gif)
05. 제로보드의 "드"자 끝에 커서를 위치시킨후 html 소스 보기 하세요.
그리고 그림처럼 제로보드 앞 부분만 복사해서 about_head.htm 이라고 저장합니다.
(단, 계정에 따라 확장자를 php 로 저장해야만 제대로 보이는 곳도 있습니다.)
주의할 것은 나모 5.1 버전 이하에선 그대로 저장하면 절대 안되고 메모장이나 에디트플러스로 저장하세요
왜냐하면 제로보드라는 글자를 기준으로 반씩 저장할 파일은
테이블이 닫히지 않은 불완전한 상태의 소스이기 때문에
나모가 자동으로 태그를 추가해서 소스가 이상해져 버리거든요...
5.1 이상 버전에서는 이 버그가 수정됐다고 하니 그대로 저장하셔도 되고 드림위버에서도 그냥 저장해도 되지만
텍스트 에디터 (에디터 플러스 강추)가 기왕이면 있는게 좋습니다. 스킨 만들 때는 필수거든요
![41.gif](/files/attach/images/19360727/779/365/019/f1d87f13873c07a098fc983888d436c6.gif)
마찬가지로 제로보드 글자 뒤 부분부터 복사해서 about_foot.htm 이라고 저장한 후
ftp 로 자신의 계정에 업로드합니다. 아무곳에나 올려도 되지만 되도록이면
제로보드 폴더와 같은 위치에 올리는게 경로를 쓸 때 편합니다.
06. 그럼 이제 제로보드 관리자 모드로 가서 게시판에 설정을 해줘야 합니다.
연결할 게시판의 기본설정 변경 > setup을 클릭해서 들어가세요
(no_100 이라는 게시판은 제가 강좌 목적으로 임의로 만든 게시판으로
백문백답 게시판의 이름이랍니다. 여러분도 각자 만들어야 하겠죠)
![44.gif](/files/attach/images/19360727/779/365/019/89c6ab15f1c5d9fd1cad2d13bb636ac0.gif)
07. 게시판 상, 하단에 표시될 내용 설정에 다음과 같이 헤더 푸터 파일의 경로를 써주세요
![45.gif](/files/attach/images/19360727/779/365/019/99b983892094b5c6d2fc3736e15da7d1_1.gif)
이때 경로는 상대경로나 절대경로 모두 가능한데 계정 상황에 따라 알아서 쓰셔야 해요
어떤 계정은 상대 경로로만 써야 되는 곳도 있거든요..
근데 경로 쓰는게 어렵다구요? 아까 절대 경로 쉽게 알아보는법 있었죠?
![21.gif](/files/attach/images/19360727/779/365/019/0676596da8720b7571914d3f94034747.gif)
빨간 글씨로 절대 경로가 나오는데 이걸 이용하면 쉽답니다.
desingsurf 까지 복사해서 쓰고 그 뒤부터는 폴더 이름 바꿔 적으면 돼요..
제로보드 폴더의 위치를 참고하여 헤더, 푸터 파일이 들어있는 곳의 경로를 적으세요
제 계정이 이렇거든요... 웹팁과 제로보드 폴더는 같은 위치에 있죠
- webtip - noframe - 헤더, 푸터 파일들이 들어 있어요
- css
- java
- zboard
- image
- counter
모든 게시판에 동일한 파일을 불러온다면 게시판마다 설정하지 마시고
그룹설정으로 들어가 상,하단에 불러올 파일에 경로를 적으면 더 간편하답니다
또 한가지 알려드리자면 헤더, 푸터 파일로 저장해서 경로를 써줘도 되지만
아예 헤더 부분 소스를 복사해서 게시판 상단에 출력할 내용에 붙여넣고
푸터는 게시판 하단에 출력할 내용에 소스를 복사해서 붙여넣어도 됩니다.
하지만 이렇게 하면 나중에 수정하기가 좀 번거로워지겠죠?
08. about 메뉴는 다 만들어졌고 이제 study 서브 메뉴를 만들어 볼께요
about.htm을 다른이름으로 저장하기 해서 study.htm 으로 일단 저장한 후 수정합니다.
앞에서와 마찬가지로 노랑색 이미지의 숫자만 바꾸면 다홍색 이미지로 바뀌겠죠
그리고 프로필과 백문백답을 웹팁, 포토샵으로 바꾸고 링크도 수정한 후에
제로보드라는 글자를 기준으로 위쪽은 study_head.htm, 아래쪽은 study_foot.htm 으로 저장합니다.
그 후에 게시판 설정에서 다음과 같이 경로를 적어주면 끝입니다.
웹팁과 포토샵이라는 게시판을 일단 만든 후에 각각 설정해 주면 됩니다.
![48.gif](/files/attach/images/19360727/779/365/019/a5da40b9e8a41bcd9a1aa0acd57d8c37.gif)
나머지 게시판과 링크 페이지도 이런 식으로 반복해서 만들어주면 간단히 완성 ^^
그리고 간혹 물어보시는 분들이 계셔서 하는 말인데
강좌용으로 만들어진 홈 레이아웃은 얼마든지 수정해서 쓰셔도 됩니다
별로 특이할 것도 없는 레이아웃이니 일일이 허락 안 받으셔도 돼요.
댓글 27
제목 | 글쓴이 | 날짜 |
---|---|---|
노프레임 홈만들기 (2) - 로그인, 최근게시물 설치
[31]
![]() | @kihwa | 2003.07.26 |
노프레임 홈만들기 (3) - 서브 페이지 만들고 제로보드에 적용하기
[27]
![]() | @kihwa | 2003.07.26 |
이미지2장으로 홈페이지만들기 [5] | Conz | 2003.08.01 |
이미지2장으로 홈페이지만들기 2탄 [3] | Conz | 2003.08.01 |
<TD>에 스크롤바 생성하기!! [12] | millth | 2003.08.04 |
[나모] iframe창에서 다른 iframe창으로 링크걸기, 전체창으로 링크하기 [1] | 김병희 | 2003.08.06 |
홈페이지에 배경 음악 항상 흐르게 하기 (숨김프레임) [5] | 마이템플릿 | 2003.08.13 |
테이블의 세로정렬 [4] | clo | 2003.08.20 |
[re] 벅스뮤직 음악을 페이지의 배경 음악으로 깔기 (간단) [3] | 윤혜성 | 2003.12.26 |
벅스뮤직 음악을 페이지의 배경 음악으로 깔기 (수정 #1)
[31]
![]() | 토끼군 | 2003.08.20 |
스크롤바 왼쪽에 위치하도록 하기(문서 뒤집힘 없음) [6] | 행복한고니 | 2003.08.22 |
[동영상] 테이블태그의 쉽고 확실한 이해와 원프레임 만들기 [30] | 비행소년™ | 2003.08.27 |
노프레임 홈페이지에서 상하좌우에 원하지 않는 간격이 생길때...
[9]
![]() | PHASE | 2003.09.08 |
[동영상] 제로보드의 주요기능들을 적용한 웹사이트 만들기 1-10장 [51] | 비행소년™ | 2003.09.16 |
마우스 커서에 대해서...
[16]
![]() | impre | 2003.09.20 |
해상도에 따라 레이어 위치 바뀌는 것 고정하기 [13] | 김형준 | 2003.10.04 |
IFRAME 삽입 [20] | 박종익 | 2003.10.10 |
링크에 마우스 오버 할때 상태표시줄에 원하는 글 뜨게하기 [6] | siche | 2003.11.26 |
Input AccessKey를 이용한 홈페이지 단축키 사용하기 [8] | Juny. | 2003.12.12 |
스크롤바 색상을 아름답게.
[17]
![]() | 해리포터포에버 | 2003.12.16 |