5--홈페이지구축-03-1

(1)

Part-3

드림위버 활용

하이퍼링크 / 네임앵커 / 이미지맵 / 아이프레임

(2)

(3)

1. Web

과 Hyperlink 개요



Hyperlink



Hyper : 과도 , 초과



Link: 연결



Hyperlink(=hot link)



HTML

문서 내 단어 / 구문 / 기호 /

그림 등 요소와

그 문서 내

또는

다른 HTML

문서 내

다른 요소 사이의 연결

(4)

1. 하이퍼링크 (Hyperlink)

지정 태그



_{하이퍼링크 (}

_{또는 링크 )}

 _{마우스로 클릭하면 다른 문서로 점프 할 수 있는“단어 ( 그룹 )”,“ 이미지”}  _{관련 태그}  _속성 태 그 설 명 <a> _{하이퍼링크 지정} 속성 속성값 설명

href URL 링크된 페이지에 대한 URL 지정 ( 필수속성 )

target _blank _parent _self _top framename 링크된 페이지 가 열릴 곳 지정 name section_nam_e _{문서내 북마크 생성 (HTML 4.01)} id section_nam_e _{문서내 북마크 생성 (HTML 5.0)}

type MIME_type 링크된 페이지의 MIME (Media types) 타입

(5)

2. 하이퍼링크 문법

<A href=“URL 경로명” target=“ 속성값” type=“MIME_type” > …… </A>



href 속성값



_{하이퍼링크 경로 (URL : uniform resource locator)}

 _{절대경로 : “http://” 를 포함한 웹 상 절대 주소}  _{상대경로 : 현재 웹 문서 기준 주소 , “./”, “../”}

 _{사이트 루트 경로 : 웹 사이트 루트 지정 주소 기준 주소}

 _{메일 링크 : “mailto: 이메일주소”}

(6)

2. 하이퍼링크 문법

<A href=“URL경로명” target=“속성값” type=“MIME_type” > …… </A>



target 속성값

 _{_blank : 새 창에 출력}  _{_new : 새 창에 한번 만 출력}  _{_parent : 하이퍼링크 포함된 프레임의 부모 웹 브라우저 창에 출력}  _{_self : 현재 웹 브라우저 창에 출력 (default 값 )}  _{_top : 프레임 제거 후 전체 웹 브라우저 창에 출력}  _{프레임이름 : 지정 프레임에 출력함} 

Type 속성값

 _{“test/html” : html 문서}  “image/jpg” : jpg 이미지  “video/mp4” : mpeg4 동영상  “audio/ogg” : ogg 오디오 파일  “application/x-shockwave-flash” : flash 응용 프로그램

(7)

예제 :

(8)

하이퍼링크 설정

(9)

1)

텍스트하이퍼링크 설정



텍스트 선택 [Properties]

패널

(10)

하이퍼링크 타깃

 _{_blank :}_{하이퍼링크 주소를 새 웹브라우저 창에 출력}  _{_new : _blank}_{와는 다르게 한번만 새 웹브라우저 창에 출력}  _{_parent :}_{하이퍼링크 주소를 해당 하이퍼링크가 포함된 프레임의 부모 웹브라우저 창에 출력} 프레임 구조에서 사용  _{_self :}_{하이퍼링크 주소를 현재 웹브라우저 창에 출력 .}_{타깃 미지정 시 _self'} ‘ _{가 자동 적용 .}  _{_top :}_{하이퍼링크 주소를 전체 웹브라우저 창에 출력 .}_{프레임 구조에서 모든 프레임이 제거되고 전체} 웹브라우저 창에 하이퍼링크 출력 .  _{프레임 이름 :}_{프레임 구조에서 하이퍼링크 주소를 특정 프레임에 출력함 .}  _{_blank :}_{하이퍼링크 주소를 새 웹브라우저 창에 출력}  _{_new : _blank}_{와는 다르게 한번만 새 웹브라우저 창에 출력}  _{_parent :}_{하이퍼링크 주소를 해당 하이퍼링크가 포함된 프레임의 부모 웹브라우저 창에 출력} 프레임 구조에서 사용  _{_self :}_{하이퍼링크 주소를 현재 웹브라우저 창에 출력 .}_{타깃 미지정 시 _self'} ‘ _{가 자동 적용 .}  _{_top :}_{하이퍼링크 주소를 전체 웹브라우저 창에 출력 .}_{프레임 구조에서 모든 프레임이 제거되고 전체} 웹브라우저 창에 하이퍼링크 출력 .  _{프레임 이름 :}_{프레임 구조에서 하이퍼링크 주소를 특정 프레임에 출력함 .} - _{하이퍼링크 주소로 지정된 웹 문서의 출력 방식}

