Информатизация инженерного образования (выпуск 1)

Гл а в а 15. Применение технологий HTML и Adobe Acrobat для публикаций электронных изданий

15.9.Создание навигационной структуры

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

Здесь нам очень поможет выполненная ранее раскадровка, позволяющая отследить связи между отдельными страницами учебника. Желательно поэтому на каждую карточку раскадровки, соответствующую странице, нанести относительный унифицированный указатель ее ресурса. Например, если электронное издание размещено в каталоге C:\Tutorial, а страница 22.htm второй главы находится в подкаталоге C:\Tutorial\02\22.htm, то относительный путь к данной странице, будет 02/22.htm.

Теперь необходимо на каждой странице создать навигационную панель, как это было решено на этапе планирования издания. Гиперссылки, используемые для навигации по электронному изданию, удобно сводить в навигационные панели. Размещение панелей зависит от дизайна электронного издания. Возможно размещение навигационной панели в верхней, нижней части страницы или на левом поле. Допускается создание нескольких навигационных панелей, например в верхней и нижней части страницы или в нижней части и на левом поле страницы.

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

Обычно навигационные панели напоминают пульт управления магнитофоном. Так, на рис. 15.8 кнопки используются для перехода к первой, предыдущей, основной (титульной) странице, странице оглавления, следующей и последней странице. Состав гиперссылок на навигационной панели может меняться, например, основная и первая страница издания могут совпадать, на последней странице не надо кодировать гиперссылку для следующей страницы издания.

Кодирование навигационной панели достаточно просто. Фрагмент исходного кода приводится ниже:

<!–– предыдущая страница ––> <a href="21.htm" border="0"> <img src="left.gif" >

</a>

<!–– основная страница издания ––> <a href="home.htm" border="0">

<img src="home.gif" > </a>

При создании навигационной панели в исходный текст страницы вставляется полный код навигационный панели, который затем редактируется: меняются унифицированные указатели ресурсов, если необходимо, удаляются «лишние»

Рис. 15.8. Навигационная панель

613

Ч А С Т Ь 3. ТЕХНОЛОГИИ ИНФОРМАТИЗАЦИИ ОБРАЗОВАНИЯ

кнопки. Вот здесь и понадобится раскадровка издания, на которой в явном виде отображаются связи между страницами издания.

Для динамического (т.е. «на лету») формирования навигационных структур электронных учебников было разработано свободно распространяемое серверное ASP-приложение lister. Оглавление формируется в файле, который используется приложением для динамического формирования структуры учебника, включая оглавление издания, оглавления разделов, навигационные панели на страницах.

Для использования приложения lister необходим web-сервер Internet Information Server под управлением Windows NT/2000/XP/2003. Разработку приложений можно вести и на компьютере под управлением Windows 98.

Заготовка оглавления электронного издания, которую необходимо отредактировать, приводится ниже:

1 <?xml version="1.0" encoding="windows-1251"?> 2 <!DOCTYPE содержание SYSTEM "content.dtd">

3 <содержание>

4<ТитульнаяСтраница url=«title.asp»

5 имя="Титульный лист, включающий перечень глав"/>

6<стиль url="css/default.css"

7имя="Таблица стилей по умолчанию"/>

8 <оглавление имя="Оглавление электронного издания">

9<раздел имя="Глава 1">

10<страница имя="1-1" url="1-1.asp"/>

11<страница имя="1-2" url="1-2.asp"/>

12<страница имя="1-3" url="1-3.asp"/>

13</раздел>

14* * *

15<!––Это комментарий к n-ому разделу––>

16<раздел имя="Глава n">

17<!––Это комментарий к странице n-1––>

18<страница имя="n-1" url="n-1.asp"/>

19<страница имя="n-2" url="n-2.asp"

20стиль="css/cssdoc2.css"/>

21</раздел>

22</оглавление>

23</содержание>

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

Шестую и седьмую строки можно оставить без изменений. О том, как формировать файл с каскадными таблицами стилей, расскажем ниже.

В восьмой строке содержится описание страницы оглавления издания. Если для нее создан некоторый текст, то нужно указать путь к нему, например url=«content.html».

614

Г л а в а 15. Применение технологий HTML и Adobe Acrobat для публикаций электронных изданий

Далее организуется собственно структура издания. Для разделов (тег <раздел имя=«Имя раздела»>) формируются оглавления разделов. Указание имени раздела обязательно. Если в страницу раздела требуется поместить текст, то добавляется атрибут url (например, url =«s1.html») страницы с текстом.

