Работа №2.1. Преобразование текстового документа txt-формата в HTML-документ
Порядок выполнения работы
1. Скопируйте в одну из папок (например, c:\el-books\lab-21) на жестком магнитном диске вашего ПК папки Исходные тексты и HTML-документы, размещенные в папке К главам 2 и 4 – тексты на гибком магнитном диске, прилагаемом к пособию. В первом папке находятся 10 текстовых файлов с именами от 1.txt до 10.txt, представляющие собой фрагменты 1 и 3 глав книги. Во второй папке размещаются вложенные папки с рисунками к этим главам, а именно Ris-g1 и Ris-g3.
2. Загрузите один из этих текстовых файлов в любой текстовый редактор, предпочтительно Блокнот, предусмотренный в оболочке Windows (в примере на рис. 2.15 показан загруженный в редактор Блокнот документ). Заключите нужные части документа в контейнеры <HTML> и </HTML>, <HEAD> и </HEAD>, <BODY> и </BODY>. Контейнер <HEAD> и </HEAD> пока можно оставить пустым. Затем сохраните документ в новом формате в папке HTML-документы. Диалоговое окно Сохранение также показано на рис. 2.15. В строку, отведенную для имени файла, обязательно впишите расширение html или htm. Откройте папку, в которую помещен полученный HTML-документ, и обратите внимание на изменение внешнего вида его пиктограммы (рис. 2.16) по сравнению с пиктограммой текстового документа. Щелкните указателем мыши по пиктограмме HTML-документа и проследите за его загрузкой в браузере, установленном на вашем компьютере. Обратите внимание на содержимое строки заголовка браузера.
Рис. 2.15. Пример сохранения текстового документа в формате HTML
3. Теперь следует занести содержимое в контейнер <HEAD> и </HEAD>. Для этого разместите внутри него контейнер <TITLE> и </TITLE>, в который поместите название документа "Электронные издания". Попробуйте также вставить в заголовочную часть документа тэг <META>, указав в нем автора и название документа. Если встретились трудности, прочтите вновь разд. 2.1, обратив особое внимание на приведенные там примеры.
Рис. 2.16. Внешний вид пиктограммы HTML-документа в "Проводнике"
4. Сохраните внесенные изменения в редакторе Блокнот (команда Сохранить в меню Файл), откройте вновь папку, в которой храниться HTML-документ и, щелкнув по его пиктограмме, загрузите его в браузере, установленном на вашем компьютере. Отметьте, что изменилось в интерфейсе по сравнению с предыдущим случае в п. 2. Постарайтесь объяснить причины этих изменений.
5. Теперь попробуйте оформить весь документ в целом, задав с помощью параметра BACKGROUND фоновый рисунок или же тонирование с помощью параметра BGCOLOR. Можно попробовать несколько вариантов, сохранив тот, который покажется вам самым удачным. Тэги следует вносить, работая в редакторе Блокнот. Каждый раз сохраняйте измененный документ в HTML-формате, а затем – загружайте его в браузер, чтобы проверить полученный результат. Для перехода к работе в редакторе Блокнот можно использовать команду В виде HTML меню Вид браузера.
6. Далее рекомендуем оформить все внутритекстовые заголовки. Уровень заголовка определяется количеством групп чисел, предшествующих тексту заголовка и разделенных точками. В наших примерах преимущественно используются заголовки 1-го и 2-го, реже – 3-го уровней.
7. Следующий этап заключается в оформлении отдельных абзацев текста. Симпатии автора принадлежат способу выравнивания по ширине, но, если вы сможете обосновать целесообразность других вариантов – пользуйтесь также и ими.
8. Теперь внимательно прочтите текст и выделите с помощью соответствующих тегов шрифтового оформления отдельные его фрагменты. Цель этого пункта – сделать текст более легко читаемым, облегчить читателю восприятие наиболее существенных его фрагментов. Мы рекомендуем пользоваться для этого тегом <FONT> (см. разд. 2.2) с различными значениями параметров. Допустимо оформление текста различными гарнитурами, но делать это следует очень аккуратно, используя близкие по рисунку гарнитуры. Для выделения важных фрагментов текста мы рекомендуем пользоваться увеличением размера шрифта или полужирным его начертанием.
9. Если в документе имеются какие-либо списки – оформите их должным образом с помощью контейнеров <UL> и </UL> или <OL> и </OL> и тэгов <LI>.
10.Вставьте в текст рисунки, ссылки на которые имеются в тексте. Обязательно добейтесь, чтобы рисунки были видны в тексте и правильно отформатированы. При необходимости еще раз прочтите раздел 2.4, обратив особое внимание на приведенные в нем примеры. Учитывайте, что рисунки находятся в отдельной папке, которая размещается рядом с HTML-документом, из которого производятся ссылки. Таким образом соответствующие контейнеры должны выглядеть так: <IMG SRC=risG1\r1-1.gif>
11.Далее следует включить в текст ссылки на 2—3 рисунка. В качестве указателя гиперссылки используйте упоминание в тексте о рисунках (например, Рис. 1.2. Классификация электронных изданий). От этого указателя организуйте переход к самому рисунку, расположенному в папке. Проверьте, работают ли эти ссылки и выводятся ли рисунки. Учтите, что на вашем компьютере должен быть установлен viewer (программа просмотра рисунков) или один из графических пакетов, например, Photoshop, позволяющий просматривать и редактировать рисунки. Рисунки в форматах GIF или JPEG можно просматривать с помощью браузера. Если у вас что-то не получается, вновь прочтите внимательно разд. 2.5, где рассматривается тэг <A>, с помощью которого создаются гиперссылки.
Рис. 2.17. Пример отображения HTML-документа в браузере
12.Теперь постарайтесь организовать качественную навигацию в пределах вашего документа. Для этого, прежде всего, вынесите все внутритекстовые заголовки в самое начало документа, организовав что-то вроде оглавления. Если заголовки различных уровней, постарайтесь, чтобы это было видно из оформления этих заголовков. Затем установите скрытые закладки перед каждым внутритекстовым заголовком в виде: [<A NAME=p12> </A> 1.2. …]. В качестве примера здесь выбран разд. 1.2. Перед заголовком этого параграфа помещен пустой контейнер, в котором определено имя закладки (p12), на которую в дальнейшем можно будет сослаться. Для того, чтобы создать гиперссылку, ведущую из заголовочной части документа к разд. 1.2 в тексте, следует поместить этот параграф в оглавлении, которое вы недавно создали в начале документа, в контейнер вида: <A HREF=#p1-2>1.2....</A>. Теперь строка оглавления будет играть роль указателя гиперссылки, которая приведет к нужному месту в тексте документа.
13.Теперь попробуйте создать переходы из начала раздела в оглавление. Сам автор книги в таких случаях в качестве указателя перехода использует цифровую часть заголовка, а в начале документа делает закладку.
14.Попробуйте создать дополнительные навигационные элементы – переходы из начала документа в его конец и, наоборот, из конца – в начало. Для этого вначале поместите закладки в начале и конце документа, затем в самой верхней его строке (до оглавления) поместите фразу "В конец документа", в самом конце – "В начало документа". Эти фразы используйте как указатели соответствующих гиперссылок.
15.Просмотрите созданный вами гипертекстовый документ в браузере. Проверьте работу всех указателей гиперссылок, в том числе – переходов к рисункам. Пример отображения в браузере MS Internet Explorer HTMLфайла показан на рис. 2.17.
Работа №2.2. Преобразование набора тематически связанных текстовых документов в сетевой HTML-документ
Работу целесообразно выполнять на нескольких компьютерах, соединенных в локальную сеть, работающую под управлением файлового сервера. В отличие от предыдущей работы здесь из отдельных фрагментов составляется единый документ в HTML-формате, локализованный на сетевом диске. Связь отдельных фрагментов осуществляется одним из 2-х способов (в обоих случаях все отдельные документы или фрагменты сохраняются на сетевом диске):
? путем организации переходов от конкретного документа к предыдущему и последующему;
? с помощью отдельного дополнительного документа, содержащего оглавление, в котором упомянут каждый документ, и, кроме того, дополнительных указаний по навигации (помощи).
В первом случае все документы нумеруются по порядку, причем в начале каждого из них предусматривается гиперссылка Переход к предыдущему, а в конце – Переход к следующему. Все они сохраняются в одной папке на сетевом диске. В результате мы получим единый документ, фрагменты которого могут просматриваться только последовательно, друг за другом.
Второй способ предоставляет пользователю возможность произвольной навигации, т. е. он может перемежаться между фрагментами единого документа в произвольном порядке. Следует лишь предусмотреть в каждом фрагменте гиперссылку Возврат в оглавление.
Рекомендуется выполнить оба варианта, чтобы представить себе и полностью разобраться в отличиях между ними. Еще раз обратим внимание на то, что данную работу целесообразно выполнять группой. Помимо всего прочего, это позволяет оценить результаты и преимущества коллективной работы, возможности которой в наибольшей степени реализуются в интрасетях, краткая характеристика которых дается в главе 7.
Если работа выполняется одним человеком, мы рекомендуем ограничиться первым вариантом, преобразовав в гипертекст 2—3 исходных текстовых документа с последовательными номерами.
Порядок выполнения работы
1. Скопируйте в одну из папок (например, c:\el-books\lab-22) на жестком магнитном диске вашего ПК папки Исходные тексты и HTML-документы, размещенные в папке К главам 2 и 4 – тексты на гибком магнитном диске, прилагаемом к книге. В первой папке находятся 10 текстовых файлов с именами от 1.txt до 10.txt, представляющие собой фрагменты 1 и 3 глав книги. Во второй папке размещаются вложенные папки с рисунками к этим главам, а именно Ris-g1 и Ris-g3. Выберите для работы любой текстовый документ, например, 2.txt.
2. Выполните все те действия, которые прописаны в пп. 2—15 самостоятельной работы №1.
3. В начало документа 2.HTML вставьте текстовый фрагмент Переход к предыдущему и оформите его как указатель гиперссылки на документ 1.HTML.
4. В конец документа 2.HTML вставьте текстовый фрагмент Переход к следующему и оформите его как указатель гиперссылки на документ 3.HTML.
5. Повторите все действия п.2 для документов 1.HTML и 3.HTML.
6. Загрузите документ 2.HTML в браузер и проверьте, как работают переходы к предыдущему и последующему документам.
7. Если самостоятельную работу выполняют 10 человек, каждый из которых работает за своим компьютером в сети, то можно проверить на любом рабочем месте доступность всех частей документа. Для этого следует последовательно задействовать переходы к предыдущему документу в каждом из них (или к последующему).
Глава 3
Мультимедийный документ и форматы представления его элементов
Данная глава посвящена рассмотрению состава мультимедийного документа и представления отдельных его компонентов. В частности, описываются различные варианты представления текстовой и графической информации. Указаны наиболее популярные графические форматы, используемые в электронных изданиях. Описаны возможные форматы представления аудиофайлов, особенности кодирования и сжатия соответствующих данных. В заключение анализируются форматы анимационных файлов и цифрового видео и варианты компрессии соответствующих данных.
3.1. Мультимедиа и ее роль в современных информационных технологиях
Мультимедиа-издание – это полноценное объединение продуктов современных информационных технологий: текста, графики, видео, аудио, фото, кино и телекоммуникаций (телефон, телевидение, радиосвязь). С помощью мультимедиа-приложений текст, графика, аудио– и видеоинформация объединяются в единое информационное поле, подобно тому, как в кинофильме объединяются звук и "движущееся" изображение. Однако, в отличие от кинофильма мультимедиа представляет собой интерактивную среду, т. е. пользователь может управлять процессом представления мультимедиа с помощью различных средств ввода – таких как клавиатура и манипулятор. Выполняемые сценарии и встраиваемые компоненты "оживляют" документы и заставляют их "реагировать" на действия пользователя. Состав мультимедиадокумента представлен на рис. 3.1.
Рис. 3.1. Основные компоненты мультимедийного документа
Помимо базового текста и графики, которые являются стандартными компонентами печатных изданий, в состав публикации мультимедиа входит ряд дополнительных элементов. Прежде всего это анимация. Наряду со стандартной анимацией в формате GIF в последнее время как в сетевых документах, так и в документах, локализованных на носителях, все чаще используется анимация в формате Flash (или Flash-фильмы). Flash-анимация, которая будет подробнее рассмотрена в 6-ой главе, весьма компактна за счет использования векторного формата. В то же время она позволяет создавать множество новых интересных эффектов как с точки зрения графики, так и повышения уровня интерактивности. Появились также интерактивные элементы, основанные на применении Java-скриптов – ролловеры, которые также позволяют резко повысить уровень интерактивности графической среды гипертекстового документа. Средства для создания ролловеров будут рассмотрены в главе. 4.
Ролловер представляет собой динамический элемент, изменяющий внешний вид, когда на нем оказывается курсор мыши или делается щелчок ею. Ролловеры предназначены для отображения различных состояний графических элементов Web-страницы (как правило, кнопок и ссылок).
Непрерывно повышается уровень сжатия аудио– и видеофайлов при неизменном их качестве. Как уже упоминалось, практически к любому гипертекстовому документу могут быть присоединены такие файлы. Создаются новые программные и аппаратные средства для производства, воспроизведения и передачи таких файлов, в том числе – в сетевой среде с низкой пропускной способностью – что позволяет надеяться на постепенное расширение их практического использования.
Успешное сращивание телекоммуникационных сетей с компьютерами, стремительный рост их качества и количества преобразует вещательные сети в интерактивные, создает единое мировое информационное мультимедиапространство. Важнейшей частью этого пространства является сеть Интернет и, особенно, ее гипермедиа-система World Wide Web. Распространение мультимедиа-технологий (в сочетании с развитием электронной коммерции) в дальнейшем наложит жесткие ограничения на конкурентоспособность издательско-полиграфических фирм, ориентированных на широкий спрос. Преимущества в продаже даже самой высококачественной продукции получат те, кто быстрее и эффективней освоил электронные способы коммерции и обслуживания.
Использование мультимедиа в учебных пособиях дополняет аналитические (вычислительные и логические) и навигационные возможности компьютеров способностью к образному, синтетическому описанию изучаемого предмета или объекта. Многочисленные исследования показали, что обучаемый с первого раза запоминает лишь четверть услышанного и треть увиденного, при комбинированном воздействии на слух и зрение запоминается приблизительно половина информации, а при вовлечении обучаемого еще и в активные действия (например, при использовании интерактивных мультимедиа-технологий доля усвоенного достигает 75%). Мультимедиа, особенно интерактивное, активизирует индивидуальные, личностные мотивы обучаемого (в частности, студента) при усвоении материала, в том числе:
? целевой (для меня важно и необходимо знать этот материал и уметь выполнять такую работу);
? исследовательский (работая с учебным материалом, я не только узнаю что-то новое, но и чувствую себя активным участником процесса познания, сам участвую в творческом процессе);
? эмоционально-эстетический (в процессе изучения материала я испытываю удовольствие, как от получаемых результатов, так и от самого процесса изучения этого материала);