Chapter 17. 책갈피와배너사용하기 1
1. 책갈피의기능을알고만들수있습니다. 2. 이미지맵의기능을이해하고만들수있습니다. 1. 책갈피넣기 책갈피기능을만들어보도록하겠습니다. 이전에만들어뒀던문서 family.html 을열도록하겠습니다. 2
일단몇번정도엔터키를눌러줄바꿈을합니다. 그후 [ 표속성 ] 대화상자가나타나면 줄 1, 칸 4, 너비 는 400 픽셀, 선두께 는 0 을입력한후, [ 확인 ] 버튼을클릭합니다. 3
만들어진표의셀마다각각왼쪽부터차례대로부모님, 형네식구, 동생네, 우리식구라고적습니다. 표전체를다시블록설정한후, [ 표 ] 에서자동맞추기의셀너비를같게항목을클릭합니다. 그후에표안의내용을모두서식도구모음의가운데정렬버튼으로정렬합니다. 4
단축키 Ctrl+G 커서를이제 부모님 이란글자앞에둡니다. 그리고 [ 삽입 ] 의책갈피항목을클릭합니다. 혹은단축키 CTRL + G 키를누릅니다. 5
책갈피대화상자가뜹니다. 책갈피이름에부모님을입력하고, 추가버튼을클릭합니다. 책갈피목록에 부모님 이올라와있음을알수있습니다. 닫기버튼을클릭합니다. 6
부모님옆에생긴책갈피가보입니다. 이어서남은부분에도책갈피를만들어보겠습니다. 형네식구 라는글자앞에서커서를두고오른쪽클릭하여책갈피만들기버튼을클릭합니다. 7
역시메뉴표시줄을이용한경우와마찬가지로책갈피대화상자가열립니다. 이번엔형네라는책갈피를만듭니다. 이런방법으로책갈피를만들어나갑니다. 가족의모든책갈피를만들었습니다. 8
이번에는만들어놓은책갈피로이동할하이퍼링크를만들어보겠습니다. 문서의위쪽으로이동하여앞에서만들어놓은표로돌아갑니다. 마우스오른쪽버튼을클릭하여나온팝업메뉴에서 [ 하이퍼링크만들기 ] 를클릭합니다. [ 하이퍼링크만들기 ] 대화상자가나타나면 책갈피 의드롭다운버튼을클릭하여, 앞서책갈피로입력한목록이나타나게합니다. 첫번째책갈피 부모님 을클릭합니다. 9
부모님이란글자에하이퍼링크가걸렸습니다. 아마도책갈피기능에의해이셀을클릭하면부모님책갈피가있는곳으로화면이옮겨갈것입니다. 나머지셀들에도같은방식으로책갈피기능을활용하여하이퍼링크를만들어줍니다. 10
이번에는책갈피의이름을수정하도록하겠습니다. 기존부모님책갈피를오른쪽클릭하여나온팝업메뉴안에서책갈피고치기항목을클릭합니다. 책갈피대화상자에서새로운이름을쓰고이름바꾸기버튼을클릭합니다. 11
이젠부모님문단에해당하는책갈피이름이하늘이라고되었으므로, 하이퍼링크의책갈피이름도바꿔주어야합니다. 표의하이퍼링크가걸린글자부모님을오른쪽클릭한뒤, 팝업메뉴의하이퍼링크속성을클릭합니다. 12
이번에는책갈피를지우는방법을알아봅니다. 역시책갈피있는부분을오른쪽클릭하여나온팝업메뉴에서책갈피고치기를클릭합니다. 혹은책갈피를더블클릭합니다. 책갈피대화상자가뜨면, 지우고싶은책갈피를목록에서클릭해지우기버튼을클릭합니다. 13
이번에는현재웹페이지의위쪽으로쉽게돌아갈수있는하이퍼링크를만들어보겠습니다. 문장맨아래부분에 < 맨위로 > 라고적고블록설정합니다. 오른쪽버튼을클릭하여나온팝업메뉴에서 [ 하이퍼링크만들기 ] 를클릭합니다. [ 하이퍼링크만들기 ] 대화상자가나타나면책갈피입력부분에직접 top' 이라고적습니다. 인터넷익스플로러는자동으로 top' 이문서의맨처음을지시하는것으로인식합니다. 14
이번에는현재웹페이지의위쪽으로쉽게돌아갈수있는하이퍼링크를만들어보겠습니다. 문장맨아래부분에 < 맨위로 > 라고적고블록설정합니다. 오른쪽버튼을클릭하여나온팝업메뉴에서 [ 하이퍼링크만들기 ] 를클릭합니다. [ 하이퍼링크만들기 ] 대화상자가나타나면책갈피입력부분에직접 top' 이라고적습니다. 인터넷익스플로러는자동으로 top' 이문서의맨처음을지시하는것으로인식합니다. 15
Click 맨위로버튼을클릭하면책갈피기능에따라가장웹페이지맨위로올라오게됩니다. 16
2. 이미지맵으로타사이트링크걸기 이미지맵이라는기능을사용 1. [ 보기 ]-[ 도구막대 ]-[ 그림 ] 클릭 2. 이미지선택 - 슬라이딩바클릭 - [ 바로보기 - 그림 ] 패널 처음나모가시작했을때, 이미지맵이라는기능도구를못찾을수도있습니다. 이럴때에는이미지맵이라는기능을사용하기위해서는메뉴표시줄의 [ 보기 ] 메뉴에서 [ 도구막대 ] 를선택하여 [ 그림 ] 을클릭하여그림도구막대가나오게하던지이미지를선택하고화면아래슬라이딩바를클릭하여나온 [ 바로보기 - 그림 ] 패널에서사용할수있습니다. 이미그림도구막대가화면에나와있을수도있습니다. 17
자동으로 [ 하이퍼링크만들기 ] 대화상자가나타납니다. 주소란에 http://kr.yahoo.com' 이라적고 [ 확인 ] 버튼을클릭합니다. 18
이제확인해보기위해웹브라우저로미리보기버튼을도구상자에서찾아클릭합니다. 그리고방금하이퍼링크를만든야후그림을클릭하면, 야후홈페이지가뜨는것을확인할수있습니다. 다른배너그림들도같은방법으로링크를걸수있습니다. 19
이번에는다른 html 문서를가지고해보겠습니다. 역시사각형영역만들기로여리쿡쿡이라는부분을마우스로드래그합니다. 20
ㅋ 이번에는하이퍼링크만들기대화상자에서책갈피를쓰는게아니라우리가만든 html 문서를활용해야합니다. 찾아보기단추를클릭하여지정된경로의 html (food.html) 을열기를버튼을클릭합니다. 21
Tip 핫존 : 이미지맵의각영역을말하며사각형, 원형, 다각형등다양한형태로설정할수있다. 같은방법으로다른메뉴에도사각형영역이점선으로나타나는데, 이렇게하이퍼링크가만들어지면, 핫존영역이점선으로표시됩니다. 핫존이란이미지맵의각영역을말하며사각형, 원형, 다각형등다양한형태로설정할수있습니다. 핫존으로하이퍼링크를수정할수도있습니다. 22
3. 핫존삭제하기 Click 이제하이퍼링크를만들기위해핫존을설정하는방법을알아보았으니지우는방법을알아보겠습니다. 일단핫존이선택가능하도록하기위해핫존이있는그림을클릭하여그림도구막대를만듭니다. 그림도구막대중핫존선택을클릭하여야핫존을선택할수있습니다. 23
delete delete 키 핫존을선택가능해졌습니다. 핫존영역에마우스포인터를가져가면마우스포인터가손모양으로바뀝니다. 지우는방법은해당핫존에마우스포인트가있을때, 클릭한뒤 delete 키를누르면해당하이퍼링크가지워집니다. 24
핫존을지우는다른방법으로는해당핫존을같은방법으로선택한뒤, [ 편집 ] 의지우기항목을클릭합니다. 해당지정했던하이퍼링크가지워졌음을알수있습니다. 25
학습정리 1. 책갈피 (1) 책갈피는문서에서원하는위치로이동하기위해특정위치에표시를해두는것. (2) 하이퍼링크를책갈피로연결하면하이퍼링크를눌렀을때문서의첫부분이아닌책갈피로지정된부분으로연결 2. 책갈피수정하기와지우기 (1) 책갈피를목록에서삭제하거나이름을수정할수있음. (2) 수정할문서를편집창에열고책갈피대화상자를띄워서문서에지정한책갈피목록을확인하고수정함. (3) 책갈피수정하기 1 책갈피를지정한곳에커서를놓음. 2 팝업메뉴에서 [ 책갈피고치기 ] 를선택하거나책갈피서식부호를더블클릭. 3 책갈피이름에새로운이름을입력하고 [ 이름바꾸기 ] 를누름. 4[ 닫기 ] 를클릭. (4) 책갈피지우기 1 책갈피가지정된곳에커서를놓음. 2 팝업메뉴에서 [ 책갈피고치기 ] 를선택하거나책갈피서식부호를더블클릭 3 책갈피목록에서지울책갈피를선택하고 [ 지우기 ] 를누름. 4 [ 닫기 ] 를클릭 3. 이미지맵 (1) 그림의특정부분을클릭하면서로다른주소 (URL) 로이동하도록만든것 (2) 그림자체에하이퍼링크를지정할경우하나의하이퍼링크밖에지정할수없지만이미지맵을사용하면하나의그림에여러개의하이퍼링크를지정할수있음. (3) 핫존 : 이미지맵의각영역을말하며사각형, 원형, 다각형등다양한형태로설정할수있음. 26