2016-11-06 18 views
0

フレームを使用して簡単なWebページを作成しようとしています。このようになり、すべてのHTMLフレームが表示されない

<!doctype html> 

<html lang="en"> 
<head> 
    <meta charset="utf-8"> 

    <title>Index</title> 
    <meta name="description" content="description"> 
    <meta name="author" content="author"> 

    <link rel="stylesheet" href="css/base.css"> 
    <link rel="stylesheet" href="css/main.css"> 

    <!--[if lt IE 9]> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script> 
    <![endif]--> 
</head> 

<frameset> 
    <frame name="header" src="header.html"> 
    <frame name="sidebar" src="sidebar.html"> 
    <frame name="mainarea" src="home.html"> 
    <frame name="footer" src="footer.html"> 
</frameset> 

</html> 

ファイルheader.html、sidebar.html、home.html、およびfooter.html:

<!doctype html> 

<html lang="en"> 
<head> 
    <meta charset="utf-8"> 

    <title>Header</title> 
    <meta name="description" content="description"> 
    <meta name="author" content="author"> 

    <link rel="stylesheet" href="css/base.css"> 
    <link rel="stylesheet" href="css/main.css"> 

    <!--[if lt IE 9]> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script> 
    <![endif]--> 
</head> 

<body> 

    <p>Header</p> 

</body> 
</html> 

とき は現在、私は次のコードでindex.htmlファイルを持っています私はファイル(index.html)を開こうとすると、私はthisを取得します。

私は間違って何をしていますか?最初のものだけでなく、4つのhtmlファイルをすべて表示します。

答えて

0

frameset要素にrowscolsを指定する必要があります。そうしないと、ブラウザはフレームのサイズを知ることができず、正しく表示されません。

このコード、例えば、4つの象限をもたらすであろう:

<frameset cols="50%,*" rows="50%,*"> 
    <frame name="header" src="header.html"> 
    <frame name="sidebar" src="sidebar.html"> 
    <frame name="mainarea" src="home.html"> 
    <frame name="footer" src="footer.html"> 
</frameset> 

あなたの例では、このような何かを求めて:

<frameset cols="100%" rows="10%,*,10%"> 
    <frame name="header" src="header.htm" noresize=""> 

    <frameset cols="20%,80%" rows="100%"> 
    <frame name="sidebar" src="sidebar.htm" noresize=""> 
    <frame name="home" src="home.htm" noresize=""> 
    </frameset> 

    <frame name="footer" src="footer.htm" noresize=""> 
</frameset> 

NB:それは廃止されましたようframesetがHTML5有効ではありません。ブラウザがおそらくframesetを永遠にサポートしていない可能性があるので、これが何となく重要であれば、望ましい効果を達成するための新しい方法を調べることをお勧めします。

+0

ありがとうございます!私はフレームセットの代わりに何を使うべきだと思いますか?他のファイルからHTMLを「インポート」する方法が必要なので、「サイドバー」ファイルを変更すると、すべてのページが変更されます。 –

+0

HTML5の 'frames'に代わる[iframes'](https://developer.mozilla.org/en/docs/Web/HTML/Element/iframe)を使うべきでしょう。 – amdouglas

+0

ありがとう!私はiframeを見ていきます。 –

関連する問題