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

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

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

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

Вверх Характерные черты курса

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

Тема Вопросники Зачёты Практикумы Проекты
Тема 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-конструирование” представляются важными следующие рекомендации.

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

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

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

  2. Основы CSS

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

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

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

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

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

  5. Таблицы

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

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

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

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

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

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

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

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

Вверх Как работать с книгой

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

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

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

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

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

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

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

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

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

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

Ученики решают задания до тех пор, пока не получат звание Профессор (нет ошибок, оценка 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