使用 php include 标题、导航和其他元素时的良好做法?

2024-01-29

我不知道专业的网页设计师通常如何分隔这些元素:

像这样:

<?php include("head.php"); ?>
<?php include("lang.php"); ?>
<?php include("nav.php"); ?>

或者就像这样

<?php include("head.php"); ?>
<?php include("header.php"); ?>

或者只是将我想要重复的所有元素放在一起:

<?php include("head-header.php"); ?>

我应该在这些元素中使用 php 或 html 扩展吗? (头部、导航等..)?

我该怎么办<title> tag?

整个 HTML(或 PHP?):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>
 <title>New Project</title>
 <link rel="stylesheet" type="text/css" href="styles/global.css" />
 <link rel="stylesheet" type="text/css" href="styles/home.css" />
 <script type="text/javascript" src="scripts/jquery-1.3.2.min.js"></script>
 <script type="text/javascript" src="scripts/jquery.corner.js"></script>
 <script type="text/javascript" src="scripts/custom.js"></script>
</head>
</head>
<body id="home">
<div id="header">
 <div class="container">
  <div id="topbar">
   <h1><a href="http://widerdesign.co.nr/">wider design</a></h1>
   <ul id="lang">
    <li><a href="index.php">English</a></li>
    <li><a href="es/index.php">Español</a></li>
    <li><a href="tw/index.php">中文(繁體)</a></li>
    <li><a href="cn/index.php">中文(简体)</a></li>
   </ul>
   <ul id="nav">
    <li class="home"><a href="index.html">home</a></li>
    <li class="portfolio"><a href="portfolio.php">portfolio</a></li>
    <li class="about"><a href="about.php">about</a></li>
    <li class="contact"><a href="form.html">contact</a></li>
   </ul>
  </div>
 </div>
</div>
<div id="content">
 <div class="container">
  <div id="tagline">
   <div>
    <h2><strong>Maecenas nisl quam</strong>, volutpat ut tincidunt quis, rutrum quis nibh. Nulla est nunc, pellentesque ac dictum ac, condimentum convallis odio.</h2>
    <p>Maecenas nisl quam, volutpat ut tincidunt quis, rutrum quis nibh. Nulla est nunc, pellentesque ac dictum ac, condimentum convallis odio. Maecenas nisl quam, volutpat ut tincidunt quis, rutrum quis nibh. Nulla est nunc, pellentesque ac dictum ac, condimentum convallis odio. Maecenas nisl quam, volutpat ut tincidunt quis, rutrum quis nibh. Nulla est nunc, pellentesque ac dictum ac, condimentum convallis odio.</p>
   </div>
   <a href="#"><img src="images/project3.png"/></a>
  </div>
  <div id="mainbar">
   <h2>Featured Work</h2>
       <div class="pusher">
     <a href="#"><img src="images/project3.png"/></a>
     <div id="info">
      <h2><a href="index.html">Best Language School</a></h2>
      <p>Maecenas nisl quam, volutpat ut tincidunt quis, rutrum quis nibh. Nulla est nunc, pellentesque ac dictum ac, condimentum convallis odio.</p>
     </div>
    </div>
    <div class="pusher">
     <a href="#"><img src="images/project3.png"/></a>
     <div id="info">
      <h2><a href="index.html">Best Language School</a></h2>
      <p>Maecenas nisl quam, volutpat ut tincidunt quis, rutrum quis nibh. Nulla est nunc, pellentesque ac dictum ac, condimentum convallis odio.</p>
     </div>
    </div>
    <div class="pushed">
     <a href="#"><img src="images/project3.png"/></a>
     <div id="info">
      <h2><a href="index.html">Best Language School</a></h2>
      <p>Maecenas nisl quam, volutpat ut tincidunt quis, rutrum quis nibh. Nulla est nunc, pellentesque ac dictum ac, condimentum convallis odio.</p>
     </div>
    </div>
   </div><!-- #mainbar -->
  </div><!-- .container -->
 </div><!-- #content -->
<div id="footer">
 <div class="container">
  <div id="bottombar">
   <p>Copyright © 2009 New Project. All Rights Reserved. </p>
  </div>
 </div>
</div>
</body>
</html>

最佳做法是什么?


不知道最佳实践,但我的方法一直是页眉-内容-页脚。实际内容之前的所有内容(包括<div id="content">等)进入页眉以及内容之后的所有内容到页脚。这样,您的实际内容中就没有任何与布局相关的标记,并且可以更轻松地修改外观。

我认为没有任何理由将标题分成许多部分,因为就行而言通常相当小。此外,所有附加包含都会稍微减慢页面生成速度。

另外,最好将文件另存为 .php,因为您可能在某个阶段需要其中的一些逻辑。

