Part6-1 드림위버 활용
비헤이비어
1. AP-DIV 활용
AP-DIV
별도의 Overlay( 겹침 ) 편집 창 삽입 가능
X, Y 축 절대 좌표 속성 가짐
Z-index 속성
다수 AP-DIV 간 겹침 배치 가능 Overflow, Vis 속성
스크롤바 표시 / 삽입 오브젝트 일부 / 전체 표시 않기 가능
AP-DIV 삽입
[Insert][Layout Objects][AP DIV]
AP Div 의 [PROPERTIES] 패널
1) CSS-P : AP Div 이름 표시 . AP Div 이름은 [AP Elements] 패널 과 [CSS STYLES] 패널에도 표시 . 2) L/T : X, Y 좌표 값 표시 . 음수로 입력되면 화면에서 보이지 않게 됨 3) W/H : 가로와 세로 크기 표시 . 4) Z-Index : 겹치기 할 때 순서 지정 . 숫자가 높을수록 나중에 삽입 . 5) Bg image : AP Div 의 배경 이미지 지정 . 6) Class : AP Div 에 클래스 선택자를 적용할 때 사용 . 7) Vis : AP Div 의 보이기 속성 제어할 때 사용 . 8) Bg color : AP Div 의 배경 색상을 지정 . 9) Overflow : AP Div 의 [W] 와 [H] 에서 지정한 가로와 세로 크기보다 삽입된 내용물의 크기가 클 경우의 처리 방식을 지정 . 10) Clip : [L] 과 [T] 에서 입력한 좌표 값부터 [R] 과 [B] 에서 지정한 크 기만큼만 화면에 표시 .
2) 다중 AP DIV 겹침 순서 변경
Z-index 번호 변경
먼저 삽입된 AP DIV 의 Z-index 값이 작음
3) Overflow 속성 활용
4) Vis 속성 활용
AP-DIV 화면 표시 또는 숨김 지정
[Show-Hide Element] 비헤이비어 (Javascript) 활용
설정 방법
1) 이미지 맵 또는 대상문자열 선택 2) [window][Behaviors] 선택
활용실습
비헤이비어 (Behavior)
1. Behavior 활용
Behavior
1. 행동 , 거동 , 행실 , 품행 , 태도
2. 행동 ; 습성
3. 행동 양식 (behavior pattern)
드림위버의 Behavior 기능
웹 문서의 동적 구성을 위한 Javascript 생성
팝업창 생성 / 경고창 생성 / 이미지 교체 / 속성변경 …
Behavior 구성 요소
액션 (action) : 이벤트 발생시 동작
이벤트 (event) ; 액션 발생 조건
1) 비헤비어 관련
2) 비헤비어 관련 이벤트
2. Behaviors 생성
구현방법
1) shift+F4 또는 [Window][Behaviors] 선택
2) TAG INSPECTOR 패널의 “ Behaviors” 탭 선택
3) + 선택
4) 액션 목록 선택
3. Popup Message 비헤이비어 설정
이벤트 발생시 경고효과음 + 메시지창 표시 방법 1) 대상 선택 2) behaviorsPopup Message 선택 3) 메시지 내용 입력 4) 이벤트 종류 선택4. Set Text 비헤이비어
브라우저
상태표시줄에 문자열 출력
5. Swap Image 비헤이비어
1) Swap 이미지 선택 ID 지정 (hat)
2) 대상 선택 Link : # Behaviors + Swap Imag
e “image hat”, 대체 이미지 설정 ‘ onMouseOver’
하단의 색상 이미지위에 마우스 포인터 를 가져다대면 상단에 위치한 모자 이미 지가 교체되는 예제 그림
6. Call Javascript 비헤이비어
대상 선택 [Behaviors 패널 ] + [call javascript]
7. Open Browser 비헤이비어
대상 선택 [Behaviors 패널 ] + [Open Browser Window]
8. Effect 비헤이비어 트랜지션효과
특정 요소 위치 변경 , 확대 & 축소 , slide 효과 , 투명
도 조절 가능
클릭시 Ap-1 slide-down
