|
|
| DHTML 메뉴 생성기 무료버전 |
메뉴를 만들때 플래쉬 또는 html로 제작을 많이 해보셨을꺼에요. 오늘은 DHTML을 이용한 프리 드롭다운 메뉴 빌더를 소개해드립니다. 저도 우연찬게 찾은거라 아직 응용해서 사용해보진 않았지만 정말 쉽고 빠르게 자바스크립트를 메뉴 파일이 생성 가능합니다. 정식명칭은 DHTML Menu Builder Free Version 입니다. 유용하게 사용해주세요~~ ^^
|
DHTML Menu Builder 설치하기 |
저작권 문제로 직접 홈페이지 들어가셔서 다운 받으셔야합니다. 우선 아래 주소을 클릭해주세요.
http://www.dhtml-menu-builder.com/free-dhtml-menu/getkey.php
상단에 보시면 Please enter your E-MAIL일 보이실꺼에요. 이메일 인증 먼저 해주셔야 사용이 가능합니다. 본인의 이메일을 입력후 입력하신 이메일로 들어가서 메일인증을 해주세요.
메일 인증을 하시면 하단과 같이 성공했다는 화면이 보이십니다. 자..이제 다운 받아 볼까요~~
웹페이지 맨 하단에 보시면 FREE DOWNLOAD 버턴이 보이실꺼에요. 클릭해서 프로그램을 다운 받은후 설치해주세요.
| DHTML Menu Builder 사용방법 |
자 이제 본격으로 메뉴를 만들어볼까요. 사용방법은 그렇게 어렵진 않습니다. 좌측메뉴를 보시면 NEW라는 버턴이 있습니다. 클릭해보세요~
NEW버턴을 누르면 두개의 하위메뉴가 보이실꺼에요. 우선 BLANK는 말그대로 빈메뉴로 새롭게 메뉴를 생성할때 사용하시면 되고 From Template은 내장되어 있는 템블릿 소스를 사용하여 메뉴를 제작할수 있습니다. 지금은 만들어져있는 템블릿을 기준으로 설명드리겠습니다. From Template을 클릭해주세요.
From Template을 누르면 작은 창이 하나 보이실꺼에요. 왼쪽에 파일들이 내장되어 있는 자바스크립트 메뉴들입니다. 세로메뉴 / 가로메뉴 / 텍스트필드 메뉴 /플래쉬 메뉴 등등 50여가지의
무료 템블릿이 내장되어 있습니다. 우선 Navigation 메뉴를 클릭해주세요.
메뉴트리위에 보시면 하위메뉴와 위치를 수정할수 있는 툴바가 있습니다. 툴바의 기능을 설명드려 보겠습니다.
(1) Cut : 메뉴 자르기
(2) Copy : 메뉴 복사
(3) Paste : 메뉴 붙여넣기
(4) Append sub menu item : 서브메뉴 생성 (하위메뉴를 생성할때 사용해주세요.)
(5) Insert separator : 독립메뉴 생성 (하위메뉴가 없는 독립메뉴를 생성할때 사용해주세요.)
(6) Delete : 메뉴삭제
(7) Move up : 메뉴 올리기
(8) Move down : 메뉴 내리기
(9) Preview : 미리보기
(10) Tip : 팁 안보이게 하기
General은 메뉴의 외적인 부분을 수정하는 부분입니다. 살펴볼까요?
(11) Items display : 세로/가로 메뉴를 선택
(12) Items spacing : 메뉴 줄간격 조절
(13) Transparency : 메뉴 투명도 조절
(14) Background : 메뉴의 배경색 또는 이미지를 변경
(15) Border : 메뉴의 외각선 변경
Advanced는 메뉴의 위치와 속도를 조절하는 부분입니다. 살펴볼까요?
(1) Enter a name for the menu : 메뉴 이름 지정
(2) Static : 가운데 / 좌측 / 우측 세가지의 고정된 위치에 정렬
(3) Float : X측 Y측에 원하는 수치로 메뉴의 위치를 조절
(4) Custom : 사용자 지정모드 같은데.. Float랑 별차이가 없는것같습니다.
(5) Method to show sub menu : 서브메뉴가 나타날때 속도을 조절하는 부분입니다.
X축은 좌측으로부터의 거리이고 Y측은 TOP에서의 거리입니다.. 참고하세요~~^^
Special efferct는 메뉴의 그림자와 메뉴가 처음에 떳을때 보여주는 효과를 수정하는 부분입니다.
(1) Drop shawdow : 메뉴에 그림자효과을 넣는 부분입닌다.
(2) Special efferct : 메뉴가 처음 보여질때 다양한 효과을 설정할수 있습니다.
서브 메뉴를 눌러보면 우측의 메뉴가 틀려지실꺼에요. 그부분은 서브메뉴의 이름과 링크을 지정할수 있습니다. 또한 마우스오버일때의 효과도 지정할수 있습니다.
|
DHTML MENU 저장방법 |
이제 메뉴를 만들었으니 저장을 해볼까요.~~ ^^ 좌측에 Publish버턴을 누르시면 두가지 선택화면이 보입니다. Inset code는 html에 바로 입력하는거니 ...우선은 패스하고 아래에 있는 View or copy code를 선택하세요.~
두번째 보여지는 화면은 header에 삽입하는 스크립트 소스입니다. 우선 메모장에 복사해 놓으세요~
body 삽입하여 실제로 메뉴가 보여주게 하는 스크립트 소스입니다. 이것도 우선 복사해놓으세요~
웹에 올리는 리소스 파일입니다. 템블릿에 따라 이미지가 더 추가될수있습니다.
경로를 지정후 다운받아주세요.
Dhtml Menu 프로그램에서의 모든 작업이 끝났습니다. 이제 활용방법을 살펴보겠습니다.~
아래와 같이 작성한후 다운받은 파일 폴더에 test.html라는 이름으로 저장하고 실행해보세요~~
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<!------------- header에 삽입하는 스크립트를 넣습니다.------>
<body>
<!------------- body에 삽입하는 스크립트를 넣습니다.------>
</body>
</html>
아래와 같이 정상적으로 작동한다면 성공입니다.~~~
보통 메뉴인터페이스는 플래쉬로 만드는게 일반적이지만 DHTML로 제작하면 플래쉬보다 용량면에서 우월하여 빠른속도로 페이지를 로딩할수 있습니다. 지금까지 무료 드롭다운 메뉴 빌더에 대해 알아보았습니다.
도움이 되셨다면 덧글 또는 다음뷰 손가락을 꾹 눌러주세요
'IT&COMPUTER > 프로그램' 카테고리의 다른 글
| [ 안드로이드 보안 어플 ] 스마트폰 분실 / 백신 / 폴더락 등 보안 관련 필수어플 (0) | 2012.09.18 |
|---|---|
| [ 컴퓨터 속도향상 프로그램 ] PC속도을 향상시켜주는 8가지 프로그램 (0) | 2012.09.12 |
| [ 동영상 복구 프로그램 ] 손상된 동영상을 수리해주는 프로그램 3종 (0) | 2012.09.10 |
| 간단하게 웹싸이트 또는 어플을 미리 만들어볼수 있는 무료 Mockup 툴 (0) | 2012.08.07 |
| [ 타자연습 프로그램 ] 설치가 필요없는 온라인 영문 타자연습 프로그램 (12) | 2012.07.19 |