作为一个实际的例子,我将如何剪切布局:

header.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>
 <title>New Project</title>
 <link rel="stylesheet" type="text/css" href="styles/global.css" />
 <link rel="stylesheet" type="text/css" href="styles/home.css" />
 <script type="text/javascript" src="scripts/jquery-1.3.2.min.js"></script>
 <script type="text/javascript" src="scripts/jquery.corner.js"></script>
 <script type="text/javascript" src="scripts/custom.js"></script>
</head>
</head>
<body id="home">
<div id="header">
 <div class="container">
  <div id="topbar">
   <h1><a href="http://widerdesign.co.nr/">wider design</a></h1>
   <ul id="lang">
    <li><a href="index.php">English</a></li>
    <li><a href="es/index.php">Español</a></li>
    <li><a href="tw/index.php">中文(繁體)</a></li>
    <li><a href="cn/index.php">中文(简体)</a></li>
   </ul>
   <ul id="nav">
    <li class="home"><a href="index.html">home</a></li>
    <li class="portfolio"><a href="portfolio.php">portfolio</a></li>
    <li class="about"><a href="about.php">about</a></li>
    <li class="contact"><a href="form.html">contact</a></li>
   </ul>
  </div>
 </div>
</div>
<div id="content">
 <div class="container">

内容.php

  <div id="tagline">
   <div>
    <h2><strong>Maecenas nisl quam</strong>, volutpat ut tincidunt quis, rutrum quis nibh. Nulla est nunc, pellentesque ac dictum ac, condimentum convallis odio.</h2>
    <p>Maecenas nisl quam, volutpat ut tincidunt quis, rutrum quis nibh. Nulla est nunc, pellentesque ac dictum ac, condimentum convallis odio. Maecenas nisl quam, volutpat ut tincidunt quis, rutrum quis nibh. Nulla est nunc, pellentesque ac dictum ac, condimentum convallis odio. Maecenas nisl quam, volutpat ut tincidunt quis, rutrum quis nibh. Nulla est nunc, pellentesque ac dictum ac, condimentum convallis odio.</p>
   </div>
   <a href="#"><img src="images/project3.png"/></a>
  </div>
  <div id="mainbar">
   <h2>Featured Work</h2>
       <div class="pusher">
     <a href="#"><img src="images/project3.png"/></a>
     <div id="info">
      <h2><a href="index.html">Best Language School</a></h2>
      <p>Maecenas nisl quam, volutpat ut tincidunt quis, rutrum quis nibh. Nulla est nunc, pellentesque ac dictum ac, condimentum convallis odio.</p>
     </div>
    </div>
    <div class="pusher">
     <a href="#"><img src="images/project3.png"/></a>
     <div id="info">
      <h2><a href="index.html">Best Language School</a></h2>
      <p>Maecenas nisl quam, volutpat ut tincidunt quis, rutrum quis nibh. Nulla est nunc, pellentesque ac dictum ac, condimentum convallis odio.</p>
     </div>
    </div>
    <div class="pushed">
     <a href="#"><img src="images/project3.png"/></a>
     <div id="info">
      <h2><a href="index.html">Best Language School</a></h2>
      <p>Maecenas nisl quam, volutpat ut tincidunt quis, rutrum quis nibh. Nulla est nunc, pellentesque ac dictum ac, condimentum convallis odio.</p>
     </div>
    </div>
   </div><!-- #mainbar -->

页脚.php

  </div><!-- .container -->
 </div><!-- #content -->
<div id="footer">
 <div class="container">
  <div id="bottombar">
   <p>Copyright © 2009 New Project. All Rights Reserved. </p>
  </div>
 </div>
</div>
</body>
</html>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

使用 php include 标题、导航和其他元素时的良好做法? 的相关文章

