Основы Web-инжиниринга. Часть 1. Громов Ю.Ю - 99 стр.

UptoLike

ВУЗ: 

ТГТУ | Тамбов

Составители: 

Рубрика: 

и начинает загрузку дополнительных компонентов, в том числе графики. При этом загрузка картинок, в зависимости от типа
HTTP-протокола, может идти последовательно или параллельно.
Также параллельно с загрузкой парсер продолжает свою работу. Если для картинок заданы параметры ширины и высо-
ты, то можно отформатировать текст и отобразить его в окне браузера. До тех пор, пока эти параметры не определены, ото-
бражения текста не происходит.
Таким образом, указание высоты и ширины картинки позволит отобразить документ раньше, чем картинки будут полу-
чены с сервера. Это дает пользователю возможность читать документ или задействовать его гипертекстовые ссылки до мо-
мента полной загрузки (событие load).
С точки зрения JavaScript, указание размеров картинки задает начальные параметры окна отображения графики внутри
документа. Это позволяет воспользоваться маленьким прозрачным образом для того, чтобы заменить его полноценной кар-
тинкой. Идея состоит в передаче маленького объекта для замещения его по требованию большим объектом.
Замена одного образа другим часто бывает оправдана только в том случае, когда это происходит достаточно быстро.
Если перезагрузка длится долго, то эффект теряется. Для быстрой подмены используют возможность предварительной за-
грузки документа в специально созданный объект класса Image.
Реальный эффект можно почувствовать только при отключении кэширования страниц на стороне клиента (браузера).
Кэширование часто используют для ускорения работы со страницами Web-узла. Как правило, загрузка первой страницы –
это достаточно длительный процесс. Самое главное, чтобы пользователь в этот момент был готов немного подождать. По-
этому, кроме графики, необходимой только на первой странице, ему можно передать и графику, которая на ней не отобража-
ется. Но зато при переходе к другим страницам узла она будет отображаться без задержки на передачу с сервера.
Нарезка картинок применяется довольно часто. Она позволяет достигать эффекта частичного изменения отображаемой
картинки. Чаще всего он применяется при создании меню.
Кроме подобного эффекта нарезка позволяет реализовать мультипликацию на больших картинках. При этом изменяется
не весь образ, а только отдельные его части.
Одним из наиболее популярных приемов дизайна страниц Web-узла является техника нарезки картинок на составные
части. Можно выделить следующие способы применения этой техники для организации навигационных компонентов стра-
ницы:
• горизонтальные и вертикальные меню;
• вложенные меню;
• навигационные графические блоки.
Главной проблемой при использовании нарезанной графики является защита ее от контекстного форматирования стра-
ницы HTML-парсером. Дело в том, что он автоматически переносит элементы разметки на новую строку, если они не поме-
щаются в одной. Составные части нарезанной картинки должны быть расположены определенным образом, поэтому простое
их перечисление в ряд не дает желаемого эффекта (рис. 70):
<IMG SRC="image1.gif"><IMG
SRC="image2.gif"><IMG
SRC="image3.gif"><IMG
SRC="image4.gif">
Рис. 70
Элементы переносятся на новую строку, так как ширина раздела меньше общей ширины всех картинок. Проблема ре-
шается, если применить защиту от парсера – <PRE> (рис. 71):
<PRE>
<IMG SRC="image1.gif"><IMG
SRC="image2.gif"><IMG
SRC="image3.gif"><IMG
SRC="image4.gif">
</PRE>
Рис. 71
Использование такого меню требует определения на нем гипертекстовых ссылок, что приводит к следующему эффекту
(рис.72):
<PRE>
<A HREF="javascript:void(0);"><IMG
SRC="image1.gif"></A><A

Страницы