在 html 设计中插入页面答案

【问题标题】：Insert Page in html design在 html 设计中插入页面
【发布时间】：2013-09-27 00:54:00
【问题描述】：

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

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

代码sn-p：

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

【问题讨论】：

标签： php jquery html css

【解决方案1】：

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

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

1st - 创建母版页 | 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。

2nd - 创建 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...

3rd - 创建 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。

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

暂时就这些了，如有补充请在cmets中提问。

【讨论】：

成为第一个对我的帖子发表评论的人...我没睡大约 20 个小时，如果我忘记包含某些内容或拼写错误的内容或任何内容，请随意在 cmets 中提及。跨度>
mdesdev 感谢您宝贵的 cmets 我已修改但它不再工作请查看以下链接 stackoverflow.com/questions/18941180/…
我编辑了我的答案，我已经使用这个系统多年了，我不知道我怎么会错过我的第一个答案版本中的 index.php（也许太累了），但是现在，一切没问题;）

【解决方案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 作为不好的做法。

【讨论】：

Mamuz 感谢您宝贵的 cmets 我已修改但它无法再次工作请查看以下链接 stackoverflow.com/questions/18941180/…

【解决方案3】：

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

 或 

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

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

【讨论】：

@Brid 感谢您的宝贵 cmets 我已修改但它不再工作请查看以下链接 stackoverflow.com/questions/18941180/…

【解决方案4】：

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

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

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

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

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

【讨论】：

我试过这样但是菜单页面不显示你能分享你的邮件ID我们会讨论扔邮件。
我已经修改，但它不能再次工作请检查下面的链接stackoverflow.com/questions/18941180/…
@CheckMate：你的 PHP 服务器工作正常吗？包含 PHP 代码的文件是 PHP 文件还是 HTML 文件？