또 한번 강좌 같지 않은;; 강좌를 올립니다+_+

아;; 참고로 저는 드림위버를 한번도 해보지 않았기 때문에
에디트플러스나 메모장을 이용해서 할께염..

이번 강좌는 롤오버, 롤아웃을 이용해 메뉴버튼을 실제로 누르는것 같은 효과를주는 강좌에요

포토샵과 HTML(자바스크립트 약간?)을 이용해 메뉴를 구성하는
방법을 올려드릴께요..(메뉴를 포토샵으로 만드는 과정은 생략하겠습니다;;)

=====================☆☆☆ 중요!! ☆☆☆================================

★ 메뉴 구성을 할때 롤오버, 롤아웃 기능을 쓰고자 할때 특히 신경써야 할점!! ★
(※롤오버, 롤아웃이란? 간단하게 마우스포인터를 메뉴 위에 올렸을때와 땠을때를 말한다.)

첫번째,
똑같은 크기, 똑같은 이미지에 메뉴부분만 바뀐것을 2장 준비해야 한다.(그림참고)
이유는 롤오버 롤아웃이란 메뉴에 마우스를 올렸을때 그 메뉴이미지 부분을 다른 이미지로
변경해주는 효과이기 때문이다.

두번째,
메뉴 이미지 부분 이외의 공백이 있으면 안된다. 그림과 같이 메뉴 부분이외의
공백이 없도록 작업을 해주어야 나중에 수정할때나 적용시킬때 문제가 발생하지 않는다.

세번째,
Slices From Guides 툴을 쓸때 그림처럼 번호를 잘 보면서 이미지를 나누어 주어야 한다.

=====================☆☆☆ 중요!! ☆☆☆================================

=============================== 강좌 시작 ================================
1. 포토샵에서 미리 작업해둔 메뉴 그림을 불러온다. (불러오기 : Ctrl+O 또는
포토샵 백그라운드 마우스 더블클릭)

2. 메뉴바의 View - Show - Guides 또는 Ctrl+; 를 눌러 가이드를 보이게 한 후
가이드를 이용해 그림처럼 이미지 자를 부분을 나누어 준다.

3. Slice(자르기)툴 (단축키:K) 을 클릭한후 Slice From Guides 툴을 이용해 그림처럼
세세한 작업을 해준다.

※포샵7.0의 경우 이미지 레디로 넘어가서 메뉴바의 slice - Slice From Guides를 누르면된다.
※포샵CS3의 경우 좌측 Slice툴을 클릭하면 중간 상단에 Slices From Guides를 클릭하면 된다.

4. Ctrl+Shift+Alt+S 또는 File-Save For Web&...을 클릭하면 그림과 같은 창이 하나 뜨는데

Gif또는 Jpg파일로 저장(Save)을 클릭하면 파일형식및 파일이름을 지정하는 창이 나온다

그림과 같이 HTML and Images를 선택하고 파일이름을 정해준후 저장을 누른다.

5. 저장한 폴더에 가보면 3번에서 Slices From Guides로 작업한 것과 같이 여러개의 그림파일과
1개의 Html파일이 만들어져있다.(그림참조)

6. 저장한 파일들 중에 menu.html을 더블클릭했을때 1번에서 불러온 처음 그림과 같이 보이면 성공!

7. 다시 포토샵으로 돌아와 그림과 같이 첫번째 레이어의 눈을 끄고 4번 부터 5번까지 반복한다.

★저장을 할때 폴더를 하나 만들어서 저장하는것을 추천합니다.
(※ 이미 html 파일은 있기때문에 4번에서 저장할때 파일형식은 Images Only로 하고 파일이름은
4번에서 정해준 파일이름 말고 새로운 이름으로 저장을 한다. (그림참조)

8. 그림과 같이 이미지가 생성 되었죠?

그럼 여기서 필요없는 이미지를 삭제 합니다.(반복되는 부분 삭제)

삭제하고 나면 메뉴 이미지중에서 버튼 부분(home, profile, gallery, portfolio) 4개의 이미지만
남겠죠? - 여기까지가 이미지 및 Html 파일 만들기 부분 끝!

강좌가 너무 길어져서 HTML 부분은 2번째 강좌에서 합니다..