Создание блочного сайта при помощи require
Пятница, 27 августа 2010 г.Рубрика: PHP программирование -> Include и Require
Метки: php | создание блочного сайта при помощи require
Просмотров: 1958
Подписаться на комментарии по RSS
При создании сайтов возникает проблема в тот момент, когда нужно срочно переделать дизайн, а страниц тысячи, и переделать его не просто в css файлах, а заменить состав меню, низ и шапку сайта.
Но предотвратить такой казус можно только при начальном создании.
И на помощь к нам приходит php, как ни странно php тоже может облегчать редактирование дизайна сайта, и в этот раз оно нам поможет с подключаемыми модулями командой require.
Сперва создадим простой html файл index.php, в котором будет меню, шапка, контент и копирайт:
<html>
<head>
<title>Простой сайт</title>
<style type="text/css">
* { /* Убираем все стандартные отступы */
margin: 0px;
padding: 0px;
}
/* Стиль шапки сайта */
.top {
margin-top: 20px; /* Отступ от верха сайта */
font-weight: bold; /* Толстый шрифт */
text-align: center; /* Позиция по центру */
margin-bottom: 30px; /* Отступ с низу */
}
/* Стиль меню сайта */
.menu {
float: left; /* Обтикание по левой стороне */
padding: 10px; /* Внутренние отступы */
border-right: 1px dotted #000000; /* Рамка с правой стороны */
margin-right: 50px; /* Отступ от контента страницы */
}
/* Контент страницы */
.content {
padding: 10px; /* Внутренний отступ */
border-top: 1px dotted #000000; /* Верхняя рамка */
}
/* Низ сайта */
.footer {
text-align: center; /* Текст по центру */
padding-top: 10px; /* Отступ от верхней рамки */
border-top: 1px dotted #000000; /* Верхняя рамка */
}
/* Стиль ссылок */
a{
color: #0099ff; /* Цвет ссылки */
}
/* Стиль активной ссылки */
a:hover {
text-decoration: none; /* Убираем подчёркивание */
}
</style>
</head>
<body>
<!-- Шапка сайта -->
<div class="top"><tt><h2>Шапка сайта</h2></tt></div>
<!-- Левое меню -->
<div class="menu">Меню<br />
<a href="index.php">Главная</a>
</div>
<!-- Контент сайта -->
<div class="content">
Здесь будет располагаться весь контент
</div><br clear="left"/>
<!-- Низ сайта -->
<div class="footer"><tt>Copyright by ??? ©</tt></div>
</body>
</html>
У нас получилась простая страница с шапкой, меню, контентом и копирайтом. Теперь вынесем их в отдельные файлы, и поставим им расширения php:
top.php - шапка сайта;
menu.php - меню сайта;
content.php - контент сайта;
footer.php - низ сайта;
Перейдём к созданию:
top.php
<div class="top"><tt><h2>Шапка сайта</h2></tt></div>
menu.php
<div class="menu">Меню<br /> <a href="index.php">Главная</a> </div>
content.php
<div class="content"> Здесь будет располагаться весь контент </div>footer.php
<div class="footer"><tt>Copyright by ??? ©</tt></div>
И теперь модернизированный файл index.html
<html>
<head>
<title>Простой сайт</title>
<style type="text/css">
* { /* Убираем все стандартные отступы */
margin: 0px;
padding: 0px;
}
/* Стиль шапки сайта */
.top {
margin-top: 20px; /* Отступ от верха сайта */
font-weight: bold; /* Толстый шрифт */
text-align: center; /* Позиция по центру */
margin-bottom: 30px; /* Отступ с низу */
}
/* Стиль меню сайта */
.menu {
float: left; /* Обтикание по левой стороне */
padding: 10px; /* Внутренние отступы */
border-right: 1px dotted #000000; /* Рамка с правой стороны */
margin-right: 50px; /* Отступ от контента страницы */
}
/* Контент страницы */
.content {
padding: 10px; /* Внутренний отступ */
border-top: 1px dotted #000000; /* Верхняя рамка */
}
/* Низ сайта */
.footer {
text-align: center; /* Текст по центру */
padding-top: 10px; /* Отступ от верхней рамки */
border-top: 1px dotted #000000; /* Верхняя рамка */
}
/* Стиль ссылок */
a{
color: #0099ff; /* Цвет ссылки */
}
/* Стиль активной ссылки */
a:hover {
text-decoration: none; /* Убираем подчёркивание */
}
</style>
</head>
<body>
<!-- Шапка сайта -->
<? require ("top.php"); ?>
<!-- Левое меню -->
<? require ("menu.php"); ?>
<!-- Контент сайта -->
<? require ("content.php"); ?>
<!-- Низ сайта -->
<? require ("footer.php"); ?>
</body>
</html>
Теперь наш сайт можно легко редактировать. И для лучшего вида вынесем стили в файл style.css:
style.css
* { /* Убираем все стандартные отступы */
margin: 0px;
padding: 0px;
}
/* Стиль шапки сайта */
.top {
margin-top: 20px; /* Отступ от верха сайта */
font-weight: bold; /* Толстый шрифт */
text-align: center; /* Позиция по центру */
margin-bottom: 30px; /* Отступ с низу */
}
/* Стиль меню сайта */
.menu {
float: left; /* Обтикание по левой стороне */
padding: 10px; /* Внутренние отступы */
border-right: 1px dotted #000000; /* Рамка с правой стороны */
margin-right: 50px; /* Отступ от контента страницы */
}
/* Контент страницы */
.content {
padding: 10px; /* Внутренний отступ */
border-top: 1px dotted #000000; /* Верхняя рамка */
}
/* Низ сайта */
.footer {
text-align: center; /* Текст по центру */
padding-top: 10px; /* Отступ от верхней рамки */
border-top: 1px dotted #000000; /* Верхняя рамка */
}
/* Стиль ссылок */
a{
color: #0099ff; /* Цвет ссылки */
}
/* Стиль активной ссылки */
a:hover {
text-decoration: none; /* Убираем подчёркивание */
}
Вот новый файл index.php
<html>
<head>
<title>Простой сайт</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<!-- Шапка сайта -->
<? require ("top.php"); ?>
<!-- Левое меню -->
<? require ("menu.php"); ?>
<!-- Контент сайта -->
<? require ("content.php"); ?>
<!-- Низ сайта -->
<? require ("footer.php"); ?>
</body>
</html>
Поделиться...
Оставьте свой комментарий!
Спасибо большое за статью.
делал блог с помощью require получилось не очень , но пользоваться очень удобно. Спасибо за инфо
А почему в последнем файле index.php не прописанны стили?)
Илья, спасибо что заметил!