Я не знаю, как эти элементы обычно разделяются профессиональными веб-дизайнерами:
как это:
<?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>
Какая практика?
Не знаю о лучшей практике, но мой подход всегда был нижним колонтитулом header-content-footer. Все, что происходит перед фактическим содержимым (включая <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>
Уточните, что нужно изменить со страницы на страницу, и что останется прежним. Вы можете даже бросить логику, чтобы поменять местами. Например, вот стандартная страница:
<?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"); ?> <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"); ?> <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"); ?>в<?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"); ?>в<?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. Я нашел этот метод, чтобы сэкономить много времени в долгосрочной перспективе, и делает программу более читаемой и простой в использовании. Надеюсь, это поможет.
Чем больше у вас есть, тем больше обработка PHP делает для загрузки страницы.
Я просто включаю заголовок header.php и footer.php, если нет ничего, что нужно изменить в верхнем и нижнем колонтитуле каждой страницы, и, возможно, простые вещи, такие как отображение таблицы стилей в заголовке для определенной страницы, вы могли бы проверить, определяется, а не имеет несколько версий вашего файла header.php.
Что мне делать с
<title>?
Там могут быть более эффективные способы сделать это, но следующий метод работает хорошо для этой проблемы:
главная страница: (где включен заголовок.php)
<? $title = "Title of this Particular Page"; include("header.php"); ?>в<? $title = "Title of this Particular Page"; include("header.php"); ?>
внутри header.php:
<? global $title; ?> <html> <head> <title><?=$title?></title> </head>
Я далек от экспертного веб-разработчика, но мне не нравится вся концепция «расклеивания тегов», в которой я имею в виду, что вы открываете тег, например, в одном файле, а затем закрываете его в другом. Это, по-видимому, широко распространенная практика, и, возможно, проблем с ней меньше, чем я боюсь, но я не думаю, что это добавит сложности, чтобы удовлетворить мою потребность в инкапсуляции, из-за отсутствия лучшего слова.
В приведенном ниже решении было добавлено несколько дополнительных строк для каждого файла и несколько дополнительных файлов, но каждый файл имел бы тег close для каждого открытого. Таким образом, когда я смешиваю и сопоставляю свои нижние колонтитулы, заголовки и т. Д. Мне не нужно беспокоиться, если в этом файле есть лишний 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>