AFsoft WebSite(エーエフソフト・ウェブサイト)
 

オペレーティング・システムについて

プログラミングについて
ホームページについて
キャドについて
電子カタログについて
書籍・雑誌
イベント
リンク集
Hotall(ホタル)(8)

フレームとは、ホームページ画面を複数の画面に分割し、一方の画面をタイトル表示やメニュー表示等として利用する機能です。
左右分割の例
MENU
@
A
B
− My HomePage −
@AB
XXXXXXXX
XXXXXXXX
XXXXXXXX
XXXXXXXX
XXXXXXXX
XXXXXXXX
XXXXXXXX
XXXXXXXX
XXXXXXXX
XXXXXXXX
XXXXXXXX
XXXXXXXX
XXXXXXXX
XXXXXXXX
XXXXXXXX

上下分割の例
MENU @ A B
− My HomePage −
@AB
XXXXXXXX
XXXXXXXX
XXXXXXXX
XXXXXXXX
XXXXXXXX
XXXXXXXX
XXXXXXXX
XXXXXXXX
XXXXXXXX
XXXXXXXX
XXXXXXXX
XXXXXXXX
XXXXXXXX
XXXXXXXX
XXXXXXXX

フレーム表示は、フレームドキュメント(画面の分割状態を示すHTMLファイル)と、各分割画面に表示させるHTMLファイル、から成ります。
左右分割と上下分割を組み合わせて複雑なフレーム表示を行う事も出来ます。フレームは何個も作れますが、あまり分割し過ぎると画面が見難くなりますし綺麗ではありませんので、ほどほどにしておくようにしましょう。
 
8−1.フレームドキュメント

フレームドキュメントは、メニュー「ファイル|新規作成|フレームドキュメント」を行って作成します。以下のような画面が表示されます。

左右に分割するか上下に分割するか、及び、分割数を指定します。この状態で[OK]をクリックすると、以下のような画面で新規ドキュメントが作成されます。

ここでは例として、左側にメニュー画面、右側に種々内容を表示するようにします。取りあえずこのフレームドキュメントは「index.html」として保存しておきましょう。
次に、左側に表示するメニュー画面用のHTMLファイルを用意します。メニュー「ファイル|新規作成|通常ドキュメント」を行って右図のようなメニュー画面を作成し、「menu.html」として保存します。
「ページ@」「ページA」「ページB」は後でハイパーリンクの指定をするようにします。
更に、右側に最初に表示する画面(トップページ)用のHTMLファイルを用意します。メニュー「ファイル|新規作成|通常ドキュメント」を行って右図のようなトップ画面を作成し、「top.html」として保存します。

では最初に作成したフレームドキュメント「index.html」の左側をクリックし、メニュー「フレーム|プロパティ」(又は右クリックメニュー「プロパティ」)を行って下さい。以下のような画面が表示されます。

「名前」そのフレームを特徴付ける名前を入力します。今回は「LeftScrn」とします。
「ファイル名」このフレームに表示するHTMLファイル名を指定します。今回は、上記で作成した「menu.html」と入力して下さい。
「サイズ」左右分割の場合には、横幅のサイズを%値指定 又は ピクセル値指定します。%値指定をすると状況により実際の大きさが変わりますので、今回は「ピクセル指定」「140」と指定して下さい。
「上下余白」フレーム内の枠と、そこに表示されるHTML表示内容との間隔値を指定します。今回は「標準」のままとします。
「左右余白」
「スクロール」 このフレーム内の表示状態を指定します。画面全体を小さくした場合、フレーム内に内容が全て表示出来ない場合、スクロールさせる事が出来るようにするか否かを指定します。
「標準」/「自動」:画面状態によって、スクロールバーが表示・非表示となります。
「する」 :スクロールバーは常に表示されます。
「しない」:スクロールバーは常に非表示となります。
今回は「しない」にします。
「リサイズ
できなくする」
ここにチェックが入っていない場合は、フレームとフレームの境界線をマウスでドラッグすると、フレームの大きさを変更する事が出来ます。フレームの大きさを固定したい場合は、これにチェックを入れます。
今回はチェックを入れます。

