통합 매뉴얼 22.서브 왼쪽 디자인 코딩하기
2010-10-21 11:37:26

3 서브 왼쪽 디자인 코딩하기

웹디모 커뮤니티에 서브 왼쪽 디자인을 생성해보겠습니다. 커뮤니티의 서브 왼쪽 디자인은 클럽소개, 클럽/뉴스, 정보마당 등 각 메뉴의 하위메뉴를 출력해야하기 때문에 메뉴마다 왼쪽디자인이 필요합니다. 클럽소개의 왼쪽 디자인을 코딩하기 전에 왼쪽 메뉴에 사용할 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.aramschool.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으로 왼쪽메뉴 생성시에 변경해 주어야 합니다.