Практическая работа №2. Оформление многостраничного сайта с CSS

Номер работы: 2
Длительность: 2 пары / 4 академических часа
Формат: индивидуальная работа за компьютером
Технологии: HTML5 и CSS. Без JavaScript, CSS-фреймворков, конструкторов и готовых шаблонов.

В первой практической работе вы собрали содержание и структуру многостраничного сайта. Теперь не начинайте новый проект: возьмите свою папку с index.html, тематической второй страницей и contact.html и создайте для неё первый единый стиль.

Цель этой работы — не «сделать красиво любой ценой». Вы научитесь подключать внешний CSS-файл, давать повторяющимся частям сайта понятные классы, управлять отступами и собирать простую раскладку через Flexbox и Grid.

Граница работы: пока не создаём мобильную версию. Не используйте @media, анимации, transition и JavaScript. Сначала научитесь делать понятный интерфейс для обычного широкого окна браузера.

Цель работы

Оформить собственный семантический сайт из первой практической работы в едином стиле. После работы посетитель должен видеть, какие части сайта общие, где находится навигация, какие объекты относятся к каталогу и какое действие можно выполнить на странице.

Что вы должны уметь до начала

Повторите лекцию о CSS. Вы должны уметь:

подключить внешний файл стилей через <link rel="stylesheet">;
написать правило из селектора, свойства и значения;
отличать селектор элемента, класса, вложенного элемента и состояния :hover / :focus-visible;
объяснить, почему класс описывает роль элемента, а не его случайный цвет или отступ;
различать margin, padding и border;
применять display: flex для одного ряда или колонки, а Grid — для сетки повторяющихся объектов;
открыть DevTools и увидеть, какое CSS-правило действует на выбранный элемент.

Результат работы

В вашей папке проекта должны появиться как минимум следующие файлы:


practice-01-your-topic/
├── index.html
├── catalog.html
├── contact.html
├── styles.css
├── decisions.md
└── images/

Имя второй страницы может отличаться: например, films.html, routes.html или menu.html. Сохраняйте то имя, которое уже выбрали в первой работе.

В файле decisions.md кратко, в 5–8 строках, ответьте:

Для кого создан ваш сайт?
Какое главное действие или информацию должен быстро найти посетитель?
Какие три–пять цветов вы выбрали и для чего они используются?
Где у вас используется Flexbox, а где Grid?
Какой один CSS-класс вы считаете самым важным и почему?

Это не отчёт для «галочки». Он поможет вам принимать собственные решения, а на защите — объяснить их.

Общие требования

Создайте один внешний файл styles.css и подключите его ко всем трём HTML-страницам в head.
Структура и содержание сайта из первой практической сохраняются: не заменяйте свою тему чужим шаблоном и не оставляйте Lorem ipsum, «Карточка 1» или случайный текст.
Повторяющимся частям сайта дайте классы, которые называют их роль. Например: .site-header, .site-nav, .page-title, .card, .card__title, .button, .contact-form.
Не называйте классы по случайному внешнему виду или положению: .blue-text, .left-block, .margin-20 и подобные названия не подходят.
Не используйте строчные стили (style="...") и !important.
Не используйте таблицу, br или абсолютное позиционирование для построения основной раскладки.
Не подключайте Bootstrap, Tailwind, готовую тему, CSS-фреймворк или чужую готовую вёрстку.
Не используйте @media, animation, transition и JavaScript в этой работе.

Важно: один и тот же класс может быть у нескольких элементов. Например, все карточки каталога получают .card, а их заголовки — .card__title. Это позволяет менять общий вид компонента одним правилом.

Этап 1. Спроектируйте стиль и добавьте классы

Перед тем как писать CSS, откройте все три страницы и отметьте повторяющиеся части:

шапка сайта и навигация;
основной контейнер страницы;
заголовки;
карточки объектов на второй странице;
ссылки или кнопки действия;
форма и её поля;
подвал сайта.

Добавьте к подходящим элементам классы. Не нужно оборачивать каждый отдельный текст в div: сначала подумайте, есть ли у группы собственная роль.

Пример фрагмента карточки для сайта с книгами:


<article class="card">
  <img class="card__image" src="images/book-01.jpg" alt="Обложка книги «Маяк на севере»" width="360" height="540">
  <h2 class="card__title">Маяк на севере</h2>
  <p class="card__meta">Приключенческий роман, обсуждение 18 октября.</p>
  <a class="button" href="contact.html">Записаться на встречу</a>
</article>

Это пример именования классов, а не готовая карточка для копирования. Содержание, изображение, подписи и действие должны относиться к вашей теме.

Минимальный набор классов

В готовой работе используйте не менее:

одного класса общего контейнера страницы;
классов для header, навигации и footer;
класса для повторяющейся карточки и хотя бы двух её частей;
класса для ссылки или кнопки действия;
класса для формы или группы полей.

Этап 2. Подключите и настройте общий CSS

Внутри head каждой HTML-страницы подключите созданный файл:


<link rel="stylesheet" href="styles.css">

Сначала сделайте базовые правила для всего сайта:

фон страницы и читаемый цвет текста;
семейство шрифта и межстрочный интервал;
общий контейнер с осмысленной максимальной шириной;
отступы между крупными частями страницы;
единый вид заголовков и обычных ссылок;
предсказуемую блочную модель через box-sizing: border-box.

Начальный пример показывает только направление, а не заменяет ваш CSS:


