Некоторые аспекты преподавания сайтостроения

В программу изучения информатики входят основы языка HTML и вопросы строения сайтов. Каждый из преподавателей выбирает свою методику преподавания. Я пробовал использовать для преподавания различные методики.

Сначала я использовал методику преподавателя московской школы № 444 Е.В. Давыдовой [1]. Эта оригинальная и довольно простая методика позволяет создать простой сайт в блокноте. Методика может использоваться только в том случае, если на информатику выделяется 2 часа и более.

Методика создания сайтов, предложенная И.В. Семакиным [2] проста и понятна детям, но имеет очень большой недостаток, и на него, кстати, указали мне дети.  Созданные сайты без проблем открываются только в Internet Explorer. 

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

Материал по созданию сайта включает:
теоретические модули:

• основы языка HTML;
• бесплатные программы для создания web-сайтов;
• проектирование структуры сайта;

практические модули:

• создание шаблона сайта;
• подготовка текстовых и графических материалов;
• заполнение сайта и проверка его функционирования;
• публикация сайта на web-сервере.

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

Теоретические модули

Модуль "Основы языка HTML"

Для преподавания этого модуля можно использовать методику Е.В. Давыдовой (Приложение 1), или интернет издания,  приведенные в Приложении 2 и Приложении 3.
После изучения этого модуля учащиеся должны иметь представление о структуре web-страницы, языке HTML, а также уметь находить нужные фрагменты в готовых сайтах.

Модуль "Бесплатные программы для создания web-сайтов"

Бесплатных программ для создания web-сайтов и различных утилит в Internet можно найти много и на любой вкус.  О некоторых из таких программ рассказано в Презентации.

Для создания сайтов я предлагаю учащимся использовать Компоновщик SeaMonkey – редактор языка HTML (язык гипертекстовой разметки), позволяющий создавать и редактировать веб-страницы. Для работы с Компоновщиком нет необходимости знать язык HTML, поскольку основные элементы разметки доступны при помощи команд меню или панелей инструментов.
Кнопки на панели инструментов позволяют легко добавлять списки, таблицы, изображения, ссылки на другие страницы, применять другой цвет и стиль шрифта. При создании документа вы можно увидеть, как выглядит документ при его публикации. Компоновщик предоставляет простой механизм для проверки того, соответствует ли ваш документ стандартам языка HTML, опубликованным Консорциумом WWW (World Wide Web Consortium, W3C). При необходимости можно редактировать исходный HTML-код.

Модуль "Проектирование структуры сайта"

Этот модуль решает следующие задачи: 

• определение круга основных задач, решаемых сайтом;
• создание списка тематических разделов сайта;
• разработка структуры ресурса и логики их взаимодействия.

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

Итог окончания этого этапа работ учеником (или группой учеников) следующий:

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

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

Практические модули

Модуль "Создание шаблона сайта"

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

Модуль  решает следующие задачи:

• создание структуры папок;
• выбор дизайна и компоновки сайта;
• создание одной web-страницы, которая будет использоваться в качестве шаблона;
• проверка идентичности отображения web-страниц с различным экранным разрешением и цветовой палитрой и в различных браузерах.

Вначале создается структура сайта. Обычно я рекомендую ученикам создавать и отлаживать сайт в отдельной папке. В примере на рисунке 1  папка называется site.

Прежде чем создать шаблон предпочтительно поступить  следующим образом. В блокноте создается простой html-файл следующего содержания:

<html>
<head>

</head>
<body>

</body>

</html>

И присвоить ему имя  index.html.

Рис. 1. Пример физической структуры сайта.

Затемindex.html необходимо скопировать в каждую папку и переименовать его (например, в папке 1 index.html  переименовывается в 1.html и т.п.). Таким образом, каждая из папок будет содержать html-файл и папки img, download. В папке img располагаютвсе рисунки, а в папке download – все остальные файлы.

После того, как создана физическая структура сайта на основе  index.html создается шаблон сайта, а именно, отлаживается система навигации. В примере (рис. 2) система навигации выполнена в виде системы гиперссылок, заключенных в таблицу. Довольно часто можно встретить системы навигации с использованием кнопок. Можно написать кнопку, как с помощью тэгов, так и с помощью  программы Good Utilities For Webmaster. Она позволяет создать  html-код трехпозиционной кнопки (или системы кнопок), который легко может быть вставлен в нужное место на странице. Затем система навигации связывается гиперссылками с другими web-страницами. После чего шаблон готов.

