 |
Web技術実習 |
| 戻る〔２３．レイアウト〕 次へ〔２５．Webサイトの構成〕 目次 |
|
Web技術実習 |
| 戻る〔２３．レイアウト〕 次へ〔２５．Webサイトの構成〕 目次 |
フレーム(Frame)とは枠のことで、このフレーム機能を使うと、Webブラウザの画面をフレームで区切り、それぞれのフレームの中に違うWebページを表示することができる。
↓フレーム1 ↓フレーム2
abc.htm
xyz.htm
上図は、Webブラウザをフレーム機能で二分割した状態である。左側のフレーム1にファイルabc.htmの内容、右側のフレーム2にファイルxyz.htmの内容というように別々の内容を表示させることができる。
図では、二分割であるが、何分割にでもできる。
実際には、Webブラウザを「フレームに分割する指示」や「各フレームに表示するファイルを指定する」ためのファイルが必要になる。このファイルを「フレーム設定ページ」と呼ぶ。
上図の二分割の場合、フレーム指示に使われるフレーム設定ページと表示されるabc.htmとxyz.htmの3つのHTMLファイルが必要になる。
次に、フレーム設定ページのHTMLソース（タグ）の一部を示す。
<FRAMESET cols="25%,75%"> ←左右(縦)分割。横幅を25%と75%に分割。
<FRAME name="frame1" src="abc.html"> ←1つ目のフレーム。 名前とファイル名を
<FRAME name="frame2" src="xyz.html"> ←2つ目のフレーム。 設定している。
<NOFRAMES> ←フレームに対応していないWebブラウザのための設定。
<BODY>
<P>このページを表示するには、フレームをサポートしているブラウザが必要です。</P>
</BODY>
</NOFRAMES>
</FRAMESET>
実習２２ フレーム分割したWebページを作成する。
HPBは「Web」のサイトを開いておくこと。ファイル名は「menu1.htm」とする。
Webページは「index.htm」を開いておくこと。
トップへ戻る
Web技術実習
課題作品
x年x組xx番
xxx xxxフォント
フォントサイズ
フォント装飾
フォント装飾2
画像と文字
表(テーブル)
Webセーフカラー
色相・明度・彩度
色のイメージ
色相環で配色
そのほかの配色
Web技術実習
課題作品x年x組xx番
xxx xxx
↑リンク先へ移動はしない。
操作１ トップページ(index.htm)をファイル名menu1.htmで保存する。
トップページはサイトの入り口なので、そのままにしておく。
操作２ フレームのページを作成する。メニューバーから次のように選択する。
［フレーム(R)］ → ［フレームの分割(P)...］ → ［縦に分割(V)］
フレーム設定後の現在ページのダイアログで［フレーム内に表示(N)］にチェックを入れて［OK］ボタンをクリックする。
操作３ 左側のフレーム(index.htm)にカーソルを移動して、メニューバーから次のように選択する。
［フレーム(R)］ → ［フレーム属性の変更(W)...］
属性のダイアログで、次のように入力する。
・URL(U) ＝ menu1.htm（変更なし）
・フレーム名(F) ＝ menu
・サイズ ＝ 200、ピクセル単位
操作４ 右側のフレームにカーソルを移動して、メニューバーから次のように選択する。
［フレーム(R)］ → ［フレーム属性の変更(W)...］
属性のダイアログで、次のように入力する。
・URL(U) ＝ main.htm
・フレーム名(F) ＝ sakuhin
・サイズ ＝ * 指定 （残り全部という意味）
操作５ 編集画面の［フレームなし］タブをクリックする。ファイル名（frame.htm）で保存する。
このページが「フレーム設定ページ」となる。フレーム分割したWebページを見るにはこのファイル名frame.htmを指定する。
操作６ 編集画面の［ページ編集］タブをクリックして、右側のフレームにデータ（上の例参照）を入力する。
操作７ 左側のフレームのリンク設定を変更する。ターゲット(T)に"sakuhin"と設定を追加する。また、1行目の「トップへ戻る」にトップページへのリンクを設定する。このとき、ターゲット(T)は［全画面］に設定する。
操作８ 左右のフレームをそれぞれ保存する。
メニューバーの［ファイル(F)］から［すべて保存(B)］を選択するとよい。
操作９ Webブラウザで新しいトップページ(frame.htm)を確認する。
操作１０ サイト「Web」のWebページとして、リンクを設定する
- index.htm （トップページ）
- ① 「そのほかの配色のサンプル」の次の行に「フレームメニュー」と文字を入力する。
② 文字「フレームメニュー」をドラッグして選択して「frame.htm」にリンクを設定し、上書き保存する。
※注意 … 右側に表示されるサンプルのWEbページにある「トップページへ戻る」をクリックすると分割が増えるので、クリックしないこと。クリックしてしまったときは、Webブラウザの［戻る］ボタンを使う。
☆☆ 対 策（2通り） ☆☆
(1) サンプルのWebページにある「トップページへ戻る」を削除する。
(2) サンプルのWebページにある「トップページへ戻る」のリンク設定にターゲットを追加設定する。ターゲット(T) ＝ 親ウィンドウ（または
全画面）
操作１１ 2番目の対策をする。「フォント」～「そのほかの配色」の11個のWebページにある「トップページへ戻る」のリンク設定に「ターゲット(T) ＝ 親ウィンドウ」を追加設定して、保存する。
操作１２ Webブラウザでリンクの確認をする。
コンテンツ (contents)
内容・中身のことである。Webページでは、文章、画像、音楽などデジタル化されたデータを組み合わせた内容であり、特に、デジタルコンテンツと呼ぶこともある。
| 戻る〔２３．レイアウト〕 次へ〔２５．Webサイトの構成〕 目次 | |
|
| Web技術実習 | Copyright © 2006,2007 Hiroshi Masuda | |