- _[PROPERTIES]_{패널에서 [Link]}_{에 주소를 지정하면 [Target]}_{을 지정할 수 있게 활성화 .} - 기본 값은 _self' ‘ 이며 _blank', '_new', '_parent' ’ 는 목록에 표시 , 프레임 이름은 프레임

(11)

2)

이미지 하이퍼링크 설정



이미지 선택 [Properties]

패널



[Link], [

Alt

], [Target] 속성값 지정

(12)

3)

메일 링크 지정



이메일 텍스트 선택 [Insert]-[Email Link] 선택

(13)

4)

하이퍼링크 텍스트 스타일 변경



기본

 _{접속 전 : 파랑색 & 밑줄}  _{접속 후 : 보라색 & 밑줄} 



[Page Properties] 선택



Link(CSS) 선택

(15)

2. 네임 앵커 활용



Name Anchor :

책갈피 기능 제공



웹 문서 내에서 특정 위치 이동 가능

)

(16)

네임 앵커 생성 방법



1)

네임 앵커 위치 삽입하기

 _{방법 -1) [Insert] 패널 -[Common]-[Named Anc}

hor]

 _{방법 -2}_{)[Insert] 메뉴 -[Named Anchor]}  _{방법 -3) Ctrl+Alt+A}

 네임 앵커 이름 입력 (특수문자 / 공백 안됨 )

[ 참고 : pp. 92~95]

네임앵커 삽입시 나타나는 [Select Image Source]대화

상자 삽입한 네임앵커 기호를 클릭했을 경우 나타나는 [PROPERTIES] 패널 to p de-tail oute r fit

(17)

네임 앵커 생성 방법



2)

네임 앵커 주소 참조



텍스트 , 이미지 선택 [Properties]

패널 [Link] 에 “

# 네임앵커명

” 지

정

[ 참고 : pp. 92~95] to p de-tail oute r fit

(18)

네임 앵커 실습



NameA.htm



<A href=“#”> … </A>

 _{네임 앵커 위치 지정 없는 경우}

(19)

3. 이미지 맵 하이퍼링크 지정



Image map



하나의 이미지에 다양한 영역 ( 사각형 , 타원형 , 다각형 ) 지정



_{지정 영역마다 하이퍼링크 설정}

_{<img src = "}

이미지맵 지정형식

_{이미지 파일명 " usemap = "#} _{이미지맵 이름 ">} <map name = " 이미지맵 이름 "> <area shape = " _{영역의 모양 지정 "} coords = " 영역의 좌표 지정 " href = " 웹 문서명 이나 웹 사이트주소 (URL)" > </map>

(20)



_{<img>, <map>, <area> 태그 동시 사용}



_{<map> 태그 속성}



_{<area> 태그 속성}

속성명 속성값 설 명 name mapname _{필수 속성} . 이미지맵 이름 지정 속성명 속성값 설 명 coords coordinates 영역 좌표 지정 href URL _{지정된 영역의 타겟 하이퍼링크} shape default rect circle poly 영역 모양 지정 target _blank _parent _self _top framename 타겟 URL 문서를 출력 위치 지정

(21)

 ₁₎_{이미지 맵 관련 Properties 패널}

 맵 이름 지정

 맵 형태 (Hot Spot tool) 지정 : 사각형 (Rectangular)/ 원 (Circle)/ 다각형 (Polygon)



(22)

실습 :

이미지 맵 하이퍼링크 지정

 ₁₎_{대상 이미지 맵 삽입 & 선택}

 _{2) [Properties]}_패널에서 _{적용할 맵 영역선택}  _{3) Link & Alt & Target 지정}

 ₄₎_{웹 브라우저 확인 : F12 키}

(23)

(24)

아이프레임 구조 이해



iFrame



문서의 특정 위치에

테이블이나 이미지처럼

홈페이지 문서 , 이미지

와 같은 파일

을 크기와 이름을 지정하여

삽입

하는 기능

아이프레임으로 오른쪽 문서를 삽입한 결과 그림 왼쪽 메뉴를 클릭하면 아이프레임 창에 연결 페이지가 교체된다 .

(25)

1) i

프레임 태그



iFrame



_{프레임을 나누지 않고 문서 안에서 여러 개의 문서를 보여줄 때}

사용



<iframe> 태그

 _<iframe_src=“.."_{name=“…" scrolling="auto/yes/no"}

