Многостраничность

💡 Объяснение

Из страницы — в сайт

До сих пор мы делали одну страницу. Настоящий сайт состоит из нескольких страниц, связанных навигацией — общим меню. Технически это просто несколько HTML-файлов в одной папке, которые ссылаются друг на друга.

Структура папки сайта

my-site/
├── index.html      ← главная страница
├── about.html      ← «Обо мне»
├── gallery.html    ← «Галерея»
├── css/
│   └── style.css   ← один файл стилей для всех страниц
└── images/
    ├── logo.png
    └── cat.jpg

• index.html — главная. Её открывают первой.
• Остальные страницы — рядом, в корне папки.
• Стили и картинки — в отдельных папках, чтобы был порядок.

Относительные пути

Путь в href или src отсчитывается от файла, в котором он написан:

• about.html — файл в той же папке;
• css/style.css — зайти в папку css и взять файл;
• ../index.html — выйти на одну папку вверх (две точки = «папка выше»);
• images/cat.jpg — картинка из папки images.

Важно: путь к картинке внутри CSS-файла (url(...)) считается от CSS-файла! Из css/style.css картинка будет url("../images/cat.jpg").

Общее меню на всех страницах

<header class="header">
  <a class="logo" href="index.html">⭐ Мой сайт</a>
  <nav class="menu">
    <a href="index.html">Главная</a>
    <a href="about.html">Обо мне</a>
    <a href="gallery.html">Галерея</a>
  </nav>
</header>

Шапка, меню и подвал одинаковые на всех страницах — посетитель не должен теряться. Меняется только содержимое main и title.

Логотип-ссылка на главную — традиция почти всех сайтов: люди привыкли нажимать на логотип, чтобы вернуться в начало.

Текущий пункт меню

Посетитель должен видеть, на какой странице находится. Для этого на каждой странице у «своего» пункта меню ставят класс:

<!-- в about.html -->
<a href="about.html" class="active">Обо мне</a>

.menu a.active {
  background: white;
  color: #0984e3;
}

Это единственное, что отличается в меню на разных страницах.

Один CSS на все страницы

В head каждой страницы подключаем один и тот же файл: <link rel="stylesheet" href="css/style.css">. Поменял цвет шапки в CSS — изменился на всём сайте. Это главное преимущество внешнего файла стилей.

Как быстро сделать новую страницу

1. Сделай и отладь одну страницу полностью (например, index.html).
2. В VS Code: правый клик по файлу → «Копировать» → «Вставить», переименуй копию в about.html.
3. Поменяй title, содержимое main и класс active в меню.
4. Если добавил новую страницу — добавь ссылку на неё в меню всех страниц.

Правила имён

Имена файлов — латиницей, маленькими буквами, без пробелов: my-pets.html. Имя должно подсказывать, что внутри: contacts.html лучше, чем page3.html.

Проверка навигации

Пройди по всем страницам через меню: с каждой страницы на каждую и обратно. Если на какой-то ссылке появилась ошибка «Файл не найден» — проверь имя файла и путь буква в букву.

Частые ошибки

• Стили подключены только на главной — остальные страницы «голые».
• Неправильный путь к CSS: style.css вместо css/style.css.
• Меню обновили только на одной странице.
• Одинаковый title на всех страницах.
• Пробелы или русские буквы в именах файлов.

Проверь себя

1. Что означает ../ в пути?
2. Что меняется в меню от страницы к странице?
3. Почему все страницы подключают один CSS-файл?