이곳은 zbxe를 사용하면서 홈에 적용된 소스, Tip, 위젯, 모튤, 스킨 및 업뎃 방법에 대하여 설명 및 자료가 있는 게시판입니다. 궁금한 점이나 질문사항,요청사항이 있으시면 댓글에 질문을 남겨 주시길 바랍니다. 손님 나눔실 --> 질문게시판에(비공개) 질문을 남겨 주시면 성의있는 답변을 약속 드립니다^^ 자료 다운로드는 회원가입 하셔야 다운로드 됩니다. *^_^*
글 수 270
e~세상쉼터
지금 보시고 계시는 홈 상단에 플래시 파일 적용을 설명 드립니다.
소스 응용은 http://jcas.co.kr/zbxe/ moon house 님 소스를 응용 했습니다.
1.적용순서
= 스위시나 플래쉬로 자신만의 플래쉬를 만드세요(만드시면서 해당 게시판에 이동 스크립트 명령을 mid값을 주소로 입력)
== 이것은 프로그램을 다룰줄 아시면 스크립트 소스 편집 창에서 메뉴 별 하나씩 정확하게 하셔야 합니다.
2.완료가 되셨으면 해당 프로그램에서 충분히 테스트를 실행해서 오류가 있나 확인을 하세요.(메뉴이동)
= 정확한 이동 주소가 설정이 되었다면 메뉴를 클릭 하시면 해당 페이지가 인터넷이 연결 되어 있으면 열립니다.
= 물론 님의 홈의 메뉴가 100% 정립이 된 상태에서 메뉴 플래시를 만드셔야 합니다.
3. 오류나 수정 부문이 없을 때 작업 된 파일을 본인 계정에 업을 하고 주소화 합니다.
== 예 /files/img/menu.swf 이렇게 됩니다...
== 작업 된 메뉴 플래시를 먼저 홈 자료실에 올려 보십시요(새글쓰기- 첨부 - .swf - 파일을 첨부해서 본문 삽입후
제목을 쓰시고 등록 클릭 하시면 메뉴swf 가 님의 홈 계정에 올라 간 것 입니다.
이 페이지에서 메뉴 플래시의 설정부문을 클릭을 하셔서 한번 더 확인을 하십시요.(필히 확인 하세요)
4.자신이 사용중인 레이아웃 (Ex : xe_official) , (제가 사용중인 레이 아웃은 기본 탑재 레이아웃과 틀립니다.)
= 그러나 xe 지원 레이아웃은 대부분 비슷합니다.
*. layout.html를 에디터기로 엽니다.(아래 소스를 보시고 직접 자신의 레이아웃에 맞게 수정을 하시길 바랍니다)
= 님의 계정을 ftp로 접속 하셔서 위의 파일을 컴으로 다운 받은 후에 컴에 다운 받은 파일을 에디터기로 열어서 편집
시작 할 준비를 합니다.(에디터 편집창을 새창 하나더 엽니다....주소를 편집 하기위함)
= 조금전에 님의 홈 게시판에 올린 메뉴플래시를 찿아 글 수정 버튼 클릭후 html 편집기 클릭 - 에디터 창에서
메뉴플래시의 주소가 보입니다.(주소가 있어야 적용후 메뉴플래시가 보여집니다)
소스는 = 예
<*IMG style="BORDER-RIGHT: #4371b9 2px dotted; BORDER-TOP: #4371b9 2px dotted; DISPLAY: block; BACKGROUND: url(modules/editor/components/multimedia_link/tpl/multimedia_link_component.gif) no-repeat center 50%; BORDER-LEFT: #4371b9 2px dotted; WIDTH: 980px; BORDER-BOTTOM: #4371b9 2px dotted; HEIGHT: 200px" height=200 alt="" src="/zbxe/common/tpl/images/blank.gif" width=980 multimedia_src="files/attach/images/1793/660/019/lee-2008-7.swf" auto_start="false" editor_component="multimedia_link">(적색으로 표기된 부문이 주소가 됩니다.드래그해서 복사 하세요.)
= 다음이 중요
<h2><script type="text/javascript">displayMultimedia("/files/attach/images/1793/660/019/lee-2008-7.swf, "980","100",false);</script></h2>
위 소스에 메뉴 플래시 주소를 입력 하세요(검정색 글씨) 붙혀넣기 하시고 주소를 만드세요(아무것도 없는 편집기 새창에서)
== 여기서 980",100"은 메뉴플래시 가로크기 세로크기 입니다.(크기는 님의 설정대로 하십시요)
= 왜? 재차 강조 이유가 생각이 나실 겁니다.
= <h2><script type="text/javascript">displayMultimedia("/files/attach/images/1793/660/019/lee-2008-7.swf, "980","100",false);</script></h2> 자 주소가 수정 되어 좌측처럼 되어 집니다.
그럼 다음단계
1) layout.html 을 열었던 창에서 아래와 같이 수정을 합니다.
[변경전] - 23줄부터
<div id="bodyWrap">
<div id="header">
<h1><a href="./{$layout_info->index_url}"><!--@if(!$layout_info->logo_image)--><img src="./images/{$layout_info->colorset}/zeroBoardXE.png" alt="ZeroBoard™ XE" class="iePngFix" /><!--@else--><img src="./{$layout_info->logo_image}" alt="logo" border="0" class="iePngFix" /><!--@end--></a></h1>
[변경전] - 36줄부터<div id="header">
<h1><a href="./{$layout_info->index_url}"><!--@if(!$layout_info->logo_image)--><img src="./images/{$layout_info->colorset}/zeroBoardXE.png" alt="ZeroBoard™ XE" class="iePngFix" /><!--@else--><img src="./{$layout_info->logo_image}" alt="logo" border="0" class="iePngFix" /><!--@end--></a></h1>
<!--GNB-->
<ul id="gnb">
<!-- main_menu 1차 시작 -->
<!--@foreach($main_menu->list as $key => $val)--><!--@if($val['link'])-->
<!--@if($val['selected'])-->
{@ $menu_1st = $val }
<!--@end-->
<li <!--@if($val['selected'])-->class="on"<!--@end-->><a href="./{$val["href']}" <!--@if($val['open_window']=='Y')-->onclick="window.open(this.href);return false;"<!--@end-->>{$val['link']}</a></li>
<!--@end--><!--@end-->
<!-- main_menu 1차 끝 -->
</ul>
<!--//GNB-->
<ul id="gnb">
<!-- main_menu 1차 시작 -->
<!--@foreach($main_menu->list as $key => $val)--><!--@if($val['link'])-->
<!--@if($val['selected'])-->
{@ $menu_1st = $val }
<!--@end-->
<li <!--@if($val['selected'])-->class="on"<!--@end-->><a href="./{$val["href']}" <!--@if($val['open_window']=='Y')-->onclick="window.open(this.href);return false;"<!--@end-->>{$val['link']}</a></li>
<!--@end--><!--@end-->
<!-- main_menu 1차 끝 -->
</ul>
<!--//GNB-->
[변경후] - 빨간색 부분 추가 (플래시메뉴 추가하는 소스)
<div id="header">
<h1><a href="./{$layout_info->index_url}"><!--@if(!$layout_info->logo_image)--><img src="./images/{$layout_info->colorset}/zeroBoardXE.png" alt="ZeroBoard™ XE" class="iePngFix" /><!--@else--><img src="./{$layout_info->logo_image}" alt="logo" border="0" class="iePngFix" /><!--@end--></a></h1>
<h2><script type="text/javascript">displayMultimedia("/files/attach/images/1793/660/019/lee-2008-7.swf, "980","100",false);</script></h2>
"980","100", "가로크기", "세로크기", 자신의 스킨에 맞게 변경하세요<h1><a href="./{$layout_info->index_url}"><!--@if(!$layout_info->logo_image)--><img src="./images/{$layout_info->colorset}/zeroBoardXE.png" alt="ZeroBoard™ XE" class="iePngFix" /><!--@else--><img src="./{$layout_info->logo_image}" alt="logo" border="0" class="iePngFix" /><!--@end--></a></h1>
<h2><script type="text/javascript">displayMultimedia("/files/attach/images/1793/660/019/lee-2008-7.swf, "980","100",false);</script></h2>
[변경후] - 녹색 부분 제거 (기존의 메뉴부분 삭제, 다 지우면 왼쪽 2차메뉴 생성이 안됩니다)
<!--GNB-->
<ul id="gnb">
<!-- main_menu 1차 시작 -->
<!--@foreach($main_menu->list as $key => $val)--><!--@if($val['text'])-->
<!--@if($val['selected'])-->
{@ $menu_1st = $val }
<!--@end-->
<!--@end--><!--@end-->
<!-- main_menu 1차 끝 -->
</ul>
<!--//GNB-->
여기까지가 layout.html를 편집하는 부분입니다.<ul id="gnb">
<!-- main_menu 1차 시작 -->
<!--@foreach($main_menu->list as $key => $val)--><!--@if($val['text'])-->
<!--@if($val['selected'])-->
{@ $menu_1st = $val }
<!--@end-->
<!--@end--><!--@end-->
<!-- main_menu 1차 끝 -->
</ul>
<!--//GNB-->
수정 하셨으면 에디터기에서 저장을 합니다.
2. 해당 레이아웃 css를 위에 설명처럼 컴으로 다운로드 하여 에디터기로 엽니다. (Ex : default.css)
15줄
#header h1 { position:absolute; top:32px; left:25px;}
아래에
#header h2 { position:absolute; top:75px; right:0px;}
를 추가해 줍니다.
top:75px; right:0px; 도 자신의 스킨에 맞게 변경하세요.
위에서 설명한 메뉴플래시 가로 * 세로크기이다.
변경 완료 했으면 저장 버튼을 클릭 해서 컴에 저장 하고 에디터기 닫습니다.
- 다음단계
ftp로 홈을 계정을 접속해서 아까 내려받은 파일의 동일한 위치에
방금 전 수정한 파일 두개를 각,각 업로드 합니다.
- 다음단계
관리자페이지 - 레이아웃설정- 레이아웃생성(메뉴플래시 들어간 레이아웃)
- 편집후 미리보기 해 보세요.
== 미리보기시에 메뉴 플래시가 보여지면 성공 하신 것 입니다.
- 다음단계는 지금 편집된 레이아웃을 플래시메뉴 적용 하려던 홈에 레이아웃을 적용 하십시요.
이상 이렇게 하면 메뉴가 플래시로 바뀝니다.
바꾸기전에 자신의 메뉴가 확립된 상태에서 하는 것이 좋을 것입니다.
아니면 메뉴가 바뀔때마다 플래시메뉴를 편집해야 합니다.
별 것도 아니지만 혹시나 필요한 분이 있을까봐 올려봅니다.(일부 글은 moon house 님 글 소스응용)
tip 하나 추가
탑에 플래시 로 나타내기는 위의 설명에서 주소화 하여 동일한 소스 주소로 편집해서 레이아웃 편집창에서 탑이미지 있는곳에
붙혀넣기 하시면 탑플래시도 보여집니다.
단 이 방법은 해당 레이아웃편집창에서 초기화를 클릭 하면 탑플래시가 사라집니다.
그래서 그 것을 방지하기위해 layout.html 파일에 소스화된 주소를 넣어 주면 해결 됩니다.
적용된사이트보기
![[레벨:6]](http://myshelter.kr/zbxe/modules/point/icons/default/6.gif "포인트:3505point (22%), 레벨:6/30"){kind=icon}
현보