次に、フレームドキュメント「index.html」の右側をクリックし、メニュー「フレーム|プロパティ」(又は右クリックメニュー「プロパティ」)を行って下さい。こちらは、以下のように設定して下さい。
「名前」「MainScrn」
「ファイル名」「top.html」
「サイズ」「標準」 メイン表示側はサイズ指定しないで下さい。
「上下余白」「標準」
「左右余白」
「スクロール」「標準」
「リサイズ
できなくする」
チェックしない

※ 固定する側(固定メニューや固定タイトル等)のフレームを先に設定するようにして下さい。
 
上記のように指定すると、以下のような画面になります。

※画面デザイン時と実行時は、表示状態が違いますので必ず「プレビュー」やInternet Explorer・Netscape等で確認して下さい。
 
8−2.入れ子

フレームドキュメント内に、更にフレームドキュメントを指定して「入れ子」状態にする事が可能です。
通常の3分割
★タイトル★
MENU
@XX
AYY
BZZ
メイン画面
2分割&2分割
★タイトル★
MENU
@XX
AYY
BZZ
メイン画面
フレームの名前付け
TitleScrn
Left
Scrn
MainScrn
TitleScrn
BtmScrn

TitleScrn
BtmScrn
Left
Scrn
MainScrn

通常の3分割では、タイトル・左メニュー・メイン画面の画面構成を変更する事は出来ませんが、入れ子状態にしておけば、タイトルを残したまま左メニュー・メイン画面の2つを別の1ページへ変更する事が出来るようになります。
 
8−3.ハイパーリンク

フレーム内でハイパーリンクを行う場合には、通常のようにハイパーリンク指定を行えばOKです。
 
(ターゲットウィンドウでの「現在のウィンドウ/フレーム(_self)」の指定は、この場合と同様になります。)
★タイトル★
MENU
@XX
AYY
BZZ
<TOP>
 
@XXXX
AYYYY
     
★タイトル★
MENU
@XX
AYY
BZZ
@XXXX
■■■■■
■   ■
■■■■■

あるフレームから別のフレーム内容をハイパーリンクでページ変更させたい場合には、ハイパーリンクの指定時に、「ターゲットウィンドウの指定」にチェックを入れ、「ターゲットウィンドウ」に、内容を変更したいフレームの名前を入力します。上記の例では、「MainScrn」と入力します。
★タイトル★
MENU
@XX
AYY
BZZ
<TOP>
Welcome
to
My HP
  \
   \
    \
     ↓
★タイトル★
MENU
@XX
AYY
BZZ
@XX
■■■■■
■   ■
■■■■■

あるフレームから、すぐ上(親)のフレーム内容をハイパーリンクでページ変更させたい場合には、ハイパーリンクの指定時に、「ターゲットウィンドウの指定」にチェックを入れ、「ターゲットウィンドウ」に「親フレーム(_parent)」を指定します。
 
(親フレームの名前を指定しても同様の事が出来ます。)
★タイトル★
MENU
@XX
AYY
BZZ
<TOP>
@XX
■■■■■
■   ■
■■■■■
  \
   \
    \
     ↓
★タイトル★
<TOP>
Welcome
to
My HomePage

あるフレームから、画面全体をハイパーリンクでページ変更させたい場合には、ハイパーリンクの指定時に、「ターゲットウィンドウの指定」にチェックを入れ、「ターゲットウィンドウ」に「ウィンドウ全体(_top)」を指定します。
★タイトル★
MENU
@XX
AYY
BZZ
<TOP>
@XX
■■■■■
■   ■
■■■■■
  \
   \
    \
     ↓
 
Welcome
to
My HomePage
 
ホームページ
 Hotall(1)
 Hotall(2)
 Hotall(3)
 Hotall(4)
 Hotall(5)
 Hotall(6)
 Hotall(7)
 Hotall(8)
PaintShoPro
AnimationShop
サウンド
動画
Web3D
 
お問い合わせ 
本サイトはリンクフリーです
リンクバナー
(C)Copyright 1999-2015 By AFsoft All Rights Reserved.