Визуальное веб-конструирование

Визуальное веб-конструирование

Собери короткий фрагмент страницы в визуальном редакторе и покажи, каким HTML и CSS он записан.

Визуальный редактор (WYSIWYG — «что видишь, то и получишь») показывает страницу почти как браузер и сам записывает теги. Но источником истины остаются HTML и CSS: их нужно уметь открыть, прочитать и поправить.

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

Создашь фрагмент страницы в школьном визуальном редакторе (BlueGriffon, LibreOffice Writer HTML, инструменты браузера или иной одобренный WYSIWYG); переключишься между режимами Дизайн и Код; сохранишь HTML/CSS; объяснишь, какие части появились из визуального инструмента, а какие дописаны вручную; при необходимости упростишь лишнюю вложенность тегов. Полный тематический сайт — следующие уроки. PascalABC.NET сегодня не нужен.

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

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

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

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

Основа — глава 2 учебника (визуальные средства веб-конструирования). Онлайн-конструкторы сайтов — только обсуждение/резерв, не обязательный продукт часа.

Что такое WYSIWYG

WYSIWYG (What You See Is What You Get) — режим, в котором страница выглядит примерно так, как в браузере. Ты набираешь заголовок и абзац как в текстовом процессоре, а редактор записывает теги.

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

Просмотр кода

После визуального набора открой код. Найди <h1>, <p>, <ul>, <li>, <a>. Если добавил оформление — найди правило CSS или атрибут style.

<h1>Клуб робототехники</h1>
<p>Краткое описание кружка.</p>
<ul>
  <li>Занятия по средам</li>
  <li>Учебные проекты</li>
</ul>

Сопоставление Design ↔ Code

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

Структура учебного фрагмента

На уроке достаточно короткого фрагмента: заголовок, абзац, список из двух пунктов, ссылка и оформленная заметка. Целый сайт из многих страниц — на уроках 18–19.

Панель стилей и CSS

Кнопки цвета, шрифта и рамки обычно записывают свойства CSS. Их можно задать панелью или вручную в style.css.

.note {
  margin-top: 16px;
  padding: 12px;
  border: 1px solid #118dcc;
  background-color: #eef4f8;
}

Сохранение и экспорт

Сохрани работу в свою папку VisualStart_10 (10 — номер места): index.html и style.css. В разных программах команда может называться «Сохранить», «Сохранить как HTML» или «Экспорт».

Проверь расширения файлов и что оба файла лежат в одной папке.

Просмотр в браузере

Открой index.html в браузере. После правок сохрани файлы и нажми F5. Интернет не нужен, если все ресурсы локальные.

Очистка лишней вложенности

Визуальный редактор иногда добавляет лишние <div> и <span>. Лишняя вложенность усложняет правку и может ломать оформление.

<!-- лишнее -->
<div><div><span><span>Текст</span></span></div></div>

<!-- лучше -->
<p>Текст</p>

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

Чек-лист Design ↔ Code

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

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

Практика: VisualStart_10

Скопируй стартовую папку VisualStart_10 в свою рабочую область как VisualStart_NN (NN — номер места).

Лист сопоставления

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

Шесть диагностических баллов: фрагмент сохранён в VisualStart_NN; в Дизайне добавлены список ≥2, ссылка и заметка (или эквивалент); в Коде показаны соответствующие теги; стили согласованы с видом; браузер показывает актуальный результат; ученик объясняет «редактор / вручную» и при необходимости очищает вложенность. Баллы — обратная связь, не автоматическая отметка.

Если остаётся время: сравнить код «до» и «после»; кратко назвать плюс и минус WYSIWYG; обсудить, чем локальный HTML отличается от онлайн-конструктора.

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

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

1. Что означает WYSIWYG? Зачем после визуального набора открывать код?
2. Приведи пример: элемент на экране → тег HTML или свойство CSS.
3. Чем опасна лишняя вложенность тегов? Что сделать, если редактор её добавил?

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

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

Повторить: WYSIWYG, Design↔Code, сохранение HTML. Письменно: 1) что такое WYSIWYG; 2) одна пара «элемент на экране → тег/свойство»; 3) зачем чистить лишнюю вложенность. По желанию — донастроить VisualStart при доступе к ПК. Онлайн-конструкторы и JavaScript не задаются. Установка программ дома не требуется.

Источники

Котов В. М. и др. «Информатика. 11 класс», 2021: глава 2 «Основы веб-конструирования» (визуальные средства, сопоставление с HTML/CSS). Содержание главы. Электронное приложение.

MDN Web Docs: Getting started with the web. Примеры интерфейсов: BlueGriffon (Wysiwyg/Source), LibreOffice Writer (HTML). Урок не требует конкретного продукта.

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