ブラウザのドキュメントウィンドウは、1つのWebページファイルのみを表示できますが、フレームワークを使用して同じブラウザウィンドウに複数のページを表示できます。フレームを使用するページには主に2つの部分が含まれています。1つはフレームセット、もう1つは特定のフレームファイルです。
フレームワークは、主にWebサイトのバックエンドまたはイントラネットシステムのレイアウトに使用されます。
1。Frameset(<Frameset> </frameset>):このHTMLファイルをフレームワークモードとして定義し、ファイルをウィンドウの除算方法を設定するために使用されます。簡単に言えば、フレームワークセットは、フレームワーク構造を保存するファイルと、フレームワークファイルにアクセスするエントリファイルです。 Webページが2つの左右のフレームで構成されている場合、2つの左右のWebページファイルに加えて、合計フレームセットファイルもあります。フレームを使用するページでは、<body>ボディタグはフレームタグ<Frameset>に置き換えられます。フレームページに含まれるフレームごとに、<frame>タグで定義されます。行属性:水平スプリットウィンドウ。水平方向のスプリットウィンドウは、ページを水平方向にカットすることです。つまり、ページを上下に配置した複数のウィンドウに分割することです。行で複数の値を取得でき、各値はフレームウィンドウの水平幅を表し、そのユニットはブラウザのピクセルまたは割合にすることができます。ただし、一般にいくつかの行の値を設定するとき、いくつかのフレームワークがあります。つまり、対応する<frame>パラメーターの数があることに注意してください。
<html> <head> <title>水平分割ウィンドウの効果</title> </head> <フレームセット行= 30%、70%> <frame> <frame> </frameset> </html>
COLSプロパティ:垂直分割ウィンドウ。垂直分割ウィンドウは、ページを複数のウィンドウに垂直方向に分割することです。つまり、ページを左右に配置された複数のウィンドウに分割します。 COLSで複数の値を取得でき、各値はフレームウィンドウの水平幅を表し、そのユニットはブラウザのピクセルまたは割合にすることができます。通常、いくつかのCOLSの値を設定するときに、水平セグメンテーションウィンドウと同じです。いくつかのフレームワーク、つまりいくつかの<frame>パラメーターがあります。
<html> <head> <title>垂直分割ウィンドウの効果</title> </head> <frameset cols = 20%、55%、25%> <frame> <frame> <frame> <frame> </frameset> </html> </html>
フレームボーダープロパティ:境界線を設定します。デフォルトでは、フレームウィンドウの周りに境界線があります。 FrameBorderパラメーターを使用して、境界線の表示を調整できます。構文は次のとおりです。
<フレームセットframeborder =表示されているかどうか>または<frameframeborder =表示されているかどうか>。 FrameBorderの値は0または1のみになります。値が0の場合、境界線は非表示になります。値が1の場合、境界線が表示されます。フレームセットの設定はフレームワーク全体で有効であり、フレームでの設定は現在のフレームワークに対してのみ有効です。
<html> <head> <title>フレームウィンドウのボーダーディスプレイ効果を設定</title> </head> <フレームセット行= 20%、55%、25%> <フレームセットcols = 35%、65%frameborder = 0> <frame> <frame> </frameset>
フレームスペースプロパティ:フレームの境界幅。フレームの境界幅はデフォルトで1ピクセルで、パラメーターのフレームスペースによってサイズ変更できます。
構文:<フレームセットフレームペース=境界幅>
注:境界幅は、ページ内の各境界間のラインの幅、ピクセルです。このパラメーターは、フレームワークセットにのみ使用でき、単一のフレームワークでは無効です。
<html> <head> <title>フレームボーダー幅を設定</title> </head> <フレームセット行= 30%、70%フレームスペーシング= 10> <frame> <フレームセットcols = 20%、55%、25%フレームスペース= 30> <フレーム><フレーム><フレーム><frame> </frameset> </html> </html>
BorderColorプロパティ:フレームの境界色。パラメーターの境界線を使用して、フレームセットの境界色を設定します。
構文:<フレームセットbordercolor = color code>
注:このパラメーターは、フレームワークセット全体でのみ有効であり、単一のフレームワークには有効ではありません。
<html> <head> <title>フレームボーダー色の設定</title> </head> <フレームセット行= 30%、70%フレームスペース= 10 bordercolor =#cc99ff> <frameset cols = 20%、55%、25%フレームスペース= 30 bordercolor =#9900ff> <フレーム> </html>2。フレーム(<frame>)およびSRC属性。
フレームワーク構造の各ページは個別のテキストであり、これらのファイルはSRCパラメーターを介して設定されています。
構文:<フレームsrc =ページソースファイルアドレス>
注:ページファイルは、フレームページの特定のコンテンツです。ソースファイルと空白のページを設定せずにフレームに影響を与えません。ページのソースファイルは、通常のHTMLファイル、または画像またはその他のファイルにすることができます。
<html> <head> <title>セットページソースファイル</title> </head> <フレームセット行= 30%、70%> <フレームsrc = pic01.gif> <フレームSrc = src01.html> </frameset> </html>3. <noframes> </noframes>タグ
<noframes> </noframes>タグは、ブラウザがフレームをサポートしていない場合にページコンテンツを表示するために使用されます。
<html> <フレームセットcols = 25%、50%、25%> <フレームsrc =/example/html/frame_a.html> <frame src =/example/html/frame_b.html> <frame src =/example/html/frame_b.html> <フレームSrc =/html/html/html/html/html <noframes> <body>ブラウザはフレームワークを処理できません! </body> </noframes> </frameset> </html>2。フローティングフレーム(<iframe>)
フローティングフレームは比較的特別なフレームです。ブラウザウィンドウに子の窓をネストします。つまり、ページ全体はフレームページではありませんが、フレームウィンドウが含まれています。フレームウィンドウに対応するページコンテンツを表示します。フローティングフレームはインラインフレームとも呼ばれるため、名前が付けられています。
構文:<iframe src =ページソースファイル> </iframe>
注:通常のフレーム構造と同様に、フローティングフレームは、名前、スクロール、フレームボーダーなどの多くのパラメーターを設定することもできます。ただし、通常のフレームと比較して、フローティングフレームにはフレームペースとボーダーカラーのパラメーターが含まれていません。
SRC属性:フローティングフレームワークで最も基本的なパラメーターはSRCです。これは、フローティングフレームワークページのソースファイルアドレスを設定するために使用され、フローティングフレームワークページに必要なパラメーターでもあります。ソースファイルのコンテンツが設定されている場合にのみ、フローティングフレームワークが理にかなっているためです。構文:<iframe src =ページソースファイル>
幅と高さのプロパティ:通常のフレームワーク構造では、フレームワークはブラウザウィンドウ全体であるため、サイズを設定する必要はありません。ただし、フローティングフレームでは、通常のHTMLページに挿入され、フレーム全体をサイズ変更できます。構文:<iframe src = src = floatingフレームページソースファイルwidth =ページ幅の高さ=ページ高さ>、ページの幅と高さの値はピクセルです。
<html> <body> <iframe src =/i/eg_landscape.jpg width = 550 height = 310> </iframe> <p>いくつかの古いブラウザーはiframesをサポートしていません。 </p> <p>サポートされている場合、IFrameは表示されません。 </p> </body> </html>3.フレームワークレイアウトの例
<html> <head> <title> frame Homepage </title> </head> <frameset rows = 20%、*> <! - 制御ファイルのコンテナ - > <フレーム名= Topfame src = 3.html noresize/>> <フレームセットcols = 240px、*> <frame src = 1.html/< src = 2.html marginwidth = 20pxスクロール= no/> </frameset> <noframes> <! - noframesタグにはボディタグを含めることができます - > <body>このページはフレームセットタグをサポートしません! </body> </noframes> </frameset> </html>4。リンクのフレームワークから抜け出す方法
Webサイトのバックエンドレイアウトでは、フレームワークがより頻繁に使用されます。多くの場合、フレームワークから飛び出してページをリロードする必要があります。では、リンクはどのようにしてフレームワークから抜け出すことができますか?実際、<a> </a>タグのターゲット属性を_topに指定する必要があります。これが簡単な例です。
<html> <body> <p>フレームにロックされていますか? </p> <a href =/index.htmlターゲット= _top>ここをクリックしてください! </a> </body> </html>