この例では、図 1 に示すように 2 つのページが作成されます。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)」と入力します。 [OK] ボタンをクリックして、子ウィンドウをドキュメント ヘッダーに挿入してから 15 秒後に自動的に閉じるスクリプトを完了します。コードでは、15000 は 15000 ミリ秒、つまり 15 秒を意味します。必要に応じて、必要なミリ秒数に変更することもできます。
図 2 時間の設定
6. ドキュメント ウィンドウに「Close」という単語を入力し、プロパティ パネルの [リンク] テキスト ボックスに「###」と入力して、空のリンクに設定します。
7. ステータス バーの左端にあるクイック タグ エディタで、[タグ] ボタンをクリックします。 [閉じる] リンクを選択し、Ctrl+T キーの組み合わせを押してクイック タグ エディターを開き、クイック タグ エディターのタグ編集モードに入ります。次に、「>」の前に「onclick="selfclose()"」を入力します。 図 3 に示すように、設定が完了したら、[OK] ボタンをクリックして操作を確定します。これにより、Index.html を子ウィンドウとして開いた後、リンクをクリックするとすぐに子ウィンドウを閉じることができます。
図 3 時間の設定
8. Index.html ファイルを保存し、index.html の Dremweaver ウィンドウを終了します。
9. 次に、fristpage.html ページのデザインを開始します。ローカル サイトの Smlple フォルダーで、fristpage.html をダブルクリックしてドキュメントを開き、ドキュメントのデザイン ビュー ウィンドウに入ります。
10. 文書に「ここをクリックすると、自動的に閉じるサブウィンドウが開きます」という文言を入力します。次に、プロパティ パネルのリンク テキスト ボックスに「###」と入力して、空のリンクとして設定します。
11. [ブラウザ ウィンドウを開く] 動作をリンクに適用することで、リンクがクリックされたときに Index.html ウィンドウが開くように設定できますが、より便利な方法は、クイック ID エディターを使用することです。これを行うには、まずリンク内に挿入ポイントを置き、ステータス バーの左端にあるアイデンティティ セレクターの [アイデンティティ] ボタンをクリックしてリンク全体を選択します。次に、Ctrl+T キーの組み合わせを押してクイック タグ エディターを開き、クイック タグ エディターのロゴ編集モードに入ります。次に、「">」の前に「onclick="window.open('index.html',null','width=200px, height=200px')」と入力します (図 4 を参照)。設定完了後、Enterキーを押して操作を確定します。
図 4 クリック時にリンクが開くように設定する
12. 以上の操作で、この例の設定は完了です。メニューをクリックし、「ファイル」/「保存」を使用して作業内容を保存できます。次に、F12 キーを押して、ブラウザでページ効果をプレビューします。