Question

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

在我的案例中使用<iframe>是件好事吗？

Answer 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>

Answer 2

如果你想纯粹用HTML进行，那么只能通过iframe来实现它，但这并不是许多开发人员最好的方法和劝阻，因为你松散了深层链接，因为整个网站都有相同的地址。

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

Answer 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。

如何将内容与网页的顶部分开保存

3 个答案: