コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > htmlチュートリアル > HTMLフレームワークの使い方

HTMLフレームワークの使い方

墨辰丷
リリース： 2018-06-04 15:40:33
オリジナル
8106 人が閲覧しました

ブラウザのドキュメント ウィンドウには 1 つの Web ページ ファイルしか表示できませんが、フレームを使用すると、同じブラウザ ウィンドウに複数のページを表示できます

1. フレーム

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

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

1. フレームセット(): このHTML文書をフレームモードとして定義し、ウィンドウの分割方法を設定するファイルです。平たく言えば、フレームセットはフレーム構造を格納するファイルであり、フレーム ファイルにアクセスするためのエントリ ファイルでもあります。 Web ページが左右 2 つのフレームで構成されている場合、左右 2 つの Web ページ ファイルに加えて、一般的なフレーム セット ファイルも存在します。フレームを使用するページでは、 タグがフレーム タグ に置き換えられます。フレーム ページに含まれる各フレームは、 タグによって定義されます。

rows 属性: ウィンドウを水平に分割します。横分割ウィンドウとは、ページを横方向にカットすること、つまりページを上下に並んだ複数のウィンドウに分割することです。行には複数の値を指定でき、各値はフレーム ウィンドウの水平幅を表し、その単位はピクセルまたはブラウザのパーセンテージになります。ただし、一般に、複数の行の値が設定される場合、複数のフレームが必要になる、つまり、対応する数の パラメータが必要になることに注意してください。 

  <html>
  
  <head>
  
  <title>水平分割窗口的效果</title>
  
  </head>
  
 <frameset rows="30%,70%">
 
     <frame>
 
     <frame>
 
 </frameset>
 
 </html>
ログイン後にコピー

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

  <html>
  
  <head>
  
  <title>垂直分割窗口的效果</title>
  
  </head>
  
<frameset cols="20%,55%,25%">
 
     <frame>
 
     <frame>
 
     <frame>
 
 </frameset>
 
 </html>
ログイン後にコピー

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

または Frameborder の値は 0 または 1 のみです。値が 0 の場合は境界線が非表示になり、値が 1 の場合は境界線が表示されます。フレームセットに設定するとフレーム全体に有効となり、フレームに設定すると現在のフレームにのみ有効になります。 

  <html>
  
  <head>
  
  <title>设置框架窗口的边框显示效果</title>
  
  </head>
  
  <frameset rows="20%,55%,25%">
 
 <frame frameborder="1">
 
 <frameset cols="35%,65%" frameborder="0">
 
 <frame >
 
 <frame>
 
 </frameset>
 
 <frame frameborder="0">
 
 </frameset>
 
 </html>
ログイン後にコピー

framespacing プロパティ: フレームの境界線の幅。フレームの境界線の幅はデフォルトで 1 ピクセルで、そのサイズはパラメータ Framespacing を通じて調整できます。

構文:

説明: フレーム幅は、ページ上の境界線間の線の幅 (ピクセル単位) です。このパラメータはフレームセットにのみ使用でき、単一フレームには無効です。 

  <html>
  
  <head>
  
  <title>设置框架的边框宽度</title>
  
  </head>
  
 <frameset rows="30%,70%" framespacing="10">
     <frame>
 
       <frameset cols="20%,55%,25%" framespacing="30">
 
         <frame>
 
         <frame>
 
         <frame>
 
       </frameset>
 
 </frameset>
 
 </html>
ログイン後にコピー

bordercolor プロパティ: フレームの境界線の色。パラメータ bordercolor を使用して、フレームセットの境界線の色を設定します。

構文:

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

  <html>
  
  <head>
  
  <title>设置框架的边框颜色</title>
  
  </head>
  
 <frameset rows="30%,70%" framespacing="10" bordercolor ="#CC99FF">
 
     <frame>
 
      <frameset cols="20%,55%,25%" framespacing="30" bordercolor ="#9900FF">
 
         <frame>
 
         <frame>
 
         <frame>
 
       </frameset>
 
 </frameset>
 
 </html>
ログイン後にコピー

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

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

構文:

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

  <html>
  
  <head>
  
  <title>设置页面源文件</title>
  
  </head>
  
 <frameset rows="30%,70%">
 
     <frame src="pic01.gif">
     <frame src="src01.html">
 
 </frameset>
 
 </html>
ログイン後にコピー

3. タグ

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

  <html>
 <frameset cols="25%,50%,25%">
    <frame src="/example/html/frame_a.html">
    <frame src="/example/html/frame_b.html">
    <frame src="/example/html/frame_c.html">
  <noframes>
  <body>您的浏览器无法处理框架！</body>
  </noframes>
  </frameset>
 </html>
ログイン後にコピー

2. フローティング フレーム (

説明: 通常のフレーム構造と同様に、フローティング フレームでも名前、スクロール、フレーム境界線などの多くのパラメーターを設定できます。ただし、通常のフレームと比較して、フローティング フレームにはフレームスペースとボーダーカラーのパラメーターが含まれません。

src属性：浮动框架中最基本的参数就是src，它用来设置浮动框架页面的源文件地址，也是浮动框架页面必需的参数。因为只有设置了源文件的内容，浮动框架才有意义。语法：