웹마스터 팁

http://www.nzeo.com/manual/01. 앞에서 표 안에 다시 표를 만들어 넣는게 좋다고 했죠? 로그인도 그렇게 해줍시다.
새 표를 삽입하기 전에 로그인이 들어갈 왼쪽 셀 속성에서 수직 정렬을 위로 해주세요
그래야 세로 길이에 상관없이 로그인이 들어있는 표가 항상 위쪽에 위치하게 됩니다.


16.gif


그림으로 다시 설명할테니 잘 보세요.. 아래 그림은 세 번째 셀을 표현한 거에요
왼쪽에 로그인, 오른쪽에 최근게시물 혹은 게시판이나 내용이 들어가게 됩니다.

그런데 보세요... 로그인이라는 글자가 중간에 있죠?
로그인은 오른쪽 셀 높이에 상관없이 항상 위쪽에 있어야 합니다.
그런데 셀의 기본 속성은 중간 정렬이므로 저렇게 되는겁니다.

81.gif

그래서 아래처럼 로그인이 들어갈 셀의 수직 정렬을 위로 수정해야 합니다.
그 후에 표를 삽입하면 그 표는 항상 셀의 위쪽에 위치하게 됩니다

82.gif


02. 로그인이 들어갈 왼쪽 셀에 너비 100%, 가로 1, 세로 1칸인 표를 만들어 삽입합니다
이 표 안에 로그인을 넣을겁니다.

17.gif

위에서 설명했듯이 아래 그림을 보시면 외부로그인이 항상 셀 위쪽에 위치하죠...

18.gif


03. 로그인이 들어갈 자리에 알아보기 쉽도록 외부로그인이라고 일단 써주세요

12.gif

"인" 자 끝에 커서를 두고 html 보기로 가면 아래와 같겠죠...

19.gif


04. 먼저 html 태그가 시작되기 이전 최상단에 아래 소스를 삽입해 줍니다
최상단에 소스를 삽입해야 로그인이 불완전하게 작동하는 것을 방지할 수 있습니다.
소스는 링크된 제로보드 매뉴얼 페이지에 있으니 복사해서 붙여넣기 하면 돼요...
사이트 꾸미기 >외부로그인과 최근게시물에 기본적인 설명과 함께 소스가 있습니다


79.gif

제로보드가 설치된 url :이부분은 제로보드의 url 을 적으시면 됩니다
url 제일 끝에 / 넣는거 빼먹지 마시구요..

제로보드가 설치된 절대경로 :절대 경로는 관리자 로그인 후에 제일 위쪽 상단의
zeroboard.com 이라고 적힌 이미지를 클릭하면 맨 밑에 아래와 같이 절대경로가 나옵니다
그걸 그대로 복사해서 쓰면 된답니다.

20.gif

21.gif


05. 그다음 외부로그인이라는 글자를 지우고 아래 소스도 복사해서 붙여넣기 하고 수정합니다

78.gif

스킨이름 : 외부로그인 스킨이름을 말합니다.
제로보드 싸이트에서 원하는 스킨을 다운받은 뒤
제로보드 폴더내의 outlogin_skin 폴더에 업로드하면 스킨을 사용할 수 있습니다.
그리고 원하는 스킨 폴더이름을 위 소스에 적어주시면 되는겁니다

그룹번호 : 로그인을 적용할 그룹번호를 적어주세요.
관리자 페이지에서 그룹이름 옆 괄호안의 숫자가 그룹번호입니다.
그룹이 여러개인 홈이 아니라면 그냥 1 이라고 적으면 됩니다.

허용레벨 : 허용레벨은 페이지 관람이 가능한 레벨을 적어주시면 됩니다.
모든 방문자에게 로그인 폼을 보여주려면 10으로 설정하시면 되겠죠


