자!.. 메뉴 구성하기 2번째 강좌 입니다...
여기서부턴 Html 부분이기 때문에 소스를 가지고 수정을 하죠 ㅎㅎㅎ
수정할 프로그램은 메모장, 에디트플러스, 드림위버 아무거나
사용해도 되요.. 드림위버 사용시 코딩 페이지에서 작업하면 됩니다.
포토샵으로 생성한 Html 파일을 열면 다음과 같이 코딩이 되어 있겠죠?
<html>
<head>
<title>Untitled-4</title>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- ImageReady Slices (Untitled-4) -->
<table id="Table_01" width="185" height="368" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="3">
<img src="menu_01.gif" width="185" height="34" alt=""></td>
</tr>
<tr>
<td rowspan="9">
<img src="menu_02.gif" width="12" height="303" alt=""></td>
<td>
<img src="menu_03.gif" width="158" height="101" alt=""></td>
<td rowspan="9">
<img src="menu_04.gif" width="15" height="303" alt=""></td>
</tr>
<tr>
<td>
<img src="menu_05.gif" width="158" height="59" alt=""></td>
</tr>
<tr>
<td>
<img src="menu_06.gif" width="158" height="34" alt=""></td>
</tr>
<tr>
<td>
<img src="menu_07.gif" width="158" height="5" alt=""></td>
</tr>
<tr>
<td>
<img src="menu_08.gif" width="158" height="32" alt=""></td>
</tr>
<tr>
<td>
<img src="menu_09.gif" width="158" height="4" alt=""></td>
</tr>
<tr>
<td>
<img src="menu_10.gif" width="158" height="32" alt=""></td>
</tr>
<tr>
<td>
<img src="menu_11.gif" width="158" height="4" alt=""></td>
</tr>
<tr>
<td>
<img src="menu_12.gif" width="158" height="32" alt=""></td>
</tr>
<tr>
<td colspan="3">
<img src="menu_13.gif" width="185" height="31" alt=""></td>
</tr>
</table>
<!-- End ImageReady Slices -->
</body>
</html>
이것과 비슷하게 보이시죠?
대충 보면 <table>, <tr>, <td> 부분이 있는것을 보니 테이블로 짜여있다는 것을 알수 있어요
그리고 <img src> 이부분을 보시면 아까 잘라서 저장한 그림 파일들의 파일명이 쭉~ 적혀있죠?
여기서 중요한점!
자신이 만든 그림 파일들 中 버튼 이미지의 파일명을 알아둬야 작업하기가 편합니다.
여기선, ( menu_6.jpg, menu_8.jpg, menu_10.jpg, menu_12.jpg ) 이렇게 4개의 파일명이 있습니다.
메뉴에 (롤오버, 롤아웃 효과 _이하 롤오버)를 주기 위해선 자바스크립트 라는 언어를 사용해야 하는데요
저도 잘 몰라요; ㅎㅎ 대충 알기로는 Html코드로 이루어진 정적인 홈페이지를 자바스크립트언어를 통해
좀더 다이나믹하고 동적인 홈페이지로 만들수 있게 도와주는 언어라고 들었는데;; 잘모르겠구요.(자세한건 네이버에..)
아무튼.. 롤오버를 적용시키는 건 한번만 해보면 누구나 할수 있을정도로 간단해요..(자바코드만 넣어주면됨..)
위의 소스에서 <head>와</head>가 보이죠? 이 테그 사이에 아래의 자바스크립트를 붙여넣기 하세염....
<scRIPT LANGUAGE="Javascript">
<!--
function bt(id,after) {
eval(id+'.filters.blendTrans.stop();');
eval(id+'.filters.blendTrans.Apply();');
eval(id+'.src="'+after+'";');
eval(id+'.filters.blendTrans.Play();');
}
//-->
</scRIPT>
저도 아직 자바스크립트를 안배웠기 때문에 설명은 못해드리겠구요;; 대충 영어만 보면 blendtTrans가
대충 투명 불투명 이런거 효과내는 필터겠죠??;;
위 스크립트를 붙여넣기 했으면 다음으로
각메뉴이미지가 있는 곳 (menu_6.jpg, menu_8.jpg, menu_10.jpg, menu_12.jpg)
<tr>
<td>
<img src="menu_06.gif" width="158" height="34" alt=""></td>
</tr>
이부분을,
<tr>
<TD>
<a href="http://blog.naver.com/stepersjmj" target="_blank" onMouseOver='bt("menu1","over/menu_over_06.gif")' onMouseOut='bt("menu1","menu_06.gif")' onfocus="this.blur()"><img ID=menu1 src="menu_06.gif" border=0 style="filter:blendTrans(duration=0.5)"></a>
</TD>
</tr>
이렇게 수정해 줍니다.
대충 살펴보면..
<a href="http://blog.naver.com/stepersjmj" 이부분은 메뉴를 클릭했을때 이동하는 페이지 URL입니다.
onMouseOver='bt("menu1","over/menu_over_06.gif")' 이부분은 메뉴에 마우스를 올려놓았을때 보여주는 다른메뉴입니다.
onMouseOut='bt("menu1","menu_06.gif")' 마우스를 메뉴 밖의 영역으로 가져갔을때 보여주는 이미지파일(원래메뉴)..
onfocus="this.blur()" 블러효과를 준다.
style="filter:blendTrans(duration=0.5)" blendTrans 필터 효과 duration=0.5 지속시간은 0.5초?
이렇게 되어있습니다..
각 메뉴이미지가 있는 부분들을 아래와 같이 코딩해줍니다
<TD>
<a href="http://blog.naver.com/stepersjmj" target="_blank" onMouseOver='bt("menu1","over/menu_over_06.gif")' onMouseOut='bt("menu1","menu_06.gif")' onfocus="this.blur()"><img ID=menu1 src="menu_06.gif" border=0 style="filter:blendTrans(duration=0.5)"></a>
</TD>
<TD>
<a href="http://blog.naver.com/stepersjmj" target="_self" onMouseOver='bt("menu2","over/menu_over_08.gif")' onMouseOut='bt("menu2","menu_08.gif")' onfocus="this.blur()"><img ID=menu1 src="menu_08.gif" border=0 style="filter:blendTrans(duration=0.5)"></a>
</TD>
<TD>
<a href="http://blog.naver.com/stepersjmj" target="_blank" onMouseOver='bt("menu3","over/menu_over_10.gif")' onMouseOut='bt("menu3","menu_10.gif")' onfocus="this.blur()"><img ID=menu1 src="menu_10.gif" border=0 style="filter:blendTrans(duration=0.5)"></a>
</TD>
<TD>
<a href="http://blog.naver.com/stepersjmj" target="_blank" onMouseOver='bt("menu4","over/menu_over_12.gif")' onMouseOut='bt("menu4","menu_12.gif")' onfocus="this.blur()"><img ID=menu1 src="menu_12.gif" border=0 style="filter:blendTrans(duration=0.5)"></a>
</TD>
이렇게 해주시면 됩니다.
노란색으로 표시된 부분은 순서대로 번호를 메겨 주시면 되구요..
빨강색으로 표시된 부분은 이미지 경로를 넣어주시면 되요.. 그냥 menu_06.jpg는 마우스 땠을때의 이미지구요 menu_over_06.jpg는 마우스 오버했을때 나타다는 이미지 입니다..
파랑색으로 표시된 부분은 클릭했을때 이동하는 페이지의 주소를 넣어주면 되요
완성된 코딩은 다음과 같습니다.
<html>
<head>
<title>Good Design</title>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
<scRIPT LANGUAGE="Javascript">
<!--
function bt(id,after) {
eval(id+'.filters.blendTrans.stop();');
eval(id+'.filters.blendTrans.Apply();');
eval(id+'.src="'+after+'";');
eval(id+'.filters.blendTrans.Play();');
}
//-->
</scRIPT>
<style type="text/css">
<!--
IMG {border: none;}
-->
</style>
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- ImageReady Slices (?.psd) -->
<table id="Table_01" width="185" height="368" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="3">
<img src="menu_01.gif" width="185" height="35" alt=""></td>
</tr>
<tr>
<td rowspan="9">
<img src="menu_02.gif" width="9" height="303" alt=""></td>
<td width="163" height="101" background="menu_03.gif">
<img src="movie.gif" width="163" height="101" alt=""></td>
<td rowspan="9">
<img src="menu_04.gif" width="13" height="303" alt=""></td>
</tr>
<tr>
<td>
<img src="menu_05.gif" width="163" height="60" alt=""></td>
</tr>
<tr>
<TD><a href="http://blog.naver.com/stepersjmj" target="_blank" onMouseOver='bt("menu1","over/menu_over_06.gif")' onMouseOut='bt("menu1","menu_06.gif")' onfocus="this.blur()"><img ID=menu1 src="menu_06.gif" border=0 style="filter:blendTrans(duration=0.5)"></a></TD>
</tr>
<tr>
<td>
<img src="menu_07.gif" width="163" height="7" alt=""></td>
</tr>
<tr>
<TD><a href="#" onMouseOver='bt("menu2","over/menu_over_08.gif")' onMouseOut='bt("menu2","menu_08.gif")' onfocus="this.blur()"><img ID=menu2 src="menu_08.gif" border=0 style="filter:blendTrans(duration=0.5)"></a></TD>
</tr>
<tr>
<td>
<img src="menu_09.gif" width="163" height="5" alt=""></td>
</tr>
<tr>
<TD><a href="#" onMouseOver='bt("menu3","over/menu_over_10.gif")' onMouseOut='bt("menu3","menu_10.gif")' onfocus="this.blur()"><img ID=menu3 src="menu_10.gif" border=0 style="filter:blendTrans(duration=0.5)"></a></TD>
</tr>
<tr>
<td>
<img src="menu_11.gif" width="163" height="4" alt=""></td>
</tr>
<tr>
<TD><a href="#" onMouseOver='bt("menu4","over/menu_over_12.gif")' onMouseOut='bt("menu4","menu_12.gif")' onfocus="this.blur()"><img ID=menu4 src="menu_12.gif" border=0 style="filter:blendTrans(duration=0.5)"></a></TD>
</tr>
<tr>
<td>
<img src="menu_13.gif" width="9" height="30" alt=""></td>
<td>
<img src="menu_14.gif" width="163" height="30" alt=""></td>
<td>
<img src="menu_15.gif" width="13" height="30" alt=""></td>
</tr>
</table>
<!-- End ImageReady Slices -->
</body>
</html>
끝났습니다*^^* 고생하셨어욤.. 질문이나 막힌부분있으면 말씀해주세욤..(별도움은 안되겠지만;;)
완전 오래 걸리네 ㅠ.,ㅜ
※ 참고로 저도 자바스크립트를 배워본적이 없습니다.. 네이버 같은데서 질문하면서 소스 있으면 퍼다 쓰는거죠;;
소스를 퍼다 수정해서 써보면 적용이 안되거나 오류가 나는 경우가 굉장히 많죠;; 그럴때 이것저것 수정해보면서
조금씩 조금씩 어떤방법이 쉬운지.. 알게 되죠..
방금 강좌한것 처럼 마우스 롤오버, 롤아웃 하게 해주는 소스는 이방법 말고도 무지 많습니다;; 하지만 제가
지금까지 써본 소스 중에는 위 방법이 가장 편하고 이해하기도 쉽더군요ㅎㅎ
아래의 완성본을 보면 위쪽에 움직이는 사진이 들어가 있죠? 이부분의 위치가 menu_03.jpg의 위치 입니다.
이 이미지와 똑같은 크기로 포토샵,이미지레디 또는 플래시를 이용해 움직이는 애니메이션을 만들어 menu_03.jpg 위치에
넣어주면 되요^^
암튼 많이 해보면 실력은 부쩍부쩍 늘겠죠.. 그럼 좋은주말 보내세요^^
완성본보기 <- 링크페이지..( 새창에 떠요 )
조회 : 380
