Разработка web сайта на основе HTML с использованием JavaScript
Дипломная работа - Компьютеры, программирование
Другие дипломы по предмету Компьютеры, программирование
?ителей животного мира.
Другой пример иерархической структуры, более близкий нам по теме -- структура книги. Книга делится на тома, тома на части, части на главы, главы на параграфы, параграфы на пункты. В конкретной книге некоторые элементы из этой иерархии могут быть опущены (например, деление на тома).
Иерархическую структуру книги хорошо отражает оглавление (содержание). В правильно оформленных книгах оглавление помещают на первых страницах.
Особую роль оглавление играет в справочной литературе. Ведь такие книги не читают подряд от корки до корки, а обращаются к избранным страницам по мере надобности.
Оглавление оказывается полезным, даже если книга предназначена для последовательного чтения.
Оглавление:
- дает представление о книге в целом;
- позволяет быстро открыть нужный раздел для продолжения чтения;
- помогает найти отдельные, полюбившиеся фрагменты.
Иерархическое гипертекстовое приложение имеет такое же устройство, как и обычный бумажный справочник. Только строки в оглавлении являются гиперссылками, и не нужно вручную листать страницы.
Схему иерархического приложения можно изобразить следующим образом:
Документ 00.htm (корень иерархии) содержит ссылки на разделы 01.htm, 02.htm, 03.htm, ..., nn.htm (ветви иерархии). Эти разделы, в свою очередь, содержат ссылки на подчиненные документы и так далее, вплоть до таких документов как 030101.htm и 030102.htm: они уже не имеют ссылок (листья иерархии).
Пример гипертекстовой иерархии
Схема этого примера выглядит следующим образом:
Обратите внимание на то, как реализована навигация в приведенном выше иллюстративном приложении. От корня к листьям пользователь продвигается по ссылкам, расположенным в основной части документа. Перемещаться назад он может, использую навигационные кнопки браузера, или меню, которое приводится в конце каждого документа и отделяется от основной части горизонтальной линией.
Меню позволяет попасть в любой пройденный документ напрямую, минуя последовательное перелистывание страниц кнопками браузера. Это, конечно, очень удобно. Обратные ссылки-возвраты настроены при помощи меток не на начало документа, а на те точки, из которых был выполнен прямой переход. Это предоставляет пользователю дополнительный навигационный комфорт.
Еще одна полезная навигационная идея: на первой странице иерархического документа представить ссылками полную его схему. Теперь пользователь имеет возможность выбирать нужный раздел справочника в самом начале работы.
Модифицированный иерархический справочник
В модифицированном справочнике на основной странице сформирован еще и гипертекстовый алфавитный указатель тегов. Это дополнение показывает заботу разработчика о пользователе.
Уложим картинку в фоновый паркет
Теперь, после "высоких" сфер, одна приятная (но и опасная для новичков!) техническая подробность.
Пользуясь атрибутом bgcolor команды BODY, можно выкрасить фон документа в какой-нибудь один цвет.
Вместо одноцветной заливки можно использовать картинку. Эта картинка будет, повторяясь, укладываться в экранное поле наподобие паркетных плиточек.
Чтобы "паркет" смотрелся красиво, необходима визуальная стыковка плиточек между собой. Это надо учитывать при создании фоновой иллюстрации. И еще: очень важно, чтобы фон оставался именно фоном, а не отвлекал внимание пользователя от главных элементов документа, не мешал читать текст.
Фоновая картинка задается в команде BODY атрибутом background:
Примеры
Этот фон задается командой:
Посмотреть на полном экране Картинка, которая используется как фоновая плиточка:
Посмотреть на полном экране Картинка, которая используется как фоновая плиточка:
Посмотреть на полном экране Картинка, которая используется как фоновая плиточка:
Посмотреть на полном экране Картинка, которая используется как фоновая плиточка:
Этот фон задается командой:
Посмотреть на полном экране
Плохая стыковка плиточек. Картинка, которая используется как фоновая плиточка:
Посмотреть на полном экране
Очень плохая стыковка плиточек. Картинка, которая используется как фоновая плиточка:
Посмотреть на полном экране
Берегите глаза! Картинка, которая используется как фоновая плиточка:
Посмотреть на полном экране
Берегите глаза! Картинка, которая используется как фоновая плиточка:
Графика
Иллюстрации в текст