HTMLフレームワーク_Powernode Javaアカデミー

1. フレームワーク

ブラウザのドキュメントウィンドウには 1 つの Web ページファイルしか表示できませんが、フレームを使用すると、同じブラウザウィンドウに複数のページを表示できます。フレームを使用するページは、主にフレームセットと特定のフレームファイルの 2 つの部分で構成されます。

フレームワークは主に、Web サイトのバックエンドまたはイントラネットシステムのレイアウトに使用されます。

1. フレームセット (<frameset></frameset>):この HTML ドキュメントをフレームモードとして定義し、ウィンドウの分割方法を設定するために使用されるファイルです。簡単に言うと、フレームセットはフレームワーク構造を格納するファイルであり、フレームワークファイルにアクセスするためのエントリファイルでもあります。 Web ページが左右の 2 つのフレームで構成されている場合は、左右の 2 つの Web ページファイルに加えて、合計フレームセットファイルも存在します。フレームを使用するページでは、<body> タグがフレームタグ <frameset> に置き換えられます。フレームページに含まれる各フレームは、<frame> タグによって定義されます。

rows 属性: ウィンドウを水平に分割します。水平分割ウィンドウはページを水平に分割します。つまり、ページを垂直に配置された複数のウィンドウに分割します。行は複数の値を取ることができ、各値はフレームウィンドウの水平幅を表し、その単位はピクセルまたはブラウザーのパーセンテージにすることができます。ただし、一般的に、複数の行の値を設定する場合は、複数のフレーム、つまり対応する数の <frame> パラメータが必要になることに注意してください。

  <html>
  
  <ヘッド>
  
  <title>水平分割ウィンドウの効果</title>
  
  </head>
  
 <フレームセット行数="30%,70%">
 
     <フレーム>
 
     <フレーム>
 
 </フレームセット>
 
 </html>

cols 属性: ウィンドウを垂直に分割します。ウィンドウを垂直に分割するとは、ページを垂直方向に沿って複数のウィンドウに分割すること、つまり、ページを左右に並んだ複数のウィンドウに分割することを意味します。 cols は複数の値を取ることができ、各値はフレームウィンドウの水平幅を表し、その単位はピクセルまたはブラウザーのパーセンテージになります。通常、ウィンドウを水平に分割する場合と同様に、複数の cols 値を設定する場合は、複数のフレーム、つまり複数の <frame> パラメータが必要になります。

  <html>
  
  <ヘッド>
  
  <title>ウィンドウを垂直に分割する効果</title>
  
  </head>
  
<フレームセット列="20%,55%,25%">
 
     <フレーム>
 
     <フレーム>
 
     <フレーム>
 
 </フレームセット>
 
 </html>

frameborder属性: 境界線を設定します。デフォルトでは、フレームウィンドウは境界線で囲まれています。境界線の表示は、frameborder パラメータで調整できます。構文は次のとおりです。

<frameset frameborder="表示するかどうか"> または <frame frameborder="表示するかどうか">。 frameborder の値は 0 または 1 のみになります。値が 0 の場合、境界線は非表示になり、値が 1 の場合、境界線が表示されます。フレームセットで設定するとフレーム全体に有効になりますが、フレームで設定すると現在のフレームにのみ有効になります。

  <html>
  
  <ヘッド>
  
  <title>フレームウィンドウの境界線の表示効果を設定する</title>
  
  </head>
  
  <フレームセット行数="20%,55%,25%">
 
 <フレーム フレームボーダー="1">
 
 <フレームセット cols="35%,65%" フレームボーダー="0">
 
 <フレーム>
 
 <フレーム>
 
 </フレームセット>
 
 <フレーム フレームボーダー="0">
 
 </フレームセット>
 
 </html>

framespacing 属性: フレームの境界の幅。フレームの境界線の幅はデフォルトで 1 ピクセルですが、パラメータ framespacing によって調整できます。

構文: <frameset framespacing="border width">

