🚀

Модуль 3. Проектная работа

Занятие 24
Многостраничность

Сегодня мы превратим одну страницу в настоящий сайт из трёх страниц с общим меню.

👀

Сегодня сделаем вот такое

📚

Сайт = несколько страниц

📄 Главная ↔ 📄 Обо мне ↔ 📄 Галерея

Страницы связаны общим меню.

Сайт — это папка с HTML-файлами, которые ссылаются друг на друга.

📁

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

📁 my-site
  ├ 📄 index.html — главная
  ├ 📄 about.html
  ├ 📄 gallery.html
  ├ 📁 css → style.css
  └ 📁 images → картинки

🧭

Пути между файлами

  • about.html — рядом
  • css/style.css — в папке css
  • ../index.html — на папку выше

Путь считается от файла, где он написан.

🧢

Одинаковая шапка везде

  • Шапка, меню, подвал — одинаковые
  • Логотип ведёт на главную
  • Меняются только main и title
<header class="header">
  <a class="logo" href="index.html">⭐ Мой сайт</a>
  <nav class="menu">
    <a href="index.html">Главная</a>
    <a href="about.html" class="active">Обо мне</a>
    <a href="gallery.html">Галерея</a>
  </nav>
</header>
body { margin: 0; font-family: sans-serif; }
.header { display: flex; justify-content: space-between; align-items: center; padding: 14px 20px; background: #0984e3; }
.logo { color: white; font-weight: bold; text-decoration: none; }
.menu { display: flex; gap: 6px; }
.menu a { color: white; text-decoration: none; padding: 6px 12px; border-radius: 6px; }
.menu a.active { background: white; color: #0984e3; }
📍

Где я? Класс active

На каждой странице — свой активный пункт:

  • index.html → class="active" у «Главная»
  • about.html → у «Обо мне»
  • gallery.html → у «Галерея»

Как «Вы здесь» на карте торгового центра.

⚡

Новая страница за минуту

  1. Отладь одну страницу полностью
  2. Скопируй файл, переименуй
  3. Поменяй title, main, active
  4. Добавь ссылку в меню всех страниц
  5. Пройди по всем ссылкам туда и обратно
🐞

Почему about.html «голая»?

Главная страница красивая, а «Обо мне» — без стилей. Файл about.html лежит рядом с index.html. Найди ошибку.

<!-- index.html -->
<link rel="stylesheet" href="css/style.css">

<!-- about.html -->
<link rel="stylesheet" href="style.css">
<title>Главная</title>
🃏

Запомни!

  • href="about.html"Ссылка на страницу сайта
  • href="../index.html"На уровень папки выше
  • href="css/style.css"Файл в папке css
  • class="active"Текущая страница в меню
  • index.htmlГлавная открывается первой
⌨️

Практика: Создаём 3 связанные страницы

  1. В VS Code создай index.html, about.html и gallery.html.
  2. Сделай одинаковую шапку с меню на всех трёх страницах.
  3. Подключи один общий файл css/style.css.
  4. На каждой странице выдели текущий пункт меню классом active.
  5. Проверь, что по всем ссылкам можно перейти туда и обратно.

🚀 Со звёздочкой: Добавь четвёртую страницу «Контакты» с формой обратной связи и страницу 404 с забавной картинкой.

🔒 Без входа в аккаунт работу из практики нельзя сохранить на сайте, а занятие — отметить пройденным.

🪞

Подведём итоги

  • Что нового я сегодня узнал(а)?
  • Что получилось лучше всего?
  • Где было трудно и что поможет в следующий раз?

✨ По желанию: Составь список страниц своего итогового сайта и что будет на каждой.