0

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

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

4

3 回答 3

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>
于 2013-04-03T13:51:02.533 回答
0

如果您想纯粹在 HTML 中执行此操作，那么通过iframe执行此操作的唯一方法，但这不是最好的方法，并且许多开发人员不鼓励，因为您丢失了深层链接，因为整个站点具有相同的地址。

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

于 2013-04-03T13:49:26.110 回答
0

不，您不必为此使用 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。

于 2013-04-03T15:22:42.580 回答