step6.gif

참 오랜만에 템플릿 자료를 올리네요. ㅡ.ㅡ;;;

이번에 템플릿 설치작업을 하면서 막상 제가 만들어 놓은것을 설치해보니 문제가 한두가지 발생을 하더군요.

그나마 제가 만든것이고 그리고 그나마 zbXE에 익숙해 있다보니 문제가 무엇인지 전 찾아서 해결할수 있었지만 다른 회원님들은 좀 힘들었을것 같단 생각에 죄송한 마음이 들더군요.

아무튼 설치작업을 하면서 그러한 버그들과 문제점들을 체크를 해서 다시 파일을올립니다.

2008년 08월 26일 21시 이전에 받으신분들께서는 로그인위젯을 따로 받으셔서 업로드 해주세요.

위젯을 올리면서 로그인위젯을 안올렸더라구요. ㅜ.ㅜ







1. 자료다운로드

가.  [다운로드] jdh_2M.tar  : 메인용 레이아웃 입니다.
나.  [다운로드]  jdh_2S.tar   : 서브용 레이아웃 입니다.
다.  [다운로드] widgets.tar   : 잡다한템플릿에 사용된 위젯들입니다.
라.  [다운로드] images.tar     : 템플릿에 사용된 이미지들
마.  [다운로드] login_info.zip  : 로그인위젯을 안올렸는데요. 위젯폴더에 올려주세요.

tar 파일은 http://jobdahan.net/?document_srl=989212#0 에서 별도의 압축푸는 프로그램을 이용해서 푸시면 됩니다.


2.  자료사용범위

가.  상업적/비상업적 (개인,단체,기업)  사용에 제한이 없습니다.
나.  배너나 카피라이트 기재 하실 필요없습니다. (기분좋으시면 제 사이트 링크나 하나 걸어주심되고..^^)
다.  수정 재배포는 불가합니다.

3. 레이아웃 사용방법

가.  먼저 다운로드 받아서 서버에 자료를 업로드 합니다.
파일 제공 형태가 tar 파일이다 보니 서버에 바로 올리셔서 서버에서 압축을 푸시는 방법을 추천합니다.
서버에서 압축풀땐

tar xvfz jdh_2M.tar  라고 입력하신뒤 엔터 치시면 됩니다.
tar xvfz jdh_2S.tar 라고 입력하신뒤 엔터 치시면 됩니다.

step1.gif

4.  /zbxe/widgets/ 폴더에 위젯 업로드

주의 : 기존에 위젯을 수정해서 사용하시고 계신분들은 기존위젯을 백업받아 두시고 작업하시기 바랍니다.



5.  관리페이지 접속후  레이아웃 생성
step2.gif

가. 헤드스크립트

홈페이지 제작시 <head></head> 사이에 들어가는 내용을 이곳에 넣어 사용할수 있습니다.
기본적으로 아무것도 안넣어도 상관없는 곳입니다.


나. 제목

레이아웃을 구분할수 있는 제목을 적어 줍니다.
자신이 관리하기 편하고 알아보기 쉽게 적어 주는게 좋습니다.


다. 컬러셋

다양한 컬러셋을 셋팅시켜서 동일한 형태에 다양한 컬러스킨을 적용할수가 있습니다.
현재 기본하나만 적용시켜 놓은 상태이며 필요시 추가하여 사용하실수 있습니다.
기존에 배포하던 버전에서 다양한 컬러를 제공하였으나 매번 레이아웃 업데이트에 시간이 너무 많이 걸려
기본컬러셋만 배포합니다.


라. 로고이미지

자신의 홈페이지에 사용될 로고를 등록하시면 됩니다.
현재 사용하실려는 잡다한 2차에 어울리는 로고 사이즈는 180*70 정도 입니다.


마.  홈페이지 URL

자신의 홈페이지 주소를 반드시 적어 주시기 바랍니다.


바. 배경이미지

홈페이지에 사용될 배경이미지를 선택해서 넣어 주세요.
현재 제가 사용하는 배경이미지는 첨부파일에 등록되어 있는 top_bg.png 파일입니다.


사. 배경이미지 반복

등록된 배경이미지를 어떻게 보여줄지 지정하는 설정입니다.
현재 제가 제공하는 템플릿의 경우 상단라인을 배경이미지로 지정해서 사용하고 있는데
 X축반복으로 설정 합니다.

그럼 위top_bg.png 파일이 상단에 가로로 쭈욱 배경이 넣어지게 됩니다. (라인처리가 된것처럼...)


아.  배경색

홈페이지 배경색을 지정할 수 있습니다. (현재 잡다한 템플릿엔 별 필요가 없을듯..힌색이 제일 잘어울림)


자. 상단메뉴 출력 갯수

자신의 홈페이지 메뉴중에서 상단메뉴에 보여줄 갯수를 지정할 수 있습니다.
레이아웃 상단에 메뉴가 나오지않는다면 이곳설정을 한번 확인해 보시기 바랍니다.


