0

我设计了一个有 20 页的网站，菜单和标题具有 css 设计我的问题是，如果我更改菜单内容，那么我必须更改所有页面，以便如何为标题制作单独的页面。

我已经尝试并包含页面方法，但请不要工作。

代码片段：

     <!DOCTYPE html>
     <html class=" no-bgpositionxy" xmlns="http://www.w3.org/1999/xhtml" lang="en">
        <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
           <title>sample</title>
        <link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
    <script type="text/javascript" src="js/jquery-1.5.1.min.js"></script>
    <script type="text/javascript" src="js/custom.js"></script>
    <link rel="stylesheet" href="css/nivo-slider.css" type="text/css"    media="screen" />
    <script src="js/jquery.nivo.slider.js" type="text/javascript"></script>



    <link rel="shortcut icon" href="Fav.ico">
   <meta name="robots" content="follow,index">



    <link type="text/css" href="css/BodyAlign.css" rel="stylesheet" media="all">



     <script type="text/javascript" src="js/Menu.js"></script>
     <script type="text/javascript" src="js/Menu1.js"></script>

    <script type="text/javascript" src="js/MenuDrop.js" language="javascript"></script>
   <script type="text/javascript" language="javascript">
            ct = "us";
            selURL = "manufacturing.html";
            $(function(){$('#popularSearches,#country-list').hide();});
        </script>


    <style media="screen" type="text/css">
     <!--
      .enlarge {width:330px;bottom:55px;}

      --> 
     </style>


  </head>

 <!-- Head -->

  <body>

代码下面是菜单，所以我想为下面的代码制作单独的页面

<header id="header"> <div class="container">   <div id="topnav_wrap"> <ul id="topnav"> <li class="topnav_column_title"> <a href="index.html">Home</a></li>

  <li id="why_workday_menu"> <a href="manufacturing.html">Why </a> <div style="width: 200px;" class="topnav_content 1-columns"> <ul class="topnav_column1 last">

<li class="topnav_column_title"> <a href="manufacturing.html">Why </a></li> <li> <a href="manufacturing.html">Designed for the Way You Work</a></li> <li> <a href="manufacturing.html">Real Cloud</a></li> <li> <a href="manufacturing.html">Mobile</a></li> <div class="clearfix"></div>
4

4 回答 4

2

由于您使用 PHP 标记了问题，因此我假设您将 PHP 用于服务器端逻辑。在这种情况下，PHP 有一个include语句，它将在调用它的位置包含另一个 PHP 文件的内容。其他文件不需要有 PHP 代码，它可以是纯 HTML。

所以你的代码可能看起来像这样：

<!DOCTYPE html>
<html>
    <head></head>
    <body>
        <?php include "header.html"; ?>

        <!-- page-specific content goes here -->
    </body>
</html>

这样，您只需在header.html文件中创建一次标题内容，并将其包含在您要使用它的每个文件中。

于 2013-09-21T20:15:49.400 回答
2

您可以<object>像这样以非标准方式使用：

<object name="header" type="text/html" data="header.inc.html"></object>

或者，如果您的服务器支持，您也可以使用SSI 。

<!--#include file="header.inc.shtml" -->

如果你的 html 文档可以用 php 解析，你可以使用include语句。

<?php include('header.inc.phtml'); ?>

另一种方法是使用 Ajax，例如使用jQuery：

// if you have a container for it with id 'header-wrapper'
$('#header-wrapper').load('header.inc.html');

// ..or if you have no container for it
$.get("header.inc.html", function(data) {
    $("body").prepend(data);
});

最后但并非最不重要的一点是，您可以使用 Frameset 或 iFrame 作为不好的做法。

于 2013-09-21T20:17:40.573 回答
1

好的...从哪里开始...我将向您展示如何创建基本的 HTML5 主模板。

如果您还没有喜欢的文本编辑器，我会推荐Notepad++

第一次 - 创建母版页 | master.php.

<!doctype html>

<html>

<head>

  <title>My Title</title>

  <meta charset="utf-8">
  <meta name="description" content="My Website">
  <meta name="keywords" content="keyword1, keyword2, keyword3...">
  <meta name="author" content="Me">

  <link href="favicon.ico" rel="shortcut icon">

  <link href="css/style.css" rel="stylesheet" media="screen">

</head>

<body>

  <header>

    <?php include('header.html'); ?>       <!-- Put Navigation in Header -->
    <?php include('navigation.html'); ?>   <!-- Or Make Separate Navigation -->

  </header>


  <div id="content">

    <?php include($page_content); ?>       <!-- More about this in final step -->
    <?php include('sidebar.html'); ?>      <!-- Yes, you can add the sidebar too :) -->
    <div class="clearfix"></div>           <!-- Smart to put it here ;) -->

  </div>


  <footer>

    <?php include('footer.html'); ?>

  </footer>

</body>

</html>

  *注意 - 在下面的文档中，我们不会<!doctype html>在母版页中编写或其他任何内容master.php。

第二 - 创建header.html或header.php记录。

<img src="images/logo.png" alt="Site Name"/>

<nav>
  <ul>
    <li><a href="index.php">HOME</a></li>
    <li><a href="#">LINK 2</a></li>
    <li><a href="#">LINK 3</a></li>
    <li><a href="#">LINK 4</a></li>
    <li><a href="#">LINK 5</a></li>
  </ul>
</nav>

...and some more header content if needed...

第三 - 创建footer.html或footer.php记录。

<div>

  Some footer content here...

</div>

Anything else what we want in the footer area.

第 4 次和最终 -includes在您的文档根目录中创建文件夹，并在该文件夹中创建.html或.php记录index-content.php以下内容，例如

<div id="divName">

   <p>this is some text...</p>

</div> 

and whatever you want here...

比把新创建index-content.php的文件夹includes

比创建新文档index.php并将其放在文档根文件夹中

index.php文件内容

<?php
  $page_content = 'includes/index-content.php';
  include('master.php');
?>

现在在您的网络浏览器中导航到localhost/sitename/index.php并完成。
（如果您没有启动并运行 localhost 服务器，index.php请在您的 Web 浏览器中打开。

稍后您以相同的方式创建其他页面/文档，例如创建文档内容
pagename-content.php或pagename-content.html为您在导航中链接的实际页面创建 pagename.php，如上例所示，而不是在导航链接中调用它
<a href="pagename.php">Page Name</a>

暂时就这些了，有什么补充请在评论区留言。

于 2013-09-21T21:11:32.657 回答
0

如果在您的服务器上启用了 SSI（服务器端包括），请使用它。

<!--#include file="menu.html" -->或者<!--#include virtual="menu.html" -->

或者如果您的服务器上启用了 php，则使用 php 包含函数。

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

于 2013-09-21T20:20:03.063 回答