이북템플릿 rcpb01 매뉴얼

웹즐 이북템플릿 rcpb01 스크린샷
샘플사이트 접속 관리자 접속 주소

1.[FTP] 폴더 tree

기본경로(FTP접속) www/bizdemo*****/img/

  • bizdemo*****/
    • ├── css/
      • │   ├── floating_menu //플로그인
      • │   ├── ├── cookies-banner.css //하단배너
      • │   ├── lightbox //라이트박스
      • │   ├── ├── jquery.lightbox.css //라이트박스
      • │   ├── bootstrap.css  //부트스트랩
      • │   ├── css-family=Play-400,700.css  //폰트
      • │   ├── edit.css  //추가수정
      • │   ├── elements.css
      • │   ├── font-awesome.css  //아이콘 폰트
      • │   ├── notosanskr.css  //폰트(본고딕)
      • │   ├── preloader.css
      • │   ├── reset.css
      • │   ├── static.css
      • │   ├── style.css  //기본 CSS
    • ├── font/
      • │   ├── 6aez4K2oVqwIvtU2Gw.eot
      • │   ├── fontawesome-webfont.eot
      • │   ├── fontawesome-webfont.eot-
      • │   ├── fontawesome-webfont.svg
      • │   ├── fontawesome-webfont.ttf
      • │   ├── fontawesome-webfont.woff
      • │   ├── fontawesome-webfont.woff2
      • │   ├── NotoSansKR-Bold.otf
      • │   ├── NotoSansKR-Bold.woff
      • │   ├── NotoSansKR-Light.woff
      • │   ├── NotoSansKR-Medium.woff2
      • │   ├── NotoSansKR-Regular.otf
      • │   ├── NotoSansKR-Regular.woff
      • │   ├── NotoSansKR-Regular.woff2
      • │   ├── NotoSansKR-Thin.otf
      • │   ├── NotoSansKR-Thin.woff
      • │   ├── NotoSansKR-Thin.woff2
    • ├── img/ //기본 이미지 폴더
      • │   ├── lightbox
      • │   ├── apple-touch-114x114.png
      • │   ├── apple-touch-144x144.png
      • │   ├── .... 외 다수
    • ├── js/
      • │   ├── floating_menu
      • │   ├── lightbox
      • │   ├── bootstrap.js
      • │   ├── compatibility.js
      • │   ├── .... 외 다수
    • ├── pages/ //이북 콘텐츠 이미지 폴더
      • │   ├── thumbs //썸네일 이미지 폴더
      • │   ├── ├── 1.jpg //썸네일 콘텐츠 이미지
      • │   ├── ├── 2.jpg
      • │   ├── ├── 3.jpg
      • │   ├── ├── 4.jpg
      • │   ├── ├── 5.jpg / 6.jpg / 7.jpg ... 외 다수
      • │   ├── 1.jpg //이북 콘텐츠 이미지
      • │   ├── 2.jpg
      • │   ├── 3.jpg
      • │   ├── 4.jpg
      • │   ├── 5.jpg / 6.jpg / 7.jpg ... 외 다수

2.[템플릿 디자인 관리] 구성 tree

기본경로 : 관리자 > 디자인관리 > 템플릿 디자인 관리

템플릿 주요 구성 tree
  • 하위폴더 확장
  • 하위폴더 숨김
  • 페이지 - 모듈을 조합하여 레이아웃 구성 및 페이지 생성
    • 메인(index.php) - 이북 템플릿 첫페이지
    • 메뉴얼제공 팝업(pop01.php) - 메인 모달 팝업 콘텐츠
  • 모듈 - 모듈'이란 '독립적으로 기능할 수 있는 프로그램의 단위
    • 공통모듈 - 공통적으로 사용되는 모듈
    • 헤더설정 {{$head}} - 브라우저 타이틀 제목 / css , js , font 임포팅 / SEO설정
    • 이북_설정 {{$config}} - 이북 환결설정 모듈
    • 메뉴설정 {{$menu_bar}} - 메뉴 네비게이션 모듈
  • 메인페이지 - 이북 콘텐츠
    • 이북_콘텐츠 {{$ebook_cont}} - 이북 콘텐츠 페이지 수정 / 추가 / 삭제는 이곳에서 진행
  • 플로그인 - 이북이외에 추가기능
    • 하단배너 {{$foot_banner}} - 하단 고객센터 배너 모듈

 

