10.4.1フレームセットとフレームの違い
まず、フレームセットとフレームの違いを説明しましょう。
<フレームセット> </frameset>はフレームを分割するために使用され、各フレームは<frame> </frame>でマークされています。 <frame> </frame>は<frameset> </frameset>内で使用する必要があります。コードは次のとおりです。
<フレームセット境界= 1フレームスペース= 1 bordercolor =＃47478d rows =* cols = 180、*>
<frame src = "inc/admin_left.htm" name = left scrolling = no id = "left">
<frame src = "inc/admin_center.htm" name = main scrolling = "no">
</frameset>
上記の例では、<Frameset> </frameset>ページを2つの部分に分割します。左フレームのページはadmin_left.htm、右フレームのページはadmin_center.htmです。
注：<frame> </frame>タグのフレーム順序は、左または右から下に残っています。
2つの違いは次のとおりです。
●<Frameset>はフレームタグであり、Webページドキュメントがフレームで構成されていることを示し、ドキュメント内のフレームセットを構成するフレームのレイアウトを設定します。
●<frame>は、フレームを構成する各フレームのプロパティを設定するために使用されます。
10.4.2フレームセットパラメーター設定
<Frameset>特定のパラメーターを設定する必要があります。これにより、ページ全体のレイアウトが直接決定されます。コードは次のとおりです。
<フレームセット境界= 1フレームスペース= 1 bordercolor =＃47478d rows =* cols = 180、*>
前のコードのパラメーター設定とその意味を表10.3に示します。
表10.3フレームセットパラメーター
パラメーター | 説明します |
国境 | フレームの厚さをピクセルで設定します |
フレームボーダー | フレームボーダーを表示するかどうかを設定し、0は表示されません、1が表示されます |
フレームペーシング | フレーム間の距離を示します |
BorderColor | フレームボーダーの色を設定します |
行 | ドキュメントを上下のフレームに分割します。列後の値は、数値またはパーセンテージになります。 *残りのスペースが占有されていることを意味します。数値の数は、水平に分割されたフレームの数を表します。たとえば、行= "210、*、10％"。つまり、ページは3つのアッパー、ミドル、および下のフレームページに分割されます。上部のフレームは210pxを占め、下のフレームはドキュメント全体の10％を占め、残りのスペースは中央のフレームで占められています。 * row =*などの相対的な概念です。つまり、ページに上限と下部の構造はありません。 |
cols | 行と同じように設定します |
フレームパラメーターの設定に関して、コードは次のとおりです。
表10.4に示すように。
表10.4フレームパラメーター
パラメーター | 説明します |
名前 | 設定フレームワークの名前は英語でなければなりません |
SRC | フレームに表示されるページパスと名前を設定します。これは、相対パスまたは絶対パスである可能性があります。 |
マージン幅 | フレームの左と右の端からの距離を示します |
マージンハイト | フレームの上部と下のエッジからの距離を示します |
スクロールする | フレームにスクロールバーを表示するかどうかを設定します。はいが表示されます。Noは表示されません。Autoは、フレームページのコンテンツがフレームのサイズを超えると、スクロールバーが自動的に表示されることを意味します。 |
フレームボーダー | フレームの境界を表示するかどうかを設定し、0は表示されず、1が表示されます |
ノルセイズ | ユーザーがこのフレームのサイズを変更できるかどうかを設定します。このアイテムを設定することなく、視聴者はフレームを自由に引いてフレームのサイズを変更できます。 |
フレームペーシング | フレーム間の距離を示します |
BorderColor | フレームボーダーの色を設定します |
フレームとiframeは基本的に同じ機能を達成できますが、iframeはフレームよりも柔軟性が高いです。
iframeタグは、フローティングフレームタグとも呼ばれます。これらを使用して、HTMLディスプレイにHTMLドキュメントを埋め込むことができます。それとフレームタグの最大の違いは、<iframe> </iframe>に含まれるコンテンツがWebページに埋め込まれていることであり、<frame> </frame>に含まれるコンテンツは独立した個人であり、独立して表示できることです。さらに、アプリケーションIFRAMEは、このコンテンツのコードを繰り返すことなく、同じページに同じコンテンツを複数回表示することもできます。
図10.21に示すページは、iframeを使用して、ページの上部と下部にページングリンクを作成することです。上部と下部のコードは同じです。同じファイルをWebページに埋め込むだけで、コードを繰り返し記述する必要はありません。このケースの実際の効果については、book-accessor cd-romのケース/frame/see_infomore_iframe.htmを参照してください。
iframeにはもう1つの大きな利点があります。つまり、フレーム内の背景がメインページの背景と同じになるように、フレームを透明に設定できることです。上記の例では、慎重な読者がこの問題を見つけるでしょう。 iframeの透明性を設定する方法を詳細に説明しましょう。特定の操作手順は次のとおりです。
（1）book-allocation cdでケース/frame/iframe/see_infomore_iframe1.htmを開きます。
（2）ブラウザのこのページのファイルを参照して、元のセルの背景がIFRAMEが挿入されている領域に上書きされていることを見つけますが、これは望ましい効果ではありません。
（3）page.htmページを開き、コードビューに切り替えて、次のように<body>タグにコードを挿入します。
<body style = "background-color =透過">
図10.21 iframeを使用してページターンを作成します
（4）see_infomore_iframe1.htmをコードビューにsee_infomore_iframe1.htmを表示し、次のようにページにiframeセルを挿入するためのコードを表示します。
<td colspan = "4">
<iframe name = "main" frameborder = "0" border = 0 scrolling = "no" marginwidth = "0" marginheight = "0" src = "page.htm"> </iframe>
</td>
（5）<iframe>タグで、
<frame name = "left" src = "index_manager/admin_left.htm" marginwidth = "1" marginheight = "1" scrolling = "no" frameborder = "1" noresize framespacing = "2" bordercolor = "＃cc0000">
前のコードのパラメーター設定とそれらの意味
loadtransparency = "true"
（6）この時点でiFrameを挿入するためのセルコードは次のとおりです。
<td colspan = "4">
<iframe name = "main" frameborder = "0" border = 0 scrolling = "no" marginwidth = "0" marginheight = "0" src = "page.htm" approstransparency = "true"> </iframe> </td>
（7）2ページのページを保存し、see_infomore_iframe1.htmを保存して、ブラウザの効果を閲覧します。