Разработка фрагмента тематического сайта

Разработка фрагмента тематического сайта

Спланируй мини-сайт из трёх страниц и собери его так, чтобы меню работало в обе стороны, а оформление совпадало.

Одна страница — это документ. Сайт — несколько связанных страниц об одной теме. Сегодня ты соберёшь учебный фрагмент тематического сайта: сначала план, потом файлы, потом проверка переходов и стиля.

Результат урока

Определишь тему, содержание и навигацию; создашь папку ThemeSite_10 с тремя HTML-страницами и общим style.css; разместишь одинаковое меню с относительными ссылками; проверишь переходы туда-обратно и единообразие оформления. Формы и полное тестирование — следующий урок. Мультимедиа из урока 16 — по желанию, не обязательно.

Перед началом

Работай в своей папке и соблюдай правила кабинета. При неисправности остановись и обратись к учителю. Нужны простой текстовый редактор и браузер. Интернет для практики не нужен.

На учебной странице размещай только учебный текст: без домашнего адреса, телефона и личных фотографий.

Вспомни: каркас HTML, текст и списки, относительные ссылки, изображения, подключение CSS и оформление (уроки 9–15). Визуальный редактор и мультимедиа (16–17) можно использовать как опору, но сегодня собираем вручную в редакторе.

Основа — глава 2 учебника, практикум по фрагменту тематического сайта (опора на § 6–8).

Тема и содержание

Сначала выбери понятную школьную тему. Удобный образец — «Школьный клуб». Можно взять свой учебный клуб или хобби-секцию.

Запиши план:

1. тема одним предложением;
2. три страницы и роль каждой;
3. пункты меню;
4. имена файлов.

Без плана легко получить три несвязанных файла вместо сайта.

Навигация и меню

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

<nav>
  <a href="index.html">Главная</a>
  <a href="circles.html">Кружки</a>
  <a href="schedule.html">Расписание</a>
</nav>

Относительная ссылка — это имя файла в той же папке. Абсолютный URL (полный интернет-адрес) сегодня не нужен: все страницы локальные.

Три страницы фрагмента

Главная кратко рассказывает, о чём клуб и зачем сайт.

Кружки удобно оформить списком ul/li: робототехника, фотостудия, шахматы и другие учебные направления без реальных фамилий.

Расписание удобно оформить упорядоченным списком ol/li: день, время и кабинет (условные).

Общий стиль для всех страниц

Общий файл style.css подключают на каждой странице:

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

Тогда цвет меню, шрифт и фон совпадают без копирования одних и тех же правил. Изменение в одном месте обновляет вид всех страниц после сохранения и F5.

Сохранение файлов

Все файлы мини-сайта сохраняй в одну папку ThemeSite_10 (10 — номер места): index.html, circles.html, schedule.html, style.css. Для HTML — тип «Все файлы», UTF-8, расширение .html. Для CSS — расширение .css.

Просмотр и проверка переходов

Открой index.html в браузере. Пройди меню: Главная → Кружки → Расписание → обратно на Главную. Затем проверь обратные переходы. Сравни оформление: оно должно совпадать. Интернет не нужен.

Чек-лист готовности

Пауза перед практикой

На минуту отведи взгляд от экрана, расслабь кисти и проверь посадку. Затем переходи к своей папке.

Практика: ThemeSite_10

Создай папку ThemeSite_10 в своей рабочей папке. Тема-образец — школьный клуб «Горизонт»; можно взять свой учебный клуб.

Лист проверки

Критерии готовности

Шесть диагностических баллов: есть краткий план; три .html и один style.css в одной папке; одинаковое меню на каждой странице; относительные ссылки работают; общий CSS подключён везде; показаны переходы туда-обратно и единообразие. Баллы — обратная связь, не автоматическая отметка.

Если остаётся время: добавь учебное изображение с alt или блок .note с подсказкой для посетителя.

Если результат отличается

Объясни самостоятельно

1. Что нужно определить до создания файлов тематического сайта? Назови хотя бы два элемента плана.
2. Зачем на каждой странице одинаковое меню? Чем относительная ссылка отличается от абсолютного URL?
3. Как проверить, что три страницы связаны и оформлены единообразно?

Показать ответ после выполнения

Домашнее задание

Глава 2, практикум по тематическому сайту. Письменно: 1) тема и содержание трёх страниц; 2) почему меню одинаковое; 3) как проверить переходы. По желанию — донастроить ThemeSite. Формы, сервер и полное тестирование не задаются (урок 19). Установка программ дома не требуется.

Источники

Котов В. М. и др. «Информатика. 11 класс», 2021: глава 2 «Основы веб-конструирования» (практикум: фрагмент тематического сайта; опора на § 6–8). Содержание главы. Электронное приложение.

MDN Web Docs: HTML basics, Creating hyperlinks, CSS basics.

ThemeSite, лист и критерии — авторская адаптация; одиннадцать иллюстраций условные и не являются снимками браузера или редактора.