随机推荐

  • 部分重命名 Pandas DataFrame 中的列

    我正在尝试重命名 DataFrame 的前 N 列 import pandas as pd Dat pd read csv inputName delimiter t header 0 原始表如下所示 Date ciq ticker ind
  • 使用 Java 8 Stream Reduce 在使用先前元素值对每个元素执行操作后返回 List

    我是 Streams 和 Reduce 的新手 所以我正在尝试它并遇到了一个问题 我有一个计数器列表 其中有开始计数器和结束计数器 一个项目的起始计数器始终是前一个项目的结束计数器 我有这些计数器的列表listItems我想有效地循环遍历
  • Mongodb 2dsphere索引嵌套数组字段

    我创建了集合 对象如下所示 id gt MongoId Object id gt 53087f483b15eaeb6c3c9869 time from gt 2014 02 22 00 00 00 time to gt 2014 02 22
  • 向 GUI 添加标签和文本框控件

    我想知道要插入什么代码以及在哪里添加一个简单的标签 只能说 标签 和一个可以输入数字的输入文本框 public CalculateDimensions JTabbedPane Tab new JTabbedPane JPanel jplIn
  • nodejs mysql 多个where查询

    我在nodejs中使用mysql已经有一段时间了 我似乎不知道如何使用多个where语句的查询 喜欢 SELECT FROM user information WHERE a a 或 b b 现在我有这个作为我的代码 connection
  • React-Table:如果用鼠标单击(选择)行,如何更改行的背景颜色?

    我有以下代码用于检索单击行的数据
  • 嵌套父/子复选框 - 工作解决方案需要 Bootstrap 的调整帮助

    我一直在寻找一个 完整 的解决方案来嵌套父子复选框 根据层次结构正确更改状态 大多数 解决方案 不起作用或只能在一定程度上起作用 它们还要求您以特定方式命名复选框 This https stackoverflow com questions
  • 如何让 Android 图标改变状态(突出显示)?

    我正在小部件中使用 Android SDK 图标按钮进行刷新 ic menu refresh 并且我需要在按下该按钮时更改选择状态 这是怎么做到的 我是否为按钮定义 XML 您可以通过选择器在 xml 中定义不同的状态 示例 尤其是查看状态
  • Yeoman 和 ExpressJS

    我想知道是否有一些样板代码可以使用像 Yeoman 这样的前端工作流工具和像 ExpressJS 这样的后端框架 如果我想为前端和后端维护相同的代码库 基本上我想知道 yeoman 和express 生成的样板代码如何组合在一起 有没有办法
  • html 列的宽度根据其内容自动改变

    我创建了包含 3 列的动态 HTML 页面 每列可以包含可变数量的文本 从 0 到 1000 个单词 我希望 3 列中的文本看起来高度大致相同 因此 我希望列宽根据其包含的文本量自动更改 在 HTML 中 当每个单元格都有一个文本 div
  • ListView 和 ListView 内的按钮

    我想显示一个Button在 的里面ListView 目标应该是点击ListView线或按钮上 单击显示更多信息的行 单击底部显示更多按钮的按钮 与 GMAIL 应用程序相同 右侧有一个复选框 单击底部的复选框后 会出现按钮栏 我的问题是在将
  • 使用省略号重塑 numpy 数组的问题

    我正在尝试为项目复制以下批处理生成器 但是我在重塑数据时遇到问题 该函数的目标是获取 6000 3000 数组并将其重塑为 batch size 100 3000 1 我正在尝试复制的功能代码 def gen dict files aug
  • jUnit 4 中的 TestSuite 设置

    我已经设法找到如何在 jUnit 4 中制作 TestSuite 但我真的很怀念在 TestSetup 中包装套件的 v3 可能性 关于如何为 jUnit 4 中的一组测试用例执行一些 BeforeClass AfterClass 设置 有
  • 更改按钮锚点 SwiftUI

    我正在尝试更改确定按钮中心的锚点 以下代码将按钮放置在框架的左上角 Button action print self note Text note position x 0 0 y 0 0 如果我使用 offset 代替 那么它就会起作用
  • 空手道——并行执行失败[重复]

    这个问题在这里已经有答案了 我观察到 当我使用 Runner parallel getClass 1 在 Maven 构建中运行测试 功能文件 时它工作正常 但是当我增加像 Runner parallel getClass 5 这样的线程数
  • 邪恶巫师动态步骤顺序

    我正在尝试根据先前选择的选择来更改邪恶向导中的步骤顺序 所以目前我已经完成了所有步骤 class WWTestController lt ApplicationController include Wicked Wizard steps f
  • 如何让 Visual Studio 在没有警告的情况下处理 HTML 5 标签

    我有各种 html 标签 与 jquery mobile 相关 Visual Studio 将其标记为无效属性 例如 div 其中包括 Validation XHTML 1 0 Transitional Attribute data rol
  • 安装 Virtualenv 并激活 virtualenv 不起作用

    我从 Github 帐户克隆了我的 Django 项目 并使用著名的命令激活了 virtualenvsource nameofenv bin activate当我跑步时python manage py runserver 它给了我一个错误
  • 访问通过 window.open 方法检索的 Document 元素

    我想根据提供的网址弹出一个新的浏览器 为此我使用 javascript 的 window open 函数 但是 我真正想要的是检查弹出的新窗口并更改它的 url 并重定向到另一个站点 这就是我尝试做的方法
  • 使用 php include 标题、导航和其他元素时的良好做法?

    我不知道专业的网页设计师通常如何分隔这些元素 像这样 或者就像这样 或者只是将我想要重复的所有元素放在一起 我应该在这些元素中使用 php 或 html 扩展吗 头部 导航等 我该怎么办