컨텐츠 바로가기


사용자 가이드 상세

HTML디자인 편집창 알아보기

 


쇼핑몰 관리자에 로그인하여 [디자인 관리 > 디자인 수정하기] 메뉴로 접속합니다.

현재 대표디자인으로 설정되어있는 쇼핑몰 디자인을 수정하려면 아래 버튼을 클릭합니다.

대표디자인의 편집창이 새 창으로 열립니다.

 

 

 

 

HTML디자인 편집창은 아래와 같이 선택영역과 편집영역으로 구성되어 있습니다.

 

 

 

선택 영역은 다음과 같은기능들로 구성되어 있습니다.

 

 

 

 

 

• 쇼핑몰 화면 추가 : 새로운 쇼핑몰 화면을 추가합니다. 추가된 새 화면은 기본적으로 레이아웃(layout.html) 파일을 포함합니다.

 

• 화면명 검색 : 검색어를 입력한 후 엔터를 치면 검색결과가 팝업으로 나타납니다. 수정을 원하는 화면을 선택한 후 ‘선택파일 열기’ 버튼을 클릭하면 해당 화면이 열립니다.



 
 

• 수정중인 파일 :

                   -  디자인 편집으로 위해 화면을 열면, 해당 화면이 탭으로 나열됩니다.

                   -  열린 화면이 여러 개인 경우 왼쪽 오른쪽 화살표를 클릭해 원하는 탭을 찾을 수 있습니다.

                   -  현재 열린 화면 리스트를 보여줍니다.

 

• 저장 : 수정한 화면을 저장합니다. 수정 후 저장하지 않으면 탭에 와 같이 나타납니다.

 

• 새이름 저장 : 선택된 화면을 새로운 이름으로 저장합니다. 저장경로를 선택하고 파일명을 입력하면, 새 파일로 저장됩니다.

 

• 닫기 : 선택된 화면을 닫습니다. ( X 버튼과 동일함)

                                   

 

 

• 미리보기 : 화면을 편집한 후, 저장하기 전에 적용된 화면을 보고 싶으면 미리보기 버튼을 클릭합니다. 일반적으로, 화면 모드가 분할보기나 HTML보기 상태에서 편집한 후에 미리보기 버튼을 클릭하게 됩니다.

 

• 모듈추가 : 현재 편집중인 화면에 새로운 모듈을 추가합니다. 화면모드가 화면보기 상태인 경우에는 모듈추가 버튼이 활성화되지 않습니다.

 

• 최신소스 : 현재 편집중인 화면의 최신소스를 보여줍니다. 소스 내용을 확인한 후 적용 버튼을 눌러 현재 화면에 적용합니다. 최종적으로 저장 버튼을 눌러 저장해야 최신 소스가 반영됩니다.

 

• 히스토리 : 현재 편집중인 화면의 저장 히스토리를 보여줍니다. 원하는 저장 시간을 선택하면, 선택한 시간에 저장한 내용으로 소스를 변경해줍니다. 최종적으로 저장 버튼을 눌러 저장해야 반영됩니다.


                           





화면보기

 

편집하려는 화면을 미리보기 형태로 보면서 수정합니다.

마우스 움직임에 따라 모듈 단위로 영역이 잡히고, 수정을 원하는 영역의 편집 버튼을 눌러 디자인/설정 등을 수정할 수 있습니다.

수정하면 바로바로 수정한 내용으로 미리보기 형태가 변경됩니다.

 

※ 미리보기 형태이므로, 화면에 수정된 내역이 보인다고 해서 저장된 것이 아니므로, 주의하세요.

※ 화면보기 상태에서는 모듈추가 기능은 지원되지 않아 비활성 상태로 나타납니다.


 

 

분할보기

 

편집하려는 화면을 화면보기와 HTML보기 두 가지 상태로 보면서 수정합니다.

상단의 화면보기 영역은 화면보기 기능을 그대로 사용할 수 있고, 하단의 HTML보기 영역은 HTML보기 기능을 그대로 사용할 수 있습니다.

상단의 화면보기 상태에서 편집할 영역을 선택하면 하단의 HTML보기 영역에는 해당소스로 바로 이동하며, 소스가 하이라이트 됩니다.

HTML보기 영역에서 소스를 수정한 후 상단의 미리보기 버튼을 누르면 화면보기 영역에서 수정된 내용이 미리보기 됩니다.

 

 ※ HTML보기 영역에서는 모듈추가 기능이 지원됩니다. 원하는 위치에 커서를 위치한 후 모듈추가 버튼을 눌러 추가하고 싶은 모듈을 선택하세요. (모듈추가 방법은 chapter5 참고)

 

 

 

HTML보기

 

편집하려는 화면을 HTML 소스를 열어 코드를 직접 수정합니다.

HTML을 아는 사용자는 바로 수정할 수 있고, 모듈 코드 어시스트 기능이 지원되므로, 편리하게 수정이 가능합니다.

 

※ 소스를 수정한 후 수정내용을 화면상에서 확인하고 싶으면 ‘화면보기’ 또는 ‘분할보기’ 상태로 이동해야 합니다.

※ HTML보기 상태에서는 모듈추가 기능이 지원됩니다. 원하는 위치에 커서를 위치한 후 모듈추가 버튼을 눌러 추가하고 싶은 모듈을 선택하세요. (모듈추가 방법은 chapter5 참고)


                                                                                         

TOP

목록 게시안함 삭제 수정