Руководство › Часть I. Фундамент › 01. Структура

01. Структура проекта

Прежде чем писать первую строку кода, нужно понять, где что лежит. Это фундамент, на котором стоит всё остальное. Если структура понятна — переход к любой другой теме руководства становится простым.

Что должно получиться

В финале у нас в корне сайта лежит восемь HTML-страниц, служебные файлы SEO, стили, скрипты и папка partials с общими блоками.

Структура папок

КОРЕНЬ САЙТА (public_html)
|
+-- index.html              Главная
+-- services.html           Услуги
+-- about.html              Обо мне
+-- projects.html           Кейсы
+-- offer.html              Коммерческое предложение
+-- contacts.html           Контакты
+-- privacy.html            Политика 152-ФЗ
+-- 404.html                Страница ошибки
|
+-- .htaccess               Настройка SSI и 404
+-- robots.txt              Инструкции для роботов
+-- sitemap.xml             Карта сайта
+-- og-image.png            Превью для соцсетей (1200x630)
|
+-- style.css               Все стили сайта
+-- scroll-top.css          Стили кнопки «Наверх»
+-- script.js               Основные скрипты
+-- scroll-top.js           Логика кнопки «Наверх»
|
+-- partials/               Общие блоки (SSI)
     +-- head-links.html    Фавикон + og + стили
     +-- header.html        Логотип «Е» + бургер
     +-- nav.html           Меню (6 пунктов)
     +-- footer.html        Реквизиты + копирайт + Метрика

Зачем нужно такое разделение

Каждая папка и каждый файл — на своём месте по одной причине: чтобы правки делались в одном месте, а результат отражался везде.

Например, если реквизиты ИП изменятся — они правятся только в partials/footer.html. И тут же меняются на всех восьми страницах. Без SSI пришлось бы править футер восемь раз и надеяться, что не забудешь про каждую.

Схема SSI: как собирается страница

SSI (Server Side Includes) — серверная технология. Когда браузер запрашивает страницу, сервер до отправки подставляет в её код содержимое указанных файлов. Происходит это на стороне сервера, браузер видит уже готовый HTML.

Выглядит это так:

Как работает SSI

Сервер получает запрос:  GET /services.html
        |
        v
Сервер читает services.html и находит 4 SSI-директивы:
   - head-links.html
   - header.html
   - nav.html
   - footer.html
        |
        v
Сервер подставляет содержимое этих 4 файлов
в указанные места внутри services.html
        |
        v
Браузер получает ОДИН готовый HTML-документ:
   head:  фавикон, og, стили
   body:
     header:  логотип, бургер, меню
     ...содержимое страницы «Услуги»...
     footer:  реквизиты, копирайт

Пример: одна правка — восемь страниц

Меняем телефон в partials/footer.html. Сохраняем. Обновляем любую страницу — на всех восьми страницах сайта телефон уже новый. Никаких копий, никакой синхронизации вручную.

Связи между файлами

Не все файлы знают друг о друге. Вот кто на кого ссылается:

Схема связей

HTML-страницы (index, services, ..., 404)
     |
     +---> partials/head-links.html ---> style.css
     |                                    scroll-top.css
     |                                    (favicon, og:image)
     |
     +---> partials/header.html
     |
     +---> partials/nav.html
     |
     +---> partials/footer.html
     |
     +---> script.js        (бургер, активная ссылка, PDF)
     |
     +---> scroll-top.js    (кнопка «Наверх»)

Важно: пути абсолютные

В partials/* все ссылки начинаются с / — например, /style.css, а не style.css. Это обязательное правило SSI: если файл включён в страницу из другой папки, относительные пути сломаются. Абсолютные — нет.

Порядок работы

В следующих разделах мы идём строго по этой структуре:

Раздел 02 — .htaccess: как включается SSI и почему без него ничего не заработает.
Раздел 03 — partials/: разбираем все четыре «кирпича».
Разделы 04–08 — стили: style.css (десять секций) и scroll-top.css.
Разделы 09–10 — скрипты: бургер, активная ссылка, кнопка «Наверх», PDF.
Разделы 11–19 — построчный разбор каждой HTML-страницы: от эталона index.html до 404.html.
Раздел 20 — SEO и служебные файлы.
Приложения — чек-лист «Сайт готов» и что отложено.