CMS매뉴얼 29.쇼핑몰 상단 디자인하기
2012-02-27 13:49:56

29. 쇼핑몰 상단 디자인하기

쇼핑몰 상단 디자인은 서브 상단 디자인을 사용해 만들 수 있습니다. 쇼핑몰 상단 디자인과 서브 상단 디자인에서 같이 사용되는 메뉴는 소스를 복사해서 사용하고 변경되는 부분은 추가하도록 하겠습니다.

(1) 쇼핑몰 상단 디자인 나누기

커뮤니티 쇼핑몰 상단 디자인

EMB000011a03d15 src

“커뮤니티 쇼핑몰 상단 디자인”을 ? XML플래시 ? HTML코딩을 이용하여 코딩하고, 그 외의 부분은 서브 상단 디자인과 동일하므로“서브 상단 디자인”의 소스를 사용합니다.

(2) 쇼핑몰 상단이미지 XML플래시 연동하기

쇼핑몰 상단에 나오는 XML플래시는 메인 중앙 디자인 코딩하기> XML연동하기> 웹디모 공식 XML연동 갤러리 사용설명 - 2와 동일한 방법으로 생성합니다.

EMB000011a03d16 src

? 메인 중앙 디자인 코딩하기> XML연동하기> 웹디모 공식 XML연동 갤러리 사용설명 - 2에서 사용한 소스를 복사합니다.

메인 중앙 디자인 코딩하기> XML연동하기> 웹디모 공식 XML연동 갤러리 사용설명 - 2에서 사용한 소스입니다.

<script>

flash("/img_up/shop_pds/ucomm01/design/swf/visual0.swf",517,220,"","","xml_path=/xml_center/my_xml2.php?xml_code=main");

</script>

? 위의 ?번에서 복사된 소스를 다음과 같이 수정합니다.

<script>

flash("/img_up/shop_pds/ucomm01/design/swf/visual0.swf",517,220,"","","xml_path=/xml_center/my_xml2.php?xml_code=shop_main");

</script>

tip) XML플래시는 플래시에서 저장한 모션이나 액션을 XML파일을 이용해서 불러오기 때문에 불러올 XML파일이 다르면 서로 다른 플래시가 됩니다. 그렇기 때문에 동일한 효과를 나타내는 플래시라면 플래시파일을 따로 생성할 필요 없이 불러올 XML파일을 다르게 생성하면 됩니다.

? [디자인관리 》디자인 마법사 설정 》맞춤 XML 파일생성]의 메뉴 추가 버튼을 클릭하고 XML파일을 생성합니다. 이때 XML고유코드는“shop_main”이라고 입력합니다. (XML파일 생성방법은 메인 중앙 디자인 코딩하기> XML연동하기> 웹디모 공식 XML연동 갤러리 사용설명 - 2를 참고하시기 바랍니다.)

EMB000011a03d17 src

? [디자인관리》고급 디자인 관리》메인 화면 디자인》상단 디자인]의“서브상단의 소스”를 복사하여 쇼핑몰 상단을 추가 생성합니다.

?“쇼핑몰 상단”의 소스 중 XML연동 갤러리 소스 부분을 ?의 소스로 변경하고 수정버튼을 클릭합니다.

EMB000011a03d18 src

? [디자인관리》디자인 마법사 설정》맞춤 XML 파일생성]의“쇼핑몰메인 플래시”의 데이타관리 버튼을 클릭해 쇼핑몰메인 플래시에 사용할 이미지를 저장합니다.

아래는 쇼핑몰 메인 상단에 XML플래시가 적용된 모습입니다.

EMB000011a03d19 src

(3) 쇼핑몰 상단 버튼 코딩하기

이번에는“쇼핑몰 메인 상단“을“변경할 쇼핑몰 메인 상단“으로 수정해 보겠습니다.

쇼핑몰 메인 상단

EMB000011a03d19 src

변경할 쇼핑몰 메인 상단

EMB000011a03d1a src

“쇼핑몰 메인 상단”에서 수정되어야 할 부분은“공지사항”입니다. 지금부터 공지사항의 HTMl소스를“변경할 쇼핑몰 메인 상단”으로 수정해 보도록 하겠습니다.

EMB000011a03d1b src

? “쇼핑몰 상단 디자인“에서 “Menu Service”부분을 드림위버로 코딩합니다. 필자는 상단의 인물은 이미지로 불러오고 이용안내, 1:1 상담 등의 버튼은 간편 디자인으로 생성하기위해 코드명을 입력해 두었습니다. (간편디자인 생성방법은 상단 디자인 코딩하기> 상단 로고- 간편 디자인 만들기를 참고하시기 바랍니다.)

? [디자인관리》고급 디자인 관리》메인 화면 디자인》상단 디자인]의“서브상단의 소스”를 드림위버로 불러옵니다.

EMB000011a03d1c src

EMB000011a03d1d src

? 위의 ?에서 공지사항의 소스를 삭제하고, ?에서 생성한“Menu ServiceHTMl소스를 입력합니다.

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

다음은 쇼핑몰 메인상단이 완성된 화면입니다.

EMB000011a03d1e src