Руководство › Введение

Введение

Это техническое руководство описывает, как был собран сайт secserpr.ru — от структуры папок до последней строки скрипта. Документ написан для того, чтобы через год, два или пять лет можно было открыть его и понять не только что сделано, но и почему сделано именно так.

Для кого это руководство

Для автора проекта — как развёрнутая шпаргалка. Для коллег и будущих разработчиков — как учебное пособие. Для всех, кто хочет увидеть, как собирается сайт «с нуля», без фреймворков и сборщиков.

Как читать

Руководство построено линейно: каждый следующий раздел опирается на предыдущий. Рекомендуется идти по порядку — от структуры проекта до последних штрихов. Но при необходимости можно прыгнуть в любой раздел через оглавление слева.

В каждом разделе — реальный код из проекта, построчные пояснения, а также схемы — как файлы связаны между собой. Комментарии отвечают на вопрос «зачем», а не «что»: не «здесь margin 15 пикселей», а «отступ нужен, чтобы блок не прилипал к заголовку».

Структура руководства

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

Оглавление учебника

ВВЕДЕНИЕ
  Как читать руководство

ЧАСТЬ I. ФУНДАМЕНТ
  01. Структура проекта
  02. .htaccess и SSI
  03. Partials — кирпичи сайта

ЧАСТЬ II. СТИЛИ
  04. style.css: базовые секции
  05. Шапка и общие элементы
  06. Сетки, футер, контакты
  07. Блог и адаптив
  08. scroll-top.css — кнопка «Наверх»

ЧАСТЬ III. СКРИПТЫ
  09. script.js — три модуля
  10. scroll-top.js — логика кнопки

ЧАСТЬ IV. СТРАНИЦЫ САЙТА
  11. index.html — эталон
  12. Клонирование страницы
  13. services.html
  14. about.html
  15. projects.html
  16. offer.html
  17. contacts.html
  18. privacy.html
  19. 404.html

ЧАСТЬ V. SEO И СЛУЖЕБНОЕ
  20. Служебные файлы

ПРИЛОЖЕНИЯ
  Чек-лист «Сайт готов»
  Что в планах

Что внутри каждой части

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

Краткое содержание частей

Часть I. Фундамент
  Как устроена папка сайта, как включается SSI,
  что такое partials и зачем они нужны.
  Сюда — если вопрос про структуру или серверную сборку.

Часть II. Стили
  Разбор двух CSS-файлов: style.css (10 секций)
  и scroll-top.css. Каждое свойство — с пояснением.
  Сюда — если вопрос про внешний вид, отступы, цвета.

Часть III. Скрипты
  Два JS-файла: script.js (три модуля) и scroll-top.js.
  Бургер, активная ссылка, кнопка «Наверх», PDF.
  Сюда — если вопрос про поведение интерфейса.

Часть IV. Страницы сайта
  Построчный разбор всех восьми страниц.
  От эталона index.html — до страницы ошибки 404.
  Сюда — если вопрос про конкретную страницу.

Часть V. SEO и служебное
  robots.txt, sitemap.xml, og-image, favicon,
  Яндекс.Метрика, файлы верификации.
  Сюда — если вопрос про поиск или аналитику.

Приложения
  Чек-лист «Сайт готов» и список «Что в планах».
  Сюда — если нужно проверить, всё ли на месте.

Принципы проекта

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

Пять принципов

1. Чистый HTML + CSS + JS
   Никаких фреймворков, сборщиков, препроцессоров.
   Код работает годами и не устаревает.

2. Паспорт в каждом файле
   Сверху — блок с именем, автором, назначением,
   зависимостями. Через год понятно, что это.

3. Комментарий отвечает на «зачем»
   Не «здесь margin 15px», а «отступ, чтобы блок
   не прилипал к заголовку». Смысл важнее факта.

4. Абсолютные пути в partials
   /style.css, /partials/nav.html — с ведущей косой.
   Работает из любой точки сайта.

5. Единый визуальный код
   Зелёный #33ff33 — логотип, активная ссылка,
   кнопка «Наверх». Синий #2b6f9c — акценты.
   Цвет — не украшение, а сигнал.

Правило безопасности при чтении

Схемы в руководстве никогда не содержат настоящих SSI-директив или HTML-тегов. Если нужно показать механизм — пишем словами: «include virtual на файл», «тег header в самой странице». Это сделано специально: сервер Timeweb выполняет SSI-команды даже внутри комментариев. Реальная директива в схеме сломала бы страницу руководства.

Что в основе проекта

Сайт secserpr.ru — персональный сайт ИП Ефимова Андрея Михайловича. Эксперт по цифровой трансформации службы безопасности. Восемь страниц: главная, услуги, обо мне, кейсы, коммерческое предложение, контакты, политика 152-ФЗ, страница ошибки.

Технические характеристики

Стек:           HTML + CSS + JS, без фреймворков
Сборка:         SSI через .htaccess (Apache)
Хостинг:        Timeweb
Домен:          https://secserpr.ru
Страниц:        8 (7 в sitemap + 404.html)
Стилей:         2 файла (style.css, scroll-top.css)
Скриптов:       2 файла (script.js, scroll-top.js)
Partials:       4 (head-links, header, nav, footer)
Учебник:        /manual/, 20 разделов + приложения

Начните отсюда

Первый раздел — Структура проекта. Он объясняет, что где лежит и как файлы ссылаются друг на друга. Без этого понимания остальные разделы будут выглядеть разрозненно.

Если хотите сразу увидеть результат — откройте главную сайта и вернитесь к разбору index.html в разделе 11. Так будет проще связать код и то, что видно в браузере.