그리고 자신의 계정에 맞게 소스를 아래 예제처럼 고쳐주세요
소스는 꼭 가지런하게 정렬될 필요는 없답니다. ^^;;;
그림에서는 캡쳐를 위해 3줄 소스를 최상단에 삽입하지 않았는데
이렇게 해도 무방하나 에러가 발생할 수도 있으니 왠만하면 최상단에 삽입해주세요..


22.gif


06. 오른쪽 셀에 최근게시물도 가로 3, 세로 3 칸인 표를 만든 후 소스를 삽입해 봅시다.

83.gif

첫 번째 줄과 세 번째 줄은 셀 합치기를 해서 한 줄로 만들고 알아보기 쉽게 글자를 적습니다
그리고 여백 칸의 너비는 다음과 같이 보기 좋을 정도로 좁혀주세요

84.gif


07. html 소스 보기로 가면 이런 모습입니다.

25.gif

공지사항과 게시판이라는 글자를 지우고 아래 소스를 복사해 삽입합니다.

77.gif

갤러리는 아래 소스를 복사해서 삽입합니다. 갤러리만 소스가 다르답니다.
엉뚱한 게시판 소스를 복사해서 넣고 왜 안되냐고 이젠 묻지 말아주세요.. ^^;;

76.gif


08. 자신의 상황에 맞게 수정합니다.

스킨이름 : 최근게시물 스킨의 폴더이름을 적어주세요..
제로보드 사이트에서 최근게시물 스킨을 다운받으신뒤
제로보드 폴더안의 latest_skin 폴더에 업로드하세요
그리고 그 스킨 폴더의 이름을 적어주면 됩니다.

타이틀 : 최근게시물 목록위에 표시될 타이틀을 적습니다.
자유게시판, 질문게시판 이런식으로 적으시면 됩니다.

만약 타이틀을 글자가 아니라 이미지로 나타낼때는
img src=http://designsurf.net/images/freeboard.gif
이런식으로 글자를 지우고 대신 그 부분에 이미지 경로를 적어주시면 됩니다
양쪽에 < >꺽쇠는 생략된겁니다. 태그가 먹혀서리..


게시판이름 : 제로보드 게시판 이름을 적으시면 됩니다..

목록갯수 : 한 게시판당 최근글 목록을 뽑아올 갯수입니다.  

글자제한 : 제한수보다 글의 제목이 길경우 ... 로 표시됩니다.

47.gif


09.공지사항과 게시판, 게시판과 갤러리 사이에 어느 정도 여백이 있어야 보기 좋으므로
줄 사이 사이에 한 줄씩 더 삽입합니다. 처음부터 이런 것을 생각해서 표를 만들면 더 좋겠죠

28.gif


표는 꼭 위와 같은 방법을 만들 필요는 없습니다.
여백은 셀 안쪽 여백을 지정해서 만들 수도 있고 여러 가지 방법이 있습니다.


그리고 셀을 전부 마우스로 드래그해서 선택한후 셀 속성에서 수직 정렬을 위로 해주세요.
이렇게 해야 로그인과 마찬가지로 항상 셀의 위쪽에 위치해서 보기 좋게 정렬됩니다.

30.gif

31.gif


10. 여기까지 하면 메인 페이지가 거의 다 완성되었답니다.
그런데 나모 미리보기로 보면 로그인과 최근게시물은 보이지가 않는답니다.
직접 계정에 올려서 확인한 후에 여백이라든지 기타 잘못된 점은 수정하세요..

32.gif


11. 메뉴에 링크를 걸어줍니다.
중요한 것은 http://로 시작하는 경로로 적어줘야 한다는 겁니다.

34.gif

제로보드 게시판 주소도 마찬가지로 링크해 줍니다

33.gif

12. 그림의 경로도 아래처럼 주소를 몽땅 적어줘야 합니다.

36.gif


이렇게 파일과 이미지 주소를 모두 수정해야 하는 이유는
제로보드 게시판을 한번 들어갔다 나오면 제로보드를 기준으로 경로가 바껴서
이미지가 나오지 않고 파일이 없다고 표시되기 때문입니다.



