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

icoder
12 ноября 2016

Подготовка файлов и HTTPS

Создайте новый файл .php (например, index.php). HTTPS — более защищённый протокол, чем HTTP, и Google ранжирует сайты с HTTPS выше в поисковой выдаче. Для его использования потребуется покупка домена и сертификата HTTPS. Следующий код перенаправляет пользователей с HTTP на HTTPS:

<?php
    if (!isset($_SERVER['HTTPS']) || $_SERVER['HTTPS'] != "on") {
        $redirect = "https://".$_SERVER["HTTP_HOST"].$_SERVER["REQUEST_URI"];
        header("Location: $redirect");
        exit;
    }
?>

Этот код проверяет наличие HTTPS. Если его нет, создаётся переменная redirect с URL-адресом сайта, использующим HTTPS, и пользователь перенаправляется на него с кодом 301 (постоянное перенаправление).

HTML-разметка

Используем HTML5. Укажите браузеру об использовании HTML5:

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="utf-8">
  <title>ITProger - Сайт для разработчиков</title>
</head>
<body>
  Тест
</body>
</html>

meta charset=»utf-8″ необходимо указывать перед <title>, чтобы избежать проблем с кодировкой.

Файл .htaccess

.htaccess — файл для настройки сервера. Он позволяет устанавливать кодировку, перенаправлять пользователей на страницы ошибок и т.д. Файл создаётся как обычный файл, но с точкой в начале имени (.htaccess). Для его просмотра может потребоваться настройка отображения скрытых файлов в вашей операционной системе. Пример содержимого:

<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteCond %{HTTPS} off
    RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]
    RewriteCond %{HTTP_HOST} !^www.
    RewriteRule ^(.*)$ https://www.itproger.com/$1 [L,R=301]
    RewriteCond %{HTTP_HOST} ^www.itproger.com [NC]
    RewriteCond %{REQUEST_URI} !^/index.php$
    RewriteRule ^(.*)$ /index.php?url=$1 [L]
</IfModule>

AddDefaultCharset utf-8
php_value upload_max_filesize 128M
php_value post_max_size 128M
php_value memory_limit 256M

Этот код проверяет наличие www в адресе и перенаправляет на версию с www, а также обеспечивает перенаправление на index.php, если это не главная страница. На локальном сервере этот файл может не потребоваться.

Подключение стилей и мета-теги

Для написания кода можно использовать расширение Emmet. Подключаем стили через <link>:

<link rel="stylesheet" href="css/main.css">

Добавим мета-теги:

<meta name="description" content="Информационно-развлекательный портал для программистов: обучающие курсы, новости в сфере IT и многое другое.">
<meta name="keywords" content="программирование, курсы, IT, новости, обучение">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon">

Создайте папки css и img, добавьте в них файлы main.css и favicon.ico.

Шапка (header)

Создадим шапку сайта с помощью div элементов:

<header>
  <div id="logo">
    <a href="https://site.com" title="На главную">
      <img src="img/logo.png" alt="ITProger">
      <span>ITProger</span>
    </a>
  </div>
  <div id="about">
    <a href="#">Узнать детальнее о рекламе</a>
    <a href="#">Реклама</a>
  </div>
  <div id="rec">
    <a href="#" class="button">Регистрация</a>
    <a href="#" class="button">Авторизация</a>
  </div>
</header>

Стилевое оформление (CSS)

В main.css добавим стили:

/* Общие стили */
* {
    margin: 0;
    padding: 0;
}

body {
    width: 100%;
    height: 100%;
}

a {
    color: #007bff;
    text-decoration: none;
    transition: color 0.6s ease, text-shadow 0.6s ease;
}

a:hover {
    color: #0056b3;
    transition: color 0.6s ease, text-shadow 0.6s ease;
}

img {
    max-width: 100%;
    height: auto;
    width: auto9; /* Для IE8 */
    transition: margin 0.6s ease;
}

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
}

/* Стили для header */
header {
    position: relative;
    background-color: #343a40;
    width: 99.4%;
    padding: 0.3%;
    color: white;
    border-bottom: 5px solid #007bff;
}

#logo {
    float: left;
    width: 30%;
}

#logo img {
    width: 50px;
    height: 50px;
    float: left;
}

#logo span {
    color: white;
    font-size: 2.5em;
    margin-left: 10px;
    font-family: 'Roboto Slab', serif;
}

#about {
    float: left;
    width: 37%;
    text-align: center;
    font-family: 'Roboto Slab', serif;
    font-size: 1.4em;
    padding-top: 10px;
}

#about a {
    color: white;
}

#about a:hover {
    color: #0056b3;
    border-bottom: 1px solid #0056b3;
}

#about a:last-child {
    margin-left: 10%;
}

#rec {
    float: right;
    width: 30%;
}

#rec a.button {
    float: right;
    margin-right: 3%;
    margin-top: 5px;
    border-radius: 5px;
    padding: 5px 10px;
    font-size: 1.2em;
    background-color: rgb(255, 0, 0);
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    border-bottom: 4px solid #007bff;
}

#rec a.button:hover {
    border-bottom: 2px solid #007bff;
    margin-top: 7px;
}
#rec a.button:active {
    border-bottom: 0px solid #007bff;
    margin-top: 9px;
}

/* Адаптивность */
@media (min-width: 950px) {
    header #logo {
        width: 50%;
    }
    header #rec {
        width: 50%;
    }
}

@media (max-width: 949px) and (min-width: 525px) {
    header #logo {
        width: 50%;
    }
    header #about {
        visibility: hidden;
        display: none;
    }
    header #rec {
        width: 50%;
    }
}

@media (max-width: 524px) {
    header #logo {
        width: 100%;
        float: none;
    }
    header #logo img {
        margin-left: 5%;
    }
    header #about {
        visibility: hidden;
        display: none;
    }
    header #rec {
        display: none;
    }
}

Замените img/logo.png на путь к вашему логотипу.

В этой части урока мы создали шапку сайта с помощью HTML и CSS, добавили адаптивность для разных размеров экранов и настроили файл .htaccess. Создание футера будет рассмотрено во второй части.

Нравится: 1

Что будем искать? Например,программа