CMS매뉴얼 30.쇼핑몰 왼쪽 디자인하기
2012-02-27 13:51:14

30. 쇼핑몰 왼쪽 디자인하기

커뮤니티 왼쪽 디자인은 메뉴의 서브메뉴를 불러오게 생성했지만, 쇼핑몰 왼쪽 디자인은 상품카테고리가 출력되어야 합니다. 앞에서 생성한“클럽소개 왼쪽디자인”을 이용해서“쇼핑몰 왼쪽 디자인”으로 변경해보도록 하겠습니다.

클럽소개 왼쪽 디자인

EMB000011a03d1f src

쇼핑몰 왼쪽 디자인

EMB000011a03d20 src

“클럽소개 왼쪽디자인“에서 변경되어야할 부분은 메뉴를 불러오는 부분입니다.

EMB000011a03d21 src

“클럽소개 왼쪽디자인”에서“쇼핑몰 왼쪽 디자인”을 만들기 위해 수정되어야 하는 부분은 메뉴를 불러오는 부분입니다. “상품분류 관리 분류 생성”을 통해 “클럽소개 왼쪽디자인”의 메뉴를 쇼핑몰 카테고리로 변경해 보도록 하겠습니다.

(1) 상품분류 관리 분류 생성

쇼핑몰의 카테고리는 [상품 관리》상품분류 관리》상품분류 관리]에 생성된 상품분류명이 출력됩니다.

상품분류는 최상의 분류를 먼저 생성하고 하위분류를 생성해야 합니다. [상품 관리》상품분류 관리》상품분류 관리]에서 최상의 분류생성버튼을 통해 분류를 등록합니다.

EMB000011a03d22 src

최상의 분류 생성을 클릭하면 아래 그림과 같은 상품분류 생성창으로 이동합니다.

EMB000011a03d23 src

? 현재 분류를 연결할 경우 사용할 수 있는 링크입니다. 등록 후 분류번호가 자동 생성됩니다.

? 현재 분류 위치가 상위인 TOP을 표시합니다.

? 분류 명을 입력하는 곳으로 입력된 분류 명은 카테고리를 생성한 위치에 따라 1~4차 메뉴로 나타나게 됩니다.

? 카테고리 메뉴에 롤오버효과를 적용시킬 수 있는 부분으로 마우스를 올렸을 때 다른 이미지가 나타나도록 만들 때 사용합니다. 아래 그림은 카테고리4 메뉴를 OUTER이라는 이미지로 변경한 것입니다. 카테고리를 불러오기 위해서는 메뉴가 표시되는 <td>~</td>부분을 <td>{GROUP_category}</td>으로 변경합니다.

EMB000011a03d24 src

? 카테고리4 글자 왼쪽에 보이는 직사각형의 모양이 카테고리의 기본 아이콘입니다. 아이콘을 변경 하고자 경우에는 찾아보기 버튼을 클릭해 이미지를 지정합니다.

EMB000011a03c74 src

? 현재 분류에 대한 접근 권한을 설정합니다.

? 현재 분류의 상품정렬 방식을 설정합니다.

? 등록 버튼을 클릭하면 설정한 분류가 저장됩니다. 필자는 위 ?~? 을 이용해 카테고리1~카테고리4 까지 생성하였습니다.

(2) 카테고리 그룹 생성하기

지금부터 생성된 카테고리들을 그룹으로 생성하고 적용하는 방법에 대해서 살펴보겠습니다.

EMB000011a03c75 src

? [디자인 관리》고급 디자인 관리》그룹디자인 관리]프로그램 마법사 생성을 클릭합니다.

EMB000011a03c76 src

? [쇼핑몰]카테고리 분류를 선택하고, ?왼쪽메뉴 2단계를 선택합니다.

EMB000011a03d25 src

? 나의 그룹코드 설정에 category를 입력합니다.

? 그룹디자인 제목에 [쇼핑몰]왼쪽메뉴를 입력합니다.

? 카테고리 시작 지점은 최상위를 지정합니다.

? 등록버튼을 클릭하면 아래 그림과 같이 상품분류가 메뉴로 출력됩니다.

EMB000011a03d26 src

(3) 쇼핑몰 왼쪽 생성하기

? [디자인관리》고급 디자인 관리》메인 화면 디자인]의 왼쪽디자인의“1.클럽소개”의 소스를 복사해서“7.쇼핑몰”이라는 이름으로 쇼핑몰 왼쪽 디자인을 추가생성 합니다.

EMB000011a03d27 src

?7.쇼핑몰”디자인에서 “왼쪽 카테고리”부분을 드림위버로 코딩합니다. 필자는 상단과 하단은 이미지로 하고 {GROUP_category1} <td>~</td>에 배경을 삽입하였습니다.

EMB000011a03d28 src

? [디자인관리》고급 디자인 관리》메인 화면 디자인]의 왼쪽디자인의“7.쇼핑몰"을 드림위버로 불러옵니다.

EMB000011a03d1d src

? 위의 ?번 이미지의 왼쪽메뉴 소스를 삭제하고, ?에서 생성한“카테고리"HTMl소스를 입력합니다.

? 드림위버에서 코딩한 HTML소스를 [디자인관리》고급 디자인 관리》메인 화면 디자인]의 왼쪽디자인의“7.쇼핑몰”에 삽입하고 저장합니다.

아래는 쇼핑몰 왼쪽이 완성된 모습입니다.

EMB000011a03d29 src