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 の高可用性実装 (デュアルアクティブホットスタンバイ) を構築します。

Windows ホストと Docker コンテナに共有フォルダを設定してマウントする手順

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

Windows ホストと Docker コンテナに共有フォルダを設定してマウントする手順

docker ベースの mariadb のインストール構成プロセスの分析

Mybatis mysqlの削除操作では、最初のデータメソッドのみを削除できます。

ChromeとIEに対応したWMPに埋め込まれたHTMLの詳細な紹介

MySQL アカウント情報をエレガントにバックアップする方法

MySQL 5.7.21 のインストールと設定のチュートリアル

MySQL の不正な文字列値の解決方法

DockerでJenkinsをインストールし、初期プラグインのインストール失敗の問題を解決する

JavaScript の実行コンテキストとコールスタックの詳細な説明

CentOS7 で yum を使用して PostgreSQL と PostGIS をインストールする方法

推薦する

MySQL SQL ステートメント分析とクエリ最適化の詳細な説明

Synology NAS は Docker コンテナを使用して KMS アクティベーションサーバーを構築し、Windows システムとオフィスをアクティベートします (操作手順)

CSSはグラデーションを巧みに利用して高度な背景光アニメーションを実現します

MySQL トランザクション同時実行問題の解決

Vue-cli を使用して Vue プロジェクトを構築する手順の詳細な説明

フロントエンドの状態管理（パート 1）

Vue3 手動カプセル化ポップアップボックスコンポーネントメッセージメソッド

docker compose helloworld を使い始めるための詳細なプロセス

タグのhref属性とonclickイベントの使用例

Vue カプセル化に基づくプルダウン更新およびプルアップ読み込みコンポーネント

Vue+SSMは画像アップロードのプレビュー効果を実現します

CentOS7 インストール Zabbix 4.0 チュートリアル (イラストとテキスト)

IE8 と Chrome でテーブルの幅を修正する方法

クロスドメインの問題を解決するためのNginxの実用的な方法

Webデザイナーの成長体験