다른 문서와 연결하기

다른 문서와 연결하기

하이퍼링크 만들기

　HTML 문서의 가장 큰 특징은 하이퍼링크를 만들 수 있다는 것입니다.하이퍼링크란 서로 다른 문서와 문서를 연결하여 이동할 수 있도록 연결점을 만드는 것을 말합니다.

먼저 하이퍼링크를 설정할 내용을 선택합니다.
삽입 메뉴의 하이퍼링크를 선택하거나 또는 단축키 <F9>를 선택합니다. 또는 도구 막대의 를 선택합니다.
하이퍼링크 만들기 대화 상자가 나타납니다.
대화 상자내에서 URL를 입력합니다. 각각의 URL의 요소들이 자동으로 입력됩니다. 또는 사용자는 주소의 요소를 따로 입력하여도 URL이 자동으로 입력됩니다. 만일 입력하려는 주소가 "http://www.namo.co.kr/index.html" 이라면 다음과 같습니다.

먼저 방식에서 http를 선택합니다.
호스트에 www.namo.co.kr을 입력합니다.
경로에 index.html을 입력합니다.
확인 단추를 누릅니다.

하이퍼링크가 제대로 연결되었는지를 확인하고자 할 때는 확인하려는 하이퍼링크 위에 마우스 포인터를 이동시키고 오른쪽 마우스 단추를 누르십시오. 팝업 메뉴가 나타납니다. 하이퍼링크 따라가기를 선택하여 링크된 문서가 열리면 하이퍼링크가 제대로 지정된 것입니다.

책갈피 만들기

책갈피는 문서 안에서 특정한 위치를 지정해 놓고 필요할 때 지정된 위치로 곧바로 이동하고자 할 때 사용됩니다. 지정한 책갈피를 다른 문서나 또는 같은 문서에서 하이퍼링크의 대상으로 지정하면, 이 하이퍼링크를 선택할 때 곧바로 지정된 책갈피 위치로 이동합니다.

편집 메뉴에서 책갈피 메뉴를 선택합니다. 또는 선택한 내용 위에서 마우스 오른쪽 단추를 누르면 팝업 메뉴가 나타납니다. 책갈피 만들기를 선택합니다. 사용자는 도구 막대의 책갈피 만들기 단추를 이용하여 실행할 수도 있습니다.
책갈피 대화 상자가 나타납니다.
추가 단추를 눌러서 책갈피를 등록합니다. 아래쪽의 책갈피 이름이 나열된 곳으로 방금 등록한 책갈피 이름이 이동하면 책갈피 지정된 것입니다
보기 메뉴의 서식 부호 항목이 켜져 있는 경우에는, 본문에서 책갈피로 지정된 내용이 파란색 점선으로 밑줄이 표시됩니다.

[주의] 책갈피를 지정한 다음 그 문서를 저장하지 않으면 다른 문서에서 그 책갈피 이름이 보이지 않습니다. 그러므로 다른 문서에서 하이퍼링크의 대상으로 책갈피를 이용하기 위해서는 반드시 책갈피를 지정한 문서를 저장한 다음 다른 문서에서 하이퍼링크 연결을 시도하시기 바랍니다.

　하이퍼링크 지우기

커서를 지우려는 하이퍼링크 위로 이동시킵니다.
삽입 메뉴의 하이퍼링크를 선택합니다. 또는 하이퍼링크 위에서 마우스 오른쪽 단추를 누르면 나오는 팝업 메뉴에서 하이퍼링크 속성을 선택합니다.
하이퍼링크 속성 대화 상자에서 URL 삭제 단추를 선택합니다. 그러면 지정된 하이퍼링크 정보가 삭제되고, 본문 내용만 남게 됩니다.

그림에 하이퍼링크 만들기

웹 브라우저에서 보이는 HTML 문서의 모든 내용에는 하이퍼링크를 넣을 수 있습니다. 다만 웹 브라우저 화면에 보이는 것이어야 한다는 조건이 있습니다. 여기서는 그림 파일에 하이퍼링크를 넣는 절차를 살펴 보겠습니다.

하이퍼링크를 붙일 그림 위에서 마우스 오른쪽 단추를 누릅니다. 팝업 메뉴가 나타나면 하이퍼링크 만들기를 선택합니다. 또 한 가지 다른 방법은 그림 위에서 마우스 왼쪽 단추를 두번 누르면 나타나는 그림 속성 대화 상자에서, 하이퍼링크 - 편집 단추를 누릅니다.
하이퍼링크 만들기 대화 상자가 나타납니다.
주소(URL)를 입력하고 확인 단추를 누르면, 그림에 하이퍼링크 지정이 끝납니다.

　[주의] 다만, 위의 1 단계를 시작하기 전에 본문에 그림이 들어 있지 않다면, 도구 막대의 그림 삽입 단추 를 눌러 그림 파일을 선택한 다음, 그림에 하이퍼링크를 지정해야 합니다.

