이미지에 링크 걸기

홈페이지나 블로그 상단 이미지 등등을 만들때 이미지에 링크를 자주 걸게 되는데요.
그런 이미지에 링크거는 방법을 알아보도록 하겠습니다.

CS 이전버전에서는 이미지래디 프로그램도 따로있어서, 이미지맵 걸기가 훨씬 더 편했는데, CS 버전은
선택하는부분도 많이 사라졌지만, 그래도 뭐 사용하는데는 큰 불편은 없는거 같애요 @_@

1) 먼저 링크걸 이미지를 불러주세요.

( 싸랑하는 제 조카 사진입니다....... ^-^ 아무리봐도 넘 귀엽다능 ;;;)
(저작권이 심하니깐 가족사진 총출동 하게생겼네요 -_-;;; 근데 해외 유명연예인들 사진은 괜찮다는 말을 들은거같기도 하고 -- ;;;)

2) 툴박스 Slice Tool 을 선택합니다.
   그리고 링크걸 부분을 선택을 해주세요.

3) 다음, 선택된 부분에서 마우스 우클릭 한 후, Edit Slice Options 를 선택해 주세요.

 그럼 Slice Options 라고 옵션창이 뜹니다.

 

중간설명 :
Slice Type : 분할 영역을 이미지로 표시 할 것인지, 문자로 표시 할 것인지를 설정하는 곳입니다.
                  이미지로 표시하지 않을 경우 (No Image) 문자를 입력할 수 있게 되며
                  여기서 입력된 문자가 웹 브라우져에 표시됩니다.
Name : 기본적으로 이미지의 원래 이름이 표시됩니다. 수정할 수도 있습니다.
URL :  이동할 주소를 입력하는 곳입니다.
Target : 링크를 눌렀을때 해당 주소의 페이지를 어떻게 나타나게 할것인지 설정하는 곳입니다.
           _blank : 새창으로 열립니다.
           _ self : 현재 열려진 페이지에서 웹페이지가 열립니다.
           _ top : 프레임이 나뉘어진 웹페이지에서 현재 프레임에 해당 주소의 웹페이지를 표시합니다.
Message Text : 링크된 부분에 마우스를 가따대었을때 , 상태바에 나타내는 메세지 입니다.
Alt Tag : 링크된 부분에 마우스를 가따대었을때, 풍선 메세지로 설명글을 적는곳입니다.
Dimensions : 분할 영역의 크기와 위치를 입력하여 정확히 설정할 수 있습니다.
Slice Background Type : 맨첨 Slice Type 를 No Image로 선택하였을 경우, 웹브라우져에 표시될
             문자의 배경색을 설정하는 곳입니다.

4) 빈칸에 적을 걸 다 적었으면 OK를 하시고, 이젠 저장을 해야 합니다.

저장할때는 꼭 HTML and Images (*.html)로 저장해 주세요.

5) 저장했던 경로로 찾아가면, 두개의 파일이 생겼습니다.

하나는 이미지폴더 , 그리고 웹문서 파일 이렇게 두개 가 생깁니다.

저장했던 html 문서를 열어보시면 방금 포토샵에서 작업했던 이미지가 딱 보일겁니다.
그리고 Images 폴더를 열어보면 , 조각난 이미지들이 보입니다.

6) 일단 이미지를 이제 , 웹계정이나 티스토리 블로그에 업로드 해야합니다.
   다시 html 문서에서 소스를 봐주세요. html 문서에서 우클릭한 후 , 소스를 열어주세요.
 

잘 안보이시는분들은 , 클릭하여 크게 보세요 @_@

소스를 보시면 이미지 주소를 적는 부분들이 있습니다.
티스토리는 이미지 파일주소가 다 다르기때문에 어쩔수 없이 각각 적어줘야 합니다.

하지만 웹계정에 같은 폴더에 html 문서와 이미지폴더를 같이 업로드 한 경우라면 일일히 적어줄 필요가 없답니다.

주소를 다 ~~~~~~ 적었으면 이제 완성이 된겁니다 @_@

테이블 주소를 고대로 복사해서 , 원하는 페이지에 올려놓고 테스트를 해보시길 바래요~