Автор книги — Дуванов Александр Александрович. Руководитель Роботландского университета, старший научный сотрудник негосударственного образовательного учреждения дополнительного образования “Роботландия+”. Главный разработчик ПМК “Роботландия”.

Курс “Web-конструирование” посвящён сайтостроению на основе языков HTML (разметка структуры страниц) и CSS (описание визуальных свойств объектов, построенных средствами HTML).

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

На этой странице:

- Характерные черты курса
- Контрольный и практический материал курса по темам
- Концепция курса и его содержание
- Домашняя страница на локальном компьютере
- Как работать с книгой
- На уроке у Нины Дмитриевны
- Планы уроков
- Благодарности

## Характерные черты курса

- Средства CSS изучаются в начале курсе (вторая тема), сразу после знакомства с принципами построения гипертекстовой страницы на языке HTML.
- Вопросы дизайна интегрированы в контекст изучения инструментария.
- Каждая тема подкреплена обширным практическим материалом (24 вопросника, 16 автоматизированных зачётных классов, 120 практических заданий, 9 проектов).
- Все вопросы, зачёты, практические задания снабжены подробными ответами и решениями в учительском слое.
- В основу практических заданий положен шаблонный принцип — ученики выполняют работу, используя авторские заготовки (шаблоны).
- Оценивание проектов выполняется при помощи специального инструментария (АРМ “Проверка сайта”) на основе перекрёстных проверок внутри учебной группы.
- Вопросам подготовке графики для Web, в том числе вопросам оптимизации, уделено повышенное практическое внимание.
- Учебник снабжен справочным материалом по тегам HTML и свойствам CSS (с соответствующими испытателями) удобным при практическом конструировании сайтов.
- Каждая тема сопровождается конспектом в виде двух, трёх опорных схем, эффективно закрепляющих изучаемый материал.
- Каждая тема снабжена набором полезных ссылок на соответствующие ресурсы Интернета.
- Даются подробные рекомендации по выбору инструментария, необходимого для конструирования сайта и его сопровождения.

## Контрольный и практический материал курса по темам

Тема | Вопросники | Зачёты | Практикумы | Проекты
--- | --- | --- | --- | ---
Тема 1. Одностраничный документ | 10 | 4 | 20 | 1
Тема 2. Основы CSS | 6 | 5 | 19 | 5
Тема 3. Многостраничный документ | 3 | 2 | 9 | 1
Тема 4. Графика на страницах | 4 | 2 | 42 | 1
Тема 5. Работа с таблицами | 1 | 3 | 30 | 1
Всего | 24 | 16 | 120 | 9

## Концепция курса и его содержание

При изучении темы “Web-конструирование” представляются важными следующие рекомендации.

- Основы CSS изложить в начале обучения, а не после уроков по языку HTML.

  Технология CSS позволяет отделить визуальное представление страниц сайта от структурной разметки (на языке HTML) — преимущества такого подхода описаны в уроке Основы CSS. Если уроки по CSS поставить после уроков HTML, то для оформления страниц ученики будут вынуждены использовать устаревшие визуальные средства HTML, и у них сформируется вредная технологическая привычка до изучения средств CSS.

- Ограничить инструментарий HTML минимальным набором структурных элементов, исключив из рассмотрения элементы визуальной разметки.

  Такой подход позволяет среди многочисленных элементов HTML (около 90) выделить правильный, с технологической точки зрения минимальный набор (около 20, см. раздел справочника Теги), экономя заодно и учебное время.

- Интегрировать вопросы дизайна в контекст технических уроков.

  Соотнесение вопросов дизайна с техническими средствами в момент знакомства с ними будет способствовать формированию правильных технологических навыков конструирования, в противовес “стихийному” использованию изучаемого инструментария.

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

  Такие опорные схемы приводятся на главной странице каждой темы.

- Использовать набор практикумов, основанных на шаблонах.

  Изучение сайтостроения невозможно без обширной практики, что вступает в противоречие с ограниченным количеством учебных часов, отводимых программой на эту тему. Разрешить противоречие можно за счёт “шаблонной” практики: упражнение выполняется не на “чистом листе”, а в заранее подготовленном шаблоне, в той его части, которая непосредственно связанна с темой задания. Шаблоны позволят на выходе учебного задания получать презентабельный продукт с минимальными временными затратами.

- Завершать каждую тему выполнением индивидуального или коллективного проекта, а в конце курса предусмотреть создание большого сайта (например, школьного).

  “Шаблонная” практика позволяет ученикам быстро продвигаться вперёд, но она не должно полностью вытеснять работу над проектами, в которых тренируются интегрированные навыки, а не частные приёмы, как в шаблонных практикумах. На первых занятиях, когда знаний и умений ещё недостаточно для проектной деятельности, можно использовать рабочие заготовки, в которых представлены неизученные ещё элементы (например, вывод на экран картинок).

В уроках принят следующий порядок изучения тем.

1. Одностраничный документ

   Принципы HTML-кодирования. Структура HTML-программы. Минимальный набор элементов, необходимый для разметки отдельной гипертекстовой страницы без гипертекстовых ссылок. Тему завершает шаблонный проект “Команда разработчиков” (гипертекстовый альбом, страницы которого содержат представления участников обучения). Это единственный проект, полностью построенный на шаблонах, так как знаний и умений даже для простого самостоятельного проекта ещё недостаточно.

2. Основы CSS

   Взаимодействие средств HTML и CSS (структурной и визуальной разметка). Принципы CSS-кодирования. Стили отдельного элемента. Стили отдельного файла. Стили сайта. Основы CSS-конструирования. Набор технических заданий (проектов) на создание страниц с заданным дизайном.