다음은 하이퍼링크가 설정되어 있는 그림의 보기 입니다. 이 그림 위에서 마우스 왼쪽 단추를 두번 연속 누르면, 그림 속성 대화상자에서 하이퍼링크 항목에 http://www.namo.co.kr이 지정되어 있는 것을 볼 수 있습니다. 모양 탭을 선택하면, 테두리는0이고, 정렬은 왼쪽으로 지정되어 있습니다.

이미지맵 만들기

이미지 맵(image map)이란 하나의 그림 안에 영역을 나누어서 각 영역마다 하이퍼링크를 지정하는 것을 말합니다. 따라서 웹 브라우저에서는 그림 위에서 마우스 포인터가 가리키는 지점에 따라 서로 다른 하이퍼링크가 연결되는 것입니다. 기존의 수많은 웹 페이지에서 이미지 맵을 사용한 곳을 쉽게 찾아볼 수 있는 기능이므로, 여기서 잘 익혀 두시기 바랍니다.

사용자께서는 이미지 맵 지정이나 편집을 위하여 다른 어떤 외부 프로그램 없이도 나모 웹 에디터만으로 간편하게 지정하고 편집할 수 있습니다.

먼저 이미지 맵을 지정할 그림 파일을 선택합니다.
그림 파일 위에서 마우스 왼쪽 단추를 한번 누르면, 그림이 선택되면서 그림 테두리에 작은 조절점이 상하좌우 3개씩 나타납니다. 동시에 도구막대를 보면, 이미지 맵 관련 단추들이 와 같이 선택 가능한 모양으로 바뀌어 표시됩니다.
이미지 맵 단추를 이용하여 영역을 지정할 때는 다음 세 가지 종류로 하이퍼링크 영역을 지정할 수 있습니다.

사각형 영역 설정

사각형 그리기 단추 를 선택합니다. .

직사각형 형태의 하이퍼링크 영역을 설정합니다. 마우스 왼쪽 단추를 그림 위에서 누르는 순간이 사각형의 꼭지점이 시작되고, 마우스 단추를 놓는 순간이 사각형 꼭지점이 끝납니다. 그리고 마우스를 놓는 순간, 방금 지정된 사각형 영역에 대하여 하이퍼링크 만들기 대화 상자가 나타납니다.
동그라미 영역 설정

동그라미 그리기 단추 를 선택합니다.

동그라미 형태의 하이퍼링크 영역을 설정합니다.

마우스 왼쪽 단추를 그림 위에서 누르는 지점이 동그라미의 시작쪽이 되고 마우스 단추를 놓는 지점이 동그라미의 끝쪽이 됩니다. 그리고 마우스를 놓는 순간, 방금 지정된 동그라미 영역에 대하여 하이퍼링크 만들기 대화 상자가 나타납니다.
다각형 영역 설정

하이퍼링크 대화 상자가 나타나고 URL을 입력합니다.
확인 단추를 눌러 대화 상자를 닫습니다.
이미지 맵 지정을 끝내려면, 마우스 포인터를 그림 밖의 영역 위에 놓고 마우스 왼쪽 단추를 누르거나 또는 <ESC> 키를 누르시기 바랍니다. 다음은 이미지 맵을 지정한 보기입니다. 웹 브라우저에서 NAMO라는 파란색 글자 위에 마우스 포인터를 이동시키면, 이 영역에 지정된 하이퍼링크 URL이 상황선 왼쪽에 표시되며, 아울러 이 영역에서 마우스 왼쪽 단추를 누르면 지정된 URL인 주식회사 나모 인터랙티브의 웹 사이트에 접속될 것입니다.

이미지 맵 수정하기

전체 영역을 이동시키기

이미지 맵이 지정된 그림 파일 위에 마우스 포인터를 놓고 마우스 왼쪽 단추를 누르면, 그림 파일이 선택되면서 이미지 맵 편집 상태가 되고, 모든 하이퍼링크의 영역이 경계선으로 표시됩니다.
이동시키려는 영역 안으로 마우스포인터를 이동시키면, 마우스 포인터가 손 모양으로 바뀝니다.
이 때 마우스 왼쪽 단추를 누르면, 하이퍼링크 영역의 조절점이 나타납니다.
이 상태에서 마우스 왼쪽 단추를 누른 채로 옮기려는 위치로 마우스를 끌면, 선택된 하이퍼링크 영역 전체가 모양 그대로 마우스를 끄는 곳으로 이동하는 것을 볼 수 있습니다.
조절점만을 이동할 때

하이퍼링크 영역 위에서 마우스 왼쪽 단추를 누르면, 하이퍼링크 영역의 조절점이 나타납니다. .
이동시키고자 하는 조절점 위로 마우스 포인터를 이동시키면 포인터가 그림과 같이 변합니다.
이동시키고자 하는 조절점 위에서 왼쪽 마우스 단추를 누른 채 마우스 포인터를 이동시킵니다. 조절점도 같이 움직이며 경계선 또한 조절점의 위치 변화에 따라서 변하게 됩니다.

이전 페이지로 다음 페이지로