Дизайн сайта
Продолжаем создание, своими руками, сайта в связке PHP+ MySQL. В прошлый раз была создана база данных и соединение с ней.
В это раз займёмся дизайном страницы сайта. Он не будет супер-пупер, цель другая, создать адаптивный макет (шаблон) страницы, которая будет подставляться, с различным контентом, на страницы сайта.
Создадим папку assets в корне сайта. В ней будут храниться различные ресурсы сайта. И поместим туда логотип сайта – файл с изображением и названием logo.png.
Создадим папку tpl в ней будем хранить различные шаблоны (макеты) страницы и различных элементов.
В этой папке создадим файл page.tpl это главный макет страницы.
В нём разместим вот такой код:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8"/>
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
<?=$content["canonical"] ?>
<title><?=$content["title"] ?></title>
<meta name="description" content="<?=$content["description"] ?>">
<meta name="viewport" content="width=device-width"/>
<link rel="stylesheet" href="css/page.css" />
</head>
<body>
<div id="container">
<header>
<a rel="nofollow" href="/"><img src="assets/logo.png" alt="<?=$content["site"] ?>"></a>
<nav class="line">
<?=$content["horizontal_menu"] ?>
</nav>
</header>
<main>
<?=$content["text"] ?>
</main>
<aside>...</aside>
<footer><?=$content["footer"] ?></footer>
</div>
</body>
</html>
Не буду заострять внимание на элементах страницы, они есть здесь и здесь.
Теги <?= … ?> представляют код написанный на PHP который показывает содержимое массива. Так как у нас динамический сайт, то массив будет заполняться на сервере в php-файле и выводиться, в нужных местах, при сборке страницы.
canonical - покажет канонический адрес страницы.
title, description, footer - соответствуют одноимённым HTML-тегам страницы.
site - url сайта.
horizontal_menu - «хлебные крошки» будут отображаться ссылки на главную страницу и раздел страницы.
text - содержимое страницы (контент).
<aside> заполним позже.
Создадим папку css, а в ней файл page.css с следующим содержимым:
body{
background: #bbbbbb; /* Цвет фона */
}
/* для блока - шапка */
header{
text-align: left; /* Выравнивание внутреннего контента по левому краю */
width: 950px; /* Ширина блока и общая ширина*/
height: 50px; /* Высота блока */
margin-right: auto; /* Авто-отступ справа */
margin-left: auto; /* Авто-отступ слева */
padding: 10px; /* Внутренние поля вокруг содержимого */
}
/* для контейнера */
#container {
width: 970px;/* Ширина слоя или ширина макета+20px */
margin-right: auto; /* Авто-отступ справа */
margin-left: auto; /* Авто-отступ слева */
}
/* для блока - меню */
aside {
width: 300px; /* Ширина слоя */
float: left; /* Обтекание с соседним слоем */
padding: 10px; /* Внутренние поля вокруг содержимого */
}
/* для блока - контент */
main {
width: 630px;/* Ширина слоя */
float: left; /* Обтекание с соседним слоем */
padding: 10px; /* Внутренние поля вокруг содержимого */
}
/* для блока - подвал */
footer{
width:950px; /* Ширина слоя */
clear:left; /* возвращаем блочность и располагаем слой слева */
padding: 10px; /* Внутренние поля вокруг содержимого */
margin-right: auto; /* Авто-отступ справа */
margin-left: auto; /* Авто-отступ слева */
}
@media screen and (max-width: 768px) {
aside, main, footer, header, #container {
margin-left:0px;
margin-top:0px;
width:98%;
margin-right: auto; /* Авто-отступ справа */
margin-left: auto; /* Авто-отступ слева */
}
}
.line{
margin: -30px auto 10px;
padding: 0;
height: 50px;
border: none;
border-bottom: 1px solid #1f1209;
box-shadow: 0 20px 20px -20px #333;
width: 95%;
}
В принципе шаблон страницы готов, но увидеть его пока не получится. Даже если файл page.tpl открыть браузером, макет страницы будет отображаться не корректно из за не правильного пути к файлу page.css.
Вывод страницы в браузер начнём дальше, при создании главной страницы.