htmlの例でフレームを作成する方法。 noframesのフォールバックを提供します。 追加ファイルなしでフレームをロードする方法
「フレーム」という言葉は、フレーム、フレームを意味します。 フレームは、ブラウザウィンドウのスペースを、さまざまな情報を表示できる独立したセクションに分割します。 画面にさまざまなソースからのデータを表示する必要がある場合は、フレームを使用すると便利です。
備考1
フレームは、ブラウザのビューポートを互いに隣接するいくつかの長方形のサブエリアに分割します。 個々のHTMLドキュメントをこれらのサブエリアにロードして、互いに独立して表示できます。 フレーム間では、必要に応じて、フレームの1つでのリンクの選択に基づいてインタラクションを整理できます。これにより、別のフレームまたはブラウザウィンドウに目的のドキュメントが読み込まれます。
フレームの適用分野
HTMLドキュメントの開発者は、ページに情報を表示するための豊富なフォームを自由に選択できます。 テキストと グラフィック情報リスト、表、配置オプション、横線、段落区切りを使用して順序付けおよび整理できます。 ただし、これらの可能性は必ずしも十分ではありません。そのような場合、ブラウザのビューポートを別々の領域（フレーム）に分割する必要があります。
WWWで情報を表示するためのフレーム構造の選択は正当化されます。
- 別のサブエリアで作業しているときに、ブラウザビューポートのサブエリアの1つにドキュメントをロードするコントロールを整理する場合。
- 画面の他のサブエリアの内容に関係なく、情報表示ウィンドウが常に画面上にある特定の場所にある場合。
- ウィンドウのいくつかのサブエリアに便利に配置された情報を表示する場合。各サブエリアは、他のサブエリアとは独立して表示できます。
次の図は、HTMLページのブラウザウィンドウのフレーム構造を示しています。
この構造は、一部のフレームがドキュメントの目次として機能し、他のフレームがコンテンツのロードに使用される場合に最も一般的です。 以前は、フレームを使用しないこのようなタスクはこの方法で解決されていました。 ページの1つには、他のドキュメントまたは特定のフラグメントへのリンクで構成された目次が含まれていました。 このようなリンクをクリックすると、目次が消え、その場所にドキュメントが読み込まれ、それを読んだ後、再度目次に戻る必要がありました。 フレームが使用され始めたとき、目次が画面の一部に永続的に配置されるようになったため、この戻り値は無効になりました。
フレームは、ブラウザのビューポートを情報を含む長方形の領域に分割するために両方が使用されるという点で、本質的にテーブルに似ています。 ただし、フレームを使用すると、ドキュメントのページをフォーマットできるだけでなく、それらの間の相互作用を整理することもできます。 基本的に、フレームとテーブルは、各フレームが個別のHTMLドキュメントに対応し、すべてのテーブルセルのコンテンツが1つのドキュメントの一部であるという点で異なります。 さらに、フレームに表示されているページは、表示時に他のページとは独立してスクロールできます。 各フレームは一種の個別のミニブラウザです。 テーブルは、常に画面上に完全に表示されるフレームとは対照的に、ウィンドウに完全に収まらず、部分的にしか表示されないことがよくあります。 したがって、HTMLテーブルでは、セルの総数に制限はなく、場合によっては数百に達することもあります。その場合、ドキュメントのフレーム数は通常、数単位になります。
フレームの作成
タグはフレームの作成に使用されます。
記述子は、ウィンドウスペースを行と列に分割するフレームのセットを形成します。 次に、すべての行と列の高さと幅の値を、ブラウザウィンドウの現在のサイズのパーセンテージ、ピクセル、またはアスタリスクとして設定します。 アスタリスク記号は、フレームのサイズがページ上の他のフレームのサイズに依存することを示します。
記述子は、特定のフレームの構造とコンテンツを定義します。
以下はページコードの例です。
フレームの操作例
フレームの長所と短所
フレームの利点は次のとおりです。
- 1つのウィンドウにさまざまな情報を同時に表示できます。
- それらを使用すると、サイトのすべてのページに含める必要はありませんが、任意の情報（ロゴ）を永続的に表示することができます。
- 柔軟なサイトナビゲーションの構築に役立ちます。
フレームの欠点は次のとおりです。
- この点でWebページの利用可能な領域がはるかに小さくなるため、それらの主な利点（1つのウィンドウに情報を表示する）;
- ユーザーはスクロールバーを使用してフレームを常にスクロールする必要があるため、作成時に適切なフレームサイズを選択するのは難しいことがよくあります。
- 画面解像度が低いモニターの場合、表示される情報の量ははるかに少なくなります。
- 多くの検索エンジンとディレクトリは、フレームを使用するページの登録を拒否します。
備考2
もう1つの欠点は、一部のブラウザがフレームを処理できないことです。 この場合、ユーザーの前に空白の画面が表示されます。 このような状況でユーザーを支援するために、フレームを表示できないときに開始タグと終了タグの間に配置されたテキストを表示できるようにするタグが意図されています。
フレームスクロールバー
デフォルトでは、ブラウザは情報がフレーム内に収まらない場合にのみスクロールバーを表示します。 これを行うために、SCROLLING属性にはyes（no）値の1つが割り当てられます。これにより、ブラウザーは常にスクロールバーを非表示にしたり、表示したりできます。 スクロールバーを非表示にすると、フレームの表示領域のサイズが大きくなります。 同時に、データがウィンドウに収まらない場合、ユーザーはデータにアクセスできなくなります。
フレームの境界線を変更する
フレームの境界線の変更は無効にできます。これは、NORESIZE属性を使用して行われます。 この属性は、ユーザーが元のページレイアウトを変更できないようにする場合に役立ちます。 デフォルトでは、ユーザーは自分の裁量でフレーム境界を移動する機会が与えられます。特定のデータの表示を改善するために、オブジェクトの新しい寸法を設定できます。 フレームに目に見える境界線がない場合、これにより、フレームのサイズ変更が自動的に禁止されます。 タグのBORDER属性を使用して、フレームの境界線の太さを変更できます。 デフォルトでは、ブラウザは6ピクセルの厚さの灰色のフレームでフレームを囲みます。 BORDERCOLOR属性を使用すると、境界線の色を変更できます。 FRAMEBORDER属性を使用すると、フレームの境界線を非表示にできます。
デフォルトでは、ブラウザはテキストとフレームの境界線の間に10ピクセルのマージンがあるフレームを表示します。
MARGINWIDTH属性は、左右の余白の幅を設定します。
また、MARGINHEIGHT属性は、上下の余白の高さを定義します。
フィールド値を設定するときは、両方の属性を使用する必要があります。これは、ブラウザーが指定されていないフィールドのサイズを自動的に最小値に縮小できるためです。
フローティングフレーム
フローティングフレームはWebページの一部であり、それらを説明する別のページは必要ありません。 タグは、そのようなフレームを作成するために使用されます。 このタグのNAME属性は、フローティングフレームの名前を設定します。この名前は、後でこのフレームの対応するページを開くハイパーリンクの定義で使用できます。 WIDTH属性とHEIGHT属性は、ユーザーが自分で変更できないため、フローティングフレームの寸法を設定します。
フローティングフレームは現在、MicrosoftIEでのみサポートされています。
以下はページコードの例です。
例1
フレームの操作例
width = "350" height = "300" align = "left">
フレームの操作例
フレームの操作例
2017年1月31日3.5K今日の多くのサイトには、ページを上下にスクロールするとサイドバーまたは上部に表示されるスティッキーなナビゲーションメニューがあります。 しかし CSSプロパティスティッキーメニューを作成できるようにすることは、ブラウザで常にサポートされているわけではありません。 以前は、この機能を実装するためにHTMLのフレームが使用されていました。
フレームとIframeの違い
フレームセットを使用する場合は、ブラウザウィンドウの表示部分を複数のフレームに分割します。 各フレームには独自のコンテンツがあり、次のフレームのコンテンツには影響しません。 フレームとIframeは同様の機能を実行します。つまり、リソースをWebページに埋め込みますが、基本的には互いに異なります。
- フレームは、レイアウトを定義する要素です。
- Iframeは、コンテンツを追加する要素です。
フレームの歴史と未来
フレームはW3Cで非推奨になりました HTML5で。 この決定 HTMLフレームは使いやすさとアクセシビリティに有害であると主張されました。 これらの主張が正当化されるかどうかを見てみましょう。
フレームの問題
- 使いやすさの問題：人気の高まりとともに モバイルデバイス画面が小さい場合、サイトはビューポートのサイズに応じて変化する複数のビューをユーザーに提供する必要がありました。 フレームはある程度の応答性を提供するように操作できますが、応答性の高いサイトの作成にはあまり適していません。
- 可用性： スクリーンリーダーその他の支援技術は、フレームを使用するサイトを読んだり、サイトとやり取りしたりするのが非常に苦手です。
現在、Web開発には、Webページのコンテンツをそのプレゼンテーションから分離するという世界的な傾向があります。
- コンテンツは、たとえばHTMLを介して、マークアップによって追加および定義する必要があります。
- プレゼンテーションは、CSSやJavaScriptなどの言語で定義されています。
フレームの使用には、最初に特定の作成が含まれます 外観と構造、プレゼンテーションタスクはで処理する必要があります CSSを使用する.
フレームの未来
今日はすべて 最新のブラウザサポートフレーム、 W3Cは明確に述べていますそのフレーム」 Web開発者は使用しないでください"。 フレームを使用するサイトがある場合は、他のテクノロジーへの切り替えを検討する必要があります。 ある時点で、ブラウザはフレームのサポートを停止し、その場合、それらを使用しているサイトは使用できなくなります。
HTMLでフレームを作成する方法
フレームは新しいサイトの開発には使用しないでください。ただし、古いリソースを維持しているWebマスターにとっては、フレームの使用方法を知っておくと便利です。
フレームの基本的な考え方
フレームの基本的な概念は非常に単純です。
- 要素の特定の場所でフレームセット要素を使用する HTMLドキュメントの本文;
- frame要素を使用して、Webページコンテンツのフレームを作成します。
- src属性を使用して、フレーム内にロードされるリソースを識別します。
- フレームごとにHTMLを作成する 別のファイルコンテンツ付き。
これがどのように機能するかのいくつかの例を見てみましょう。 まず、使用するHTMLドキュメントをいくつか作成する必要があります。 4つの異なるHTMLドキュメントを作成しましょう。 最初のものには次のものが含まれます。
フレーム1
フレーム1の内容
最初のドキュメントをframe_1.htmlとして保存します。 他の3つのドキュメントも同様の内容であり、それに応じて名前が付けられます。
垂直列を作成する
4つの垂直列のセットを作成するには、cols属性を持つframeset要素を使用します。 cols属性は、フレームセットに含まれる列の数とサイズを決定するために使用されます。 この場合、表示するファイルは4つあります。 したがって、4つのフレームが必要です。
それらを作成するには、cols属性をコンマで区切った4つの値に設定する必要があります。 簡単にするために、各フレームに値*を割り当てます。これにより、フレームのサイズが設定され、すべての空き領域が自動的に埋められます。 HTMLマークアップは次のようになります。
そして、このマークアップがどのように表示されるかを次に示します。
水平線の作成
HTMLフレーム文字列は、前の例のようにcols属性ではなくrows属性を使用して作成できます。
この変更により、フレームが上下に4行で読み込まれるようになりました。
列と行の組み合わせ
列とフレーム行を同じページに同時に表示できます。 1つのフレームを別のフレームの中にネストできます。 これを行うには、最初にフレームセットを作成してから、親要素内に子フレームセットをネストします。 3つの列のセットに2つの行をネストする方法の例を次に示します。
frameset cols = "*、*、*">
HTMLの例のフレーム：
ネストされたフレームセットは、親要素である最初のフレーム内に配置されます。 ネストされたアイテムはどこにでも配置できます。 たとえば、ネストされた要素を中央に配置する場合は、次のように要素を再配置するだけです。
フレームは次のように表示されます。
他のネストされたフレームを作成できます。
このコードは、2つの同じサイズの列のセットを作成します。 次に、2番目の列を2行に分割します。 最後に、2番目の行を2つの列に分割します。 これはどのように見えるかです：
行と列の組み合わせを作成する別の方法は、同じフレームに列と行のグリッドを定義することです。 たとえば、同じサイズの4つのフレームのグリッドを作成する場合は、次のコードを使用できます。
結果の行と列のグリッドは次のようになります。
フレームのスタイルを設定する方法
HTMLのフレームを使用するWebページのスタイル設定に関しては、次の2つの方法でスタイル設定できます。
- 各フレーム内のスタイルを定義します。
- フレームセットのスタイルを定義します。
各フレームの表示は、ソースドキュメント内で定義する必要があります。 フレームセットビューは、フレームセットを含む親ドキュメント内で定義する必要があります。 つまり、frame_1.htmlのスタイルは、frame_1.htmlファイルまたはframe_1.htmlファイルに関連付けられたスタイルシートに含まれているCSSルールによってスタイル設定する必要があります。
ソースドキュメントでのフレームスタイルの定義
他のWebページと同様に、各フレームのコンテンツはCSSを使用してスタイルを設定できます。 各フレームのコンテンツのスタイルを設定するには、外部スタイルシートへのリンクを介して、または内部スタイルまたはインラインスタイルを追加することにより、メインドキュメントに追加する必要があります。 4つのソースドキュメントがありますが、 CSSスタイル各ドキュメントに個別に適用する必要があります。
フレームセットを含むWebページにCSSスタイルを適用することにより、各フレームを個別にスタイル設定することはできません。 frame_1.htmlのスタイルを設定する場合は、それらのスタイルをドキュメント自体に直接追加する必要があります。 これを行う方法の例を次に示します。
フレーム1
フレーム1の内容
同じサイズの4つの列を持つHTMLでフレームを作成する前の例に戻り、frame_1.htmlファイルにこれらの変更を加えた後、フレームセットをロードすると、次のようになります。
フレームセットのスタイリングとフォーマット
ドキュメント自体のスタイルを定義する以外に、フレームセットの表示に影響を与える方法：
- 各フレームのサイズは定義または固定できます。
- フレーム間のインデントは変更できます。
- 各フレームの周囲の境界線の形式を指定できます。
これらの変更はCSSでは行われません。 それらは、属性とその値をフレーム要素に追加することによって実現されます。
フレームのサイズ設定
フレームのサイズはピクセル、パーセンテージで指定できます。または、フレームがすべての空き領域を自動的に占有する場合もあります。 フレームのサイズを指定するには、colsまたはrows属性に目的の値を挿入します。 デフォルトでは、フレームにnoresize属性が指定されていない場合、サイト訪問者はマウスを使用して2つのフレーム間の境界線をドラッグし、サイズを変更できます。 これが望ましくない場合は、noresize属性をフレーム要素に適用して、サイズを変更することはできません。 実際には、これらの概念の両方を組み合わせてみましょう。
次のレイアウトを作成します。
- ページの上部に沿った1つの全幅の行。
- 一番上の行の下の3列。
- 1列目と3列目は、左右のサイドバーを作成するためのサイズになっています。
- 中央の列は、コンテンツの広い領域を表すサイズになっています。
次のコードでHTMLフレームを作成できます。
このコードは、2つの行からフレームセットを作成します。
- 最初の行の高さは150ピクセルです。 最初のフレームのnoresize属性は、サイズを変更できないことを意味します。
- 以前にframe_1.htmlに適用したスタイルは保持されますが、それらはそのフレームのコンテンツにのみ影響します。
- 2番目の行は、残りのスペースを埋めるために拡張されます。
- 2番目のフレームセットは2番目の行にネストされており、3つの列が含まれています。
- 1列目と3列目はそれぞれ、ブラウザウィンドウの使用可能なスペースの20％を占めています。
- 2番目の列は、1番目と3番目の列の間に残っているスペースを埋めるために拡張されます。
- 列にnoresize属性を指定しなかったため、最初はコードで指定されたサイズに基づいて表示されます。
ただし、サイト訪問者は手動でサイズを変更できます。
このコードは、次のように表示されるWebページを作成します。
境界線のフォーマットとフレーム周辺のパディング
レイアウトを定義したので、必要に応じて、フレーム間のパディングを増減したり、フレーム間の境界線を削除したりできます。 前の段落で作成したレイアウトを使用して、3つの列の間の境界線を削除しますが、上の行と下の行の間の境界線は維持します。 また、最初のHTMLフレームのコンテンツの周りにいくつかのパディングを追加しましょう。
最初のフレームに適用されるmarginheight属性は、最初のフレームにロードされたコンテンツの上下に15ピクセルのパディングを追加します。 frameborderの値が0の場合、下部の3つのフレームすべての境界線が削除されます。 これはどのように見えるかです：
リンクを使用したフレームの指定
フレームの最も一般的な使用法の1つは、他のフレームのコンテンツの位置に関係なく常に表示される、フレーム内にスティッキーなナビゲーションメニューを作成することです。 正しく使用すると、ナビゲーションメニューのリンクはフレームに新しいリソースをロードしますが、残りのフレームは静的なままです。
アンカーをフォーマットして特定のフレームを指定するには、目的のフレーム要素にname属性を割り当て、要素内のtarget属性を使用して、指定されたフレームにhrefをロードします。 これらすべてが少し混乱する場合は、HTMLでフレームを作成するプロセスを段階的に説明しましょう。
最初に行う必要があるのは、リンクを開くフレームに名前を割り当てることです。 以前に作成したマークアップでは、ナビゲーションメニューの左側の列とターゲットフレームとして中央の列を使用できます。 これを行うには、name属性をターゲット要素に割り当てる必要があります。
中央の列にname = "mid_col"を設定したので、左側の列のソースドキュメントframe_2.htmlにいくつかのリンクを作成できます。
フレーム2
フレーム2の内容
- frame_1.htmlをロードします
- frame_2.htmlをロードします
- frame_3.htmlをロードします
- frame_4.htmlをロードします
これで、Webページをロードすると、左側のサイドバーに4つのナビゲーションリンクが表示されます。 リンクをクリックすると、ファイルの内容が名前= "mid_col"属性で中央の列のフレームに読み込まれます。 これは、ページが読み込まれたときに表示されるものです。
Load frame_1.htmlリンクをクリックすると、このファイルの内容が中央の列にロードされ、次のようになります。
Load frame_2.htmlリンクをクリックすると、左側のサイドバーと中央の列の両方にナビゲーションリンクが表示されます。
中央の列にある[frame_3.htmlの読み込み]リンクと[frame_4.htmlの読み込み]リンクをクリックすると、これらのファイルの内容が読み込まれます。 リンクの1つにtarget = "mid_col"属性を追加するのを忘れた場合、それをクリックすると、ファイルはリンクを含むフレームにロードされます。 たとえば、外部サイトへのリンクをたどるときにページ全体をリロードする場合は、target = "_blank"またはtarget = "_top"属性を追加する必要があります。
noframesのフォールバックを提供する
これまで、noframes要素は、HTMLフレームをサポートしないブラウザーのフォールバックを作成するために使用されていました。 現在、すべての最新のブラウザはフレームをサポートしていますが、noframesは実際にはサポートされていません。 その結果、フレームを操作するときにnoframeのフォールバックを作成する必要がなくなりました。
フレームをレスポンシブにする方法
フレームを使用する場合、スマートフォンや小型タブレットからサイトにアクセスする訪問者にユーザビリティを提供することは非常に困難です。 フレームはHTML5から完全に削除され、廃止されたと見なされるため、フレームで構築されたサイトの所有者は、リソースを再設計して他のテクノロジーに移行することを計画することが重要です。
列ではなく行を使用する
可能であれば、フレームを列ではなく行に配置します。 小さな画面では、コンテンツを水平方向よりも垂直方向にナビゲートする方がはるかに簡単です。 行に配置されたHTMLのフレームは、表示がはるかに簡単です。 小さな画面..。 行と列を含むレイアウトの幅を狭くすると、画面をシミュレートします Apple iPhone 6、行は列よりもはるかに見やすいことがわかります。
列幅にパーセンテージを使用する
列のサイズがピクセルではなくパーセンテージの場合、デバイスの画面サイズに基づいて自動的にサイズが変更されます。 これは作成する可能性がありますが 特定の問題一部のフレームが小さくなりすぎる可能性があるためですが、一般に、列の合計幅をピクセルではなくパーセンテージで指定すると、ユーザーエクスペリエンスとブラウジングエクスペリエンスが向上します。
フレームから他のテクノロジーに切り替える方法
frameset要素とframe要素の両方が最新のHTML5仕様から削除されました。 フレームで構築されたサイトの所有者は、アセットを再設計して、レイアウトから除外する必要があります。 ある時点で、ブラウザはフレームのサポートを終了します。 したがって、フレームを放棄することは望ましいだけでなく、実行する必要があります。
フレームに含まれるコンテンツの評価
HTMLフローティングフレームを使用するサイトを再編成するための最初のステップは、フレームが使用される理由を特定することです。
- 特定のレイアウトを作成するためにフレームが使用されましたか？ その場合、CSSを使用して同様のレイアウトを作成できます。
- 特定のサイズの広告コンテナを作成するためにフレームが使用されましたか？ CSSまたはCMS固有のウィジェットを使用してこの効果を再現する方法はたくさんあります。
- スティッキーなナビゲーションメニューを作成するためにフレームが使用されましたか？ 繰り返しますが、同じ効果をCSSで再現できます。
- 外部サイトからコンテンツをダウンロードするためにフレームが使用されましたか？ その場合、HTML5の一部であるiframe要素を使用して、外部サイトのコンテンツを埋め込むことができます。
ほとんどの場合、CSSを使用してフレームで設計されたレイアウトを再作成でき、iframeを使用して外部リソースを埋め込むことができます。
新しいウェブサイトの戦略
サイトがフレームで構築されている場合は、すでにかなり古くなっている可能性があります。 サイトのすべてのコンテンツを1つのHTMLファイルにバンドルしてCSSでスタイル設定するのではなく、コンテンツ管理システムへのアップグレードと移行を検討する時期かもしれません。
CMSへの移行には最初は時間がかかりますが、長期的には、最新のWebサイトを立ち上げることのメリットが短期的な困難を上回ります。 コンテンツ管理システムを決定するのに役立つように、最も人気のある3つに注意を払うことをお勧めします。
- WordPress;
- Joomla！ ;
- Drupal。
追加リソース
HTMLフレームについて詳しく知りたい場合は、 最高の情報源詳細については、Worldです。 ワイドウェブコンソーシアム（ W3C）。 フレームに関する情報が記載されたページの一部を次に示します。
- フレームに関するHTML4ドキュメント;
- 非推奨のHTML5機能
関連商品
| 項目名 | 属性 | 説明 | ||||||||||||||||
| noframes | エレメント ○フローティングフレーム フレーム構造を持たないページにフレームウィンドウを直接挿入する必要がある場合は、そのための「iframe」タグがあります。
*「iframe」タグの属性
属性を持つ「iframe」タグは次のようになります。
ブラウザがフレームをサポートしていない場合は、「 おっとっと！ お使いのブラウザはフレームをサポートしていません。
»タグ間
.
たとえば、「content.html」ファイルにフローティングフレームを追加しましょう。
ホームページサイトコンテンツ-「メインページ（コンテンツ。！お使いのブラウザはフレームをサポートしていません。前の投稿 全てにおいて良い日！ BernatskyAndreyと一緒に。 記事に直接進む前に、このトピックのビデオバージョンへのリンクを提供したいと思います。 今号では HTMLのフレーム. フレーム本質的にはテーブルと非常に似ていますが、テーブルとは異なり、各フレームは独立しており、各フレームは独自のアドレスを持つ個別のWebページを持つことができます。
この図は、かなり一般的なサイト構造を示しています。 テーブルの形で表すことも、フレームを使用してすべてを行うこともできます。 上部のフレームにロゴとメニューが表示されたページ、左側のフレームにサイトナビゲーションが表示されたページ、中央のフレームにサイトのメインコンテンツが表示されたページ、 広告バナー、および下部-連絡先情報のあるページ。 フレームとは何かを簡単に見てみましょう。 それでは、これをすべて行う方法を見てみましょう。 フレームを含むドキュメントの特徴は、コンテナが含まれていないことです。 体..。 代わりにコンテナが使用されます。 フレームセット. 一般的な構文フレームは次のようになります。 XHTML …
コンテナ内 タグが配置されています フレームのコンテンツを定義します。 鬼ごっこ 2つのパラメータがあります： 行=数-行数（水平サブウィンドウ）。 cols =数値-列の数（垂直サブウィンドウ）。 一般的に、rowsおよびcolsパラメーターの値は、実際には数字ではなく、数字をコンマで区切ってリストすることによって指定されます。 行または列の数と同じ数がいくつになるか、そしてその数がフレームのサイズを決定します。 主なことは、これらの数値の合計が画面の幅全体であるということです。 これを例として取り上げると、すべてが明確になります。 次に、次のようなフレームドキュメントを作成しましょう。
このようなフレーム構造を定義するコードは、次のようになります。 XHTML 上記のコードの最初の行はフレームセットコンテナを開き、colsパラメータは3つのネストされたフレームがあることを指定します。 1つ目は、画面幅全体の30％の幅になります。 3つ目も、画面幅全体の30％の幅になります。 そして、2番目のフレームは残りのすべてのスペースを占有します。 はい記号 "*" （アスタリスク）は、残りのすべての画面スペースを占有することを意味します。 ちなみに、colsパラメーターとrowsパラメーターを使用してフレームのサイズを設定する方法を見てみましょう。 数字を入れるだけでサイズを設定できます。 この数値は、ピクセル単位のフレームのサイズを決定します。 幅をパーセンテージで設定できます。 さらに、すべての列のパーセンテージの合計が100％を超えると、すべてのフレームが比例して減少するため、合計量は100％になります。 すべての列のパーセンテージの合計が100％未満の場合も同様の状況になり、すべてのフレームが比例して増加し、合計量が100％になります。 記号でフレームのサイズを設定できます “*” （スター）。 これは、フレームが残りのスペースを占める必要があることを意味します。 指定されている場合、例えば つまり、2つのアスタリスクの場合、残りのすべてのスペースはこれら2つのフレーム間で均等に分割されます（この場合、それぞれ40％）。 HTMLでフレームのサイズを変更するためのオプションを組み合わせることができます。 例えば： XHTML .colsパラメーターをコードの最初の行の行に置き換えると、3つのフレームで構成される同じフレームドキュメントが得られます。 フレーミングのみが垂直になります。 XHTML パラメーター 行と cols同時に使用することはできません。 これにより、エラーが発生し、コンテンツが正しく表示されません。 このような構造を作成する方法について、今では誰もが質問しています。これについては、記事の冒頭で説明しました。 少し後でこれに戻りますが、今のところ、ブラウザで何が起こっているかを見てみましょう。 ブラウザには、それぞれが独自のフレームにある3つのページが表示されます。 同時に、フレームの境界線にマウスカーソルを合わせると、フレームのサイズを変更でき、スクロールバーとフレーム間の境界線も表示されます。 これは必ずしも必要ではなく、まったく必要ではありません。 そして、これらすべてはタグパラメータのおかげで制御することができます。 フレームと フレームセット. タグパラメータ フレームと フレームセット: src = "url"-必須パラメータ。 フレーム内に表示するページのアドレスを指定します。 フレームにのみ使用されます。 noresize-サイズ変更機能をキャンセルします。 にのみ使用 フレーム. スクロール= "はい/いいえ/自動"-スクロールバーの存在を決定します。 値yes-スクロールバーの存在を示します。 no値は、スクロールバーがないことを示します。 値がautoの場合、ブラウザ自体がスクロールバーがあるかどうかを判断します。 にのみ使用 フレーム. name = "フレーム名"フレームの名前です。 このパラメータは、フレーム間の通信に使用されます。 これについては、後で詳しく説明します。 にのみ使用 フレーム. ボーダー=数字-フレーム間の境界線の太さ。 0に設定すると、フレーム間の境界線は表示されません。 フレームセットにのみ使用されます。 framepacing = "number"-フレーム間の距離。 フレームセットにのみ使用されます。 これらのパラメータを使用すると、フレーム間の境界線を表示しないページを取得できます。フレームのサイズを変更する方法はなく、最後の2つのフレームはスクロールできません。 このようなページのコードは次のようになります。 XHTML さらにいくつかのパラメーターがありますが、それらは明確に機能しないため、リリースではそれらについても言及しないことをお勧めします。 おそらく、パラメータはこれですべてです。 それらの使い方の例を見ました。 それでは、この号の冒頭でお話ししたフレーム構造を作成しましょう。 これを行うには、垂直分割された3つのフレームの構造を作成します。 XHTML 3つの列があり、それぞれに独自のページアドレスを書き込みます。 ほら、複雑なことは何もありません。代わりにタグを付けるだけです。 必要な新しいコンテナを挿入します .. .XHTML その後、連絡先情報を含む3番目のフレームを挿入し、メインコンテナを閉じます。 XHTML
このページの完全なコードを以下に示します。 XHTML もちろん、以前のメーリングリストからフレームのアドレスを取得しましたが、ここにはメニュー、ロゴ、ナビゲーションなどは表示されませんでした。 しかし、必要に応じて構造を取得しました。 しかし、必要な実際のページを作成すると、優れた構造を得ることができます。 最終的に得たもの。 便利または不便（あなたが決める）ですが、フレーム構造では、すべてのフレームが常にページに残ります。 コンテンツのサイズに関係なく、サイトのロゴとメニュー、連絡先情報を含むサイトの下部、ナビゲーションブロック、バナーが常に表示されます。 これは、一般的に、フレームの本質と意味です。 フレーム間の相互作用の可能性があります。 あるフレームのリンクをクリックすると、別のフレームに情報が表示されるようにすることができます。 これがどのように行われるかを見ていきます。 次のようなフレームを作成しましょう。
左のフレームに、リンクが表示されます。 そして右側-これらのリンクがつながるページ。 次のようなフレームを作成しましょう。 XHTML 以下を読むことをお勧めします：
2021-12-21 12:22:20
2021-12-21 12:22:20
2021-12-21 12:22:20
トピックの続き：
アップル
TTKは、1997年に事業を開始し、電気通信の分野でサービスを提供している有名な会社です。 組織の本部はモスクワにあり、... 新しい記事 / 人気
|