注: 境界線の幅は、ページ上の境界線間の線の幅であり、ピクセル単位で測定されます。このパラメータはフレームセットに対してのみ使用でき、個々のフレームに対しては無効です。

  <html>
  
  <ヘッド>
  
  <title>フレームの境界線の幅を設定する</title>
  
  </head>
  
 <フレームセット行数="30%,70%" フレーム間隔="10">

     <フレーム>
 
       <フレームセット cols="20%,55%,25%" フレーム間隔="30">
 
         <フレーム>
 
         <フレーム>
 
         <フレーム>
 
       </フレームセット>
 
 </フレームセット>
 
 </html>

bordercolor 属性: フレームの境界線の色。フレームセットの境界線の色を設定するには、bordercolor パラメータを使用します。

構文: <frameset bordercolor="色コード">

注: このパラメータは、単一のフレームではなく、フレームセット全体に対してのみ有効です。

  <html>
  
  <ヘッド>
  
  <title>フレームの境界線の色を設定する</title>
  
  </head>
  
 <フレームセット行数="30%,70%" フレーム間隔="10" 境界線の色="#CC99FF">
 
     <フレーム>
 
      <フレームセット cols="20%,55%,25%" フレーム間隔="30" 境界線の色="#9900FF">
 
         <フレーム>
 
         <フレーム>
 
         <フレーム>
 
       </フレームセット>
 
 </フレームセット>
 
 </html>

2. フレーム (<frame>) と src 属性。

フレーム構造内の各ページは個別のテキストであり、これらのファイルは src パラメータを通じて設定されます。

構文: <frame src="ページソースファイルアドレス">

注: ページファイルは、フレームページの特定のコンテンツが配置される場所です。ソースファイルが設定されていないフレームの場合、それは単なる空白ページであり、効果はありません。ページのソースファイルは、通常の HTML ファイルでも、画像やその他のファイルでもかまいません。

  <html>
  
  <ヘッド>
  
  <title>ページソースファイルの設定</title>
  
  </head>
  
 <フレームセット行数="30%,70%">
 
     <フレーム src="pic01.gif">

     <フレーム src="src01.html">
 
 </フレームセット>
 
 </html>

3. <noframes></noframes> タグ

<noframes></noframes> タグは、ブラウザがフレームをサポートしていない場合にページコンテンツを表示するために使用されます。

  <html>
 <フレームセット列="25%,50%,25%">
    <フレーム src="/example/html/frame_a.html">
    <フレーム src="/example/html/frame_b.html">
    <frame src="/example/html/frame_c.html">
  <フレームなし>
  <body>お使いのブラウザはフレームを処理できません。 </本文>
  </フレームなし>
  </フレームセット>
 </html>

2. フローティングフレーム（<iframe>）

フローティングフレームは、ブラウザーウィンドウ内に子ウィンドウをネストする特殊なフレームです。つまり、ページ全体がフレームページではなく、フレームウィンドウが含まれています。対応するページコンテンツをフレームウィンドウに表示します。フローティングフレームはインラインフレームとも呼ばれ、その名前が付けられています。

構文: <iframe src="ページソースファイル"></iframe>

注: 通常のフレーム構造と同様に、フローティングフレームでも、名前、スクロール、フレーム境界などの多くのパラメータを設定できます。ただし、通常のフレームと比較すると、フローティングフレームには framespacing および bordercolor パラメータが含まれません。

src 属性: フローティングフレームの最も基本的なパラメーターは src です。これは、フローティングフレームページのソースファイルアドレスを設定するために使用され、フローティングフレームページの必須パラメーターでもあります。フローティングフレームは、ソースファイルの内容が設定されている場合にのみ意味を持ちます。構文: <iframe src="ページソース">

幅と高さの属性: 通常のフレーム構造では、フレームはブラウザウィンドウ全体であるため、サイズを設定する必要はありません。ただし、フローティングフレームでは、通常の HTML ページに挿入され、フレーム全体のサイズを調整できます。構文: <iframe src= src="フローティングフレームページソースファイル" width="ページ幅" height="ページの高さ">、ページの幅と高さの値はどちらもピクセル単位です。

 <html>
 <本文>
