views:

212

answers:

4

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"&gt;
<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/"&gt;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?

A: 

The more includes you have the more processing PHP is doing to load the page.

I tend to just include a header.php and footer.php if there's nothing that needs to change in the header and footer of each page, and possibly simple things like showing a stylesheet in the header for a certain page you could check if a constant is defined rather than having multiple versions of your header.php file.

fire
+5  A: 

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"&gt;
<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/"&gt;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>
Tatu Ulmanen
Very good post, and to add to it: using this method you can use <div id="something"> wrapped around the content section, and show or hide different divs with ajax to take it a step further. +1 for a good answer
Jeremy Morgan
+1  A: 

Narrow down what needs to change from page to page and what will stay the same. You can even throw logic in to swap things out. For example, here is a standard page:

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

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

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

But lets say you want to have a menu on some pages, but not others:

<?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"); ?>

Also, another good practice is to keep everything in one page, so you don't have to build multiple pages with includes, and use a form, like this:

<?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");
?>

What this does is use forms to control everything, and you can do all your CRUD functions from a single php file. I've found this method to save a lot of time in the long run, and makes the program more readable and easy to follow. I hope this helps.

Jeremy Morgan
Also if you want to get more advanced you could use something like Smarty if you require some extra logic or caching.
Jeremy Morgan
Thanks, it really helped.
janoChen
A: 

What should I do with the <title> tag?

There might be better ways to do this but the following method works nicely for this issue:

main page: (where the header.php is included)

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

inside of header.php:

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