如何将内容与网页顶部分开[重复]答案

【问题标题】：How to keep content separately from top part of webpage [duplicate]如何将内容与网页顶部分开[重复]
【发布时间】：2013-03-25 05:02:57
【问题描述】：

我是 html/css/web 中的任何内容的超级新手，我正在尝试建立自己的网站。假设我的网站有两个部分 - 顶部带有徽标和菜单，底部带有内容。我需要哪些工具来单独保存它？我的意思是 - 只有一个带有“高级事物”的文件（因为我不想在每个子页面上编辑它）和其他带有子页面的文件？我需要 php 吗？

在我的情况下使用<iframe> 是一件好事吗？

【问题讨论】：

标签： html web

【解决方案1】：

像 php 这样的服务器端语言是可行的方法。服务器端语言将使您能够执行所谓的server side include。

因此，例如，您可以创建一个名为header.php 的文件，并将所有代码从打开的<html> 标记放置到您网站顶部的任何其他内容中。您可能想更进一步，并创建一个footer.php 以将所有始终位于底部的代码。

示例 header.php

<!doctype html>
<html>
<head>
    <title>My Awesome Website</title>
</head>
<body>
    <header>
        <nav>
            <ul>
                <li>Menu Link 1</li>
                <li>Menu Link 2</li>
                <li>Menu Link 3</li>
            </ul>
        </nav>
    </header>
    <div id="main">

示例 footer.php

    </div><!-- end #main -->
    <footer>
         My Awesome website's Footer content!
    </footer>
</body>
</html>

现在把它们放在我们的主页上或index.php

示例 index.php

<?php include 'header.php'; ?>

   <h1>Welcome to my home page!</h1>
   <p>This is my super awesome site and I hope you like it!</p>

<?php include 'footer.php'; ?>

发送到浏览器的最终输出如下：

<!doctype html>
<html>
<head>
    <title>My Awesome Website</title>
</head>
<body>
    <header>
        <nav>
            <ul>
                <li>Menu Link 1</li>
                <li>Menu Link 2</li>
                <li>Menu Link 3</li>
            </ul>
        </nav>
    </header>
    <div id="main">
        <h1>Welcome to my home page!</h1>
        <p>This is my super awesome site and I hope you like it!</p>
    </div><!-- end #main -->
    <footer>
         My Awesome website's Footer content!
    </footer>
</body>
</html>

【讨论】：

【解决方案2】：

如果你想纯粹用 HTML 来做，那么通过iframe 做它的唯一方法，但这不是最好的方法，许多开发人员不鼓励，因为你失去了深层链接，因为整个网站都有相同的地址。

更好的选择是使用服务器端编程模型，例如 PHP、ASP.NET、Ruby...

【讨论】：

好的，谢谢，我在这里试试 PHP。

【解决方案3】：

不，您不必为此使用 php。如果您不想使用 php，也可以使用一般的 ssi 包含文件。使用 php 需要一个设置为解析 php 的服务器（这是另一个主题 :)。一个例子可能看起来像......

<body>
  <div id="header">
  <!--#include file="includes/header.ssi"-->
  </div>

  <div id="menu">
  <!--#include file="includes/menu.ssi"-->
  </div>

  <div id="footer">
  <!--#include file="includes/footer.ssi"-->
  </div>
</body>

正如包含文件路径所暗示的那样，在您的根文件夹中有一个名为“includes”的目录，从中调用您的 ssi 内容。 ssi 文件使用常规的 html 标记，任何 ID 或 CLASS 仍然服从您的 css。

【讨论】：