使用php的好习惯包括标题，导航和其他元素？ [英] Good practice when using php includes on headers, navigation and other elements?

查看：67
本文介绍了使用php的好习惯包括标题，导航和其他元素？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

像这样： 

 <？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扩展吗？ （head，nav等）？



我应该如何处理< title>

整个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-Typecontent =text / html; charset = utf-8/> 
< meta http-equiv =X-UA-Compatiblecontent =IE = EmulateIE7/> 
< title>新建项目< / title> 
< link rel =stylesheettype =text / csshref =styles / global.css/> 
< link rel =stylesheettype =text / csshref =styles / home.css/> 
< script type =text / javascriptsrc =scripts / jquery-1.3.2.min.js>< / script> 
< script type =text / javascriptsrc =scripts / jquery.corner.js>< / script> 
< script type =text / javascriptsrc =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/>更广的设计< / a>< / h1> 
< ul id =lang> 
< li>< a href =index.php>英语< / 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>主页< / a>< / li> 
< li class =portfolio>< a href =portfolio.php>投资组合< / 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>精选作品< / h2> 
< div class =pusher> 
< a href =＃>< img src =images / project3.png/>< / a> 
< div id =info> 
< h2>< a href =index.html>最佳语言学校< / 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>最佳语言学校< / 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 =push> 
< a href =＃>< img src =images / project3.png/>< / a> 
< div id =info> 
< h2>< a href =index.html>最佳语言学校< / 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>版权所有©2009新项目。版权所有。 < / p为H. 
< / div> 
< / div> 
< / div> 
< / body> 
< / html>

最佳做法是什么？

解决方案

不知道最佳做法，但我的方法一直是header-content-footer。在实际内容之前的所有内容（包括< div id =content> 等）都会进入页眉以及内容之后的所有内容。这样，您的实际内容中就没有任何与布局相关的标记，并且可以更轻松地修改出现。



我没有看到任何理由将标头拆分为多个部分，因为通常线条相当小。另外，所有附加内容都会使页面生成速度下降一些。



另外，最好将文件保存为.php，因为您可能需要某些逻辑



作为一个实际的例子，下面是我如何减少布局：

标题。 php
$ b 

 <！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-Typecontent =text / html; charset = utf-8/> 
< meta http-equiv =X-UA-Compatiblecontent =IE = EmulateIE7/> 
< title>新建项目< / title> 
< link rel =stylesheettype =text / csshref =styles / global.css/> 
< link rel =stylesheettype =text / csshref =styles / home.css/> 
< script type =text / javascriptsrc =scripts / jquery-1.3.2.min.js>< / script> 
< script type =text / javascriptsrc =scripts / jquery.corner.js>< / script> 
< script type =text / javascriptsrc =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/>更广的设计< / a>< / h1> 
< ul id =lang> 
< li>< a href =index.php>英语< / 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>主页< / a>< / li> 
< li class =portfolio>< a href =portfolio.php>投资组合< / 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>

content.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>精选作品< / h2> 
< div class =pusher> 
< a href =＃>< img src =images / project3.png/>< / a> 
< div id =info> 
< h2>< a href =index.html>最佳语言学校< / 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>最佳语言学校< / 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 =push> 
< a href =＃>< img src =images / project3.png/>< / a> 
< div id =info> 
< h2>< a href =index.html>最佳语言学校< / 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  - >

footer.php 

 < / div><！ -  .container  - > 
< / div><！ -  #content  - > 
< div id =footer> 
< div class =container> 
< div id =bottombar> 
< p>版权所有©2009新项目。版权所有。 < / p为H. 
< / div> 
< / div> 
< / div> 
< / body> 
< / html>


I don't know how those elements are usually separated by professional web designers:

like this:

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

or just like this

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

or just placing all the elements that I want to repeat together:

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

Should I use php or html extensions in those elements? (head,nav, etc..)?

What should I do with the <title> tag?

The whole HTML (or 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>

What's the best practice?

解决方案

Don't know about best practice, but my approach has always been header-content-footer. Everything that becomes before the actual content (including <div id="content"> etc.) goes into the header and everything after the content to the footer. This way you don't have any layout related markup in your actual content and can modify the appearence more easily.

I don't see any reason splitting the header in many parts, as that usually is quite small in terms of lines. Also all additional includes will slow the page generation down a bit.

Also, it's best to save the files as .php as you probably will need some logic in them at some stage.

As a practical example, here's how I would cut your layout:

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

content.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 -->

footer.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>

这篇关于使用php的好习惯包括标题，导航和其他元素？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
PHP最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