BinaryDevelop
  1. ホーム
  2. Web制作
  3. HTML/Xhtml

HTMLフレームワーク_Power Node Javaアカデミー仕上げ

2022-01-25 10:14:05

I. フレームワーク

ブラウザのドキュメントウィンドウには、1つのウェブページファイルしか表示できませんが、フレームを利用することで、同じブラウザウィンドウに複数のページを表示することが可能です。フレームを使用するページは、フレームセットと特定のフレームファイルの2つの主要な部分を含んでいます。

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

1. フレームセット (<frameset></frameset>) です。 は、このHTMLファイルをフレームセットスキーマとして定義し、ビューポートをどのように分割するかを設定するファイルです。平たく言えば、フレームセットとはフレーム構造を保持するファイルであり、フレームファイルにアクセスするためのエントリーファイルである。Webページが2つのフレームで構成されている場合、左右2つのWebページファイルに加え、合計1つのフレームセットファイルが存在することになります。フレームページの使用において、<body>ボディのマークアップは、フレームのマークアップ <frameset> に置き換わります。そして、フレームページに含まれる各フレームは、<frame>タグによって定義されます。

rows属性：水平分割ウィンドウ。水平分割ウィンドウは、ページの水平方向の切断、すなわち、ページを上下に並んだ複数のウィンドウに分割します。rowsは複数の値を取ることができ、それぞれがフレームウィンドウの水平方向の幅をピクセル単位やブラウザのパーセンテージで表します。ただし、一般に rows には複数の値が設定され、複数のフレームが必要とされるため、それに応じた数の <frame> パラメータが必要となることに注意してください。 

  <html>
  
  <head>
  
  <title> Effect of horizontally split windows</title>
  
  </head>
  
 <frameset rows="30%,70%">
 
     <frame>
 
     <frame>
 
 </frameset>
 
 </html>

cols属性：垂直方向に分割されたウィンドウ。縦割りウィンドウは、ページを縦に分割するウィンドウです、つまり、ページを左右に並んだ複数のウィンドウに分割します。 colsは複数の値を取ることができ、各値はフレームウィンドウの横幅をピクセルで、あるいはブラウザに対するパーセンテージで表します。水平方向に分割されたウィンドウと同様に、一般に、colsの複数の値は、複数のフレーム、すなわち複数の <frame> パラメータを必要とするように設定されます。 

  <html>
  
  <head>
  
  <title> Effect of vertically split windows</title>
  
  </head>
  
<frameset cols="20%,55%,25%">
 
     <frame>
 
     <frame>
 
     <frame>
 
 </frameset>
 
 </html>

frameborder属性：ボーダーを設定します。デフォルトでは、フレームウィンドウの周りにボーダーラインがありますが、frameborderパラメータでボーダーラインの表示方法を調整することができます。構文は以下の通りです。

<frameset frameborder="whether to display"> または <frame frameborder="whether to display"> です。 frameborderは、0か1しか設定できません。0を指定すると枠線が非表示になり、1を指定すると枠線が表示されます。framesetで設定するとフレーム全体に対して機能し、frameで設定すると現在のフレームに対してのみ機能します。 

  <html>
  
  <head>
  
  <title> Set the frame window's border display effect</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によってサイズを変更することができます。

構文: <frameset framespacing="borderwidth">

説明 framespacing は、ページ内の個々のフレーム間の線の幅をピクセル単位で指定します。また、このパラメータはフレームセットに対してのみ有効であり、個々のフレームに対しては有効ではありません。 

  <html>
  
  <head>
  
  <title> Set the border width of the frame</title>
  
  </head>
  
 <frameset rows="30%,70%" framespacing="10">

     <frames>
 
       <frameset cols="20%,55%,25%" framespacing="30">
 
         <frame>
 
         <frame>
 
         <frame>
 
       </frameset>
 
 </frameset>
 
 </html>

bordercolor属性：フレームのボーダーカラー。パラメータ bordercolor を使用して、フレームセットのボーダーカラーを設定します。

