CMS매뉴얼 22.서브 왼쪽 디자인 코딩하기
2012-02-27 13:40:47

22. 서브 왼쪽 디자인 코딩하기

 커뮤니티에 서브 왼쪽 디자인을 생성해보겠습니다. 커뮤니티의 서브 왼쪽 디자인은 클럽소개, 클럽/뉴스, 정보마당 등 각 메뉴의 하위메뉴를 출력해야하기 때문에 메뉴마다 왼쪽디자인이 필요합니다. 클럽소개의 왼쪽 디자인을 코딩하기 전에 왼쪽 메뉴에 사용할 XML메뉴에 대해 먼저 살펴보도록 하겠습니다.

클럽소개의 왼쪽 디자인입니다.

EMB000011a03cf3 src

왼쪽디자인 그림을 ? XML플래시사용 ? 메인 중앙 디자인을 사용해서 코딩해 보도록 하겠습니다.

(1) 왼쪽 메뉴 XML로 불러오기

아래 이미지의 빨간 네모박스부분은 XML플래시가 적용됩니다.

EMB000011a03cf4 src

? 드림위버에서 왼쪽메뉴 기본 코딩을 하고, XML플래시가 적용되어야 하는 <td>에 아래 소스를 입력합니다.

<div id="lmenuContainer"></div>

<div style="position:absolute;"><input name="textfield" type="hidden" id="tf1" readonly="readonly"></div>

<script src="/img_up/shop_pds/ucomm01/design/swf/ARIAswf.js" type="text/javascript"></script>

<script>

var lmenuSwf = new ARIAswf({

src:"/img_up/shop_pds/ucomm01/design/swf/leftMenu.swf",

width:195,

height:"100%",

name:"lmenu",

menu:"false",

allowScriptAccess:"always"

});

lmenuSwf.setParam({

xml_url:"/xml_center/navi_category.xml.php?category=01000000",

selected:"99,99",

jsFunction:"Flash2JS"

});

lmenuSwf.play("lmenuContainer");

//Flash --> Javascript

function Flash2JS(n){

document.all["tf1"].value = n;

document.all["lmenuContainer"].style.height = n;

}

</script>

위 소스에서src:"/img_up/shop_pds/ucomm01/design/swf/leftMenu.swf", XML플래시의 위치입니다.

xml_url:"/xml_center/navi_category.xml.php?category=01000000",는 불러올 메뉴의 위치입니다. 메뉴 위치는 앞에서 배운 XML네비게이션 플래시적용하기> 네비게이션 마법사로 메뉴 만들기에서 생성되는 것으로 각 왼쪽메뉴를 XML플래시로 적용할 때에는 최상위 메뉴의 코드를 입력하면 됩니다.

EMB000011a03cf5 src

? 웹디모 공식 솔루션 홈페이지(http://www.yestop.co.kr)에서 XML플래시 오픈소스> 네비게이션> 세로로 자동조절되는 XML플래시 네비게이션 오픈소스> 좌측메뉴 style1.zip 를 다운로드 받습니다.

EMB000011a03cf6 src

? 다운로드 받은 파일의 압축을 풀고 leftMenu(flash8).fla파일을 열고, F9를 클릭하여 액션스크립트에서 메뉴의 간격이나, 여백 등을 수정합니다. 본 플래시 파일은 웹디모 커뮤니티 왼쪽메뉴의 원본이므로 수정하지 않고 사용합니다.

tip) 서브메뉴 마우스 오버시 변경되는 이미지를 변경하려면 leftMenu(flash8).fla파일의 Library에서 sub그래픽 심벌의 이미지를 변경하시면 됩니다.

EMB000011a03cf7 src

? 플래시 파일을 저장한 후 [디자인 관리》고급 디자인 관리》웹디자인 FTP]swf폴더에 leftMenu.swf라는 이름으로 업로드 합니다.

(2) 왼쪽 메뉴 코딩하기

[디자인 관리 》고급디자인 》메인 화면 디자인]에서 왼쪽 디자인을 선택합니다.

EMB000011a03cf8 src

? 새로운 디자인을 추가하기 위해서 나만의 디자인의 추가 버튼을 클릭합니다.

? 디자인 제목을 입력합니다. 필자는“1. 클럽 소개”로 입력했습니다.

? 코딩된 html소스를 입력합니다. 왼쪽메뉴 아래의 주요행사와 방문자 통계는“메인 중앙 디자인 코딩하기”의 소스를 복사해서 사용합니다.

tip)드림위버에서 작업한 소스를 솔루션에 삽입할 경우 이미지 경로를 [디자인 관리 》고급디자인 》웹디자인 FTP]에 업로드 한 경로로 수정해야 합니다. 드림위버의 경우 Ctrl+F 단축키 이용하면 동일한 경로를 한꺼번에 변경할 수 있습니다.

? 작업완료 후 저장 버튼을 클릭하면 아래처럼 클럽소개 왼쪽메뉴를 확인할 수 있습니다.

EMB000011a03cf9 src

위와 같은 방법으로 클럽/뉴스, 정보마당, 사진갤러리, 커뮤니티, 알뜰장터의 왼쪽 메뉴를 생성합니다.

여기서 주의할 것은 왼쪽 메뉴를 불러오는 플래시 소스에서 각 메뉴마다 메뉴에 맞는 코드를 입력해 주어야 한다는 것입니다. xml_url:"/xml_center/navi_category.xml.php?category=01000000",01000000은 클럽소개의 코드이고, 클럽/뉴스의 코드는 02000000 정보마당의 코드는 03000000으로 왼쪽메뉴 생성시에 변경해 주어야 합니다