 |
Web技術実習 |
| 戻る〔２８．フォーム〕 次へ〔３０．クッキー 〕 目次 |
|
Web技術実習 |
| 戻る〔２８．フォーム〕 次へ〔３０．クッキー 〕 目次 |
ナビゲーションメニューⅠでも、スクリプト(Javascript)と組み合わせた「ロールオーバー形式」や「プルダウン形式」を見てきたが、さらにフォームとスクリプトの連携したメニューなどを学習する。
29-1 リストボックスでメニュー
項目の値として、リンク先のURLを設定する。スクリプトのlocation.hrefでリンク先に移動する。オプションメニューでも同じように利用することができる。
実習２8
リストボックスでメニューのWebページを作成する。
HPBは「Web」のサイトを開いておくこと。
ファイル名は「menu2.htm」とする。ページのタイトルは「メニュー2」とする。
※※ サンプルのWebページなので、動作は保証されない。 ※※
操作１ 「Web技術実習 課題作品」と入力して、見出し<H2>に設定し、中央揃えにする。
操作２ フォームを配置する。フォームの属性のダイアログで、［名前(N)］に「mymenu」と入力して、[OK]ボタンをクリックする。
操作３ リストボックスを配置する。属性のダイアログで、［名前(N)］に「menu」、［行数(W)］に「3」を入力する。［項目(I)］と［値(V)］には次のデータを設定する。
最後に、選択肢のリストの先頭にある「フォント」をクリックして、[OK]ボタンをクリックする。
［項目(I)］ ［値(V)］ フォント
画像と文字
表(テーブル)
Webセーフカラーmoji1.htm
gazou1.htm
hyou1.htm
iro1.htm
フォントサイズ
フォント装飾
フォント装飾2
色相・明度・彩度
色のイメージ
色相環で配色
そのほかの配色moji2.htm
moji3.htm
moji4.htm
iro2.htm
iro3.htm
iro4.htm
iro5.htm
操作４ リストボックスの右側に全角の空白文字を1つ入力する。
操作５ プッシュボタンを配置して、イベントのスクリプトを設定する。
① ［入力部品］のツールボックスから、［SUB］または［RES］のアイコンをクリックする。
② 属性のダイアログで、［名前(N)］に「go」、［ボタンに表示するラベル(L)］に「GO」と入力する。
③ ボタンの種類は［プッシュボタン(P)］をチェックする。
④ ［イベント(E)］ボタンをクリックする。
⑤ イベントの編集のダイアログで、［イベント(V)］のリストから「OnClick」をクリックし、［スクリプト(R)］に次のスクリプトを入力する。
location.href = document.mymenu.menu.value;
⑥ ［登録(A)］ボタンをクリックし、［OK］ボタンをクリックする。
操作６ 保存して、Webブラウザでスクリプトの確認をする。
リストから項目を一つ選択（クリック）して GO ボタンをクリックすると、Webページがリンク先に変わる。元のWebページに戻るにはWebブラウザの戻るボタンをクリックする。
◆ スクリプトで、location.href にリンク先のURLを設定すると、そのリンク先に移動する。
◆ リストボックスの代わりにオプションメニューを使っても同じようにメニューを作ることができる。
◆ GO ボタンを作らずに、項目をクリックするとリンク先に変わるようにするには、次のようにする。
① 選択肢のリストの先頭に1つ項目を追加する。［項目(I)］は「選択してください」、［値(V)］はなしにする。この項目を初期選択状態にする。
② ［イベント(E)...］ボタンをクリックして、イベントの編集のダイアログで、［イベント(V)］のリストから「OnChange」をクリックし、［スクリプト(R)］に次のスクリプトを入力する。
location.href = document.mymenu.menu.value;
操作７ サイト「Web」のWebページとして、リンクを設定する。
- index.htm （トップページ）
- ① 「会員登録」の次の行に「メニュー2」と文字を入力する。
② 文字「メニュー2」をドラッグして選択して「menu2.htm」にリンクを設定し、上書き保存する。- menu2.htm
- ① 見出しの次に段落を挿入し、「トップページへ戻る」と文字を入力する。
② 文字「トップページへ戻る」をドラッグで範囲指定して「index.htm」にリンクを設定し、上書き保存する。
※※ サンプルのWebページなので、動作は保証されない。 ※※
29-2 別ウィンドウで開く
選択したリンク先のWebページを別のウィンドウ、すなわちもう一つ別にWebブラウザを起動して表示させる。
リンクのタグを設定するときに、属性のダイアログで［ターゲット(T)］に「新しいウィンドウ」を設定すると、そのリンク先のWebページは別のWebブラウザで表示される。
<A href="moji1.htm" target="_blank">
ここでは、スクリプトのwindow.openを使って新しくWebブラウザを開く。
実習２９ 別ウィンドウでリンク先のWebページを表示するWebページを作成する。
HPBは「Web」のサイトを開いておくこと。
Webページは「index.htm」を開いておくこと。
・新しくWebブラウザを開く
操作１ 「メニュー2」の次の行に「別ウィンドウ1」と文字を入力し、リンクを設定する。
① 属性のダイアログの［ファイルへ］タブで、［ファイル名(N)］に「#」を入力する。
② ［イベント(E)...］ボタンをクリックして、イベントの編集のダイアログで、［イベント(V)］のリストから「OnClick」を選択し、［スクリプト(R)］に次のスクリプトを入力する。
window.open("moji1.htm");
③ ［登録(A)］ボタン、［OK］ボタンをクリックしていき、ダイアログをすべて閉じる。
操作２ 「別ウィンドウ1」の次の行に「別ウィンドウ2」と文字を入力し、前の操作と同じようにしてリンクを設定する。
window.open("iro1.htm");
操作３ 上書き保存して、Webブラウザでリンクの確認をする。
リンクをクリックすると、新しくWebブラウザが開いてWebページが表示される。クリックした回数だけWebブラウザが開くので注意すること。
・Webブラウザを指定（名前を付ける）
操作４ 「別ウィンドウ1」に設定したリンクの属性のダイアログを表示して、［イベント(E)...］ボタンをクリックする。
操作５ 登録されているイベントを選択して、次のように［スクリプト(R)］のスクリプトを変更する。
window.open("moji1.htm", "sub");
［置換(P)］ボタン、［OK］ボタンをクリックしていき、ダイアログをすべて閉じる。
操作６ 前の操作と同じようにして、「別ウィンドウ2」のスクリプトを変更する。
window.open("iro1.htm", "sub");
［置換(P)］ボタン、［OK］ボタンをクリックしていき、ダイアログをすべて閉じる。
操作７ 上書き保存して、Webブラウザでリンクの確認をする。
リンクをクリックすると、新しくWebブラウザが開いてWebページが表示される。ただし、何回クリックしても一つのWebブラウザが開くだけである。
・Webブラウザのサイズを指定
操作８ 「別ウィンドウ2」の次の行に「別ウィンドウ3」と文字を入力し、同じようにしてリンクを設定する。
window.open("moji2.htm", "sub", "width=250, height=300, scrollbars=yes");
操作９ 上書き保存して、Webブラウザでリンクの確認をする。
リンクをクリックすると、新しくWebブラウザが幅250ピクセル、高さ300ピクセルで開いてWebページが表示される。
新しく開いたWebブラウザには、メニューバーもツールボタンもないはずである。
window.open(URL, ウィンドウ名, オプション);
値は、yes|noの代わりに、1|0でもよい。
主なオプション 値 説明 width
height=ピクセル
=ピクセルウィンドウ内側の幅
ウィンドウ内側の高さleft
top=ピクセル
=ピクセルデスクトップ上の表示位置のx座標
デスクトップ上の表示位置のy座標titlebar
menubar
toolbar
location
directories
scrollbars
status=yes|no
=yes|no
=yes|no
=yes|no
=yes|no
=yes|no
=yes|no① タイトルバーの表示／非表示
② メニューバーの表示／非表示
③ ツールバーの表示／非表示
④ アドレスバーの表示／非表示
⑤ リンクの表示／非表示
⑥ スクロールバーの表示／非表示
⑦ ステイタスバーの表示／非表示fullscreen
resizable=yes|no
=yes|noフルスクリーンモードで開く
ウィンドウサイズの変更可／変更不可
Microsoft Intenet Explorer version 6
| 戻る〔２８．フォーム〕 次へ〔３０．クッキー 〕 目次 | |
|
| Web技術実習 | Copyright © 2006,2007 Hiroshi Masuda | |