Разделы могут содержать страницы и другие вложенные разделы, как показано в примере. Глубина вложения произвольна. С помощью этого приема можно скомпоновать издание с произвольной иерархической структурой. Файл с навигационной структурой следует проверить с помощью, например, Internet Explorer, начиная с пятой версии, — при загрузке файла в браузер должны отсутствовать сообщения об ошибках.

Можно принудительно задать оформление всех страниц издания с помощью каскадных таблиц стилей. Заготовка файла таблиц стилей присутствует в подкаталоге css в файле cssdoc.css.

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

<a href=<<«ref.htm»>>>[5]</a>

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

Для замены содержания и оформления приложению следует передать соответствующие файлы оглавления электронного издания и оформления, например:

http://www.myserver.ru/tutorial/default.asp?

appprm=xml/newcontent.xml&appcss=css/newcss.css

Здесь www.myserver.ru — сервер, на котором опубликовано электронное издание, tutorial — виртуальный каталог на web-сервере, где размещено издание; в подстроке, идущей за вопросительным знаком, нужно указать относительный путь к файлу оглавления (в данном случае xml/newcontent.xml) и к файлу с таблицами стилей (css/newcss.css).

Отметим также, что одно и то же электронное издание, опубликованное во Всемирной паутине, желательно иметь в различных вариантах. Обычно электронное издание содержит большой объем информационных материалов, требующих много часов на проработку. В ряде случаев желательно иметь распечатываемую копию учебного пособия, чтобы работать с ним лежа на диване или в метро по дороге на работу. С получением «твердой» копии пособия обычно проблем не бывает, для вывода на принтер текущей страницы пособия достаточно выбрать в меню браузера Файл | Печать… Если необходимо получение качественной «твердой» копии, то нужно предусмотреть преобразование учебника в переносимый формат, например PDF, и размещение его на сервере.

15.10. Использование Microsoft FrontPage для создания электронных изданий

MS FrontPage также может использоваться для преобразования электронных изданий из формата Word в HTML. Основным назначением FrontPage является

создание больших электронных изданий. Поэтому FrontPage упрощает многие

615

Ч А С Т Ь 3. ТЕХНОЛОГИИ ИНФОРМАТИЗАЦИИ ОБРАЗОВАНИЯ

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

Основное окно FrontPage представлено на рис. 15.9. Заметим, что основное меню и панели инструментов FrontPage практически не отличаются от других приложений Microsoft Office.

Работа по преобразованию документов Word в web-страницы в FrontPage начинается с создания web-узла — электронного издания в терминологии FrontPage. Делается это выбором в меню Файл | Создать | Страница или веб-узел. В появившемся диалоговом окне Шаблоны веб-узлов нужно выбрать шаблон, как показано на рис. 15.10.

С помощью шаблонов можно спроектировать электронное издание, состоящее из одной страницы; запустить мастер, позволяющий создать издание, посвященное деятельности предприятия, для поддержки пользователей; пустое электронное издание; импортировать уже имеющийся набор документов; разработать электронное издание с информацией о себе любимом или электронное издание, посвященное проекту.

Рис. 15.9. Основное окно FrontPage

616

Г л а в а 15. Применение технологий HTML и Adobe Acrobat для публикаций электронных изданий

Рис. 15.10. Создание пустого web-узла

Рассмотрим разработку электронного издания на основе документов Word, для чего создадим пустой web-узел. После этого проверим настройки web-узла, выбрав в меню Сервис | Настройка веб-узла. На вкладке Общие можно изменить имя создаваемого web-узла, а на вкладке Язык — язык сообщений сервера и кодировку страниц (рис. 15.11).

Теперь начнем последовательно вставлять в web-узел HTML-страницы издания, для чего достаточно щелкнуть на самой левой кнопке Создание новой обычной страницы на панели инструментов. По умолчанию она получит имя new_page_1.htm. Теперь скопируем из Word содержимое первой страницы издания через буфер обмена Windows. Преобразование из формата Word в HTML осуществляется автоматически.

Затем зададим заголовок страницы, сделав его совпадающим с заголовком раздела (рис. 15.12), для чего щелкнем правой кнопкой мыши на странице. В окне свойств введем новый заголовок страницы.

Теперь осталось только сохранить файл страницы, задав ему новое имя. В данном случае это будет 15.3—15.5.htm (рис. 15.13).

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

617

Ч А С Т Ь 3. ТЕХНОЛОГИИ ИНФОРМАТИЗАЦИИ ОБРАЗОВАНИЯ

Рис. 15.11. Выбор кодировки страниц

Рис. 15.12. Окно свойств страницы

618

