不知道最佳实践,但我的方法一直是页眉-内容-页脚。实际内容之前的所有内容(包括<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>