CMS매뉴얼 7.메인 중앙 디자인 코딩하기
2012-02-25 10:43:47

1 메인 중앙 디자인 코딩하기

웹디모 기업에 기본적으로 세팅되어 있는“메인 중앙 디자인 기본 세팅 이미지”를 “메인 중앙 디자인에 사용할 디자인 및 솔루션”으로 변경해 보도록 하겠습니다. 필자는 메인 중앙 디자인에 사용할 디자인 및 솔루션 이미지를 이용해 html코딩하고, 코딩한 소스를 [디자인관리》고급 디자인 관리》메인 화면 디자인] body디자인에서“메인_바디”라는 나만의 디자인에 추가하였습니다.

 

메인 중앙 디자인 기본 셋팅 이미지

EMB000005e01aaf src 

메인 중앙 디자인에 사용할 디자인 및 솔루션

EMB000005e01ab0 src

? XML갤러리 ? 프로그램마법사 ? 간편디자인을 사용하여 코딩해 보도록 하겠습니다.

(1) 웹디모 공식 XML연동 갤러리 사용설명 - 2

예스탑 솔루션 홈페이지(http://www.yestop.co.kr)에서 [웹디모 공식 XML연동 갤러리 사용설명 - 2]를 다운로드 한 후 visual.fla파일을 수정하고 솔루션을 적용하는 방법에 대해서 살펴보겠습니다.

EMB000005e01ab3 src

? 예스탑 솔루션 홈페이지에서 [웹디모 공식 XML연동 갤러리 사용설명 - 2]를 다운로드받은 후 visual.fla파일을 열고 AS_VISUAL레이어의 액션스크립트 소스를 F9를 클릭하여 확인합니다.

EMB000005e01ab4 src

? 소스를 아래와 같이 변경합니다.

? AS_VISUAL레이어의 액션스크립트를 수정하면 다음과 같습니다.

_root.main_size= "592,577";//w, h, 메인사이즈

_root.auto_time = "3";

_root.list_pos= "525,10;//x, y 리스트 위치

위와 같이 AS_VISUAL레이어의 액션스크립트를 수정한 후 저장하고 Ctrl+Enter를 눌러 visual.swf파일을

생성합니다.

? [디자인관리》고급 디자인 관리》웹디자인 FTP]로 이동하여 main폴더를 만들고 visual.swf파일을 업로드 합니다.

? 아래 그림에서 빨강 테두리가 visual.swf파일이 출력되어야 하는 부분입니다. 플래시 파일을 출력하기 위해 솔루션에서 XML파일을 생성해 보도록 하겠습니다.

EMB000005e01ab5 src

? [디자인관리》디자인 마법사 설정》맞춤 XML 파일생성]에서“맞춤형 XML 데이터관리”메뉴 사용여부에 사용함을 체크한 다음 저장합니다.

EMB000005e01ab6 src

? [디자인관리 》디자인 마법사 설정 》맞춤 XML 파일생성]의 메뉴 추가 버튼을 클릭합니다.

EMB000005e01ab7 src

? XML고유 코드에 visual, 제목에 메인 비주얼 이미지, 이미지 파일첨부1 항목 명에 이미지 명, 설명에 이미지 파일첨부 라고 입력한 후 확인버튼을 클릭합니다.

EMB000005e01ab8 src

EMB000005e01ab9 src

? 데이터관리 버튼을 클릭해 이미지를 업로드 합니다.

XML 유형2 URL버튼을 클릭하여 URL주소를 복사합니다.

? [디자인관리 》고급 디자인 관리 》메인 화면 디자인]의 상단디자인에서 웹디모 기업의 상단디자인 소스를 드림위버로 가져와서 삽입될 위치의 <td>~</td>에 플래시 소스를 입력하고 에서 복사된 URL주소를 삽입합니다.

아래는 예스탑 솔루션에 XML플래시를 삽입하는 소스입니다.

<script>

flash('플래시경로',가로사이즈,세로사이즈,'','','xml_path=XML경로');

</script>

EMB000005e01aba src

? [디자인관리》고급 디자인 관리》메인 화면 디자인]의 메인 중앙 디자인에 드림위버에서 수정된 소스를 입력한 후 적용된 화면은 아래와 같습니다. 적용 후에 데이터 관리는 간편 디자인에“맞춤 XML 데이타 관리”에서 쉽게 관리할 수 있습니다.

EMB000005e01abb src