여기서 제가 그림이나 파일 경로 모두 http:// 로 시작하는 경로로 수정해야 한다고 했지만
꼭 그렇게 할 필요는 없습니다. 더 간단하게 만들고 싶으신 분은 이렇게 하세요
모든 이미지와 파일을 제로보드 폴더 안에 다시 한번 넣어 버리는 겁니다

index.htm, profile.htm 같은 파일은 제로보드 폴더 안에도 업로드 해주시구요
이미지는 제로보드 폴더 안에도 images 라는 폴더가 있으니 거기 다 넣어주세요
물론 이렇게 할려면 이중으로 파일을 올려야 하므로 용량은 좀 더 나가겠네요
그리고 홈을 처음 만들 때 꼭 images 라는 폴더를 만들어서 이미지는 거기 넣어 쓰세요

만약 이미지 폴더 이름이 img 라면 제로보드 폴더 안에도 동일하게 img 라는 폴더를 하나 똑같이 만들고
거기에 이미지를 또 올려주면 됩니다. 핵심은 제로보드 폴더 속에 한 번 더 똑같이 그대로 올리라는 겁니다

만약 그것도 싫다면 이미지 경로를 ../../ 이런 식의 상대경로로 해줘도 됩니다만
초보자 분들은 이렇게 경로를 적는게 사실 좀 어렵긴 합니다.



13. 메뉴에 링크를 걸고 이미지 경로도 모두 수정했으면 main.htm 으로 저장하세요
계정에 따라 php 로 저장해야 되는 곳도 있습니다.


제목 글쓴이 날짜
서브 메뉴 나타났다가 사라지게 하는 방법. 그동안의 노가다는 이젠 끝! [22] file CoolUnit 2004.03.01
그림위에 마우스를 올렸을때 그림저장 버튼 안나타나게 하기... [17] file PHASE 2004.01.19
스크롤바 색상을 아름답게. [17] file 해리포터포에버 2003.12.16
마우스 커서에 대해서... [16] file impre 2003.09.20
노프레임 홈페이지에서 상하좌우에 원하지 않는 간격이 생길때... [9] file PHASE 2003.09.08
벅스뮤직 음악을 페이지의 배경 음악으로 깔기 (수정 #1) [31] file 토끼군 2003.08.20
노프레임 홈만들기 (3) - 서브 페이지 만들고 제로보드에 적용하기 [27] file @kihwa 2003.07.26
노프레임 홈만들기 (2) - 로그인, 최근게시물 설치 [31] file @kihwa 2003.07.26
노프레임 홈만들기 (1) - 표로 레이아웃 만들고 그림 삽입하기 [45] file @kihwa 2003.07.11
쭘's식 홈페이지 만들기 No.5 - (미리보기 포함) [18] file 쭘's 2003.07.07
쭘's식 홈페이지 만들기 No.4 - (미리보기 포함) [26] file 쭘's 2003.06.16
쭘's식 홈페이지 만들기 No.3 - 깔끔 노프레임 (미리보기 포함) [37] file 쭘's 2003.06.07
css3 안쪽과 바깥쪽 그림자 만들기 입니다 file 낮은자 2014.03.06
[펌] HTML5와 CSS3를 사용하여 최신 웹 사이트 구축하기 [6] file 999 2011.01.11
노프레임 홈페이지 만들기 강좌 file H.N커뮤니티 2009.02.28
메뉴에 마우스오버시 레이어서브메뉴창 뜨게하기 (나모웹) file H.N커뮤니티 2009.02.22
css 정리 파일(한글) [3] file 미곰탱 2009.01.22
스크립트 모음 [1] file *이종민* 2008.11.29
계산기 [1] file *이종민* 2008.11.29
바탕화면에 바로가기 만들기 file *이종민* 2008.11.29