marginheight=“.." marginwidth=“.." frameborder="0/1" width=“…“ height=“…" allowtransparency="true/false"></iframe> 

<iframe>

태그 속성

속성 내용 src 내부 프레임 안에 출력될 문서 지정 name 내부 프레임의 이름을 지정 width 내부 프레임의 너비를 지정 height 내부 프레임의 높이를 지정 frameborder 내부 프레임의 경계선 표시 유무 지정 align 내부 프레임에서 정렬 방식 지정 scrolling 내부 프레임에서 스크롤 사용 여부 지정 (YES|NO|AUTO) marginheight 내부 프레임의 상하 여백을 픽셀 단위로 지정 marginwidth 내부 프레임의 좌우 여백을 픽셀 단위로 지정 [ 참고 : pp. 106~107]

(26)

[ 기본예제 ]

아이프레임 태그 연습

Iframe.htm

<HTML>

<HEAD> <TITLE>아이프레임 연습 </TITLE> </HEAD> <BODY> <center><h3>iframe</h3>

</iframe> </BODY>

</HTML>

(27)

2)

드림위버에서 iframe 정의하기



방법

(28)



_iFrame

_{태그 속성 입력}

 _{Name=“”; 아이프레임 이름}  _{Scrolling =“auto/yes/no” ; 스크롤 여부}  _{MarginWidth=“”Marginheight=“”; 여백 가로 / 세로 크기}  _{Frameborder =“0/1”; 경계선 출력 여부}  _{Width=“” height=“” ; 아이프레임 너비 / 높이}

(29)

[iFrame 실습과제 ]



표 4 개



iFrame 1 개



_{4 개 이미지 targ}

et



art01~04.html

출력

Rena.htm 로 저장할 것

(30)

(31)

1. 웹 문서와 프레임 (Frame) 개요



Frame



( 나무 /

금속 등으로 된 ) 틀



( 가구 / 건물 /

차량 등의 ) 뼈대



웹 문서에서

프레임

활용



2 개 이상의 HTML

문서

를

한 화면에 배치

(32)

1)

프레임 다루기

 별도의 html 문서로 저장함

 <body></body> 정의 없음

 _Code_{창에서 입력시 [File][Save Frameset]}

 _{프레임 형식}  _{브라우저 화면을 여러 개로 나누어서 이용하는 것을 의미}  _{분할 방식 : 좌 / 우 ,}_{여러 개의 영역으로 분할 가능}  _{<Frameset>…</frameset> :}_{프레임 분할}  _{<frame>…</frame> :}_{분할 영역의 내용}  _{rows :}_{상하 분할}  _{cols :}_{좌우 분할}  _{프레임 크기 : 픽셀 , %,}_{상대적 크기 지정 가능}

<frame src=" 보여줄 파일명 " name=" 프레임명 "> ...

</frame> </frameset>

(33)



_{프레임 나누기 예}

<frameset rows=" 50, 30, * "> 화면을 상하로 3 등분하는데 크기는 50 픽셀 , 30 픽셀 , 나머지로 분 할 . </frameset> <frameset rows=" 50%, 50% "> 화면을 상하로 50% 씩 분할 . </frameset> <frameset rows=" *, 2* "> 화면을 상하 2 개로 분할하는데 아래가 위의 2 배가 되도록 분할 . </frameset>

(34)



_{<frameset> 태그 속성}



_{<frame> 태그 속성}

속성 내용 cols 프레임을 수직 분할 rows rows 프레임을 수평 분할 border border 분할 프레임의 경계선에 대한 설정을 하고 , 0 일 경우 선이 보이지 않음 속성 내용 src 해당 프레임에 출력될 내용을 지정 name 프레임의 이름을 지정 noresize 프레임의 크기를 조절하지 못하도록 지정 scrolling 해당 프레임에서 스크롤 사용 여부 지정 (YES|NO|AUTO) marginheight 해당 프레임의 상하 여백을 픽셀 단위로 지정 marginwidth 해당 프레임의 좌우 여백을 픽셀 단위로 지정

(35)

[

기본예제 1]

프레임 태그 연습

<HTML><HEAD><TITLE> 프레임 상하 분할 연습 </TITLE></HEAD> <FRAMESET ROWS="50%, *" >

<FRAME SRC="content1.htm" NAME="frame1"> <FRAME SRC="content2.htm" NAME="frame2"> </FRAMESET>

</HTML>

<HTML><HEAD><TITLE> 프레임 상하 분할 연습 </TITLE></HEAD>