* {
  box-sizing: border-box;
}
 
body {
  margin: 0;
  background: #f5f8fc;
  color: #1f2937;
  font-family: Arial, sans-serif;
  line-height: 1.5;
}
 
.page {
  width: min(100% - 64px, 1120px);
  margin: 0 auto;
}

Подберите значения под свою тему. Не обязательно повторять цвета, размер контейнера или шрифт из примера.

Этап 3. Оформите компоненты

Шапка, навигация и подвал

Сделайте все три страницы единым сайтом: в шапке, навигации и подвале должны использоваться одинаковые по смыслу классы и правила. Навигация остаётся набором настоящих ссылок <a>.

Для одного горизонтального ряда — например, логотипа и навигации или самих пунктов навигации — используйте Flexbox. В правилах должны быть видны как минимум:

display: flex;
gap;
осмысленное выравнивание через align-items или justify-content.

Карточки каталога

На второй тематической странице уже есть минимум четыре объекта из первой практической работы. Оформите их как единый набор карточек.

Контейнер набора получает отдельный класс, например .catalog-grid.
Для него используйте CSS Grid.
В сетке должно быть не менее двух колонок на вашем обычном широком окне.
Все карточки имеют общий класс, но их данные остаются разными и относятся к вашей теме.
У карточки должны быть как минимум внутренний отступ, граница или другой способ отделить её от фона, а также заголовок и текст.

Не делайте четыре копии правил вроде .book-1, .book-2, .book-3. Если оформление общее, правило тоже должно быть общим — через .card.

Ссылка или кнопка действия

Выберите настоящее действие на сайте: «Записаться», «Узнать расписание», «Оставить заявку», «Выбрать маршрут» или другое подходящее вашей теме. Оформите его классом .button или своим понятным названием.

Добавьте два состояния:

:hover — заметное изменение при наведении;
:focus-visible — заметный фокус для человека, который переходит по странице клавишей Tab.

Не скрывайте фокус правилом outline: none, если не создали полноценную видимую замену.

Форма и таблица

Оформите форму на странице контактов: подписи, поля, select, textarea и кнопку должны выглядеть как одна система. Содержание и связанные label из первой практической не удаляйте.

Таблица остаётся таблицей данных, а не становится средством раскладки страницы. Достаточно сделать её читаемой: добавить границы, внутренние отступы ячеек и отличить заголовки от данных.

Этап 4. Проверьте каскад и отладьте один элемент

Откройте сайт в браузере и DevTools.

Выберите инспектором одну карточку или кнопку.
Найдите в панели Styles правила, которые к ней относятся.
Временно отключите одно правило и посмотрите, что изменилось.
Верните правило и объясните, почему оно относится именно к этому элементу.
Во вкладке Computed найдите итоговые значения margin, padding или display.

В decisions.md или при защите запишите одну найденную проблему и её исправление. Примеры: слишком большой внешний отступ, правило не сработало из-за неправильного класса, более позднее правило изменило цвет ссылки, Grid был назначен не тому контейнеру.

Checkpoint после первой пары

До конца первой пары у вас должно быть:

styles.css подключён ко всем трём страницам.
Классы добавлены шапке, навигации, контейнеру, карточкам, действию и форме.
Есть базовые стили текста, фона, заголовков и отступов.
Навигация собрана через Flexbox.
Все ссылки, изображения и форма по-прежнему работают как в первой практике.
В decisions.md описаны аудитория, цель и выбранное направление стиля.

Если этот фундамент не готов, не переходите к мелкой декоративной отделке.

Проверка перед сдачей

Допустимое использование AI

AI можно использовать как справочник: попросить объяснить свойство, разобрать сообщение браузера, подсказать разницу между Flexbox и Grid или проверить список требований.

Но не передавайте на сдачу готовую сгенерированную тему без понимания. Вы отвечаете за весь CSS и должны:

объяснить назначение каждого важного класса и правила;
показать, где в проекте находятся Flexbox и Grid;
самостоятельно заменить случайные тексты, цвета и данные на решения для своей темы;
найти в DevTools правило для выбранного элемента;
выполнить небольшое изменение по просьбе преподавателя.

На защите оценивается не происхождение кода, а ваше владение результатом.

Сдача и защита

Сдайте всю папку проекта: HTML-файлы, styles.css, decisions.md и изображения. Не отправляйте один HTML-файл отдельно от ресурсов.

На защите будьте готовы за 2–4 минуты:

открыть все три страницы и показать общую навигацию;
назвать пять своих классов и объяснить их роли;
показать контейнер Flexbox и контейнер Grid;
перейти клавишей Tab к ссылке или кнопке и показать фокус;
открыть выбранный элемент в DevTools и показать одно применённое правило;
внести небольшое изменение в CSS или HTML.

Примеры контрольного изменения:

добавить ещё одну карточку по существующей структуре;
изменить gap в навигации и объяснить результат;
заменить неподходящее название класса на название по роли;
добавить :focus-visible к действию;
исправить правило, которое не применяется из-за ошибки в селекторе;
поменять одно общее значение цвета и показать, какие компоненты изменились.

Результат

После этой работы у вас будет не «нарисованный шаблон», а первый собственный интерфейс на CSS: с понятными классами, единым стилем и базовой раскладкой. В следующей работе этот сайт можно будет развивать дальше — в том числе научить его корректно перестраиваться на узком экране.