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

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

推薦する

HTML 代替カラーコードを実現する n 通りの方法 サンプルコード

この記事では、主に HTML のサンプル コードを紹介し、次のように交互に色を変更する方法を共有しま...

xshellリモート接続の自動切断の問題の解決方法の詳細な説明

xshell を使用したリモート接続システムの自動切断の問題の解決策: 1. サーバー構成サーバーは...

Linux ドメイン ネーム サービス DNS 設定方法

DNSとはDNS の正式名称は Domain Name System で、ドメイン名解決システムを意...

MySQL で重複を削除するには、distinct または group by を使用する必要がありますか?

序文group by と distinctive のパフォーマンス比較について: インターネット上の...

Docker を使用した ElasticSearch:7.8.0 クラスターのインストールに関する詳細なチュートリアル

ElasticSearch クラスターは、クラスターを構築するための動態請求的方式と靜態配置文件をサ...

Vue3.0でカスタム命令を書くための簡単な手順

序文Vue には、v-if、v-bind、v-on などの豊富な組み込みディレクティブが用意されてい...

Centos7 で crontab + シェル スクリプトによる定期的な自動ファイル削除の問題を解決する

問題の説明:最近、rsyncで毎回同期するデータ量が多いが、データベースのbakファイルを保持する必...

HTML onfocus gain focus および onblur lose focus イベントの詳細な説明

HTML onfocus イベント属性定義と使用法onfocus 属性は、要素がフォーカスを受け取っ...

Nginx Webサーバーのサンプルコードの設定方法の詳細な説明

概要今日は主に、NGINX を Web サーバーとして設定する方法を共有します。内容は次のとおりです...

VMware Workstation のインストール Linux (Ubuntu) システム

システムをコンピューターにインストールする方法がわからない場合は、Linux を学習したい場合は、仮...

CocosCreator ソースコードの解釈: エンジンの起動とメインループ

目次序文準備行く！文章プロセスを開始するメインループまとめ要約する序文準備皆さんは、こんなことを考え...

MAC+PyCharm+Flask+Vue.js ビルドシステム

目次node.js+nvm+npm を設定するnpmスイッチタオバオミラーVue.jsをインストール...

Vueは動的クエリルール生成コンポーネントを実装します

1. 動的クエリルール動的クエリルールは、おおよそ次の図のようになります。ユーザのカスタマイズに応じ...

MySQLがデータの削除を推奨しない理由

目次序文InnoDB ストレージ アーキテクチャInnodb テーブルスペースインドストレージディス...

VMware10 での CentOS 7 のインストールと設定のチュートリアル

Ubuntu が今日のデスクトップ ユーザーの間で最も人気のある Linux オペレーティング シス...