차. 메뉴간 추가여백 설정

메뉴와 메뉴 사이의 여백을 지정할 수 있습니다.
상단메뉴 공간에 메뉴가 몇개 없을 경우 전체적으로 우측이 비어 보일수 있는데 그럴경우 메뉴간 여백을 조정해서 맞추시면 됩니다.
반드시 20px 와 같이 px 값까지 함께 적어 주셔야 합니다.


카. 레이아웃 정렬

레이아웃을 좌측정렬과, 중앙정렬 중 선택해서 사용할 수 있습니다.

좌측정렬일경우 좌측 여백이 10px 정도 떨어지게됩니다.
(완전 딱 붙어 있으면 보기가 않좋거든요.^^)


타. 상단메뉴

현재 잡다한2차 레이아웃 상단메뉴에 보여질 메뉴를 지정하는것입니다.
반드시 지정이 되어야만 메뉴가 출력이 됩니다.
레이아웃에 메뉴가 보이지 않을경우 제일 먼저 체크해야 할 곳입니다.


파. 하단메뉴 

하단 주소부분 위에 보여질 메뉴입니다.
이곳은 일반적으로 홈페이지에

고객센터 / 이메일무단수집거부 / 개인정보보호정책 / 회원가입 / 사이트맵

이런식으로 해당 홈페이지에 부가적인 메뉴에 대한 소개가 들어가는 경우가 많습니다.

그럴경우 관리자페이지에서 메뉴관리에서 메뉴를 만드실때 하단메뉴를 별도로 만드신 다음 해당 메뉴를 지정해 주시면 됩니다.


하. 레이아웃일괄적용

현재 1차적으로 메뉴관리에서 메뉴를 만든다음 사이트 메뉴를 구성했다고 가정을 하고
해당 메뉴에 각각의 mid (게시판이나, 페이지모듈값) 값이 연결되어 있고 게시판이나 페이지모듈이 만들어져 있다면 이 옵션을 체크하고 저장을 하면  해당 게시판과 페이지모듈의 모든 레이아웃을 이 레이아웃으로 바꾼다는 이야기 입니다.

예를들어 기존에 기본 zbXE 레이아웃을 사용하고 계시다가 잡다한템플릿 레이아웃으로 변경해서 사용하고자 할경우 2번의 작업만 해주시면 모든 레이아웃 변경이 끝나게 됩니다.

가. jdh_2S (서브페이지용 레이아웃) 을 만들때 "레이아웃 일괄적용" 옵션을 체크해서 저장을 합니다.
나. 사용하고 계시는 홈페이지에 페이지 모듈에 home이란 메뉴를 만들고 "기본" 옵션에 체크를 한다음 레이아웃 설정을 jdh_2M(메인레이아웃)으로 변경해주시면 끝납니다.



6. 레이아웃 수정

가. 레이아웃 수정은 /zbxe/layouts/jdh_2M/layout.html 파일을 수정합니다.

레이아웃을 관리자 로그인웃 "레이아웃편집" 으로 수정을 하시면 위 경로의 layout.html 파일대시 다른 파일을 만들어서 사용하게 됩니다.

그러면 /zbxe/layouts/jdh_2M/layout.html  파일을 수정해 봐도 아무런 변화가 없겠지요.

다시 /zbxe/layouts/jdh_2M/layout.html  이 파일을 사용할려면 "레이아웃편집"에서 초기화를 누르면
/zbxe/layouts/jdh_2M/layout.html  이 파일을 다시 사용하게 됩니다.

중요한것은 "레이아웃편집" 을 통해서 많이 수정한 상태라면 함부로 초기화를 누르시면 안되겠지요.
해당 소스를 복사하여 /zbxe/layouts/jdh_2M/layout.html 소스에 덮어쓰기 하셔야 기존 이용하셨던 내용을 그대로 이용하실수 있습니다.


나. 이미지가 깨져서 나올때

레이아웃 설치를 했는데 화면에 이미지들이 안나올때는 아래 첨부파일중 images.tar 파일이 서버에 업로드 되었는지 확인해 주시기 바랍니다.

step3.gif




다. 레이아웃에 게시판 연결하기

이제 기본적인 레이아웃 셋팅작업은 마친상태이며 홈페이지를 꾸며볼 단계입니다.
초반에 제일 많이 궁금해 하시는 부분중에 하나가 초기레이아웃을 업로드 했는데 화면에 게시판연결이 이상하게 되어 게시글들이 뒤죽박죽으로 나온다고 하시느 분들이 있습니다.

여기서 중요한것은 제가 배포하는 템플릿 (저뿐만 아니라 모든 템플릿들이..) 은 말 그대로 샘플디자인을 미리 만들어 틀(레이아웃)을 약간의 기능과 함께 제공하는것입니다.

이 템플릿을 가지고 자신의 홈페이지에 맞게 수정해서 사용하셔야 합니다.

우선 가장 일반적으로 사용되는 공지사항을 살펴보겠습니다.

