Шапка и футер сайта

В этом уроке мы начинаем приступать к разработке сайта. Мы создадим и настроим .htaccess файл, создадим шапку сайта и футер.

Шапка и футер сайта.Создание сайта

Создание сайта

В этом уроке мы начнем разрабатывать наш собственный сайт! На прошлом уроке мы установили и настроили Open Server. Давайте зайдем в нашу папку «OpenServer».

OpenServer

Сдесь мы выбираем папку «domains».

Папка «domains» OpenServer

Теперь мы создадим папку с названием нашим сайтом.

Чтобы наш сайт работал, его надо закинуть в домены Open Server.

Для этого мы заходим в настройки Open Server, где находим отдел "домены". В ней мы выбираем ручное управление, пишем название нашего сайта и выбираем его в папке и сохраняем.

Настройки OpenServer

Теперь мы зайдем в нашу папку "web-site" и создадим там наш основной файл "index.php".

Файл inde.php

Открываем этот файл с помощью любого редактора(мой Sublime Text3). Для проверки напишем "Привет".

localhost

Теперь зайдем в браузер и напишем в поисковике "web-site/". Нам выведится "Привет". Значит у нас все работает.

_htaccess файл


AddDefaultCharset utf-8
RewriteEngine On
RewriteCond % !^web-site\.ru$ [NC]
RewriteRule ^(.*)$ http://web-site.ru/$1 [L,R=301]
 

Раздел <head>

Начинаем разработку сайта мы, с раздела <head>, куда мы поместим все шрифты и meta теги.


  <!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">   
<title>Главная</title>
</head>
 

Шапка сайта

Сейчас мы будем делать шапку сайта. В нее мы поместим название нашего сайта и меню.

<div id="logo"> отвечает за название сайта.
<div id="menu"> отвечает за меню на сайта.


<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>
 

Футер сайта

В футер сайта мы поместим оставшуюся информацию.

<div class="copyright"> отвечает за авторское право сайта.
<ul class="footer_menu"> отвечает за меню в футере.


<footer>
   <div class="copyright">
 &copy; <?php echo date('Y'); ?> Web-site
 </div>
  <ul class="footer_menu">
  <li><a href="http://web-site/">Главная</a></li>
  <li><a href="articles.php">Статьи</a></li>
  <li><a href="about-us.php">О нас</a></li>
  <li><a href="mailto:your-mail@gmail.com">Реклама</a></li>
   </ul>
</footer>
 

Css

Теперь приступаем к CSS коду.

display: flex; отвечает за выравнивания элемента в ряд .
justify-content: space-between; отвечает за расстояние между flex элементами.


padding: 0;
  margin: 0;
}
header {
  background-color: #1c1c1c;
  height: 60px;
  display: flex;
  justify-content: space-between;
}
#logo {
  position: relative;
    top: 10%;
    left: 1%;
  color: white;
  font-family: 'PT Sans', sans-serif;
}
#menu ul {
  display: flex;
  list-style-type: none;
}
#menu ul li {
  padding: 17px 15px;
}
#menu ul li a {
  color: white;
  text-decoration: none;
  font-family: 'PT Sans', sans-serif;
  font-size: 1.1em;
}
#menu ul li a:hover {
  text-decoration: underline;
}
footer {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    background-color: #1c1c1c;
    color: white;
}
.footer_menu li {
  display: inline;
  padding: 0 5px;
}
.footer_menu li a {
  color: white;
  text-decoration: none;
}
.footer_menu li a:hover {
  text-decoration: underline;
}
.footer_menu {
  float: right;
  margin: 0;
padding: 13px 15px;
font-family: 'PT Sans', sans-serif;
font-size: 1.1em;
}
.copyright {
  float: left;
  font-size: 1.5em;
padding: 10px 15px;
font-family: 'PT Sans', sans-serif;
}