2.2.21. 핫스팟 도구

2.2.21. 핫스팟 도구 그림의 일부 영역을 지정하여 링크를 합니다.

[연습] 핫스팟 도구를 이용한 링크하기 본격적인 실습은 제 3장으로 미루고 일단 여기서는 개념 파악 정도에서 그치도록 하겠습니다. 3가지 핫스팟 도구를 모두 활용해보겠습니다.   이 그림은 바탕의 그림 위에 아래쪽에는 사각형 핫스팟 도구를 활용할 수 있는 두 개의 버튼과 오른쪽 위에는 원형 핫스팟 도구를 활용할 수 있는 동그란 버튼을 만들어 두었습니다. 바탕의 그림은 다각형 핫스팟 도구를 활용해보겠습니다. 링크는 에셋 패널에 있는 URL 탭을 이용하면 됩니다. 참고로 링크할 수 있는 대상은 웹페이지 뿐만 아니라 일반 파일, 그림 파일, 이메일 주소, 동영상 등입니다. 여기서는 웹 페이지 주소를 이용하도록 하겠습니다. 바탕 그림 : http://www.mymulti.net/mmy/index.htm 멀티미디어연구회 : http://www.mymulti.net/ 교사 커뮤니티 : http://eduict.org/ 교육인적자원부 : http://www.moe.go.kr 1) 사각형 핫스팟 도구를 선택합니다. 2) 그림의 '멀티미디어연구회' 사각 버튼을 그림과 같이 왼쪽 위 모서리에서부터 오른쪽 아래 모서부분으로 드래그하여 영역을 표시합니다.   3) 에셋 패널에서 URL탭을 선택한 후, 다음과 같이 주소를 입력합니다. 4) 같은 방법으로 '교사 커뮤니티'도 사각형 핫스팟 도구로 영역을 표시하고, 에셋 패널의 URL 탭에 주소를 입력합니다.   5) '교육인적자원부'의 경우 영역을 원형으로 표시해야 하므로 원형 핫스팟 도구를 선택합니다. 그리고 역시 왼쪽 위 모서리에서 오른쪽 아래 모서리 쪽으로 드래그하여 영역을 표시합니다. 영역의 표시는 크기를 중점적으로 생각하고 그립니다. 위치가 어긋났다면 포인트 도구를 이용하여 수정할 수 있습니다.  영역 표시가 제대로 되었다면, 에셋 패널의 URL 탭에 주소를 입력합니다.  6) 바탕화면의 경우 영남루의 윤곽을 따라 영역을 설정해보겠습니다. 이 경우는 다각형 핫스팟 도구를 사용해야겠지요? 다각형 핫스팟 도구를 선택한 후 윤곽을 따라 이동하면서 클릭을 합니다.   영역 표시가 제대로 되었다면, 에셋 패널의 URL 탭에 주소를 입력합니다.   7) 이제까지 한 작업을 웹페이지로 만들어 보겠습니다. 메뉴의 [파일 > 저장]에서 적당한 폴더를 정하고 파일이름을 준 후 저장을 합니다. 8) 다시 [파일 > 내보내기]를 실행합니다. 그림과 같이 [파일 형식]은 [HTML과 이미지]로 설정하면 앞서 7단계에서 저장한 파일 이름과 같은 HTM 파일이 생성되게 됩니다.   9) 탐색기에서 저장된 폴더를 찾아가보면 HTML 파일과 그림파일이 생성되어 있음을 확인할 수 있습니다. HTML 파일을 더블클릭하면 브라우저가 실행되고, 핫스팟 영역을 클릭하면 지정해준 웹페이지로 이동하게 됩니다.