/zbxe/layouts/jdh_2M/layout.html  파일을 열어 보시면

<!--공지사항-->
<img width="100%" height="100" src="/common/tpl/images/widget_bg.jpg" class="zbxe_widget_output" style="clear:both;" widget="newest_document" body="" skin="jdh_default" colorset="white" widget_cache="0" title="공지사항" order_target="regdate" order_type="asc" list_count="5" duration_new="" subject_cut_size="18"
mid_list="notice" 
design_top="./images/notice_title.gif"
design_middle="./images/sbox2_middle.gif"
design_bottom="./images/sbox2_bottom.gif"
design_img="" widget_sequence="598403" />

이런소스가 있을것입니다.


여기에서  체크하셔야 하는것이

title="공지사항"    // 어떤게시판의 글을 가져오는지 해당 위젯의 이름을 정해줍니다.

design_top=""  여기에 값이 없으면 텍스트로 제목이 보여지게 되고 텍스트 제목을 좀 이쁘게 이미지로 꾸미고자 한다면 design_top="./images/notice_title.gif"  이와같이 이미지 경로를 적어주시면 됩니다.

당연히 해당경로에 이미지가 올려져 있어야 겠지요.

이미지 꾸밈없이 그냥 텍스트로 사용하고자 한다면

   <!--공지사항-->
<img width="100%" height="100" src="/common/tpl/images/widget_bg.jpg" class="zbxe_widget_output" style="clear:both;" widget="newest_document" body="" skin="jdh_default" colorset="white" widget_cache="0" title="공지사항" order_target="regdate" order_type="asc" list_count="5" duration_new="" subject_cut_size="18"
   mid_list="notice"
   design_top=""
   design_middle=""
   design_bottom=""
   design_img=""
   />

이렇게 design_top, design_middle, design_bottom, design_img 부분을 비워두시면 됩니다.


step4.gif


 일반 텍스트로만 활용할때(좌측)와 이미지로 꾸몄을때(우측)의 차이를 위 그림에서 비교하실수 있겠죠.


다음으로 어떤게시판에서 글을 가져와 보여줄지 정하는것입니다.

mid_list="notice" 라고 되어 있습니다.

이는 관리자페이지에서 게시판을 notice라고 만들어 두었다는 가정하게 이렇게 적은것입니다.
만약 게시판을 notice라고 만들어 두지 않고 news라고 만들어 두었다면 이곳에

mid_list="news"라고 변경해주셔야 합니다. (아주아주 중요한 부분입니다.)


list_count="5" 는 몇개를 보여줄지 정하는것이구요
subject_cut_size="18" 는 글자를 몇글자 보여줄지 정하는것입니다.



다른 옵션들은 차차 사용하시면서 익히시길..^^


공지사항만 예를들었는데 다른 위젯들도 동일하게 변경작업을 해주셔야 겠지요.



그리고 제가 배포한 템플릿  좌측에 보시면 명언한마디라고 되어 있습니다.

이메뉴를 보시고 '자기는 홈페이지에 명언한마디가 필요없는데 왜 있냐고' 여쭤보시는 분이 계십니다.

앞서 말씀드렸다시피 제가 배포하는것은 하나의 샘플형태입니다.

그곳이 필요없다면 삭제를 하시거나 다른 컨텐츠를 넣어서 바꿔 사용을 하셔야 하는것이지요.

이미지가 "명언한마디"로 되어 있는데 이건 어떻게하냐고 물으시는 분도 계십니다.

당연히 그건 포토샵이나 다른 그래픽툴을 이용해 직접 다른 이미지를 제작해서 사용하셔야 합니다.



라. 모듈 레이아웃 지정하기

관리자페이에서 레이아웃을 지정할때 아래 방법을 사용하시기 바랍니다.
이 방법은 초기 레이아웃에 대한 개념이 잘 안잡히신 분들을 위한 설명입니다.
개념을 이해하신분들은 그냥 이해하신대로 하시면됩니다. ^^

a. 관리자페이지에서  페이지모듈로 home이란 메뉴를 만들고 "기본" 옵션을 체크한다음 jdh_2M 레이아웃을 지정합니다.

step5.gif


b. home메뉴를 제외한 다른 게시판이나 페이지모듈을 모두 jdh_2S (서브템플릿레이아웃)을 지정해 줍니다.



이상의 방법으로 잡다한템플릿을 사용하실수 있습니다.

잡다한 2차뿐만 아니라 잡다한 1차나 다른 템플릿 레이아웃도 이런 방법으로 이용하시면 되겠습니다.

그럼 잘 이용하셔서 홈페이지 잘 운영하시길 바라며 궁금하신 사항은 질문코너 를 이용해주시면 감사하겠습니다.

이 게시물을..
잡다한 몽상백서 똑띠입니다.
http://jobdahan.net  
zbXE 동영상 강좌 및 포토샵 강좌, 일러스트 강좌와 함께
쇼핑몰 창업 정보도 함께 공유합니다.