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

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

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

Версия 2.5 (август, 2011)

Исправлена ошибка в зачёте из раздела:

Тема 2/05. Позиционирование элементов/
Абсолютное позиционирование/Зачёт

Потерена десятка в ответах на задания 2, 3 и 4 этого зачёта. Правильные ответы: 30, 35 и 47.

Ошибку заметила Пономарева Маргарита Михайловна.

Исправлены несколько описок и неточностей в материалах темы 1.

Версия 2.4 (август, 2010)

Исправлена ошибка в построении примера 1 из раздела:

Тема 2/Плавающие блоки/Пример 1/Наполняем страницу содержимым

Суть ошибки. Для исправления погрешности, возникающей в IE, было записано правило height:0:

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

Однако правило height:0 в других браузерах приводит к схлопыванию подвала. В версии 2.4 это правило было заменено правилом //height:0 (две косых черты // в начале правила не смущают IE, остальные браузеры такое правило игнорируют).

Предисловие к версии 2.3 (июнь, 2010)

Изменения версии 2.3 не революционные, но многочисленные. Они затрагивают темы 3, 4 и 5. Версия завершает переход от первого ко второму изданию, в котором особое внимание уделяется отделению содержания от представления при помощи описания визуальных свойств элементов в отдельном CSS-файле (вместо использования визуальных HTML-элементов и визуальных атрибутов).

Обновленный календарный план прилагается в виде отдельного doc-файла. В нем предусмотрены два варианта планирования занятий — первый минимальный, рассчитан на 34  школьных часа, второй, продвинутый — на 68.

Обновленный календарный план

Предисловие ко второму изданию

Революционные изменения второй версии касаются всех тем, но особенно сильно они затронули тему 2 “Основы CSS”.

Изучить CSS, значит:

1. Освоить синтаксис и семантику языка.

   селектор { правило; ... правило; }

   Напоминаю, что код на CSS записывается в виде последовательности стилевых определений, каждое из которых имеет вид, показанный слева.

   Селектор служит для связи определения с элементами HTML, а правила строятся по формуле: свойство:значение. Пример:

   P { color:red; font-size:200%; }

   В этом примере использован селектор элемента P. Он связывает определение со всеми абзацами HTML. Определение содержит два правила. Первое задаёт красный цвет текста, второе увеличивает размер шрифта в 2 раза.

2. Познакомиться с базовыми селекторами (селектор элемента, селектор идентификатора, селектор класса, универсальный селектор) и способами составления сложных селекторных выражений. Например, таких:

   #block .def P DFN, EM { color:red; font-size:200%; }

   Это определение относится ко всем элементам EM, независимо от их расположения в коде HTML, а также к элементам DFN, которые вложены в абзацы, находящиеся внутри элемента с классом def, который, в свою очередь, является потомком элемента с идентификатором block.

3. Исследовать набор свойств CSS и алгоритмы их работы.

В первой версии последний пункт практически отсутствовал. В 2008/2009 учебном году Маргарита Михайловна Пономарева спрашивала меня, где можно прочитать описание стилевых свойств и алгоритмы их работы. И я отсылал к справочникам, например, к хорошему справочнику Влада Мержевича:

htmlbook.ru/css

Однако, справочник — это не учебник. Кроме того, справочник Мержевича описывает алгоритмы работы свойств не полно, а местами не точно.

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

Посмотрите на полное содержание темы 2. Надеюсь, оно вас впечатлит.

Предисловие к первому изданию

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

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

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

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

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

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

При изучении темы “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, а возможно и более часов.

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

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

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

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

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

вверх