Хорошая практика при использовании 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 в этих элементах? (голова, навигация и т. д.)?

Что делать с тегом <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-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>

Какова лучшая практика?


person alexchenco    schedule 10.02.2010    source источник


Ответы (5)


Не знаю о лучшей практике, но мой подход всегда был таким: заголовок-контент-нижний колонтитул. Все, что становится до фактического содержания (включая <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">

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>
person Tatu Ulmanen    schedule 10.02.2010
comment
Очень хороший пост, и добавлю к нему: используя этот метод, вы можете использовать ‹div id=something›, обернутый вокруг раздела контента, и показывать или скрывать различные div с помощью ajax, чтобы сделать еще один шаг вперед. +1 за хороший ответ - person Jeremy Morgan; 10.02.2010

Сузьте список того, что должно меняться от страницы к странице, а что останется неизменным. Вы даже можете добавить логику, чтобы поменять местами вещи. Например, вот стандартная страница:

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

<title>This is my page</title>
<body>
....
</body>

<?php include("footer.php"); ?>

Но допустим, вы хотите иметь меню на одних страницах, но не на других:

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

<title>This is my page</title>
<body>

<?php 

if ($pagetype == "frontpage"){

include("frontpagemenu.php");

}else{

include("backpagemenu.php");

}

</body>

<?php include("footer.php"); ?>

Кроме того, еще одна хорошая практика — хранить все на одной странице, поэтому вам не нужно создавать несколько страниц с включениями и использовать форму, подобную этой:

<?php

include("header.php");

switch($_REQUEST['mode']) {

case 'add':
// code to add
break;

case 'edit':
// code to add
break;

case 'update':
// code to update
break;
case 'delete'
// code to delete
break;

default:
// index page
?><form action="index.php" method="get">
// form stuff
<input type="hidden" name="mode" value="add">
</form><?php
break;

}

include("footer.php");
?>

Что это делает, так это использует формы для управления всем, и вы можете выполнять все свои функции CRUD из одного файла php. Я обнаружил, что этот метод экономит много времени в долгосрочной перспективе и делает программу более читабельной и легкой для понимания. Надеюсь, это поможет.

person Jeremy Morgan    schedule 10.02.2010
comment
Кроме того, если вы хотите стать более продвинутым, вы можете использовать что-то вроде Smarty, если вам требуется дополнительная логика или кэширование. - person Jeremy Morgan; 10.02.2010

Чем больше у вас включений, тем больше обработки PHP выполняет для загрузки страницы.

Я обычно просто включаю header.php и footer.php, если нет ничего, что нужно изменить в верхнем и нижнем колонтитуле каждой страницы, и, возможно, простые вещи, такие как отображение таблицы стилей в заголовке для определенной страницы, которую вы могли бы проверить, если константа определён, а не иметь несколько версий файла header.php.

person fire    schedule 10.02.2010

Что делать с тегом <title>?

Могут быть лучшие способы сделать это, но следующий метод хорошо работает для этой проблемы:

главная страница: (где включен header.php)

<?
$title = "Title of this Particular Page";
include("header.php");
?>

внутри header.php:

<? global $title; ?>
<html>
<head>
<title><?=$title?></title>
</head>
person Şafak Gezer    schedule 17.02.2010

Я далек от опытного веб-разработчика, но мне не нравится вся концепция «расщепления тегов», под которой я подразумеваю, что вы открываете тег, например, в одном файле, а затем закрываете его в другом. Кажется, это широко распространенная практика, и, возможно, с ней возникает меньше проблем, чем я опасаюсь, но я не думаю, что это добавит много сложности, чтобы удовлетворить мою потребность в инкапсуляции, из-за отсутствия лучшего слова.

Приведенное ниже решение добавит несколько дополнительных строк в каждый файл и пару дополнительных файлов, но каждый файл будет иметь закрывающий тег для каждого открытого файла. Таким образом, когда я смешиваю и сопоставляю свои нижние колонтитулы, заголовки и т. д., мне не нужно беспокоиться о том, что в этом файле есть лишний div или что-то еще, что нужно закрыть, и это может привести к неожиданному поведению в разных браузерах. Я здесь педантичен, или это не «чувствует» себя лучше? 8-]

Основной файл:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<?php include("header.php"); ?>
<body id="home">
<?php include("subheader.php"); ?>
<?php include("content.php"); ?>
<?php include("footer.php"); ?>
</body>
</html>

Заголовок.php:

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

подзаголовок.php

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

содержание.php

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

нижний колонтитул.php

<div id="footer">
 <div class="container">
  <div id="bottombar">
   <p>Copyright © 2009 New Project. All Rights Reserved. </p>
  </div>
 </div>
</div>
person Terry H    schedule 17.11.2016