본문 바로가기

공부/웹디자인17

드림위버 ) 비헤이비어 효과를 통해 애니메이션 효과내기 비헤이비어 추가에서 효과를 클릭하면 7가지가 나온다. Appear/Fade : 점점 선명하게 하거나 사라지는 애니메이션을 구현 Blind : 상하 방향으로 나타나게 하거나 사라지는 애니메이션을 구현 Glow/Shrink : 크기를 확대 및 축소하는 애니메이션을 구현 Highlight : 배경 색상이 변경되는 애니메이션을 구현 Shake : 좌우로 흔들리는 애니메이션을 구현 Slide : 위쪽이나 아래쪽으로 이동시키는 애니메이션을 구현 Squish : 이벤트에 따라 확대 및 축소를 반복하는 애니메이션을 구현 이걸 잘 이용하면 ID 값이 지정되어있는 AP Div 이미지를 팝업처럼 나타나게 할수도 있다. 사라질때도 효과를 넣을 수 있다. 간단한것들은 플래시로 만들지 않아도 좋을만큼 괜찮게 나온다. 소프트웨어공.. 2011. 12. 29.
드림위버 ) 비헤이비어 그 외 출처 : 실력이 탐나는 드림위버 CS5 Swap Image : 이벤트에 따라 지정한 이미지로 교체되게 한다. 예를들어 숫자 텍스트가 입력된 이미지 위해 마우스 포인터를 가져가면 상단에 위치한 큰 이미지가 교체되도록 설정할 수 있다. Swap Image 비헤이비어를 이용하여 롤오버 이벤트에 따라 서로 다른 이미지가 나타나는 롤오버 갤러리를 만들 수 있다. 롤오버에따라 이미지가 바뀌는 이미지를 선택하여 ID를 photo라고 넣었다. 그 후에 '1번 버튼'을 클릭하고 '비헤이비어 추가'에서 '이미지 교체'를 선택하였다. 아까 이름을 지어준 '이미지 "photo" *'를 선택하고 소스설정에서 바뀔 이미지를 찾아서 넣는다. 그리고 'onMouseOut 이미지 복구'의 체크를 해제한다. 만약 이걸 해제하지 않으면 .. 2011. 12. 29.
드림위버 ) Call Javascript 출처 : 실력이 탐나는 드림위버 CS5 [창닫기] 창을 닫을때 정말 닫을것인지 물어보는 메시지창 띄우기 비헤이비어 추가에서 자바스크립트 호출을 선택하고 그 안에 window.close()를 적어 확인을 누른다. 결과화면 : [브라우저 윈도우 열기] 웹페이지에 들어가면 팝업창처럼 뜨도록 [프린트] 프린트 버튼을 눌렀을때 인쇄를 실행할 수 있는 대화상자가 뜨도록 하는 자바스크립트를 비헤이비어로 넣기. 2011. 12. 29.
드림위버 ) popup message behaviors popup Message 비헤이비어는 경고음과 함께 메시지 창을 표시하는 비헤이비어이다. 비헤이비어를 적용하는 대상으로는 하이퍼링크가 지정된 텍스트나 이미지 오브젝트 그리고 문서가 될 수 있다. '공동구매 신청하기' 이미지 버튼을 클릭하면 이벤트가 종료되었다는 메시지를 띄우려고 한다. 제일 먼저 이벤트를 원하는 이미지를 클릭하고 비헤이비어를 추가했다. '+'를 누르면 나오는 메뉴에서 '팝업 메시지'를 선택하여 메시지에 나올 내용을 적은 후 확인하면 끝. onClick 과 팝업메시지가 잘 되어있는지 확인해본다. 결과화면 : '공동구매 신청하기'를 누르니 경고창이뜬다. (이미지를 클릭할때 손가락 모양이 뜨지는 않는다.) 2011. 12. 29.
드림위버 ) 텍스트 필드의 유효성 검사 (이메일주소를 형식에 맞게 잘 썼는지) 출처 : 실력이 탐나는 드림위버 CS5 이메일을 입력해야하는 폼을 클릭하고 -> 비헤이비어 추가를 누른 후 -> 양식 유효성 검사를 선택한다. 양식유효성검사 에서 필드는 두번째 'input "st Email"'을 선택하고 값을 '필수'로 선택한다. 그러면 'RisEmail'이 표시된다. 그리고 허용에서 '전자메일주소'를 선택해주면 된다. 확인을 누른 후 '양식 유효성 검사'로 나오는지 액션은 'onBlur'인지 확인한다. ** onBlur 이벤트 : 텍스트 필드에 커서를 놓았다가 다른 텍스트 필드나 텍스트 영역 필드 등을 클릭할 때 액션이 발생한다. 그리고 코드부분을 봐야하는데! 자바스크립트부분을 찾아서 아래처럼 블록지정해 놓은 부분을 원하는 경고 메세지로 바꿔준다. 나는 책에 있는대로 '이메일 형식으로.. 2011. 12. 29.
드림위버 ) AP Div로 서브 메뉴 표시하기 출처 : 실력이 탐나는 드림위버 CS5 고등학생때 서브메뉴를 표시하는게 너무 하고 싶어서 공부했었는데 결국 플래시를 쓰다가 실패했던 경험이 있다. 여러번 실패를 해서 그 후 부터는 아예 쓰지를 않았었다. 드림위버, 나모웹에디터로 하는 방법도 있다는것을 알긴 했지만 어려워보여 해볼 엄두를 내지 못했었다. 그런데 지금 보니 이렇게 간단한것이었다니.......... 하하하 서브메뉴로 쓸 그림을 AP Div에 넣어놓았다. 이제 그 AP Div를 선택하고 속성에서 가시성을 'hidden'으로 바꿔준다. hidden으로 지정하면 화면에서 표시되지 않는다. 그리고 '시리즈안내'를 이미지맵으로 선택하고 비헤이비어를 추가하고 'div "sub"'을 '표시'버튼을 눌러서 설정한다. 그러면 마우스를오버할때 서브메뉴가 표시되.. 2011. 12. 29.