<iframe src="/i/eg_landscape.jpg" 幅="550" 高さ="310" ></iframe>
 <p>一部の古いブラウザは iframe をサポートしていません。 </p>
 <p>サポートされていない場合、iframe は表示されません。 </p>
 </本文>
 </html>

3. フレームレイアウトの例

  <html>
  <ヘッド>
      <title>フレームワークのメインページ</title>
  </head>
 <frameset rows="20%,*"><!--フレームセット、制御ファイルのコンテナ-->
      <frame name="topFame" src="3.html" noresize/>
        <フレームセット cols="240px,*">
            <フレーム名="leftFrame" src="1.html"/>

      <フレーム名="rightFrame" src="2.html" marginwidth="20px" スクロール="no"/>
             
         </フレームセット>
        <フレームなし>
        <!--noframes タグには body タグを含めることができます -->
         <本文> 
             このページはフレームセットタグをサポートしていません。
         </本文>
     </フレームなし>
  </フレームセット>
 </html>

4. フレーム外にリンクする方法

ウェブサイトの背景レイアウトでは、フレームワークがより頻繁に使用されます。多くの場合、フレームから抜け出してページを再読み込みする必要があります。では、リンクはどのようにしてフレームから飛び出すのでしょうか?実際、これを実現するには、<a></a> タグのターゲット属性を "_top" として指定するだけで済みます。ここに簡単な例を示します。

  <html>
  
  <本文>
  
  <p>フレームに閉じ込められた？ </p> 
  
  <a href="/index.html"
  こちらをクリックしてください！ </a> 
  
 </本文>
 </html>

<<: vue+el-element でファイル名に応じてダイアログを動的に作成する実践

>>: Ubuntu は、Mysql+Keepalived の高可用性実装 (デュアルアクティブホットスタンバイ) を構築します。

line-height=height要素の高さだがテキストが垂直方向に中央揃えされない問題を解決する

HTMLフレームワーク_Powernode Javaアカデミー

line-height=height要素の高さだがテキストが垂直方向に中央揃えされない問題を解決する

MySql ビュー、トリガー、ストアドプロシージャに関する簡単な説明

Linux仮想マシンの静的IPアドレスを構成するための手順を完了します

Zabbix が MySQL のマスター/スレーブ状態を監視する方法の詳細な説明

XHTML の珍しいが便利なタグ

Uniapp WeChatアプレット: キー障害の解決策

Vue で @person 関数を実装する方法

チェックボックスの不確定プロパティの使用の紹介

<td></td> タグの境界線スタイルがブラウザに表示されない問題の解決方法

js での Object.create インスタンスの使用法の詳細な説明

推薦する

MySQL のインストール方法と設定に関するいくつかの問題の概要

HTML テーブルマークアップチュートリアル (4): 境界線の色属性 BORDERCOLOR

Linux ファイルディレクトリ管理コマンドの概要

MySQL トリガーの基本的な使い方（作成、表示、削除など）の詳細な説明

CSS の :focus-within の楽しさについて簡単に説明します

Minio 軽量オブジェクトストレージサービスのインストールとブラウザの使用チュートリアル

MySQLのスペースをクリーンアップするいくつかの具体的な方法

Vue2で配列の変更を検出できない理由と解決策

アダプティブ Web デザインを実現する方法に関する関連知識ポイントの要約

MySQL でストリーミングクエリを使用してデータ OOM を回避する

Vueは携帯電話のカメラとアルバムを呼び出す機能を実装します

CentOS 7 でソースコードから Openssh をインストールする方法

Dockerはローカルイメージとコンテナの保存場所を設定します

CSS でショートカットプロパティを記述する際は、トラブルの順序に注意してください (落とし穴を避けるため)

HTML DOCTYPEの略語