웹마스터 팁

01. main.htm 이 완성되었으니 이 파일을 수정하여  profile.htm 을 만들어 보겠습니다.
프로필 페이지는 중간에 나오는 이미지와 로그인이 들어간 위치에 대신
서브 메뉴가 들어간다는 점만 다릅니다. 먼저 main.htm 을 파일 >다른이름으로 저장하여
profile.htm 으로 저장합니다. 그리고 나서 수정하면 편하답니다.

서브 페이지들은 메인과 구조가 비슷해서 부분적으로만 수정하면 되므로
다른 이름으로 저장한 후 수정하면 나머지 부분들은 이미 만들어져 있기 때문에
링크 등은 수정할 필요가 없고 일부만 수정하면 되므로 시간도 훨씬 적게 걸립니다.


제로보드를 사용하지 않은 일반 페이지는 인쿨루드를 이용할 수도 있지만
전 다른이름으로 저장하고 수정해서 만듭니다. 이게 더 초보분들에게 이해가 쉽구요..
인쿨루드를 이용하는 법은 다른 강좌를 참고하세요..




02. 파란색 이미지를 클릭하고 그림 속성으로 들어가서 01.gif를 02.gif 로 이름을 바꿔줍니다
그러면 파란색 이미지가 노란색 이미지로 바뀌죠. 다른 서브페이지도 이런 식으로 만들면 간단해요

38.gif



03. 프로필 페이지는 제로보드를 사용하지 않은 그냥 일반적인 페이지기 때문에
최근게시물이 들어간 표를 지우고 대신 프로필을 써넣으면 됩니다.
마찬가지로 로그인을 지우고 대신 메뉴를 넣고 링크를 만들면 완성입니다

39.gif



04. about 메뉴에는 일반 페이지인 프로필과 제로보드를 이용한 백문백답이 있습니다.
백문백답을 클릭하면 그냥 게시판만 덩그러니 나오게 됩니다.
백문백답을 클릭했을 때도 프로필과 똑같은 페이지처럼 되도록 만들어줘야 합니다.

먼저 profile.htm을 다른이름으로 저장하기 해서 about.htm 으로 일단 저장합니다.
그리고 프로필이 적힌 부분을 삭제하고 대신 제로보드라고 알아보기 쉽게 적습니다.

40.gif



05. 제로보드의 "드"자 끝에 커서를 위치시킨후 html 소스 보기 하세요.
그리고 그림처럼 제로보드 앞 부분만 복사해서 about_head.htm 이라고 저장합니다.
(단, 계정에 따라 확장자를 php 로 저장해야만 제대로 보이는 곳도 있습니다.)

주의할 것은 나모 5.1 버전 이하에선 그대로 저장하면 절대 안되고 메모장이나 에디트플러스로 저장하세요
왜냐하면 제로보드라는 글자를 기준으로 반씩 저장할 파일은
테이블이 닫히지 않은 불완전한 상태의 소스이기 때문에
나모가 자동으로 태그를 추가해서 소스가 이상해져 버리거든요...
5.1 이상 버전에서는 이 버그가 수정됐다고 하니 그대로 저장하셔도 되고 드림위버에서도 그냥 저장해도 되지만
텍스트 에디터 (에디터 플러스 강추)가 기왕이면 있는게 좋습니다. 스킨 만들 때는 필수거든요


41.gif


마찬가지로 제로보드 글자 뒤 부분부터 복사해서 about_foot.htm 이라고 저장한 후
ftp 로 자신의 계정에 업로드합니다. 아무곳에나 올려도 되지만 되도록이면
제로보드 폴더와 같은 위치에 올리는게 경로를 쓸 때 편합니다.



06. 그럼 이제 제로보드 관리자 모드로 가서 게시판에 설정을 해줘야 합니다.
연결할 게시판의 기본설정 변경 > setup을 클릭해서 들어가세요
(no_100 이라는 게시판은 제가 강좌 목적으로 임의로 만든 게시판으로
백문백답 게시판의 이름이랍니다. 여러분도 각자 만들어야 하겠죠)


44.gif



07. 게시판 상, 하단에 표시될 내용 설정에 다음과 같이 헤더 푸터 파일의 경로를 써주세요

45.gif

이때 경로는 상대경로나 절대경로 모두 가능한데 계정 상황에 따라 알아서 쓰셔야 해요
어떤 계정은 상대 경로로만 써야 되는 곳도 있거든요..



근데 경로 쓰는게 어렵다구요? 아까 절대 경로 쉽게 알아보는법 있었죠?

21.gif

빨간 글씨로 절대 경로가 나오는데 이걸 이용하면 쉽답니다.
desingsurf 까지 복사해서 쓰고 그 뒤부터는 폴더 이름 바꿔 적으면 돼요..
제로보드 폴더의 위치를 참고하여 헤더, 푸터 파일이 들어있는 곳의 경로를 적으세요


제 계정이 이렇거든요... 웹팁과 제로보드 폴더는 같은 위치에 있죠

- webtip - noframe - 헤더, 푸터 파일들이 들어 있어요
             - css
             - java

- zboard

- image

- counter



모든 게시판에 동일한 파일을 불러온다면 게시판마다 설정하지 마시고
그룹설정으로 들어가 상,하단에 불러올 파일에 경로를 적으면 더 간편하답니다



또  한가지 알려드리자면 헤더, 푸터 파일로 저장해서 경로를 써줘도 되지만
아예 헤더 부분 소스를 복사해서 게시판 상단에 출력할 내용에 붙여넣고
푸터는 게시판 하단에 출력할 내용에 소스를 복사해서 붙여넣어도 됩니다.
하지만 이렇게 하면 나중에 수정하기가 좀 번거로워지겠죠?




08. about 메뉴는 다 만들어졌고 이제 study 서브 메뉴를 만들어 볼께요
about.htm을 다른이름으로 저장하기 해서 study.htm 으로 일단 저장한 후 수정합니다.

앞에서와 마찬가지로 노랑색 이미지의 숫자만 바꾸면 다홍색 이미지로 바뀌겠죠
그리고 프로필과 백문백답을 웹팁, 포토샵으로 바꾸고 링크도 수정한 후에
제로보드라는 글자를 기준으로 위쪽은 study_head.htm, 아래쪽은 study_foot.htm 으로 저장합니다.

그 후에 게시판 설정에서 다음과 같이 경로를 적어주면 끝입니다.
웹팁과 포토샵이라는 게시판을 일단 만든 후에 각각 설정해 주면 됩니다.

48.gif

나머지 게시판과 링크 페이지도 이런 식으로 반복해서 만들어주면 간단히 완성 ^^




그리고 간혹 물어보시는 분들이 계셔서 하는 말인데
강좌용으로 만들어진 홈 레이아웃은 얼마든지 수정해서 쓰셔도 됩니다
별로 특이할 것도 없는 레이아웃이니 일일이 허락 안 받으셔도 돼요.
제목 글쓴이 날짜
서브 메뉴 나타났다가 사라지게 하는 방법. 그동안의 노가다는 이젠 끝! [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