Урок 6. Конструктор документов

Пора от технических деталей программирования перейти к более важным вопросам:

• Как составить сценарий гипертекстового документа?
• Как спроектировать внешний вид документа на экране?

Приложение. Структура приложения

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

Итак, есть идея создать красивое, полезное и удобное для пользователя гипертекстовое приложение. С чего начать работу?

Можно, конечно, сразу писать теги, а там — как получится. Сомнительно, что получится хорошо.

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

Цепочка

Это самая простая структура. Документы, составляющие приложение, просматриваются пользователем по порядку, как страницы в книге. Каждый документ оканчивается ссылкой на следующий. Пользователь двигается по цепочке “до упора”, то есть до последнего документа. В последнем документе ссылки “вперед” уже нет. Теперь можно окончить работу или, пользуясь кнопкой браузера Назад (Back), пройтись по документам “вспять”.

Цепочку можно изобразить такой схемой:

Пример цепочки

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

Ссылки-связи можно оформить в виде пиктограмм.

Другой пример цепочки

Комментарии к последнему примеру.

• Работая с документом, очень легко увидеть программу, которая этот документ строит. В браузере для этой цели есть специальная позиция В виде HTML (Page Source) главного меню Вид (View). Войдите еще раз в приложение Другой пример цепочки и посмотрите программы документов.
• В приложении “Другой пример цепочки” использована необычная фоновая иллюстрация (о фоновых картинках подробнее смотрите ниже в этом уроке). Посмотрите ее здесь. Это очень узкая и длинная GIF-картинка размером 1x1200 пикселов, то есть ширина картинки всего один пиксел, а высота — 1200 пикселов. Паркет из таких плиточек выглядит как гамма цветовых горизонтальных полосок с нарастающей вниз плотностью цвета.

  Если бы документы были длинными, то через некоторое время, прокручивая экран по вертикали, мы дошли бы до второго ряда плиточек и увидели бы, как темная горизонтальная полоска внезапно обрывается и начинается светлая (новый горизонтальный паркетный ряд). Это не происходит, потому что в примере документы короткие, а паркетная плиточка длинная. Длина 1200 пикселов выбрана в соответствии с разрешением экрана 1600x1200. Такой размер пользовательского экрана в пикселах — пока еще большая редкость и встречается в основном на профессиональных графических станциях. Обычные компьютеры работают с разрешением экрана 640x480, 800x600 и 1024x768.

  Картинки, подобные vert.gif, редко используют для фона страницы, ведь в длинных документах, переход от одного горизонтального ряда такого паркета к другому выглядит некрасиво и воспринимается как погрешность. Однако, узкие картинки с цветовой “растяжкой” HTML-программисты охотно используют для создания фона в таблицах (об этом разговор пойдет позже).

  Гораздо чаще на практике используют паркет, состоящий из очень широких (по горизонтали) и коротких (по вертикали) плиточек. Пример такого паркета можно посмотреть здесь. Размер паркетной плиточки (картинка hor.gif): 1024x1.

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

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

Схема цепочки со справочным разделом выглядит так:

Возможны различные варианты организации справочного раздела:

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

Применение цепочек

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

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

Иерархия

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

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

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

Иерархическую структуру книги хорошо отражает оглавление (содержание). В правильно оформленных книгах оглавление помещают на первых страницах.

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

Оглавление оказывается полезным, даже если книга предназначена для последовательного чтения.

Оглавление:

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

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

Схему иерархического приложения можно изобразить следующим образом:

Документ 00.htm (корень иерархии) содержит ссылки на разделы 01.htm, 02.htm, 03.htm, ..., nn.htm (ветви иерархии). Эти разделы, в свою очередь, содержат ссылки на подчиненные документы и так далее, вплоть до таких документов как 030101.htm и 030102.htm: они уже не имеют ссылок (листья иерархии).

Пример гипертекстовой иерархии

Схема этого примера выглядит следующим образом:

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

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

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

Модифицированный иерархический справочник

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

Уложим картинку в фоновый паркет

Теперь, после “высоких” сфер, одна приятная (но и опасная для новичков!) техническая подробность.

Пользуясь атрибутом bgcolor команды BODY, можно выкрасить фон документа в какой-нибудь один цвет (смотрите урок 2).

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

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

Фоновая картинка задается в команде BODY атрибутом background:

<BODY background=имя файла с картинкой>

Примеры

1.  

   Этот фон задается командой: <BODY background=./pic/fon1.jpg> Посмотреть на полном экране

   Картинка, которая используется как фоновая плиточка:

   
   
2.  

   Этот фон задается командой: <BODY background=./pic/fon2.jpg> Посмотреть на полном экране

   Картинка, которая используется как фоновая плиточка:

   
   
3.  

   Этот фон задается командой: <BODY background=./pic/fon3.jpg> Посмотреть на полном экране

   Картинка, которая используется как фоновая плиточка:

   
   
4.  

   Этот фон задается командой: <BODY background=./pic/fon4.gif> Посмотреть на полном экране

   Картинка, которая используется как фоновая плиточка:

   
   

Антипримеры

1.  

   Этот фон задается командой: <BODY background=./pic/bfon1.jpg> Посмотреть на полном экране Плохая стыковка плиточек.

   Картинка, которая используется как фоновая плиточка:

   
   
2.  

   Этот фон задается командой: <BODY background=./pic/bfon2.gif> Посмотреть на полном экране Очень плохая стыковка плиточек.

   Картинка, которая используется как фоновая плиточка:

   
   
3.  

   Этот фон задается командой: <BODY background=./pic/bfon3.jpg> Посмотреть на полном экране Берегите глаза!

   Картинка, которая используется как фоновая плиточка:

   
   
4.  

   Этот фон задается командой: <BODY background=./pic/bfon4.jpg> Посмотреть на полном экране Берегите глаза!

   Картинка, которая используется как фоновая плиточка:

   
   

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

Нажмите кнопку “Сброс”, затем ответьте на вопросы.

1. Создайте гипертекстовый справочник. Спланируйте работу по следующей схеме:
   1. Выберите тему справочника и подберите материал. Можно получить интересные и полезные справочники по отдельным разделам географии, информатике, другим школьным дисциплинам. Не пытайтесь охватить справочником большой материал — это задание учебное, ограниченное по времени и не все тонкости HTML известны к этому уроку.
   2. Нарисуйте иерархическую схему справочника на листе бумаги. Внутри каждого блока, изображающего документ на схеме, запишите название раздела справочника и имя HTML-файла. В системе имен файлов с программами настоятельно рекомендуется использовать иерархический порядок. Основной файл может иметь имя 0.htm. Файлы следующего уровня имена 01.htm, 02.htm, 03.htm, ... 09.htm (или 001.htm, 002.htm, 003.htm, ... 099.htm). Файлы, непосредственно подчиненные файлу 03.htm, имена — 031.htm, 032.htm, 033.htm, ... 039.htm. И так далее. Программисту легко запутаться в многочисленных файлах справочника, если не пользоваться такой системой.
   3. Разработайте единый стиль оформления документов. Подберите друг к другу:
      • цветовую заливку или фоновую иллюстрацию;
      • основной цвет текста;
      • дополнительный цвет для выделения отдельных элементов;
      • иллюстративный графический материал.

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

   4. Тщательно продумайте навигационные элементы справочника и их расположение на экране пользователя.
   5. Напишите программы и проведите авторское тестирование.
   6. Передайте продукт в опытную эксплуатацию и исправьте недочеты, замеченные пользователями-тестерами.