이 예에서는 그림 1과 같이 두 개의 페이지가 생성됩니다. Index.html은 하위 창에 표시되는 페이지이고, firstpage.html이라는 페이지에는 하위 창에서 Index.html을 열 수 있는 링크가 포함되어 있습니다. 링크를 클릭하면 index.html이 하위 창에서 열립니다. 하위 창에서 "닫기" 링크를 직접 클릭하여 하위 창을 닫거나 무시할 수 있습니다. 하위 창은 15초 후에 자동으로 닫힙니다.
그림 1 브라우저 팝업 페이지의 구체적인 동작은
다음과 같습니다.
1. 로컬 사이트에 Smlple 폴더를 생성합니다.
2. Smlple 폴더에서 Index.html 및 firstpage.html이라는 파일을 생성합니다.
3. Index.html을 두 번 클릭하여 문서를 열고 문서의 디자인 보기 창으로 들어갑니다.
4. 보기/머리 내용 메뉴를 클릭하면 문서의 머리 부분이 표시됩니다.
5. 디자인 보기 창에서 문서 머리글 창을 클릭합니다. 삽입/보이지 않는 태그/스크립트 메뉴를 선택하여 삽입 스크립트 대화 상자를 엽니다. 그림 2에 표시된 대로 언어 드롭다운 목록 상자에서 JavaScript 옵션을 선택하고 Coctento 텍스트 상자에 "setTimeout("self.close()", 15000)"을 입력합니다. 확인 버튼을 클릭하면 문서 헤더에 자식 창을 삽입한 후 15초가 지나면 자동으로 자식 창을 닫는 스크립트가 완성됩니다. 코드에서 15000은 15000밀리초를 의미하며, 필요에 따라 15초로 수정할 수도 있습니다.
그림 2 시간 설정
6. 문서 창에 "Close"라는 단어를 입력하고 속성 패널의 링크 텍스트 상자에 "###"을 입력한 후 빈 링크로 설정합니다.
7. 상태 표시줄 왼쪽 끝에 있는 퀵 태그 편집기에서 태그 버튼을 클릭합니다. "닫기" 링크를 선택한 다음 Ctrl+T 키 조합을 눌러 퀵 태그 편집기를 열고 퀵 태그 편집기의 태그 편집 모드로 들어갑니다. 그런 다음 ">" 앞에 "onclick="selfclose()""를 입력합니다. 그림 3과 같이 설정이 완료되면 확인 버튼을 클릭하여 동작을 확인합니다. 이렇게 하면 Index.html이 하위 창으로 열린 후 해당 링크를 클릭하면 하위 창이 즉시 닫힐 수 있습니다.
그림 3 시간 설정
8. Index.html 파일을 저장하고 index.html의 Dremweaver 창을 종료합니다.
9. 이제 fristpage.html 페이지 디자인을 시작하세요. 로컬 사이트의 Smlple 폴더에서 fristpage.html을 더블클릭하여 문서를 열고 문서의 디자인 보기 창으로 들어갑니다.
10. 문서에 "자동으로 닫히는 하위 창을 열려면 여기를 클릭하세요"라는 문구를 입력합니다. 그런 다음 속성 패널의 링크 텍스트 상자에 "###"을 입력하여 빈 링크로 설정합니다.
11. 링크에 브라우저 창 열기 동작을 적용하여 링크를 클릭할 때 Index.html 창이 열리도록 설정할 수 있지만 더 편리한 방법은 Quick Identity Editor를 사용하는 것입니다. 이렇게 하려면 먼저 링크에 삽입 지점을 놓은 다음 상태 표시줄 왼쪽 끝에 있는 ID 선택기의 ID 버튼을 클릭하여 전체 링크를 선택합니다. 그런 다음 Ctrl+T 키 조합을 눌러 퀵 태그 편집기를 열고 퀵 태그 편집기의 로고 편집 모드로 들어갑니다. 그런 다음 ">" 앞에 "onclick="window.open('index.html',null','width=200px, height=200px')"를 입력합니다(그림 4 참조). 설정이 완료되면 Enter 키를 눌러 동작을 확인하세요.
그림 4 클릭 시 링크가 열리도록 설정
12. 위 작업으로 이 예제에 대한 설정이 완료되었습니다. 메뉴를 클릭하고 파일/저장을 사용하여 작업을 저장할 수 있습니다. 그런 다음 F12 키를 눌러 브라우저에서 페이지 효과를 미리 봅니다.