초보운영 가이드

Local Navigation Bar

Local Search Bar

디자인페이지 수정

  • 페이지 도움말

주요 사용하는 위젯입니다.

    $widget_data) { echo '
  • '.$widget_data['cda_krStr'].'
    • '; } ?>
$data) { $widget_data = $data['manual']?>

  • 위젯 도움말
  • CSS 도움말
  • HTML 도움말

설명

해당 위젯의 HTML 매뉴얼이 등록되지 않았습니다.

Tip 모두펼침

제공되는 팁이 없습니다.

설명

해당 위젯의 CSS 매뉴얼이 등록되지 않았습니다.

Tip 모두펼침

제공되는 팁이 없습니다.

설명

해당 위젯의 매뉴얼이 등록되지 않았습니다.

Tip 모두펼침

제공되는 팁이 없습니다.

설명

 

Tip 모두펼침

제공되는 팁이 없습니다.

설명

■ 디자인 페이지 수정

       - 좌측 하단 스킨트리에서 작업스킨의 디자인 페이지를 선택하여 각 영역별 디자인 페이지를 수정할 수 있습니다.

       - 본문영역 디자인 페이지 수정 시, "기본 레이아웃 설정"에서 해당 페이지에 적용할 상단, 측면, 하단 영역 디자인 파일을 선택하여 저장할 수 있습니다.

       - "기본설정 > 해외상점 > 해외 상점 설정"에서 사용 중인 해외몰이 있는 경우 각 해외몰별 스킨을 수정할 수 있습니다.     

       - 작업스킨은 "디자인 > 디자인 관리 > 디자인 스킨 리스트"에서 변경할 수 있습니다.

       - 각 페이지에 치환코드를 삽입하여 추가 정보를 노출할 수 있습니다.


              

              ① [화면보기] : 수정중인 디자인 페이지의 미리보기 화면이 새탭으로 열립니다.        

              ② 수정중인 디자인 페이지를 삭제 / 복사 / 저장할 수 있습니다.

                  - [디자인 페이지 삭제] : 수정중인 디자인 페이지를 삭제합니다. 

                   └  페이지 삭제 시 복구가 불가능하므로 유의하시기 바랍니다.

                  - [새이름으로 저장] : 수정중인 디자인 페이지를 다른 이름으로 저장합니다.

                  - [디자인 페이지 수정] : 수정된 내용을 저장합니다.

              ③ "기본 레이아웃 설정"에 수정중인 디자인 페이지의 영역이 강조되어 표시되고, 파일명 확인이 가능합니다.



     ▶ 작업스킨 트리
           - "디자인 스킨 리스트"에서 "작업스킨"으로 선택된 디자인 스킨 파일이 호출됩니다.
           - 각 영역별 폴더를 선택하여 등록된 디자인 파일을 수정하거나 등록 및 삭제할 수 있습니다.

              

              ① [새로운 페이지 추가] : 페이지를 추가할 폴더를 선택 후 버튼 클릭 시 이미지 (1-1)과 같이 새로운 페이지를 추가할 수 있는 팝업창이 노출됩니다.

                    - "파일명"은 필수 항목이며, 입력하지 않을 경우 페이지 추가가 불가능합니다.

                    - 파일명은 영어, 숫자, _만 입력이 가능하며 한글, 특수문자 입력이 불가능합니다.   

                    - 입력 후 [중복확인]은 필수입니다.               

               

              ② 스킨 트리 모두 확장/접기 : 스킨 트리 폴더를 모두 확장된 상태 혹은 모두 접힌 상태로 변경할 수 있습니다.(이미지 (2-1) 참고)

               

              ③ [스킨 트리 새로고침] 클릭 시 스킨 트리를 새로고침합니다.
              ④ 스크립트 JS 폴더 : 프로그램 명령어들을 모아둔 폴더입니다.
                    - JS 파일을 변경 또는 삭제 시 해당 명령어를 사용하는 기능이 정상적으로 작동하지 않을 수 있으므로 유의하시기 바랍니다.
              ⑤ CSS 폴더 : CSS 파일을 모아둔 폴더입니다.
                   * CSS : 기존의 HTML은 웹 문서를 다양하게 설계하고 수시로 변경하는데 많은 제약이 따르는데,
                                이를 보완하기 위해 만들어진 것이 스타일 시트이고, 스타일 시트의 표준안이 CSS입니다.
                                폰트 색상이나 크기, 각종 이미지 등 쇼핑몰에서 공통으로 적용되는 항목을 수정할 수 있습니다.
              ⑥ 전체 레이아웃 폴더 : 상단, 측면, 하단, 스크롤 영역의 페이지를 모아둔 폴더입니다.
                    - 상단, 하단, 측면 디자인 폴더를 선택하여 해당 영역에 새로운 디자인 페이지를 추가할 수 있습니다.
                    - "디자인 스킨 레이아웃 설정" 및 "디자인 페이지 수정" 페이지의 "기본 레이아웃 설정"에서 추가된 페이지를 선택하여 변경할 수 있습니다.
              ⑦ 메인, 서브페이지 폴더 : "메인, 인트로, 회원, 마이페이지, 상품, 주문, 게시판" 등 주요 페이지를 모아둔 폴더입니다.
                    - 메인, 서브페이지의 본문 영역에 해당하는 디자인 페이지로, 각 페이지의 상단, 측면, 하단 디자인 변경이 가능합니다.
                    - 상품 리스트와 상품 상세페이지 수정 시 모든 상품 리스트, 상품 상세페이지에 일괄 반영됩니다.
                    - 게시판 폴더에서는 게시판 스킨별 HTML 파일 수정이 가능합니다.
              ⑧ 팝업창 폴더 : 팝업창 종류별 HTML 파일을 수정할 수 있습니다.
 

     ▶ 기본 레이아웃 설정

            - 수정중인 디자인 페이지 각 영역에 설정된 기본 디자인 파일을 수정하거나, 다른 디자인 페이지을 추가하여 적용할 수 있습니다.

            - 상단, 측면, 하단 영역에서 변경할 디자인 페이지를 선택 후, [편집하기]를 클릭하여 디자인을 수정하고 [새이름으로 저장]을 클릭하거나,

              "전체 레이아웃 / (상단, 하단, 측면) 디자인" 폴더 선택 후 [새로운 페이지 추가]를 클릭하여 신규 페이지를 추가할 수 있습니다.

            - 디자인 페이지를 선택 후, [편집하기]를 통해 디자인을 수정하고 [디자인 페이지 저장]을 클릭하면 해당 페이지가 수정됩니다. 


            · outline/_header.html

              : 쇼핑몰 html 본문(body)의 상위 요소인 head 요소를 확인 및 수정할 수 있습니다.

                - head 요소 : html 문서 속성을 정의하는 "메타데이터"와 쇼핑몰에 적용할 스타일시트(CSS), 자바스크립트 등을 연결하거나 직접 입력할 수 있습니다. 


            · 상단영역 "파일명" 

              : "전체 레이아웃 > 상단 디자인" 폴더 내 생성된 디자인 파일을 선택하여 편집할 수 있습니다.

                - "전체 레이아웃 > 상단 디자인" 폴더에 [새로운 페이지 추가]를 클릭하여 새 페이지를 추가하거나,

                  등록되어 있던 상단영역 디자인 파일의 수정페이지에서 [새이름으로 저장]을 클릭하여 기존 디자인 파일을 복사 할 수 있습니다.


            · 측면영역 "파일명"  

              : "전체 레이아웃 > 측면 디자인" 폴더 내 생성된 디자인 파일을 선택하여 편집할 수 있습니다.

                - "전체 레이아웃 > 측면 디자인" 폴더에 [새로운 페이지 추가]를 클릭하여 새 페이지를 추가하거나,

                   등록되어 있던 측면영역 디자인 파일의 수정페이지에서 [새이름으로 저장]을 클릭하여 기존 디자인 파일을 복사 할 수 있습니다.


            ·  본문영역

              : 메인, 서브페이지 폴더 안에 수정할 페이지의  html 선택 시 본문영역을 수정할 수 있습니다.

                - 본문영역 우측 [편집하기] 클릭 시 메인페이지 본문 영역의 디자인 파일 수정페이지로 이동합니다.


            · 하단영역 "파일명"

              : "전체 레이아웃 > 하단 디자인" 폴더 내 생성된 디자인 파일을 선택하여 편집할 수 있습니다.

                - "전체 레이아웃 > 하단 디자인" 폴더에 [새로운 페이지 추가] 를 클릭하여 새 페이지를 추가하거나

                   등록되어 있던 하단영역 디자인 파일의 수정페이지에서 [새이름으로 저장]을 클릭하여 기존 디자인 파일을 복사 할 수 있습니다.


            · outline/_footer.html

              : "하단 레이아웃 _footer.html" 파일을 수정할 수 있습니다.


           


              ① 각 영역별로 변경할 디자인 페이지를 선택한 후 [편집하기]를 클릭하면, 해당 디자인 페이지 수정화면으로 이동합니다.
              ② 본문 영역의 디자인 페이지 수정 시에 각 영역별 디자인페이지를 선택하여 적용할 수 있습니다.
                  - 레이아웃 영역에서 원하는 페이지를 선택한 후 [디자인 페이지 저장]을 클릭하면 쇼핑몰 메인 페이지에 해당 디자인이 적용됩니다.
                   └ 상단영역에 배경이미지가 적용된 디자인 페이지를 신규로 등록하여 메인페이지에 적용한 화면입니다. (이미지 (2-1) 참고)
               

     ▶ 디자인 페이지 설정
            - 수정중인 디자인 페이지의 측면위치와 배경 색상, 이미지 등을 지정할 수 있습니다. 
            - 본문영역 외의 하단, 측면, 스크롤 영역의 디자인 페이지 수정 시에는 "파일설명"만 수정가능합니다.
              (상단영역은 "파일설명" 및 "배경이미지" 설정이 가능합니다.)
 
            · 파일설명
               : 수정중인 디자인 페이지의 "파일설명"이 표시되며, 수정이 가능합니다.
                 - 입력문자에 제한은 없으며, 최대 30자까지 입력가능합니다.
                
            · 측면디자인 영역 위치
               : "측면영역"의 위치를 "본문영역" 왼쪽 또는 오른쪽으로 설정할 수 있습니다.
                 
            · 현재위치
               : 현재 페이지의 경로를 쇼핑몰 페이지 상단에 출력할지 여부를 설정할 수 있습니다.
            

            · 전체 색상
              : 쇼핑몰 페이지의 배경을 설정할 수 있습니다.
                - "전체 배경색상"에 색상 입력 시 쇼핑몰 전체 배경에 해당 색상으로 적용됩니다.
                - "전체 배경이미지"에 이미지 삽입 시 쇼핑몰 전체 배경에 해당 이미지가 적용됩니다.

            · 본문 색상
               : 쇼핑몰 페이지의 본문 영역의 배경을 설정할 수 있습니다.
                - "배경색상"에 색상 입력 시 해당 페이지 배경에 선택한 색상으로 적용됩니다.
                - "배경이미지"에 이미지 삽입 시 해당 페이지 본문 배경에 이미지가 적용됩니다.
             

     ▶ 에디터

              : 각 페이지별 HTML 소스를 편집할 수 있게 만들어진 프로그램입니다. 

                 - 에디터를 통해 배너 삽입, 상품리스트 내 노출항목편집, 게시판 디자인 등을 다양하게 수정할 수 있습니다. 

              

              
               

               ① 현재 수정중인 HTML 소스의 경로와 파일명을 표시됩니다.

               ② 현재 수정중인 HTML 소스의 최근 저장된 내역을 최신순으로 최대 10개까지 확인하여 재수정 및 복구가 가능합니다.

                    - 저장된 내역 선택 후 [저장내용 확인] 클릭 시 해당 내역에 작업된 내용이 노출됩니다. (이미지 (2-1) 참고)

               ③  현재 작업중인 HTML 소스와 원본 및 기존에 작업된 내용을 비교하며 작업할 수 있습니다.

                     - 왼쪽에는 현재 작업 진행중인 소스가 노출되고, 오른쪽에는 비교 대상으로 선택한 소스가 노출됩니다. (이미지 (3-1) 참고)

                     - 소스 내용이 많을 경우엔 속도가 느릴 수 있으므로 사용 시 유의하시기 바랍니다.

  

     ▶ 측면 카테고리 유형 설정

              

               ① "측면 디자인 > 측면 기본타입" 에디터의 15번째줄을 수정 시 카테고리 유형을 수정할 수 있습니다.

                     - 카테고리 레이어형은 다음과 같이 코드 수정을 통해 레이어형으로 변경 가능합니다. (이미지 (1-1) 참고)

                       {=includeWidget("proc/category_side.html", 'type', 'layer')}.

                     - 카테고리 트리형은 다음과 같이 코드 수정을 통해 트리형으로 변경 가능합니다. (이미지 (1-2) 참고)

                       {=includeWidget("proc/category_side.html", 'type', 'tree')}

                     - 메인 페이지와 같이 모든 카테고리를 전체 페이지에 노출시키려면 다음과 같이 코드 수정을 통해 적용 가능합니다. 

                       {=includeWidget("proc/category_side.html", 'type', 'layer', 'menuType','all')}  

                       {=includeWidget("proc/category_side.html", 'type', 'tree', 'menuType','all')} 

                      (해당 치환코드를 반영하지 않을 시 카테고리 페이지에서는 해당 카테고리만 노출되어 다른 카테고리 페이지로 이동이 불가능합니다.)