Создание электронного учебника с использованием техники Web-программирования
Объектно-ориентированное программирование (сокращенно ООП) - это в наше время совершенно естественный подход к построению сложных (и не очень сложных) программ и систем. Когда вы открываете любую программу Windows, вы видите окно с множеством кнопок, разделов меню, окон редактирования, списков и т.п. Все это объекты. Причем сами по себе они ничего не делают. Они ждут каких-то событий нажатия пользователем клавиш или кнопок мыши, перемещения курсора и т.д. Когда происходит подобное событие, объект получает сообщение об этом и как-то на него реагирует: выполняет некоторые вычисления, разворачивает список, заносит символ в окно редактирования. Вот такая программа Windows и есть объектно-ориентированная программа (для краткости в дальнейшем на протяжении этой книги мы будем называть прикладные программы приложениями).
CHM - это расширение файла в формате Compressed HTML Help. Формат был разработан Microsoft для гипертекстовых справочных систем. Для просмотра CHM файлов достаточно наличия в системе Internet Explorer. У CHM файлов, как правило, есть Содержание - отдельная панель со списком статей для упрощения навигации. В наличии содержания, пожалуй и заключается главное отличие CHM файлов от использовавшихся ранее HLP файлов справки Windows.
В основном формат CHM используется для создания справочных файлов, но некоторые электронные библиотеки хранят в этом формате книги, так как при этом можно легко сформировать оглавление книги. Также данный формат можно использовать для создания оффлайн версии сайта.
Слово HTML представляет собой сокращение от HyperText Markup Language - язык разметки гипертекста. В основном, HTML-документ является простым текстовым файлом, который содержит текст и ничего больше. Так что создавать веб-страницы можно в любом текстовом редакторе.
Когда веб-страница открывается в браузере, он просматривает код HTML, находит специальные символы, называемые тегами, и использует их для вставки изображений, изменения вида текста, создание ссылок на другие веб-страницы и др.
Для обозначения тегов используется символ <тег>. Теги бывают двух видов: парные, которые выделяют блок текста, также называются еще контейнером (пример 1) и одиночные. Контейнер требует закрывающего тега, обозначаемого </тег>. Теги нечувствительны к регистру, поэтому запись <B> и <b> эквивалентна.
Пример 1. Использование парных тегов (контейнера)
<! DOCTYPE HTML PUBLIC "- // W3C // DTD HTML 4.01 // EN" "http://www.w3.org/TR/html4/strict. dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Контейнеры</title>
</head>
<body>
<p><b>Жирный шрифт</b> в тексте. </p>
</body>
</html>
Поскольку одновременно можно использовать любое разумное сочетание тегов, следует помнить об их вложенности (пример 2). Один контейнер должен находиться внутри другого, и никак не пересекаться (пример 3).
Пример 2. Правильное сочетание тегов
<! DOCTYPE HTML PUBLIC "- // W3C // DTD HTML 4.01 // EN" "http://www.w3.org/TR/html4/strict. dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Вложение тегов</title>
</head>
<body>
<p><b><i>Полужирный курсивный текст</i></b></p>
</body>
</html>
В данном примере текст находится внутри контейнера <I>, который устанавливает курсивное начертание, а он в свою очередь размещается внутри контейнера <B> задающим жирное начертание текста. Результат останется неизменным, если в данном случае поменять теги местами.
Пример 3. Неправильное сочетание тегов
<! DOCTYPE HTML PUBLIC "- // W3C // DTD HTML 4.01 // EN" "http://www.w3.org/TR/html4/strict. dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Ошибка во вложении тегов</title>
</head>
<body>
<p><i><b>Полужирный курсивный текст</i></b></p>
</body>
</html>
В данном примере нарушена вложенность тегов один в другой. Хотя браузер и отобразит пример корректно, самостоятельно? догадавшись? что от него хотят, подобных ошибок следует избегать, поскольку они приводят к замедлению работы страницы и к неправильной демонстрации страницы в большинстве случаев.
3.2.1Структура документа
Все веб-страницы состоят из двух разделов - заголовка (<HEAD>) и тела документа (<BODY>). Раздел заголовка может содержать текст и теги, но содержимое этого раздела не показывается напрямую на странице. Тело документа предназначено для размещения тегов и содержательной части (пример 4).
Пример 4. Простейший HTML-документ
<! DOCTYPE HTML PUBLIC "- // W3C // DTD HTML 4.01 // EN" "http://www.w3.org/TR/html4/strict. dtd">
<html>
<head>
<! - Этот раздел предназначен для заголовка страницы и технической информации. - ->
</head>
<body>
<! - А здесь надо размещать все, что хочется увидеть на странице. - ->
</body>
</html>
3.2.2DOCTYPE
Элемент <! DOCTYPE> предназначен для указания типа текущего документа - DTD (document type definition, описание типа документа). Это необходимо, чтобы браузер понимал, как следует интерпретировать текущую веб-страницу, ведь HTML существует в нескольких версиях, кроме того, имеется XHTML (EXtensible HyperText Markup Language, расширенный язык разметки гипертекста), похожий на HTML, но различающийся с ним по синтаксису. Чтобы браузер "не путался" и понимал, согласно какому стандарту отображать веб-страницу и необходимо в первой строке кода задавать <! DOCTYPE>.
Существует несколько видов <! DOCTYPE>, они различаются в зависимости от версии HTML, на которую ориентированы. В табл.1. приведены основные типы документов с их описанием.
3.2.3 Допустимые DTDDOCTYPE
<! DOCTYPE HTML PUBLIC "- // W3C // DTD HTML 4.01 // EN" "http://www.w3.org/TR/html4/strict. dtd">Строгий синтаксис HTML.
<! DOCTYPE HTML PUBLIC "- // W3C // DTD HTML 4.01 Transitional // EN" "http://www.w3.org/TR/html4/loose. dtd">Переходный синтаксис HTML.
<! DOCTYPE HTML PUBLIC "- // W3C // DTD HTML 4.01 Frameset // EN" "http://www.w3.org/TR/html4/frameset. dtd">В HTML-документе применяются фреймы.
XHTML 1.0
<! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Strict // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict. dtd">Строгий синтаксис XHTML.
<! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional. dtd">Переходный синтаксис XHTML.
<! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Frameset // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset. dtd">Документ написан на XHTML и содержит фреймы.
XHTML 1.1
<! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.1 // EN">Разработчики XHTML 1.1 предполагают, что он постепенно вытеснит HTML. Как видите, никакого деления на виды это определение не имеет, поскольку синтаксис один и подчиняется четким правилам.
Раздел заголовка документа (<HEAD>)
Теги и тексты, находящиеся в этом разделе, не отображаются на веб-странице. Этот раздел обычно предназначен для следующей служебной информации.
Заголовок страницы (тег <TITLE>)
Используется для отображения строки текста в левом верхнем углу окна браузера. Такая строка сообщает пользователю название сайта и другую информацию, которую добавляет разработчик.
CSS (Cascading Style Sheets, Каскадные таблицы стилей)
Стили хранят набор элементов форматирования, который применяется к тексту документа, чтобы быстро изменить его внешний вид.
Метатеги (тег <META>)
Метатеги используются для хранения информации предназначенной для браузеров и поисковых систем. Например, механизмы поисковых систем обращаются к метатегам для получения описания сайта, ключевых слов и других данных. Хотя тег <META> всего один, он имеет множество параметров, поэтому для его обращения применяется множественное число.
Скрипты
Скриптом традиционно называют программу, которая внедряется в тело веб-страницы и выполняет на ней определенные действия. Распространенным языком программирования для написания скриптов является JavaScript.
Порядок тегов в заголовке документа особого значения не имеет.
3.2.5Тело документа (<BODY>)
Тело документа предназначено для отображения данных на веб-странице, в частности, в теле размещается текст, изображения, ссылки, таблицы, списки и т.д. Создаем необходимое число html-страниц, с помощью программы "Блокнот" или других специальных программ, сохраняем их.
Рис.1
После этого запускаем программу для создания сhm-файлов. Для этого выбираем программу под названием "htm2chm" и компилируем в "*chm" формат.
Получен готовый учебник (Рис.1).
Пример машинного кода:
<HTML>
<HEAD>
<BASE TARGET=content>
<LINK REL="stylesheet" HREF="theme/theme.css" TYPE="text/css">
<META http-equiv=Content-Type content="text/html; charset=Windows-1251">
<SCRIPT LANGUAGE="JavaScript" SRC="theme/theme.js"></SCRIPT>
<script language="JavaScript" src="theme/JSCookTree.js"></script>
<script language="JavaScript">
<!--
var menu =[
[null,'Введение','10.html',null
],
[null,'Меню','20.html',null
],
[null,'Системный блок компьютера','30.html',null
],
[null,'Как он устроен и как работает','40.html',null
],
[null,'Память компьютера','50.html',null
,
[null,'Озу и ПЗУ','60.html',null
],
[null,'Магнитный диск','70.html',null
],
[null,'Лазерный диск','80.html',null
],
[null,'Накопители на магнитной ленте','100.html',null
],
[null,'Иерархия памяти в персональном компьютере','120.html',null
],
],
];
--></script></HEAD><BODY>
<DIV ID=Menu CLASS=Menu onMouseDown="return false" onSelectStart="return false"></DIV>
<HR>
</BODY>
<SCRIPT LANGUAGE="JavaScript">
<!--
drawTree ("Menu", '<IMG SRC=theme/home.gif border="0">Устройство компьютера', menu, theme);
-->
</SCRIPT></HTML>
Рис.2
Рекомендации по работе на подготовительном этапе создания мультимедиа-учебников
Трудно ожидать, что каждый преподаватель в достаточном объеме освоит технику Web-программирования, но значительную часть работы, необходимую для создания современного мультимедиа курса, ориентированного на сетевое использование (Web-курса), может выполнить практически каждый. Ниже приводятся рекомендации, которые могут быть полезными для такой подготовительной работы.
1. Создайте электронную версию курса в текстовом редакторе Word 97, или более поздней его версии. При этом можно использовать инструментальные средства создания рисунков, формульный редактор, возможности вставки изображений и т.п. Имея ввиду последующую Web-версию курса, особое внимание следует уделить структурированию материала – разбивке его на разделы, подразделы, составлению оглавлений разделов. Каждая минимальная логическая часть (подраздел) должна представлять собой отдельный файл, а все созданные файлы следует разместить в одном каталоге, имеющем, если необходимо, подкаталоги. При структурировании пособия следует учитывать, что размер каждого файла должен быть таким, чтобы при отображении его в Web-броузере он не занимал более 3-4 экранов. Обычно это соответствует 2-3 страницам текста в doc-файле при размере шрифта 12.
2. Создайте необходимые гипертекстовые ссылки, устанавливающие связи как между отдельными разделами, так и с необходимыми ресурсами интранет и Интернет. Это очень простая операция, реализуемая щелчком «мыши» по иконке «Добавить гиперссылку» на панели инструментов Word. Предварительно фраза, слово и т.п., от которой делается ссылка, должны быть выделены (рис. 3).
3. Файл, с которым устанавливается связь, должен уже существовать в созданном каталоге пособия (рис.4).
 Рис. 3 | |
 Рис. 4 |
Вообще говоря, этим и может закончиться работа с текстом материала на рассматриваемом подготовительном этапе. Тем не менее, если преподаватель намерен дальнейшую работу проводить самостоятельно или активно участвовать в работе совместно с программистом, полезно произвести еще одну операцию – преобразование текста в HTML- формат. Для этого в меню «Файл» выберите режим «Сохранить как», в окне «Сохранение документа» в поле «тип файла» установите «HTML Document». В результате этой операции будет создан файл *.html, где * - имя doc-файла. При этом все формулы, написанные в формульном редакторе Word, будут автоматически преобразованы в файлы-изображений формата jpg (имена этих файлов по умолчанию «image*.jpg, где * - порядковый номер 1,2,3…). В заключение скопируйте все html-файлы с соблюдением структуры каталогов пособия и передайте материал программисту или web-мастеру сервера, на котором предполагается размещение пособия. Полученные файлы еще потребуют определенной редакции специалистом в web-программировании, но проделанная работа позволит существенным образом сократить время окончательной доработки пособия.