Одностраничный документ (на начало урока 9)
Регистрационная метка
Выходим в Интернет (на оглавление книги)

На уроке у Нины Дмитриевны
Находки Ольги Сергеевны

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

Методические комментарии

Конструирование сайтов

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

  • Основы 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. Итоговый проект

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

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

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

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

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

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

Опорные схемы

При работе с материалом рекомендуется использовать две опорные схемы, на которых скелетно изложены основы HTML-кодирования.

Схема 1 “Гипертекстовый документ”

Гипертекстовый документ

Гипертекстовый документ кодируется на языке HTML и отображается на экране при помощи браузера. Код гипертекстового документа сохраняется в файле с расширением htm (или html).

Объекты документа описываются на языке HTML при помощи элементов. Элемент задаётся одиночным или парным тегом.

Элементы разделяются на последовательные и блоковые.

Блок — это элемент, до и после которого браузер переводит строку на экране (пример: горизонтальная линия). До и после последовательного элемента перевод строки не выполняется (пример: фрагмент текста, написанный курсивом).

Тег — это средство для описания элементов. Элемент может быть описан одиночным тегом (открывающим) или парным (открывающим и закрывающим). Элемент может содержать атрибуты, в которых указываются свойства объекта. Атрибуты записываются в открывающем теге.

Важно добиться понимания терминологических различий в понятиях объект, элемент и тег.

Объект — это часть документа, представленного в окне браузера. Пользователь загружает гипертекстовый документ и видит на экране его объекты: заголовки, абзацы, рисунки…

Элемент — это конструкция языка для описания объекта гипертекстовой страницы.

Тег — средство языка для построения элемента. Элемент может задаваться как одним тегом, так и парой, между которыми располагается текст и (или) другие элементы.

Элемент, описываемый парой тегов, похож на сэндвич — между двумя кусочками хлеба (открывающим и закрывающим тегами) расположена начинка — содержимое элемента. Так, теги <P> и </P> обозначают границы абзаца, текст абзаца располагается между ними.

Кодирование элемента

И теги и элементы — конструкции языка HTML, но тег — более мелкая строительная единица. Теги используются для построения элементов по одному из двух правил.

  1. Элемент совпадает с тегом <ИМЯ> (пример: <HR>).
  2. Элемент строится по формуле <ИМЯ>тело</ИМЯ>, где тело содержит текст и (или) другие элементы (пример: <H1>Первый HTML-документ</H1>).

Схема 2 “HTML-программа”

HTML-программа

На этой схеме представлен шаблон, по которому строится код гипертекстовой страницы на языке HTML. Следует обратить внимание учеников на элемент TITLE задающий заголовок окна — правила дизайна рекомендуют обязательно использовать этот элемент в коде страницы и включать в него заголовок страницы (или заголовок сайта на главной странице).

Стиль записи кода

При построении HTML-кода очень важно (как при любом программировании) уделять внимание не только внешнему виду продукта, но и виду кода, то есть необходимо следить за стилем кодирования, правила которого с обоснованиями изложены в Читальном зале.

Очень кратко эти рекомендации можно сформулировать так:

  • Лесенка (только на тегах)
  • Теги большие, атрибуты маленькие
  • Текст с первой позиции
  • Короткие строки

Вопросы

Ответы на вопросы

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

Решения зачётных классов

Практикум

Ответы на задания практикумов

Проект

Пример заполненного альбома (заполнена страничка Петра Мячикова)

Азы информатики RU 2000/2007 © А.А.Дуванов

Вверх Оглавление книги Урок 9. Одностраничный документ Письмо автору Об авторах