스킨 제작 프로젝트 - Step3. 스킨 제작
글수 73

이 팁은 메뉴를 플래시로 바꾼다고 해서 플래시를 배경으로 하고 그위에 메뉴가 자동으로 나타나게 하는 것이 아니라 ,
플래시를 만들때 메뉴를 직접 넣어서 만들어야 합니다.
실력이 미천하여 플래시를 배경으로 하고 그위에 메뉴가 구현되게 하기는 역부족입니다.
먼저 플래시파일을 제작해야겠죠(Flash Mx 나 Swish Max 사용)
제작된 플래시파일을 자신이 선택한 폴더에 업로드합니다.(Ex : /img/flash.swf)
자신이 사용중인 레이아웃 (Ex : xe_official)
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("/img/flash.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("/img/flash.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; 도 자신의 스킨에 맞게 변경하세요.
이상 이렇게 하면 메뉴가 플래시로 바뀝니다.
바꾸기전에 자신의 메뉴가 확립된 상태에서 하는 것이 좋을 것입니다.
아니면 메뉴가 바뀔때마다 플래시메뉴를 편집해야 합니다.
별 것도 아니지만 혹시나 필요한 분이 있을까봐 올려봅니다.
적용된사이트보기
2008.07.25 18:55:38 (*.25.236.188)
아마 플래시의 경로문제 때문에 안 나오시는 분들이 꽤 되실 것 같아서 남깁니다.
<h2><script type="text/javascript">displayMultimedia("/img/flash.swf", "980","100",false);</script></h2>
위의 부분에서 /img/flash.swf 이 부분이 플래시의 경로인데
지금의 경로는 루트폴더(www or public_html)안에 img폴더를 만들어 flash.swf파일을 넣은 것입니다. 그러니까 zbxe가 있는 폴더가 아닙니다.
만약 제로보드를 루트안에 zbxe라는 폴더를 만들어 설치를 했으며 그 zbxe방안에 img폴더를 만들어 flash.swf파일을 넣어 놓은 것이라면 ./img/flash.swf 가 되는 것입니다.
제일 쉬운 방법은 경로전체를 적어주시면 됩니다.
http://주소/zbxe/img/flash.swf 이런식으로 말입니다.
그리고 zbxe가 설치되어 있고 변형 레이아웃이라도 상단메뉴가 존재하는 형태이면
차근차근 설명보시고 이해 좀 하면서 따라 하시면 됩니다.
<h2><script type="text/javascript">displayMultimedia("/img/flash.swf", "980","100",false);</script></h2>
위의 부분에서 /img/flash.swf 이 부분이 플래시의 경로인데
지금의 경로는 루트폴더(www or public_html)안에 img폴더를 만들어 flash.swf파일을 넣은 것입니다. 그러니까 zbxe가 있는 폴더가 아닙니다.
만약 제로보드를 루트안에 zbxe라는 폴더를 만들어 설치를 했으며 그 zbxe방안에 img폴더를 만들어 flash.swf파일을 넣어 놓은 것이라면 ./img/flash.swf 가 되는 것입니다.
제일 쉬운 방법은 경로전체를 적어주시면 됩니다.
http://주소/zbxe/img/flash.swf 이런식으로 말입니다.
그리고 zbxe가 설치되어 있고 변형 레이아웃이라도 상단메뉴가 존재하는 형태이면
차근차근 설명보시고 이해 좀 하면서 따라 하시면 됩니다.






메뉴를 바꿀때마다 다시 제작할 필요가 없게 할 수 있습니다.
메뉴 xml파일은 files/cache/menu/안에 (메뉴의 srl).xml.php라는 이름으로 만들어집니다.