3. Многостраничный документ

   Понятие гиперссылки. Кодирование переходов. Разработка структуры сайта. Полностью самостоятельный проект “Разработка сайта”.

4. Графика на страницах

   Графические Web-форматы. Кодирование картинок. Картинка как ссылка. Подготовка графики для Web. Оптимизация графики. Проект “Разработка сайта с графическими иллюстрациями”.

5. Таблицы

   Устройство таблицы. Кодирование таблицы. Дизайн таблицы. Дизайн сайта при помощи таблиц. Проект “Разработка сайта с помощью табличного дизайна”.

6. Итоговый проект

   Большой проект, например, разработка школьного сайта.

## Домашняя страница на локальном компьютере

На компьютере учителя и учеников можно создать стартовую гипертекстовую страницу. На эту страницу помещаются ссылки на локальные ресурсы (в том числе рабочие проекты) и ссылки на часто посещаемые ресурсы Интернета.

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

Кроме того, пиктограмму стартовой страницы можно вынести на Рабочий стол.

Стартовую страницу можно подготовить, используя специально подготовленный шаблон, расположенный в каталоге `home` книги. Инструкция содержится внутри шаблона.

## Как работать с книгой

### Блок ученика и блок учителя

Книга содержит два блока — ученика и учителя.

Блок ученика ориентирован непосредственно на обучаемого. Блок учителя — на наставника, который сопровождает ученика в работе над книгой и помогает ему. В крайнем случае, если ученик работает с книгой совершенно самостоятельно, он может использовать блок учителя для проверки ответов на вопросы книги и проверки решений заданий зачётных классов.

Ссылки на блок учителя присутствуют на главной страницы каждой темы в следующем виде (показан пример входа в раздел учителя для первой темы):

Раздел учителя

В каждой теме присутствуют разделы:

- Читальный зал. Основной фактический материал урока.
- Конспект. Определения и ключевые фразы читального зала.
- Вопросы. Основа для закрепления изучаемого материала.
- Практикум. Практическая работа по теме урока.
- Проекты. Набор учебных проектов по теме урока.
- Зачётный класс. Автоматизированная проверка пройденного материала.
- Полезные ссылки. Ссылки на полезные ресурсы Интернета по теме урока.

### Удаление учительского блока

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

Удаляются следующие файлы:

- `09t.htm`
- `10t.htm`
- `11t.htm`
- `12t.htm`
- `13t.htm`

### Зачётные классы

Ученики решают задания до тех пор, пока не получат звание Профессор (нет ошибок, оценка 5) или звание Студент (1-2 ошибки, оценка 4):

Если получены звания Торопыжка (много ошибок) или Незнайка (очень много ошибок), то зачётный класс лучше решить заново.

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

Рекомендуется рассматривать автоматический зачётный класс как тренировку перед сдачей “живого” зачёта учителю.

## На уроке у Нины Дмитриевны

В учительских блоках присутствует ссылка:

На уроке у Нины Дмитриевны

| Нина Дмитриевна Шумилина — учитель информатики Тверской гимназии № 6. Нина Дмитриевна подробно рассказывает, как проходили реальные уроки у неё в школе, приводит ориентировочные поминутные планы, даёт советы, рекомендации, предлагает дополнительные задания, делится впечатлениями и наблюдениями.

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

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

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

## Планы уроков

Ниже приводится минимальный календарный план, рассчитанный на 34 школьных часа. Но материала книги достаточно и для постановки курса, ориентированного на 64, а возможно и более часов.

№ | Тема | Число школьных часов
1 | Одностраничный документ 01. Простейшая HTML-страничка (0.5) 02. Структура HTML-кода (0.5) 03. Как работает браузер (0.5) 04. Улучшенная HTML-страничка (0.5) 05. Структура и вид документа (0.5) 06. Атрибуты тегов (0.5) 07. Цвет фона и цвет шрифта (0.5) 08. Оформление текста (0.5) 09. Кодирование списков (1) 10. Стиль записи кода (1) 11. Тестирование и отладка (1) Проект “Команда разработчиков” (1) | 8
2 | Основы CSS 01. HTML и CSS (1) 02. Стили отдельного элемента (1) 03. Стили отдельного файла (1) 04. Стили сайта и фон элемента (1) 05. CSS-конструирование (1) 06. Позиционирование и z-индекс (1) Проекты (1) | 7
3 | Многостраничный документ 01. Понятие гиперссылки (1) 02. Кодирование переходов (1) 03. Разработка структуры сайта (1) Проекты (2) | 5
4 | Графика на страницах 01. Графические Web-форматы (1) 02. Подготовка графики для Web (2) 03. Кодирование картинок (1) 04. Дизайн картинок (1) Проекты (2) | 7
5 | Работа с таблицами 01. Кодирование таблиц (1) 02. Дизайн таблицы (2) 03. Дизайн на таблицах (2) Заключительный проект (2) | 7
| Итого | 34

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

## Благодарности

Нина Дмитриевна Шумилина — это тот человек, которому учителя не раз скажут спасибо, после знакомства с конспектами её уроков на страницах этой книги (уроки от НДШ будут пополняться). Кроме того, Нина Дмитриевна внимательно анализировала книжные страницы, присылая по почте критические замечания и конструктивные предложения.

Александр Артурович Русс — художественные заготовки Александра Артуровича автор с благодарностью использовал для построения иллюстраций книги.

Сергей Львович Островской — главный редактор газеты “Информатика”. Сергей Львович, изначально поддерживал курс по сайтостроению, публикуя на страницах своей газеты разные его варианты. Появлению этой версии читатели в значительной мере обязаны этому человеку.

вверх

© Александр Александрович Дуванов kurs@robotland.pereslavl.ru