드림위버 관련메모
*드림위버단축키
-컨트롤 + J : 페이지프로퍼티
열늘이기 : ctrl + shift + a
열줄이기 : ctrl + shift + -
행늘이기 : ctrl + m
행줄이기 : ctrl +shift + m
* 테이블 프로퍼티 메모
셀패드 : 셀내부테두리 두께
셀스페이스 : 셀 위부테두리두께
아래 6개아이콘중 첫번째 : 셀안에 내용물에 넓이에 맞추어
테이블크기 및 셀크기 조정
그아래 아이콘 : 셀안에 내용물에 높이에 맞추어
테이블크기 및 셀크기 조정
첫줄 두번째아이콘 : 너비의 테이블 단위가 픽셀로 변환
두째줄 두번째아이콘 : 높이의 테이블 단위가 픽셀로 변환
첫줄 세번째아이콘 : 너비의 테이블 단위가 퍼센트로 변환
셋째줄 세번째아이콘 : 높이의 테이블 단위가 퍼센트로 변환
*셀선택시에 프로퍼티 메모
헤더 : 글씨 굵게
***투명테이블 점선안보이게 하는설정
뷰>비쥬얼 에이즈>테이블보더체크
*** 링크설정
- 페이지 프로퍼티에서 링크로가서 설정한다.
*** 레이어방식부분 용어설명
z-Index : 레이어의 겹침순서, 숫자가 높을수록 위에있다
(레이어 패널에서 변경가능하다)
vis : 이 레이어를 보이게 할것인가 안보이게 할것인가
오버플로어 : 삽입내용물이 크기가 클경우 스크롤을
사용할것인가의 여부를 묻는 기능
클립 : 레이어의 일부분만 보이게 할수있다.
레이어패널(css패널 옆에 있음) 에서 프리벤트 오버랩을 체크하면
레이어가 서로 겹치지 못한다.
모디파이>얼라인을 클릭하면
가장 마지막레이어를 기준으로 정렬이 가능하다.
레이어 크기 같게 만들기 : 모디파이>얼라인>메이크 세임width
레이어에 종속되는 레이어 만들기
-두개의 레이어를 만들고
레이어 패널에서 컨트롤키를 누른상태로 위의레이어로 드래그해서
넣는다
레이어구조를 테이블로 변경하는방법
모디파이>컨버트>레이어 투 테이블
(레이어가 겹쳐있는상태에서는 실행안됨)
%반대로 테이블구조를 레이어구조로 변경하기
모디파이>컨버트>테이블 투 레이어
**css 스타일시트 입력예시
<STYLE>
body,td,tr,table{font-size:9pt;
font-family:굴림;color:#888888;line-height:120%;}
A:link
{font-family:굴림;font-size:9pt;color:#888888;text-decoration:none;}
A:visited
{font-family:굴림;font-size:9pt;color:#888888;text-decoration:none;}
A:active
{font-family:굴림;font-size:9pt;color:#888888;text-decoration:none;}
A:hover
{font-family:굴림;font-size:9pt;color:black;text-decoration:none;}
</STYLE>
*스타일시트의 종류
클래스: 문서에 삽입한 오브젝트에 적용시킬 사용자정의스타일
태그: 라인등을 넣을때
어드밴스드:링크관력속성만(Nomal,Rollover,Visited,Active) 저장
*클래스부분의 메뉴들중 추가설명
-타입>variant에서 스몰캡을 선택하면 모든 글자가 소문자로 나옴
*스타일시트 리스트적용하기
-세줄짜리글을 만들고 프로퍼티에서 목록아이콘 선택
>리스트모양으로 만들어준다.(각각 엔터를 쳐서)
>뉴 스타일시트에서 클래스로 저장한후에 옵션창 뜨면 list로간다
>뷸렛이미지- 임의의포인트이미지 불러오기
타입 - 디스크, 스퀘어등 다양한 기존타입선택
포지션 - 들여쓰기를 할것인가 안할것인가의 여부결정
*스타일시트 배경이미지고정시키기
-페이지프로퍼티에서 배경이미지를 정해준다
>css스타일패널에 보면 스타일이 뜬다
>바디에서 edit를 눌러준다.
>백그라운드로가서 어태치먼트에 픽스트선택
%여기서 백그라운드정렬도 할수있는데
x리피트를 선택해주고 호리즌탈 센터정렬을 해주면
가운데 띠줄형식으로 반복되는 백그라운드를 볼수있다.
left로 하면 왼쪽을 시작점으로 백그라운드가깔리고
right로 해주면 오른쪽을, 센터는 가운데를 시작으로
배경이미지가 깔린다는 특징이 있다.
*스타일시트를 이용한 테두리스타일만들기
-새 스타일시트를 만든다
>백그라운드를 밝은회색으로 준다
>볼더로 메뉴를 바꿔서 더블/띡/볼더컬러를 정해준다
>완성
#툴상에서는 효과가 그냥 솔리드로 적용되지만 브라우져를
켜보면 효과가 적용되어있다.
*스타일시트에 수평라인삽입하는방법
-새스타일시트를 만들고 티입메뉴에서 컬러설정후에 확인
>위에 메뉴바에서 html모드로 전환시킨후 첫번째아이콘 클릭
>라인에 클릭한후 클래스 설정
>완성
#툴상에서는 효과가 나오지 않는다.
또다른 라인삽입법으로 인서트>html>호맂즌탈룰을 선택하면된다.
#점선형태의 수평선삽입법은 스타일시트 수정으로 들어가서
볼더에서 dotted 선택
*스타일시트에서의 박스와 익스텐션스 메뉴
-우선 박스는 볼더와 함께 써주어야하고 익스플로어를 실행해야
볼수있다
-익스텐션즈는 커서의 종류를 선택할수있고
그안에 페이지브레이크는 인쇄의 범위를 정할때 사용한다.
필터도 있다. 설명은 생략하겠다.(필터효과는 상당히 매력적이다)
*스타일시트 파일로 추출하기
-차마저장하지 못했던 스타일 시트 자바파일로 추출하기
>css 스타일패널에서 우측상단아이콘 클릭 >듀플리케이트클릭
>파일로 저장
*스타일시트 필터설명
블루어- add : 0아니면1로 지정합니다. 1로지정해야만 필터가
적용됩니다.
다이렉션 : 적용되는 방향은 360도입니다.
스트렝쓰: 수치가 많을수록 투명해져 비쳐보이게 됩니다.
웨이브 - add :위와 같음
freq : 수치를 높이면 변형의 모양이 자주 반복된다.
lightStrength:빛의양
파즈:0~360 까지 변형의 수를결정
스트렝쓰 : 변형의 크기
인버트등등
*쇼하이드레이어
-선택하고싶은 오브젝트의 링크에#을 꼭 걸어줄것
>레이어이름 정해줄것
#하이드와 쇼를 한번에 여러개 지정할수있다
*플래시삽입
-swf를 삽입한후 루프를 선택하면 플래시가가 반복재생됨
프로퍼티패널의 스케일설명
-디펄트:가로세로원본비율 유지
-노보더:플래시가 잘릴수 있음
-이그젝트핏:드림위버에서 수정한크기에 맞추어 비율 재설정
-파라미터 : 세부속성지정
#배경 투명하게 하기 - 파라미터에서 파라미터란에wmode
밸류란에 transparent를 입력한다.
>플래시상에서 배경부분은 투명하게 됨
*플래시제어하기
플래시를 삽입하고 선택한후 프로퍼티패널에 이름(main)입력
>아래 버튼이미지를 삽입하고 링크에#표시한후 비헤이버패널
>+를 눌러준후에 컨트롤 쇼크웨이브 오얼 플래시 선택
>플레이,스톱,리와인드등에서 골라준후 온클릭비헤이버설정
>완성
**플래시버튼삽입하기
커먼모드에서 미디어삽입하기아이콘(이미지삽입옆에)를 클릭
>플래시버튼클릭>버튼과 링크를 선택
# 주의할점은 플래시버튼의 저장위치를 선택해주어야하는데 그냥 바탕화면으로 경로를 지정하면 실제 바탕화면경로가 뜨지않으므로
특정폴더에 넣어서 저장해주면 저장이 된다. 영문저장할것
**플래시텍스트삽입하기
플래시버튼의 아래에 위치하고 있다.
플래시버튼삽입과 방법이 똑같고, 롤오버시 색이변하는것과 링크만
적용 가능하다. 자유로운 폰트삽입가능
, 텍스트 배경컬러조절가능(백그라운드컬러)
**플래시이미지뷰어삽입하기
커먼모드에서 플래시엘리먼트모드로 바꾸어준다
>임의의위치에 파일을 저장한다
>크기를 지정해준다
>태그패널로가서 엘리먼트셋업을 한다.
>프레임쇼에 yes(외곽테두리선이 나타남)꼭해줄필요없는듯
>이미지url에서 우측아이콘 클릭해서 파일경로지정
#파일경로는('이미지.jpg','이미지.jpg'....)이런형식이다
>bg컬러,루프설정,링크타겟,로딩시자동실행,슬라이드딜레이등조정
>마지막에 트랜지션타입 설정
>완성
*미디어툴로 배경음악 넣기
커먼모드에서 위에 플래시마크아이콘(미디어메뉴)를 클릭하고
플러그인을 선택한후 음악파일을 선택한다.
>음악을 불러왔을때 뜨는아이콘을 클릭하고 아래 프로퍼티창에서
파라미터를 클릭한다,
>파라미터란에 loop 를 밸류란에 true를 입력한다.
>파라미터란에 hidden을 밸류란에 true를 입력한다.
>한페이지용 음악플레이어가 완성된다.
* 프레임셋을 이용하여 멈추지않는 뮤직만들기
(음악을 아래로 넣는다는 가정하에)
>상하프레임구조로 되어있는 프레임셋페이지를 만든다.
>아래프레임에 커서를 넣은후 배경색을 넣어준다.(페이지프로퍼티)
>음악을 넣어준다.(미티어툴이나 사랑비로 넣어준다.)
>파일메뉴에서 saveframe 을 해준다.(이름은 music.htm)
>프레임패널에서 위에프레임을 클릭한다.
>프로퍼티 페널에서 src란에 안에 넣고싶은 페이지의url 혹은
상대경로를 넣어준다.
>다시 프레임패널에서 끝에쪽 전체 테두리를 클릭한다.
>saveFrameset으로 저장한다.
(이름은index.htm)<-메인으로 할경우이다.
>완료
* 미디어툴로 동영상삽입하기
음악과 같은방식으로 미디어툴의 프러그인메뉴를 선택해서
불러오면된다.
#페이지를 열자마자 재생하지 않으려면 파라미터를 누른후
autoplay를 false로 해주면된다.
#루프를 트루로 조정해주면 무한반복된다.
***비해이버(shift + F3)***
* 클릭시 사운드나오게 만들기
버튼이나 이미지링크란에 #를 넣어준다
>비헤이버패널에서 play sound를 클릭한다.
>이벤트설정해주고 완료
# mp3등 형식에 구애받지 않는듯함
* 비헤이버 액션
- 콜 자바스크립트 : 자바스크립트함수 호출
- 체인지프로퍼티: 객체속성변경
- 체크 브라우저 : 브라우저 체크/브라우저에따라
다른문서가나오게 설정
- 큰트롤 쇼크웨이브 오어 플래시 : 플래시 제어
-드래그 레이어: 레이어 드레그기능
-고투 URL : 페이지 이동
-히든팝업메뉴 : 나타난 팝업메뉴를 사라지게 한다.
-점프메뉴 : 점프메뉴를 만든다.
-점프메뉴고 : go버튼이 달린 점프메뉴를 만든다.
-오픈브라우저윈도우즈 : 지정한크기의새창을 이벤트에따라
나타나게한다.
-플레이사운드:이벤트에따라 사운드재생
-팝업메세지 : 띵하는효과음과함께 팝업메세지가 나오게한다.
-프리로드 이미지 : 페이지를 열때 이미지를 먼저 로딩시킨다.
-셋 내비바 이미지 : 네비게이션을 만들어준다.(수직/수평)
-셋 텍스트 오브 프레임 : 이벤트에따라 지정한 프레임에
글자가 나타나게한다.
-셋 텍스트 오브 레이어 : 위와 같고 프레임 ▶레이어
-셋 텍스트 오브 스태이터스 바 : 웹브라우저의 상태바에
글자가 나타나게 한다.
-셋 텍스트 오브 텍스트 필드 : 지정한 텍스트필드에 글자가
나타나게 한다.
-쇼 팝업메뉴 : 팝업메뉴를 만들어준다.
-쇼하이드레이어: 이벤트에따라 레이어를 보여주거나 사라지게함
-스왑 이미지 (리스토어) : 이벤트를 통해 지정한이미지를
다른이미지로 보여준다.(다시 원상복귀)
-밸리데이타 폼 : 폼문서에서 각각의 구성요소의 조건에 따라
가능한지 유효성을 검사한다.
-쇼 이벤트 포 : 비헤이버를 사용할수 있는 웹브라우져 버전의 범위
를 제어할때 사용.
-겟모어비헤이버: 추가비헤이버를 다운받아 설치한다.(익스텐션)
*이벤트메뉴
-온 어보트: 방문자가 로딩을 중단시켰을때 액션이 일어난다.
-온 에프터업데이트:폼문서내용이 업데이트되었을때
액션이 일어난다.
-온비포업데이트:폼문서 내용이 수정되었을때 액션이 일어난다.
-온블러:마우스포인터가 다른객체를 클릭하여 비활성화 되었을때
액션이 일어난다.
-온바운스:마퀴액션이 끝에 다다랐을때 일어난다.
-온체인지:방문자가 내용물의 값을 변경했을때 일어난다.
-온클릭:특정개체를 클릭했을때
-온더블클릭:특정개체를 더블클릭했을떄
-온드래그스타트:드래그를 시작했을때
-온에러:로딩오류가발생했을때
-온피니쉬:마퀴액션이 멈췄을때액션이 일어난다.
-온필터체인지:필터액션이변경될때 액션이 일어난다.
-온포커스:온블러와반대로 마우스포인터가 활성화됬을때일어난다
-온헬프:브라우저도움말기능을 이용할때
-온키다운:특정키를 눌르고있는동안 발생한다.
-온키업:특정키를 눌렀다가 뗀 순간 일어난다.
-온로드 : 웹브라우져에 문서가 로딩되거나 무비와같은 객체가
재생될때 일어난다.
-온마우스다운:마우스버튼을 눌렀을때 액션이 일어난다.
-온마우스무브:마우스를 움직일때 액션이 일어난다.
-온마우스아웃:특정객체를 벗어날때 액션이 일어난다.
-온마우스오버:특정객체의 위에있을때
-온무브:윈도우나 프레임이 이동되었을때 액션이 일어난다.
-온마우스업:마우스버튼을 눌렀다가 뗀순간 일어난다.
-온레디스테이트 체인지:객체의상태가 변경되었을때 일어난다.
-온리셋:폼문서내용을 초기화할때 액션이 일어난다.
-온리사이즈:웹브라우저의 내용을 변경할때 액션이 일어나게
합니다.
-온스크롤:스크롤막대를 스크롤할때 액션이 일어난다.
-온셀렉트:폼문서의 텍스트필드에있는 글자를 선택할때 일어난다.
-온스타트:온피니쉬와 반대로 흐르는 내용물과 같은효과를
만들어주는 마퀴에서 흐름을 시작할때 일어난다.
-온서브밋:폼문서에서 전송버튼을 눌렀을때 일어난다.
-온언로드:방문자가 웹브라우저의 다른문서로 이동할때 액션이
일어난다.
#온무브,온언로드,온로드는 비슷한 속성을 가지고있으니
구분을 잘해두면 좋을것같다.
*버튼누르면 프린트되게하기
객체의링크란에#를 입력한다
>비헤이버패널에서 콜자바스크립트를 선택
>온클릭시 window.print(); 를 쳐준다.
>완료
*버튼누르면 윈도우 닫히기
객체의링크란에#를 입력한다
>비헤이버패널에서 콜자바스크립트를 선택
>온클릭시 window.colse(); 를 쳐준다.
>완료
*문서 실행시에 액션을 주기위해서는 아래 태그셀렉터에서
바디를 클릭하고 비헤이버를 주면 온로드로 이벤트가 설정된다.
*팝업메뉴만들기
바디에 비헤이버를 오픈브라우저 윈도우로 걸어준다
>뜨는 입력창에 주소와 크기를 적어준다.
>완료
*경고상자 나오게하기
비헤이버의 팝업메세지를 온로드나 객체에
비헤이버로 걸어주면 된다.
*쇼팝업메뉴
우선 메뉴바처럼 5,6칸짜리 메뉴테이블을 만들고
각각메뉴마다 쇼팝업메뉴 비헤이버를 걸어준다.
>+를 누르고 텍스트와 링크를 삽입한다.
>하위메뉴의 하위메뉴를 만들고 싶으면 +옆의 도형중 오른쪽
버튼을 선택한다. 계속적인 하위메뉴선택이가능하다
>다른탭부분에서 디자인및 폰트를 변경한다.
>포지션에서 하이드메뉴 온 마우스아웃이벤트가 잘 적용되지
않는이유는 아직 잘 모르겠다.
>완료
*롤오버시 보충글띄우기
텍스트부분은 레이어를 사용해준다
>레이어이름을정해준다.
>마우스를 올릴객체위에 비헤이버 셋텍스트-셋텍스트오브레이어를
선택해준다.
>완료
#상태표시줄도 마찬가지방법으로 - 셋텍스트오브 스테이터스바
#활용하면 문서로딩과함께 스테이터스바에 글자셋팅하기도 가능
*소스코드자동정렬
Alt + C + A (순서대로 누를것)
상세메뉴 : commands > 어플라이 소스포매팅