3.[템플릿 디자인 관리] 세부수정

  • 1

    로고

    소스 수정 경로 : 관리자 > 디자인관리 > 템플릿 디자인관리 > 모듈 > 공통모듈 > 메뉴설정

    FTP 경로 : www > bizdemo***** > img > img > logo.png

  • 2

    메뉴(네비게이션)

    소스 수정 경로 : 관리자 > 디자인관리 > 템플릿 디자인관리 > 모듈 > 공통모듈 > 메뉴설정

    아이콘변경 : https://fontawesome.com/v4.7.0/icons/ 링크 사이트에서 변경하고 싶은 아이콘 선택

  • 3

    페이지 선택이동

    소스 수정 경로 : 관리자 > 디자인관리 > 템플릿 디자인관리 > 모듈 > 공통모듈 > 메뉴설정

  • 4

    이북 콘텐츠 페이지

    소스 수정 경로 : 관리자 > 디자인관리 > 템플릿 디자인관리 > 모듈 > 메인페이지 > 이북_콘텐츠

    FTP 경로 : www > bizdemo***** > img > pages > 1.jpg , 2.jpg , 3.jpg .......

    FTP 경로 : www > bizdemo***** > img > pages > thumbs > 1.jpg , 2.jpg , 3.jpg ....... (썸네일 이미지)

     

    이북 콘텐츠 페이지 추가 / 삭제 / 수정 방법

     

    1단계

    소스 수정 경로 : 관리자 > 디자인관리 > 템플릿 디자인관리 > 모듈 > 메인페이지 > 이북_콘텐츠

    수정하고자 하는 페이지 수만큼 페이지 링크 설정

    2단계

    소스 수정 경로 : 관리자 > 디자인관리 > 템플릿 디자인관리 > 모듈 > 메인페이지 > 이북_콘텐츠

    수정하고자 하는 페이지 수만큼 콘텐츠 페이지 추가 / 기존거 복사 후 숫자만 변경.

    3단계

    소스 수정 경로 : 관리자 > 디자인관리 > 템플릿 디자인관리 > 모듈 > 메인페이지 > 이북_콘텐츠

    수정하고자 하는 썸네일 수만큼 이미지 추가 / 기존거 복사 후 숫자만 변경하면 됩니다.

    4단계

    수정하고자 하는 이미지 추가 FTP에 업로드.

    FTP 경로 : www > bizdemo***** > img > pages > 1.jpg , 2.jpg , 3.jpg .......

    FTP 경로 : www > bizdemo***** > img > img > thumbs > 1.jpg , 2.jpg , 3.jpg ....... (썸네일 이미지)

  • 5

    페이지 좌/우 넘김 화살표

    소스 수정 경로 : 관리자 > 디자인관리 > 템플릿 디자인관리 > 모듈 > 메인페이지 > 이북_콘텐츠

    FTP 경로 : www > bizdemo***** > img > img > arrow-navpage.png

  • 6

    하단배너

    소스 수정 경로 : 관리자 > 디자인관리 > 템플릿 디자인관리 > 모듈 > 플로그인 > 하단배너

    FTP 경로 : www > bizdemo***** > img > img > wman_call.png

    하단배너 해재(사용안함) 방법

    소스 수정 경로 : 관리자 > 디자인관리 > 템플릿 디자인관리 > 페이지 > 메인 > 전체 모듈리스트 > 하단배너

    아래 모듈리스트에서 하단배너 모듈 ({{$foot_banner}}) 해제 후 저장

    하단배너 기본 / 최소화 노출 모드

    소스 수정 경로 : 관리자 > 디자인관리 > 템플릿 디자인관리 > 모듈 > 플로그인 > 하단배너

    copy 
    
<!-- 하단배너 기본 노출 소스 -->
<input id="open-item" name="cookies-banner" checked="checked" type="radio">
<input id="open-item" name="cookies-banner" type="radio">

<!-- 하단배너 최소화 노출 소스 -->
<input id="open-item" name="cookies-banner" type="radio">
<input id="open-item" name="cookies-banner" checked="checked" type="radio">
  • 7

    HOME 버튼

    소스 수정 경로 : 관리자 > 디자인관리 > 템플릿 디자인관리 > 모듈 > 메인페이지 > 이북_콘텐츠

    HOME 이동 사용 및 특정 페이지로 / 사이트로 변경 가능

  • 8

    배경 이미지

    배경이미지(bg.jpg) FTP에 해당경로에 덮어씌우기.

    FTP 경로 : www > bizdemo***** > img > img > bg.jpg

  • 8

    이북 옵션설정

    이북 페이지 환경설정

    소스 수정 경로 : 관리자 > 디자인관리 > 템플릿 디자인관리 > 모듈 > 공통모듈 > 이북_설정

 

4.라이트박스 - LightBox

팝업이 뜨는 동시에 백그라운드 화면이 어두워지거나 밝아지는데, 이를 '라이트 박스'라고 부릅니다.

  • 1

    공지 모달 팝업

    소스 수정 경로 : 관리자 > 디자인관리 > 템플릿 디자인관리 > 모듈 > 공통모듈 > 공지_모달팝업

    소스 수정 경로 : 관리자 > 디자인관리 > 템플릿 디자인관리 > 페이지 > 메뉴얼제공 팝업

    FTP 경로 : www > bizdemo***** > img > img > notic_pop.jpg

    공지 모달 팝업 해재(사용안함) 방법

    소스 수정 경로 : 관리자 > 디자인관리 > 템플릿 디자인관리 > 페이지 > 메인 > 전체 모듈리스트 > 공지_모달팝업

    아래 모듈리스트에서 공지_모달팝업 모듈 {{$notic_popup}} 해제 후 저장