Гл а в а 15. Применение технологий HTML и Adobe Acrobat для публикаций электронных изданий

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

Точно таким же образом перенесем в FrontPage и другие страницы издания. FrontPage позволяет взглянуть на электронное издание как бы с птичьего поле-

та, причем различными способами, которые разработчики Microsoft назвали представлениями. Выбрать представление можно, щелкнув по одной из кнопок, расположенных в вертикальной панели в левой части окна приложения (рис. 15.13). Нажатие кнопки Страница приводит к открытию текущего документа в редакторе FrontPage, где в него можно вносить изменения. Данное представление является основным при выборе и редактировании документов. Следующее представление, называемое Папки, позволяет увидеть структуру каталогов и документов электронного издания. Щелчок правой кнопкой мыши на папке или документе вызывает появление контекстного меню, с помощью которого можно удалить, переименовать, а также создать новый объект. Можно копировать и перемещать документы из папки в папку, перетаскивая их мышью, при этом структура гиперссылок останется корректной.

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

Рис. 15.13. Страница электронного издания в MS FrontPage

619

Ч А С Т Ь 3. ТЕХНОЛОГИИ ИНФОРМАТИЗАЦИИ ОБРАЗОВАНИЯ

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

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

Создание гиперссылки в FrontPage осуществляется точно так же, как и в других приложениях Microsoft Office. Перейдите к документу, в котором должна быть гиперссылка (в представлении Страница), выделите чувствительную область гиперссылки (это может быть фрагмент текста или изображение), нажмите кнопку Добавление гиперссылки на панели инструментов. В появившемся диалоговом окне Создание гиперссылки в поле URL введите адрес целевого документа в Интернете или выберите документ электронного издания из списка, расположенного выше, и нажмите кнопку OK.

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

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

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

Представление Переходы отображает навигационную структуру электронного издания (рис. 15.14), оно в значительной степени облегчает построение навигационной структуры электронного издания.

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

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

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

620

Г л а в а 15. Применение технологий HTML и Adobe Acrobat для публикаций электронных изданий

Для отображения навигационной структуры в страницах электронного издания нужно создать навигационные панели. Для этого выберем в меню Формат | Общие границы, а в диалоговом окне Общие границы (рис. 15.15) зарезервируем место, где будут отображаться навигационные панели.

Рис. 15.14. Представление «Переходы» для данной главы

Рис. 15.15. Диалоговое окно «Общие границы»

621

Ч А С Т Ь 3. ТЕХНОЛОГИИ ИНФОРМАТИЗАЦИИ ОБРАЗОВАНИЯ

Зададим расположение общих границ сверху и внизу. Для общей границы сверху включим кнопки переходов (для этого установим флажок). Теперь выберем произвольную страницу, например, 15.2 (при этом дважды щелкнем на изображении страницы в представлении Переходы). Щелкнем мышью на заготовке панели и выберем в меню Вставка | Панель ссылок. В правой части диалогового окна

Вставка компонента веб-узла (рис. 15.16) в левой части выберем Панели ссылок, а в правой — Панель, основанная на структуре переходов.

Нажмем кнопку Далее. На следующей странице мастера укажем стиль таблицы, например Использовать тему страницы. Перейдя на следующую страницу мастера, определимся с горизонтальным или вертикальным расположением ссылок и нажмем на кнопку Готово, после чего появится диалоговое окно Свойства панели ссылок (рис. 15.17).

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

На вкладке Стиль еще раз вернемся к выбору стиля отображения панели навигации. Нажмем кнопку OK. Теперь на всех страницах раздела будут созданы навигационные панели, как показано на рис. 15.18.

Заметим, что в качестве чувствительных областей гиперссылок использованы заголовки страниц, которые были созданы при переносе страниц из Word в FrontPage.

При вставке навигационной панели вверху страницы автоматически сформировался заголовок (рис. 15.18), так что придется теперь удалить заголовки, перенесенные из Word.

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

В нижней части страниц также создана общая граница, в которую вставим панель ссылок, но используем ссылки вперед и назад. Для нижней панели придется вручную вставить все страницы, находящиеся на данном уровне иерархии (рис. 15.19).

Для этой панели на вкладке Стили можно задать стиль отображения панели, один из вариантов которого показан ниже:

Назад • Далее

В заключение отметим, что FrontPage требует значительных ресурсов компьютера при работе с большими электронными изданиями (сотни страниц).

15.11. Публикация на web-сервере и сопровождение электронного издания

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

Желательно, чтобы тестирование проводили не создатели издания, так как эффект привыкания затрудняет поиск ошибок. Если не удалось найти нового чело-

622