QQ를 사용하여 채팅을 해본 친구들은 모두 창을 신선하고 깨끗하며 역동적으로 보이게 하는 자동 창 숨김 기능을 좋아합니다. 몇몇 친구들은 자신의 웹 페이지에 비슷한 내용을 추가하고 싶어했고 공동 탐색 끝에 이 사실을 알게 되었습니다. Dreamweaer를 사용하여 효과를 얻을 수 있는 활성 메뉴 표시줄을 생성하는 방법을 살펴보겠습니다.
1단계: 메뉴 모양 만들기
Dreamweaer에서 새 파일을 만들고, 레이어를 그리고, 레이어에 표를 삽입하고(그림 1 참조), 표를 수정한 다음 메뉴 항목을 추가하고 각 항목에 대한 하이퍼링크를 만듭니다. 하이퍼링크의 밑줄을 편집하려면 CSS 스타일 패널에서 CSS 선택기의 "링크"와 "호버"를 모두 "없음"으로 설정하세요. Color"가 빨간색으로 설정되고 마지막으로 설정된 스타일이 각 메뉴 표시줄에 적용됩니다("F12" 키를 누르면 효과를 미리 볼 수 있습니다).
그림 1
2단계: 메뉴의 동적 효과 디자인
1. 레이어를 선택하고 마우스가 "십자" 모양으로 바뀔 때 왼쪽 버튼을 누른 채 페이지 오른쪽 상단으로 레이어를 드래그합니다. (전체 메뉴 표시줄은 완전히 노출되지만 위쪽 가장자리는 살짝 노출됩니다. 페이지 상단 가장자리에 가까움) 창 메뉴 선 패널에서 시간을 열고 레이어를 선택한 다음 타임라인으로 드래그하면 Dreamweaer에서 15프레임 길이의 애니메이션 객체를 자동으로 생성합니다. 애니메이션 객체를 30번째 프레임으로 설정하고 길이를 30프레임으로 설정합니다. 그런 다음 프레임 15를 마우스 오른쪽 버튼으로 클릭하고 팝업 바로 가기 메뉴에서 "키프레임 추가" 옵션을 선택하여 키프레임을 삽입한 다음 레이어를 적절한 위치로 드래그합니다(그림 2).
그림 2 타임라인 창의 프레임 15에서 다시 마우스 오른쪽 버튼을 클릭하고 팝업 바로 가기 메뉴에서 "액션 추가"를 선택한 다음 프레임에 대화형 비헤이비어를 추가하면 Dreamweaer가 자동으로 비헤이비어 패널을 엽니다. 비헤이비어 패널에서 "+" 버튼을 클릭하고 팝업 메뉴에서 "Timeline/Stop Timeline"을 선택한 다음 "Timeline 중지" 대화 상자를 열고 "Timeline1"을 선택한 다음 "OK" 버튼을 클릭하여 대화 상자를 닫습니다. . 대화형 동작의 이벤트는 "onFrame15"이고 동작은 "타임라인 중지"이므로 타임라인이 15번째 프레임에 도달하면 애니메이션 재생이 중지되어 메뉴 막대 바운스 기능이 구현됩니다.
2. 동일한 방법을 사용하여 타임라인의 30번째 프레임에 "타임라인 중지" 대화형 동작을 추가하여 메뉴 팝업 기능을 구현합니다. 이 두 가지 대화형 동작을 추가하면 타임라인 창의 해당 프레임에 파란색 사각형이 나타나며 이는 대화형 동작을 나타냅니다. 애니메이션이 자동으로 반복되도록 하려면 "자동 재생 및 반복" 확인란을 선택합니다(그림 3).
그림 3
3. 이제 타임라인이 중지된 후에도 계속 재생할 수 있도록 동작을 설정해야 합니다. 제 생각은 이렇습니다. 일반 상태에서는 메뉴 표시줄이 팝업되지만 아래에 "Campus Grand View"라는 단어만 유지되며, 메뉴 표시줄의 팝업 및 리바운드는 마우스가 "Campus Grand View" 위로 지나가는지 여부에 따라 제어됩니다. 메뉴바에서 보기'를 선택하세요. . 다음과 같이 계속할 수 있습니다. 메뉴 표시줄에서 "Campus Grand View"라는 단어를 선택하고(이 단어의 하이퍼링크 주소가 "#", 즉 빈 링크인지 확인), 동작 패널에서 "+" 버튼을 클릭합니다. , 팝업 메뉴에서 "Timeline/Play Timeline"을 선택하고 팝업되는 대화 상자에서 "Timeline1"을 선택하고 OK 버튼을 클릭하면 비헤이비어 패널에 비헤이비어가 추가됩니다. "이벤트" 드롭다운 목록에서 "onMouseOver" 이벤트를 선택합니다. 이는 마우스가 단어 위에 있을 때 애니메이션이 재생된다는 것을 나타냅니다(그림 4).
그림 4 이제 활성 메뉴 표시줄이 완성되었습니다. "F12" 키를 눌러 효과를 미리 볼 수 있습니다.
하지만 이 메뉴바에는 한 가지 단점이 있습니다. 메뉴바 아래의 특정 영역(이 경우 "Campus Grand View"라는 단어)을 마우스가 통과할 때 메뉴바가 팝업되도록 하려면 클릭하면 됩니다. 메뉴 표시줄에서 마우스를 멀리 이동하면 Fireworks나 Flash를 사용해야 할 수도 있습니다. 좋은 방법이 있으면 메일로 문의해 주세요.
