Страница "О нас", "Статьи" и адаптивность

В этом уроке мы создадим остальные страницы нашего сайта. Также мы адаптируем его под все устройства.

Страница 'О нас', 'Статьи'' и адаптивность. Создание сайта

PHP блоки

На сайте у нас может быть много страниц, и вдруг ты захотел изменить меню на всех страницах, но каждой странице все изменять очень долго. Что делать?

Нам на помощь приходит PHP. Сейчас мы разберем как создать PHP блоки.

1) Создаем папку с названием "blocks".

2) Создаем файл "header.php" и "footer.php"

3) Копируем код с <!DOCTYPE html> до </header> с index страницы. У футер с тега <footer> до </footer> и удаляем

4) Вставляем код в "header.php" и "footer.php".

Теперь подключаем эти файлы. Раншье, где у нас было header, пишем <?php include "blocks/header.php"; ?> , а где футер, пишем<?php include "blocks/footer.php"; ?> .

Чтобы можно было изменять название страницы, мы будем использовать одну функцию PHP. Где у нас находится <title> <title>, удаляем его и изменяем на этот код <?php function title($title) { echo "><title>$title"; } ?> . Теперь если хотите изменить название страницы, пишите <?php title("Главная") ?>

Итоговый код header.php


 <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/style.css">
<link href="https://fonts.googleapis.com/css?family=PT+Sans" rel="stylesheet">
<link href="img/icon.ico" rel="shortcut icon" type="image/x-icon">   <?php
function title($title) {
	echo "<title>$title</title>";
} ?>
</head>

<body>
<header>
	<div id="logo">
		<h1>Web-site</h1>
	</div>
	<div id="menu">
		<ul>
			<li><a href="http://web-site/">Главная</a></li>
			<li><a href="articles.php">Статьи</a></li>
			<li><a href="about-us.php">О нас</a></li>
		</ul>
	</div>
</header>
 

Страница "О нас"

В прошлом уроке мы закончили делать нашу главную страницу. Теперь нам надо занятся страницей "О нас". На этой странице вы можете рассказать о вашем продукте ил компании.

Создаем новый файл и называем его "about-us.php".


<?php include "blocks/header.php";
title("О нас"); ?> 
<div id="about-us-block">
<h1>О нас</h1>
<div id="txt-position">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
<?php include "blocks/footer.php" ?> 
</body>

</html>

Страница "Статьи"

Страница "articles.php" будет такая же, как и "index.php". На этой странице вы можете добавить больлше статей, но я не буду.

CSS код

CSS код страницы "about-us.php" будет очень маленький и простой.


#about-us-block {
	text-align: center;
	margin: 10% 0 0 0;
	font-family: 'PT Sans', sans-serif;
}
#txt-position {
	width: 50%;
        margin: auto;
        padding: 1% 0 0 0;
        font-family: 'PT Sans', sans-serif;
}

Адаптивность

Сейчас мы разберем, как адаптировать сайт под разнные устройства. Адаптация сайта нужна для большего трафика и продвижения сайта по поисковой системе. Адаптация делается через @media.


@media screen and (max-width: 853px) {
.article-menu {
	max-width: 35%;
}
.article-menu-block a {
    font-size: 0.9em;
}
 @media screen and (max-width: 641px) {
.main-article-block {
    padding: 0 30px 20px 0;
}
.article-menu-block a {
    font-size: 0.7em;
}
.article-name {
	font-size: 1.2em;
}
 @media screen and (max-width: 572px) {
 	section {
 		float: left;
 	}
 	aside {
 		width: 100%;
 	}
 	#aside-menu {
 		border-right: none;
 	}
 	.article-menu-block a {
    font-size: 1em;
}
#header {
    text-indent: 0;
    text-align: center;
    padding-top: 1%;
}
.footer-menu {
	font-size: 0.9em;
}
.footer_menu li {
    padding: 0 2px;
}

.copyright {
	font-size: 1.2em;
}
#logo {
    position: relative;
    top: 20%;
    left: 2%;
    font-size: 0.8em;
}
#menu ul li a {
    font-size: 0.9em;
}
#menu ul li {
    padding: 17px 5px;
}
 @media screen and (max-width: 399px) {
 	.article-container {
   display: block;
    padding: 10px 0 0 20px;
    position: relative;
    left: 5%;
}
.article-img {
	max-width: 90%;
}