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

推薦する

Linuxでホスト名を永続的に変更する方法

ホスト名を変更する場合は、以下の手順に従ってください。ホスト名の使用hostnameコマンドを使用す...

CSS 要素で計算されたスタイルを取得します (カスケード/最終スタイル後)

CSS 要素内の計算されたスタイル (つまり、カスケード後の最終的なスタイル) を取得するには、W3...

MySQL の null (IFNULL、COALESCE、NULLIF) に関する知識ポイントのまとめ

この記事では、MySQL の null (IFNULL、COALESCE、NULLIF) に関連する...

フレックスレイアウトの justify-content: space-between 配置のバグを解決する 2 つの方法の詳細な説明

display:flex、justify-content: space-betweend を設定する...

HTML で複数のクラス属性を定義する場合の無効な解決策

HTML を記述する過程で、クラス属性に複数の値を定義することがよくありますが、定義した値が無効であ...

Windows での Tomcat サーバーのインストールに関するチュートリアル

1 ダウンロードして準備するまず、公式ウェブサイトからTomcatをダウンロードする必要があります。...

Node.js における npx コマンドの使用法とシナリオ分析

npx 使用チュートリアル今晩、 Vue-Cli勉強していたところ、ふと最新の@4.xxバージョンを...

Linux のよく使うコマンドの使い方を詳しく解説（第 2 回）———— テキストエディタのコマンド vi/vim

vi/vim の紹介どちらもマルチモード エディターです。違いは、vim が vi のアップグレー...

Vue3の一般的なAPIの使用方法の紹介

目次ライフサイクルの変化反応的な参照vue2.x では ref を使用して要素タグを取得します。vu...

Navicat Premium15 でクラウド サーバーに接続する際のデータベースの問題と落とし穴

クラウドサーバーを使用するとデータベースに接続できる場合もありますが、Navicat Premium...

Vue3 非同期データ読み込みコンポーネントサスペンスの使い方

目次序文コンポーネントの作成要約する序文Vue3 には多くの注目すべき機能が追加されましたが、サスペ...

JavaScript で Priority Queue を実装する

目次1. 優先キューの紹介2. 優先キューのカプセル化1. 優先キューの紹介通常のキューに要素が挿入...

Vue で Alibaba のアイコンフォント ベクター アイコンを使用する方法について

インターネット上には多くのインポート方法があり、公式も3つのインポート方法を提供していますが、インポ...

シンプルなプログレスバーを作成するための HTML+CSS

1. HTMLコードコードをコピーコードは次のとおりです。経験値: <span class=...

ウェブデザインで注意すべき検索最適化の知識

1. 新サイトホームページのリンクレイアウト1. リンク配置の位置：リンク配置の位置によって、リンク...