Для того чтобы избежать деформации web-страницы при изменении параметров экрана разработчики сайтов применяют достаточно простой и действенный прием – все компоненты web-страницы заключают в ячейки невидимой таблицы.

Бывают статические и динамические компоновки web-страниц.

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

Наиболее предпочтительным  считается динамический вариант, при котором  ширину невидимой таблицы, содержащей фрагменты web-страницы, задают в процентах от текущей ширины экрана. При увеличении экранного разрешения таблица «растягивается» по горизонтали, и все размещенные в ее ячейках элементы, позиционированные либо по центру, либо по краям столбцов, смещаются согласно установленному алгоритму.

В зависимости от позиционирования элементов навигации бывают следующие типы компоновки web-страниц:

• с левым позиционированием элементов навигации (рис. 1);
• с правым позиционированием элементов навигации;
• с верхним позиционированием элементов навигации;
• со "смешанной" компоновкой элементов навигации.

Рис. 2. Web-страница с левым  позиционированием элементов навигации в Компоновщике SeaMonkey.

Страница опубликована на сайте gmo-bio.smtp.ru.

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

Непосредственно подзаголовком документа, как правило, располагается пространство, отведенное для размещения рекламного баннера. Включение баннера именно в верхнюю часть web-страницы в большинстве случаев является обязательным условием регистрации сайта в службах баннерного обмена – системах, рекламирующих созданный вами ресурс в обмен на показ на страницах вашего сайта рекламы других участников баннерообменной сети. Стандартный размер баннеров, публикуемых под заголовком документа, составляет 468х60 точек.

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

Перечень цветовых сочетаний рисованного объекта или текста с фоном в порядке ухудшения зрительного восприятия:

Правило проверки правильности цветопередачи.Корректность сочетания друг с другом всех остальных цветов и оттенков проверяется с помощью одного простого правила: переведите ваше изображение в формат «grayscale» (256 оттенков серого) и посмотрите, читается ли в таком виде ваш текст, контрастно ли выглядят нарисованные элементы. Если нет – лучше выбрать другое цветовое решение. Считается, что наиболее правильным цветовым решением всегда был и остается «классический» вариант: черным по белому. Примером таких сайтов могут служить поисковые системы Nigma и Yandex.

После выбора дизайна осуществляется проверка идентичности отображения web-страниц с различным экранным разрешением и цветовой палитрой в разных браузерах.
Затем шаблон копируется во все папки сайта  и каждый из файлов переименовывается.Осталось только поправить систему навигации.

Затем следует перейти к подготовке текстовых материалов. Их можно готовить в любом текстовом редакторе, например в Word.

ВНИМАНИЕ. Текстовые материалы не должны содержать стилей, колонтитулов, сносок, ссылок, полей, колонок, оглавлений, буквиц, переносов, а также списков, таблиц и рисунков. И вообще текст предпочтительнее сохранять в формате *.txt, чтобы после вставки форматировать его средствами компоновщика. 

Графические материалы готовят следующим образом. Вначале рассчитывается размеры рисунков на  странице. Затем  картинки приводятся к нужному размеру любым графическим редактором. Для этого можно использовать как коммерческий  Photoshop, так и бесплатный Gimp. Я же предпочитаю делать эту операцию с помощью бесплатной версии Image Resizer. На сжатие файла этой программой уходит с десяток секунд. Векторные рисунки экспортируются  в растровый формат и картинки оптимизируются.

ВНИМАНИЕ. При вставке графических файлов в Компоновщике следует активизировать опцию "Относительный URL". При возникновении  проблем  можно поправить html-код вручную. При указывании URL-адреса картинки следует внимательно следить за регистром символов, которыми записывается расширение файла (например, picture.GIF).

После заполнения сайта, следует проверить его работу с разными браузерами на различных локальных компьютерах, загружаясь  либо flash-накопителя, либо через локальную сеть. Сбоев быть не должно. Только после этого можно публиковать сайт на удаленном хостинге.   

Литература:

1. Е.В Давыдова "Создание Web-страниц с помощью языка HTML", "Информатика и образование", № 8 , 2000.
2. Семакин И.Г., Хеннер Е.К. Информатика и ИКТ. Базовый уровень. 10-11 класс. – М.: БИНОМ. Лаборатория  знаний, 2010.
3. http://www.manual.ru
4. http://www.postroika.ru
5. http://gmo-bio.smtp.ru.