<BODY><CENTER><H3> content1.htm 입니다 . </H3> </CENTER></BODY> </HTML> <HTML><HEAD><TITLE> 프레임 상하 분할 연습 </TITLE></HEAD><BODY> <CENTER><H3> content2.htm 입니다 . </H3> </CENTER></BODY></HTML> [content1.htm] [content2.htm] [frame1.htm]

(36)

[

기본예제 2]

프레임 태그 연습

<HTML><HEAD><TITLE> 프레임 좌우 분할 연습 </TITLE></HEAD> <FRAMESET COLS="50%, 50%" >

<FRAME SRC="content1.htm" NAME="frame1"> <FRAME SRC="content2.htm" NAME="frame2"> </FRAMESET>

</HTML>

(37)

[

기본예제 3]

프레임 태그 연습

<HTML><HEAD><TITLE>프레임 중첩 연습 </TITLE></HEAD> <FRAMESET ROWS="20%, *">

<FRAME SRC="content1.htm" NAME="frame1"> <FRAMESET COLS="30%, *">

<FRAME SRC="content2.htm" NAME="frame2"> <FRAME SRC="content3.htm" NAME="frame3"> </FRAMESET> </FRAMESET> </HTML> <HTML><HEAD><TITLE>프레임 중첩 연습 </TITLE> </HEAD> <BODY> <CENTER> <H3> content3.htm 입니다 . </H3> </CENTER> </BODY> </HTML> [content3.htm] 행을 20:80 으로 분 할 _{상단 창의 정보 정의} 하단 프레임의 열을 30:70 으로 분 할 좌측 창의 정보와 우측 창의 정보 정의 [frame3.htm]

(38)

2)

드림위버에서 프레임 정의하기



방법



1) 프레임 샘플 이용

 [File]-[New]

(39)



프레임세트 [Properties]



_{Borders ; 프레임}

_{테두리 속성}



Border width : 프레임

테두리 크기

지정



_{Border color : 프레임}

_{테두리 색상}

_지정

(40)

 프레임 [Properties]  _{Src : 선택 프레임}_{문서 경로명}  _{Borders : 프레임}_{테두리 표시 속성}_지정  _{Scroll : 스크롤바 표시 속성}  _{Noresize : 프레임 크기 변경 불가 여부 지정}  _{Border color : 프레임}_{테두리 색상}_지정  _{Margin width/height : 선택 프레임}_여백_지정 프레임 이름

5--홈페이지구축-03-1

Part-3

드림위버 활용

하이퍼링크 / 네임앵커 / 이미지맵 / 아이프레임

1. Web

과 Hyperlink 개요



Hyperlink

Hyper : 과도 , 초과

Link: 연결

Hyperlink(=hot link)

HTML

문서 내 단어 / 구문 / 기호 /

그림 등 요소와

그 문서 내

또는

다른 HTML

문서 내

다른 요소 사이의 연결

1. 하이퍼링크 (Hyperlink)

지정 태그

하이퍼링크 (

또는 링크 )

2.

하이퍼링크 문법



href 속성값

하이퍼링크 경로 (URL : uniform resource locator)

2.

하이퍼링크 문법

target 속성값

Type 속성값

예제 :

하이퍼링크 설정

1)

텍스트하이퍼링크 설정



텍스트 선택 [Properties]

패널

하이퍼링크 타깃

2)

이미지 하이퍼링크 설정



이미지 선택 [Properties]

패널

[Link], [

Alt

], [Target] 속성값 지정

3)

메일 링크 지정



이메일 텍스트 선택 [Insert]-[Email Link] 선택

4)

하이퍼링크 텍스트 스타일 변경

기본

관련 태그 ( 헤더부에 정의함 )



[Page Properties] 선택

Link(CSS) 선택

2.

네임 앵커 활용



Name Anchor :

책갈피 기능 제공

웹 문서 내에서 특정 위치 이동 가능

네임 앵커 생성 방법

1)

네임 앵커 위치 삽입하기

네임 앵커 생성 방법



2)

네임 앵커 주소 참조

텍스트 , 이미지 선택 [Properties]

패널 [Link] 에 “

# 네임앵커명

” 지

정

네임 앵커 실습



NameA.htm

_{하이퍼링크 (}

_{또는 링크 )}

_{하이퍼링크 경로 (URL : uniform resource locator)}

_{지정 영역마다 하이퍼링크 설정}

_{<img>, <map>, <area> 태그 동시 사용}

_{<map> 태그 속성}

_{<area> 태그 속성}

_{프레임을 나누지 않고 문서 안에서 여러 개의 문서를 보여줄 때}

_iFrame

_{태그 속성 입력}

_{4 개 이미지 targ}