ホームページ > 記事 > ウェブフロントエンド > HTMLフレームワークの使い方

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

墨辰丷オリジナル: 2018-06-04 15:40:338064ブラウズ

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

1. フレーム

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

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

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

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 パラメーターによって調整できます。構文は次のとおりです:

00a74f9f90e77a87465cc2ecf6a1f36e または bdf97991722f0c147eb686b95c35eae0 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 を通じて調整できます。

構文: b81be4cf36a180fe3500f9e254b0f204

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

  <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 を使用して、フレームセットの境界線の色を設定します。

構文: 84615f5fcce5196db959dc686645e826

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

  <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. フレーム (04a0d55efbbfd646a993fbc01f262c57) と src 属性。

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

構文: 80701e7bc62bd1c2ddafbb984a6d99c4

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

  <html>
  
  <head>
  
  <title>设置页面源文件</title>
  
  </head>
  
 <frameset rows="30%,70%">
 
     <frame src="pic01.gif">
     <frame src="src01.html">
 
 </frameset>
 
 </html>

3.37f861bd36cef5b6406eba87d20a5bab23a17d2cc9873ab460d73d80ccc8d7a4 タグ

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

  <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. フローティングフレーム (d5ba1642137c3f32f4f4493ae923989c)

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

構文: f715c2eb11ebd06b2185ea84fac0ffec065276f04003e4622c4fe6b64f465b88

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

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

width和height属性：在普通框架结构中，由于框架就是整个浏览器窗口，因此不需要设置其大小。但是在浮动框架中，是插入到普通HTML页面中的，可以调整整个框架的大小。语法：1ae60c9a2f4a841f9b41850969e580f3，页面的宽度和高度值都以像素为单位。

 <html>
 <body>
<iframe src="/i/eg_landscape.jpg" width="550" height="310" ></iframe>
 <p>一些老的浏览器不支持 iframe。</p>
 <p>如果得不到支持，iframe 是不可见的。</p>
 </body>
 </html>

三、一个框架布局的示例

  <html>
  <head>
      <title>框架主页面 </title>
  </head>
 <frameset rows="20%,*"><!--框架集，控件文件的容器-->
      <frame name="topFame" src="3.html" noresize/>
        <frameset cols="240px,*">
            <frame name="leftFrame" src="1.html"/>
      <frame name="rightFrame" src="2.html" marginwidth="20px" scrolling="no"/>
             
         </frameset>
        <noframes>
        <!--noframes标记当中可以包含body标记-->
         <body> 
             该页面不支持frameset标签！
         </body>
     </noframes>
  </frameset>
 </html>

四、链接如何跳出框架

在网站后台布局中，框架用得比较多。在很多时候，我们需要跳出框架，重新加载页面。那么链接如何才能跳出框架呢？其实，只需要指定3499910bf9dac5ae3c52d5ede73834855db79b134e9f6b82c0b36e0489ee08ed标签的target属性为"_top"即可实现。下面是一个简单的例子。

  <html>
  
  <body>
  
  <p>被锁在框架中了吗？</p> 
  
  <a href="/index.html"
  target="_top">请点击这里！</a> 
  
 </body>
 </html>

总结：以上就是本篇文的全部内容，希望能对大家的学习有所帮助。

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

関連記事