Я далеко не опытный веб-разработчик, но мне не нравится сама концепция «расщепления тегов», когда я имею в виду, что вы открываете тег, например, в одном файле, а затем закрываете его в другом. Кажется, это общепринятая практика, и, возможно, с этим проблем меньше, чем я боюсь, но я не думаю, что это усложнит мою потребность в инкапсуляции из-за отсутствия лучшего слова.
Решение ниже добавит несколько дополнительных строк к каждому файлу и пару дополнительных файлов, но каждый файл будет иметь закрывающий тег для каждого открываемого файла. Таким образом, когда я смешиваю и сопоставляю свои нижние колонтитулы, верхние колонтитулы и т. Д., Мне не нужно беспокоиться, если в этом файле есть дополнительный 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>
Header.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>
subheader.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>
content.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 -->
footer.php
<div id="footer">
<div class="container">
<div id="bottombar">
<p>Copyright © 2009 New Project. All Rights Reserved. </p>
</div>
</div>
</div>