본문 바로가기

드림위버 부분링크 하기 이미지맵 사용법

by +_=_+ 2019. 10. 3.
반응형

드림위버 부분링크 하기 이미지맵 사용법

백만 년 천만년 만에 사용하게 된 드림위버, Adobe Dreamweaver CC 2015, 오랜만에 사용 하려니 또 굳어진 나의 뇌를 풀 가동 시켜야 한다. 내가 하고 싶었던 기능은 이미지 하나를 Html에 띄어서 내가 원하는 부분만 잘라서 부분 링크를 주는 것이다. 즉 이미지 위에 하이퍼링크를 걸어서 내가 원하는 사이트를 띄우는 것이다. 과연 기억을 되살려 가능할까.. 자 해보자~

내가 사용하는 드림위버 버전은 드림위버CC 콜~!!!

 

 

일단 상단에 Cod / Split / Live 라고 3개의 항목만 보인다.

그렇게 되면 하단에 아무것도 보이지 않고 Output와 Properties 항목만 떡~하니 보이게 된다.

자, 여기서 중요한 점. 상단에 Live 로 되어있는 부분을 Design으로 바꿔야 한다는 것!

그렇게 변경을 하고 빈 공간을 누르면 속성(Properties)에 일반 속성 값만 보이게 된다.

 

 

그럼 이번에는 이미지를 콕~ 찍어놓고 속성값을 다시 한번 보자.

 

 

 

Map 라는 부분이 보이시죠?~

이곳에서 부분으로 자르는 거에요. 원하는 부분을 네모 세모 및 다각형으로 잡고 링크 걸 부분을 마우스로 드래그 하세요~

 

 

저는 아르바이트 신청 이라는 부분에 네모로 이미지맵을 잡았습니다.

 

 

잡고나서 Link에 네이버를 링크 걸면 해당 주소를 입력하고 아래 Target 에다가 클릭했을 때 어떤 액션이 취해질 것인지, 다시 말해 새 창으로 띄울 것인지, 현재 페이지에서 띄울 것인지 선택하는 거에요~

그냥 봐도 흔한 new 라는 단어가 새 창으로 띄운다는 것은 알겠지요.

옆에 Alt는 이미지 맵 기능을 활용해서 해당 영역을 잘라놓은 부분에 마우스를 올렸을 때 텍스트로 나타나는 글을 적는 것입니다.

다들 성공하십숑~ ^^

반응형

최신글 전체

이미지
제목
글쓴이
등록일