"팝업창은 어떻게 만드나요?" 드림위버 초보자들이 자주 묻는 질문입니다. 특수 효과를 제공하는 웹사이트를 찾거나, 특수 효과 도구를 다운로드하고 코드를 붙여넣기만 하면 됩니다! 아직은 쉽지 않습니다. 실제로 더 쉬운 방법은 가장 일반적으로 사용되는 Dreamweaver를 사용하는 것입니다. 몇 번의 클릭만으로 일반 팝업창이 완성됩니다. 믿을 수 없나요? 와서 보세요! 다음 단계를 따르면 팝업창 효과를 쉽게 만들 수 있습니다.
1. 먼저 메뉴 바의 Window->Behaviors에서 비헤이비어 패널을 불러오거나 단축키 Shift+F3을 직접 누르세요.
2. 그림과 같이 비헤이비어 패널의 왼쪽 상단에 있는 "+" 기호를 눌러 비헤이비어를 추가하고 팝업 메뉴에서 "브라우저 창 열기" 비헤이비어를 선택합니다.
3. 동작을 선택하면 그림과 같이 브라우저 창 열기 대화 상자가 나타납니다. 대화 상자에 해당 창 정보를 입력하고 "확인"을 클릭하면 팝업 창 사용자 정의가 완료됩니다. ~에
"표시할 URL": 새 창에 표시하려는 웹페이지 주소는 직접 입력하거나 "찾아보기" 버튼을 눌러 지정할 수 있습니다.
"창 너비" 및 "창 높이": 각각 새 창의 너비와 높이(px)입니다.
"속성": 창의 특성입니다.
"탐색 도구 모음", "메뉴 모음", "위치 도구 모음", "필요에 따른 스크롤 막대", "상태 표시줄", "핸들 크기 조정"
각각 도구 모음, 메뉴 모음, 위치 지정 도구 모음, 스크롤 막대 및 크기 변경 핸들을 나타냅니다. 해당 위치 앞의 체크 표시를 선택하면 새 창에 해당 기능이 있다는 의미입니다.
"창 이름": 대상 창의 이름입니다. 하나를 선택하거나 프레임 그룹에서 창 이름을 지정할 수 있습니다. 팝업 창을 만들 때 임의의 이름을 지정하십시오.
위 단계를 완료한 후 동작 패널은 다음과 같이 되며 페이지를 로드하는 동안(onLoad) 새 탐색 창이 열릴 것임을 나타냅니다.
실제로 비헤이비어 패널에 비헤이비어를 추가하는 과정은 Dreamweaver에서 Javascript 코드를 생성하는 과정입니다. 위 단계에서 다음 코드가 생성되었습니다. 아래에 굵게 표시된 "< !—"와 "-- >" 사이의 주석은 코드의 이 부분에 대한 주석입니다.
<html>
<머리>
<title>제목 없는 문서</title>
< 메타 http-equiv="Content-Type" content="text/html; charset=gb2312" >
< 스크립트 언어="자바스크립트" >
< !--
함수 MM_openBrWindow(theURL,winName,features) { //v2.0
window.open(theURL,winName,features);
}
//-- >
</ /script >< !—전달된 값을 기반으로 창 열기 -- >
</ /머리 >
< body bgcolor="#FFFFFF" text="#000000" onLoad="MM_openBrWindow('yourpage.htm', 'winname','toolbar=yes,location=yes,status=yes, menubar=yes,scrollbars=yes, 크기 조정 가능=예, 너비=300, 높이=200')" >
< !—팝업 창의 각 속성 값을 설정하고 해당 값을 각 해당 형식 매개변수에 전달한 후 실행 이벤트를 onLoad로 설정합니다.-->
팝업창 효과
< /본문 >
< /html >
위 코드를 다음과 같이 이해할 수 있습니다. onLoad 이벤트가 발생하면(즉, 이미지나 페이지 로드가 종료되면) MM_openBrWindow() 메서드가 호출되고 값이
"'yourpage.htm', 'winname', 'toolbar=yes,location=yes, status=yes,menubar=yes,scrollbars=yes, 크기 조정 가능=yes,width=300,height=200'"
(여기에서는 실제 매개변수라고 함) window.open()에서 사용할 수 있도록 해당 형식 매개변수("theURL, winName, 기능")를 전달합니다. 세 매개변수는 모두 작은따옴표로 묶어야 합니다. 이 코드 중 가장 중요한 문장은 다음과 같습니다.
"window.open(theURL,winName,features)"
즉, winName이라는 창에서 기능에서 지정한 특성에 따라 URL 주소의 페이지를 엽니다.
코드의 의미를 이해한 후에는 다음과 같이 코드를 직접 작성할 수 있음을 알 수 있습니다.
onLoad="window.open('yourpage.htm', 'winname','toolbar=yes, location=yes,status=yes,menubar=yes, scrollbars=yes,resizing=yes,width=300,height=200' )"
한 문장. 이러한 작성 방식은 Dreamweaver가 자동으로 코드를 생성하는 효과와 다르지 않습니다.
우리는 window.open()의 세 매개변수의 의미를 이미 알고 있습니다. 첫 번째는 표시할 페이지의 주소이고, 두 번째는 대상 창의 이름이고, 세 번째는 창의 모양 특성에 대한 설명입니다. 창문. 첫 번째와 두 번째 매개변수에 대해서는 자세히 설명하지 않겠습니다. 세 번째 매개변수에 대해 다음과 같이 쓸 수 있습니다.
"'도구 모음=아니요, 위치=아니요, 디렉토리=아니요, 상태=아니요, 메뉴바=아니요, 스크롤바=아니요, 크기 조정 가능=아니요, 너비=300, 높이=200, 왼쪽=100, 상단=100'"
여기서 도구 모음은 도구 모음, 위치는 주소 표시줄, 디렉터리는 탐색 모음, 상태는 상태 표시줄, 메뉴 바는 메뉴 모음, 스크롤 바는 스크롤 막대, 크기 조정 가능은 크기 변경 핸들, 너비와 높이는 창의 너비와 높이는 각각 창이 팝업되는 위치를 나타냅니다.
도구 모음, 위치, 디렉터리, 상태, 메뉴 모음, 스크롤 막대 및 크기 조정 가능 값을 yes, no, 1 또는 0으로 설정할 수 있습니다. yes(1)는 새 창에 이 기능이 있음을 의미하고 no(0)는 그렇지 않습니다. width, height, left, top 값은 숫자로 채워야 하며, 단위는 px입니다.
그렇게 말했는데 이해가 되시나요? Dreamweaver에서는 비헤이비어를 추가하고 팝업 창을 만드는 것이 쉽지 않습니까? 코드를 손으로 작성하는 것은 어렵지 않나요? 조금만 더 연습하면 짧은 시간 안에 다음과 같은 느낌을 받게 될 것입니다. 팝업 창을 만드는 것이 너무 간단하다는 사실이 밝혀졌습니다!