3 서브 왼쪽 디자인 코딩하기 웹디모 커뮤니티에 서브 왼쪽 디자인을 생성해보겠습니다. 커뮤니티의 서브 왼쪽 디자인은 클럽소개, 클럽/뉴스, 정보마당 등 각 메뉴의 하위메뉴를 출력해야하기 때문에 메뉴마다 왼쪽디자인이 필요합니다. 클럽소개의 왼쪽 디자인을 코딩하기 전에 왼쪽 메뉴에 사용할 XML메뉴에 대해 먼저 살펴보도록 하겠습니다. 클럽소개의 왼쪽 디자인입니다.
왼쪽디자인 그림을 ❶ XML플래시사용 ❷ 메인 중앙 디자인을 사용해서 코딩해 보도록 하겠습니다. (1) 왼쪽 메뉴 XML로 불러오기 아래 이미지의 빨간 네모박스부분은 XML플래시가 적용됩니다.
❶ 드림위버에서 왼쪽메뉴 기본 코딩을 하고, XML플래시가 적용되어야 하는 <td>에 아래 소스를 입력합니다.
위 소스에서src:"/img_up/shop_pds/ucomm01/design/swf/leftMenu.swf",는 XML플래시의 위치입니다. xml_url:"/xml_center/navi_category.xml.php?category=01000000",는 불러올 메뉴의 위치입니다. 메뉴 위치는 앞에서 배운 XML네비게이션 플래시적용하기> 네비게이션 마법사로 메뉴 만들기에서 생성되는 것으로 각 왼쪽메뉴를 XML플래시로 적용할 때에는 최상위 메뉴의 코드를 입력하면 됩니다.
❷ 웹디모 공식 솔루션 홈페이지(http://www.aramschool.co.kr)에서 XML플래시 오픈소스> 네비게이션> 세로로 자동조절되는 XML플래시 네비게이션 오픈소스> 좌측메뉴 style1.zip 를 다운로드 받습니다.
❸ 다운로드 받은 파일의 압축을 풀고 leftMenu(flash8).fla파일을 열고, F9를 클릭하여 액션스크립트에서 메뉴의 간격이나, 여백 등을 수정합니다. 본 플래시 파일은 웹디모 커뮤니티 왼쪽메뉴의 원본이므로 수정하지 않고 사용합니다. tip) 서브메뉴 마우스 오버시 변경되는 이미지를 변경하려면 leftMenu(flash8).fla파일의 Library에서 sub그래픽 심벌의 이미지를 변경하시면 됩니다.
❹ 플래시 파일을 저장한 후 [디자인 관리》고급 디자인 관리》웹디자인 FTP]의 swf폴더에 leftMenu.swf라는 이름으로 업로드 합니다. (2) 왼쪽 메뉴 코딩하기 [디자인 관리 》고급디자인 》메인 화면 디자인]에서 왼쪽 디자인을 선택합니다.
❶ 새로운 디자인을 추가하기 위해서 나만의 디자인의 추가 버튼을 클릭합니다. ❷ 디자인 제목을 입력합니다. 필자는“1. 클럽 소개”로 입력했습니다. ❸ 코딩된 html소스를 입력합니다. 왼쪽메뉴 아래의 주요행사와 방문자 통계는“메인 중앙 디자인 코딩하기”의 소스를 복사해서 사용합니다. tip)드림위버에서 작업한 소스를 솔루션에 삽입할 경우 이미지 경로를 [디자인 관리 》고급디자인 》웹디자인 FTP]에 업로드 한 경로로 수정해야 합니다. 드림위버의 경우 Ctrl+F 단축키 이용하면 동일한 경로를 한꺼번에 변경할 수 있습니다. ❹ 작업완료 후 저장 버튼을 클릭하면 아래처럼 클럽소개 왼쪽메뉴를 확인할 수 있습니다.
위와 같은 방법으로 클럽/뉴스, 정보마당, 사진갤러리, 커뮤니티, 알뜰장터의 왼쪽 메뉴를 생성합니다. 여기서 주의할 것은 왼쪽 메뉴를 불러오는 플래시 소스에서 각 메뉴마다 메뉴에 맞는 코드를 입력해 주어야 한다는 것입니다. xml_url:"/xml_center/navi_category.xml.php?category=01000000",의 01000000은 클럽소개의 코드이고, 클럽/뉴스의 코드는 02000000 정보마당의 코드는 03000000으로 왼쪽메뉴 생성시에 변경해 주어야 합니다.
|