構文： <frameset bordercolor="color-code">

注：繰り返しになりますが、このパラメータはフレームセット全体に対してのみ有効で、個々のフレームに対しては有効ではありません。 

  <html>
  
  <head>
  
  <title> Sets the border color of the frame</title>
  
  </head>
  
 <frameset rows="30%,70%" framespacing="10" bordercolor ="#CC99FF">
 
     <frames>
 
      <frameset cols="20%,55%,25%" framespacing="30" bordercolor ="#9900FF">
 
         <frame>
 
         <frame>
 
         <frame>
 
       </frameset>
 
 </frameset>
 
 </html>

2. frame (<frame>) 属性と src 属性です。

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

構文： <frame src="ページソースファイルアドレス">

説明 ページファイルは、フレームページの特定のコンテンツが置かれている場所です。ソースファイルが設定されていないフレームについては、単なる白紙ページであり、意味がありません。ページのソースファイルには、通常のHTMLファイル、画像、その他のファイルを使用できます。 

  <html>
  
  <head>
  
  <title> set page source file</title>
  
  </head>
  
 <frameset rows="30%,70%">
 
     <frame src="pic01.gif">

     <frame src="src01.html">
 
 </frameset>
 
 </html>

3. <noframes></noframes> タグ

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

  <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> Your browser cannot handle frames! </body>
  </noframes>
  </frameset>
 </html>

 2つ目、フローティングフレーム（<iframe>)

フローティング・フレームは、ブラウザ・ウィンドウの中に入れ子になった子ウィンドウ、つまり、ページ全体がフレーム・ページではなく、フレーム・ウィンドウを含む、より特殊な種類のフレームです。対応するページのコンテンツは、フレームウィンドウの中に表示されます。フローティングフレームはインラインフレームとも呼ばれ、このような名前がついています。

構文： <iframe src="ページソース"></iframe>　　

説明 通常のフレーム構造と同様に、フローティングフレームは名前、スクロール、フレームボーダーなどの多くのパラメータを設定することができます。 しかし、通常のフレームと比較して、フローティングフレームはframespacingとbordercolorのパラメータを含んでいません。

src属性。フローティングフレームで最も基本的なパラメータはsrcで、フローティングフレームページのソースファイルアドレスを設定するために使用され、フローティングフレームページには必須のパラメータです。なぜなら、フローティング・フレームは、ソース・ファイルのコンテンツが設定されて初めて意味をなすからです。構文：<iframe src="ページソースファイル">

widthとheightの属性です。通常のフレーム構造では、フレームはブラウザのウィンドウ全体であるため、サイズを設定する必要はありません。しかし、通常のHTMLページに挿入されるフローティング・フレームでは、フレーム全体のサイズを変更することができます。構文： <iframe src= src="フローティングフレームページソースファイル" width="page width" height="page height"> ページの幅と高さの値はピクセル単位で指定されます。  

 <html>
 <body>
<iframe src="/i/eg_landscape.jpg" width="550" height="310" ></iframe>
 <p>Some older browsers do not support iframes. </p>
 <p> If not supported, iframes are not visible. </p>
 </body>
 </html>

III. フレームレイアウトの一例 

  <html>
  <head>
      <title> frame main page </title>
  </head>
 <frameset rows="20%,*"><<! --frameset, container for control files -->
      <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 tags can contain body tags in them -->
         <body> 
             This page does not support frameset tags!
         </body>
     </noframes>
  </frameset>
 </html>

 IV. リンクがフレームから飛び出す方法

Webサイトのバックエンドレイアウトでは、フレームが多用されています。多くの場合、フレームから飛び出してページを再読み込みする必要があります。では、リンクはどのようにしてフレームから飛び出すことができるのでしょうか？実は、これは、<a></a>タグのtarget属性を"_top"に指定するだけで、実現できるんです。以下は簡単な例です。 

  <html>
  
  <body>
  
  <p> Locked in the frame? </p> 
  
  <a href="/index.html"
  target="_top"> Click here! </a> 
  
 </body>
 </html>

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します